/**
 * Book Illustration — The Treasure of the Lake
 * Hero: 3D hardcover (cover + spine)
 * Grid: 8 facing open spreads, 2 columns
 */

.ed-book-illustration {
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
}

.ed-book-kicker {
  font-family: var(--ed-sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ed-night-accent);
  margin: 0 0 0.75rem;
}

.ed-book-heading {
  font-family: var(--ed-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.85rem, 4vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #f4f7ff;
  text-align: left;
  margin: 0 0 0.75rem;
  max-width: 18em;
}

.ed-book-deck {
  font-family: var(--ed-sans);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--ed-night-text-muted);
  max-width: 34rem;
  margin: 0 0 clamp(2.75rem, 7vw, 4.75rem);
}

.ed-book-hero {
  position: relative;
  display: flex;
  justify-content: center;
  max-width: 34rem;
  margin: 0 auto clamp(3rem, 7vw, 5.5rem);
  padding-bottom: 2.25rem;
}

.ed-book-hero::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 42%;
  z-index: 0;
  width: 100%;
  height: 95%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(
      ellipse 72% 62% at 50% 46%,
      rgb(255 255 255 / 0.42) 0%,
      rgb(222 232 255 / 0.28) 32%,
      rgb(184 226 255 / 0.12) 58%,
      transparent 76%
    );
  filter: blur(16px);
  pointer-events: none;
  animation: ed-moon-breathe 4.8s ease-in-out infinite;
}

.ed-book-hero::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 0;
  width: 78%;
  height: 42%;
  transform: translateX(-50%);
  background:
    radial-gradient(
      ellipse 70% 55% at 50% 70%,
      rgb(255 255 255 / 0.72) 0%,
      rgb(232 242 255 / 0.45) 28%,
      rgb(184 226 255 / 0.22) 52%,
      transparent 74%
    );
  filter: blur(12px);
  pointer-events: none;
  animation: ed-moon-pool 4.8s ease-in-out infinite;
}

/* Physical hardcover: spine + cover + turning pages */
.ed-book-3d {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
  justify-content: center;
  perspective: 1600px;
  width: min(34rem, 88vw);
  max-width: 34rem;
  margin: 0 auto;
  transform-style: preserve-3d;
  filter:
    drop-shadow(0 0 28px rgb(232 242 255 / 0.55))
    drop-shadow(0 18px 36px rgb(184 226 255 / 0.28))
    drop-shadow(10px 24px 28px rgb(0 0 0 / 0.42));
}

.ed-book-3d__spine {
  position: relative;
  z-index: 4;
  width: clamp(0.95rem, 2.1vw, 1.4rem);
  flex-shrink: 0;
  border-radius: 4px 0 0 4px;
  background:
    linear-gradient(90deg, #1f140c 0%, #6b4a2e 34%, #8a6240 52%, #4a321c 78%, #1f140c 100%);
  box-shadow:
    inset -3px 0 4px rgb(0 0 0 / 0.35),
    inset 2px 0 4px rgb(255 255 255 / 0.22),
    -10px 0 22px rgb(232 242 255 / 0.7),
    0 0 28px rgb(184 226 255 / 0.55);
  transform: rotateY(-26deg);
  transform-origin: right center;
  animation: ed-spine-glow 4.8s ease-in-out infinite;
}

.ed-book-3d__spine::after {
  content: '';
  position: absolute;
  inset: 8% 18% 8% 22%;
  border-radius: 2px;
  background: linear-gradient(90deg, rgb(255 255 255 / 0.28), rgb(184 226 255 / 0.08) 70%, transparent);
  pointer-events: none;
}

.ed-book-3d__block {
  position: relative;
  z-index: 5;
  flex: 1;
  transform-style: preserve-3d;
}

.ed-book-3d__cover {
  position: relative;
  z-index: 6;
  width: 100%;
  aspect-ratio: 1024 / 741;
  overflow: visible;
  transform-origin: left center;
  background:
    linear-gradient(180deg, #7a5638 0%, #4a321c 48%, #2f2014 100%);
  border-radius: 0 3px 3px 0;
  padding: 7px 8px 8px 5px;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.18),
    inset 0 0 0 1px rgb(0 0 0 / 0.28);
  animation: ed-cover-open 4.8s ease-in-out infinite;
}

.ed-book-3d__cover .ed-img-trigger {
  height: 100%;
  border-radius: 1px;
  box-shadow:
    inset 0 0 0 1px rgb(0 0 0 / 0.16),
    0 0 0 1px rgb(255 255 255 / 0.1);
}

.ed-book-3d__cover .ed-img-trigger img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.ed-book-3d__pages {
  position: relative;
  z-index: 3;
  width: clamp(0.55rem, 1.2vw, 0.85rem);
  flex-shrink: 0;
  align-self: center;
  height: 96%;
  background:
    linear-gradient(90deg, rgb(255 255 255 / 0.55), rgb(184 226 255 / 0.2) 40%, transparent 85%),
    repeating-linear-gradient(
      to right,
      #fffdf7 0 1px,
      #f3eadc 1px 2px,
      #e4d8c6 2px 3px
    );
  box-shadow:
    inset 1px 0 1px rgb(255 255 255 / 0.85),
    8px 0 18px rgb(255 255 255 / 0.55),
    0 0 24px rgb(184 226 255 / 0.5);
  transform-origin: left center;
  border-radius: 0 1px 1px 0;
  animation: ed-pages-edge 4.8s ease-in-out infinite;
}

.ed-book-3d__board-edge {
  position: relative;
  z-index: 2;
  width: clamp(0.28rem, 0.7vw, 0.45rem);
  flex-shrink: 0;
  border-radius: 0 3px 3px 0;
  background:
    linear-gradient(90deg, #5c3d26 0%, #8a6240 40%, #3d2818 100%);
  box-shadow:
    inset -1px 0 2px rgb(0 0 0 / 0.35),
    6px 0 14px rgb(184 226 255 / 0.28);
  transform: rotateY(-22deg);
  transform-origin: left center;
}

@keyframes ed-cover-open {
  0%, 100% { transform: rotateY(-6deg) translateZ(28px); }
  45% { transform: rotateY(-16deg) translateZ(28px); }
  55% { transform: rotateY(-15deg) translateZ(28px); }
}

@keyframes ed-pages-edge {
  0%, 100% { transform: rotateY(-16deg) scaleX(1); }
  50% { transform: rotateY(-24deg) scaleX(1.25); }
}

@keyframes ed-spine-glow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.22); }
}

@keyframes ed-moon-breathe {
  0%, 100% { opacity: 0.72; }
  50% { opacity: 1; }
}

@keyframes ed-moon-pool {
  0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(0.94); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .ed-book-3d__cover,
  .ed-book-3d__pages,
  .ed-book-3d__spine,
  .ed-book-hero::before,
  .ed-book-hero::after {
    animation: none;
  }

  .ed-book-3d__cover { transform: rotateY(-10deg) translateZ(28px); }
  .ed-book-3d__pages { transform: rotateY(-20deg); }
}

/* Facing open spreads — 2 columns, sit on the night sky */
.ed-book-spreads {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.7rem, 1.8vw, 1.15rem);
}

@media (min-width: 700px) {
  .ed-book-spreads {
    grid-template-columns: 1fr 1fr;
  }
}

.ed-book-spread {
  margin: 0;
}

.ed-book-spread .ed-img-trigger {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  border-radius: 2px;
  box-shadow: none;
  background: rgb(0 0 0 / 0.35);
}

.ed-book-spread .ed-img-trigger img {
  width: 100%;
  height: auto;
  aspect-ratio: 1507 / 1091;
  object-fit: contain;
  background: transparent;
}

.ed-book-spread .ed-img-trigger__hint {
  z-index: 2;
}

.ed-lightbox.is-spread .ed-lightbox__panel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  max-width: 96vw;
}

.ed-lightbox.is-spread .ed-lightbox__image {
  max-width: 47.5vw;
  max-height: 88vh;
}