/* Holographic U.S.-blue passport, distinct from the adjacent continent map. */
.continent-passport {
  isolation: isolate;
}

.continent-book {
  --passport-drift: 10px;
  --passport-lift: 5px;
  --passport-turn: 12deg;
  --passport-lean: .6deg;
  isolation: isolate;
  transform-origin: 50% 55%;
  animation: passport-hologram-sway 8s ease-in-out infinite;
  border-color: #a1f7ff;
  background:
    radial-gradient(ellipse at 0 12%, #35e5ff55, transparent 47%),
    radial-gradient(ellipse at 100% 85%, #b475ff50, transparent 48%),
    linear-gradient(125deg, #0a2048 0%, #174a7a 33%, #10295a 55%, #291d61 80%, #0b214a 100%);
  box-shadow:
    inset 6px 0 0 #07172b,
    inset 8px 0 0 #81edff8c,
    inset 0 1px 0 #e1ffffb3,
    inset 0 0 34px #6eeeff1f,
    0 0 0 1px #a9e6ff33,
    0 0 24px #60e8ff33,
    8px 14px 34px #bc83ff2e,
    0 22px 38px #02071d99;
}

.continent-book::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(116deg, transparent 35%, #c9fcff14 44%, #d8ecff55 49%, #eeccff2e 53%, transparent 63%),
    repeating-linear-gradient(0deg, transparent 0 5px, #a5f8ff0c 5px 6px),
    repeating-linear-gradient(90deg, transparent 0 39px, #8fdfff09 39px 40px);
  background-size: 300% 100%, auto, auto;
  animation: passport-hologram-light 6.5s ease-in-out infinite;
}

@keyframes passport-hologram-sway {
  0%, 100% {
    transform: translate3d(calc(-1 * var(--passport-drift)), 0, 0)
      rotateY(calc(-1 * var(--passport-turn))) rotateZ(calc(-1 * var(--passport-lean)));
  }
  50% {
    transform: translate3d(var(--passport-drift), calc(-1 * var(--passport-lift)), 0)
      rotateY(var(--passport-turn)) rotateZ(var(--passport-lean));
  }
}

@keyframes passport-hologram-light {
  0%, 100% { background-position: 100% 0, 0 0, 0 0; }
  50% { background-position: 0 0, 0 0, 0 0; }
}

.continent-book:focus-within,
.continent-book:focus-within::before,
.is-paused .continent-book,
.is-paused .continent-book::before {
  animation-play-state: paused;
}

@media (hover: hover) and (pointer: fine) {
  .continent-book:hover,
  .continent-book:hover::before {
    animation-play-state: paused;
  }
}

.continent-book::after {
  border-color: #9df3ff7a;
  box-shadow: inset 0 0 12px #8eeaff16, 0 0 9px #b69cff29;
  z-index: 2;
}

.continent-book > * {
  position: relative;
  z-index: 1;
}

.continent-book .book-edition,
.continent-book .book-name {
  color: #d6f8ff;
  text-shadow: 0 0 10px #61deff40;
}

.continent-book h4 {
  color: #ffe9aa;
  text-shadow: 0 0 16px #91dfff52, 0 1px 0 #fff3c136;
}

.continent-book .book-seal {
  border-color: #a6f7ffb3;
  background: radial-gradient(circle, #94e9ff1c, transparent 72%);
  box-shadow: 0 0 23px #7eefff36, inset 0 0 18px #baabff1f;
}

.continent-book .book-seal svg {
  stroke: #ffe5a3;
  filter: drop-shadow(0 0 5px #a3f2ff70);
}

.continent-book .continent-stamp {
  border-color: #9eeeff9e;
  background: linear-gradient(125deg, #041b3edb, #201747d9);
  box-shadow: inset 0 0 17px #8acfff12, 0 0 14px #8deaff14;
}

.continent-book .continent-stamp strong {
  color: #fff0c4;
}

.continent-book .continent-stamp small {
  color: #cee8ff;
}

.continent-book .book-footer {
  color: #c3eaff;
}

@media (max-width: 760px) {
  .continent-book {
    --passport-drift: 4px;
    --passport-lift: 3px;
    --passport-turn: 8deg;
    --passport-lean: .3deg;
    animation-duration: 9s;
    box-shadow:
      inset 6px 0 0 #07172b,
      inset 8px 0 0 #81edff8c,
      inset 0 1px 0 #e1ffffb3,
      0 0 18px #60e8ff2e,
      0 12px 25px #050a2459;
  }
}

@media (max-width: 380px) {
  .continent-book {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 0 12px;
    padding: 20px 16px;
  }

  .continent-book .book-seal {
    width: 64px;
    height: 64px;
  }

  .continent-book .book-seal svg {
    width: 52px;
    height: 52px;
  }

  .continent-book h4 {
    font-size: 20px;
    letter-spacing: .08em;
  }
}

@media (forced-colors: active) {
  .continent-book {
    border: 2px solid CanvasText;
  }
  .continent-book::before,
  .continent-book::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .continent-book,
  .continent-book::before {
    animation: none;
  }
}