/* =========================================================
   Libro — mobile-first: una página (ilustración arriba, texto abajo)
   ========================================================= */
.book {
  --avail-h: calc(100vh - var(--bottom-h) - 28px - env(safe-area-inset-top, 0px));
  --page-w: min(calc(100vw - 24px), 500px);
  --page-h: min(var(--avail-h), calc(var(--page-w) / 0.6));
  position: relative;
  z-index: 10;
  width: var(--page-w);
  height: var(--page-h);
  perspective: 2400px;
  transform-style: preserve-3d;
}

@supports (height: 100dvh) {
  .book {
    --avail-h: calc(100dvh - var(--bottom-h) - 28px - env(safe-area-inset-top, 0px));
  }
}

/* ---------- Pliego (páginas abiertas) ---------- */
.spread {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 0.82fr) minmax(0, 1.18fr);
  border-radius: 4px 10px 10px 4px;
  background-color: var(--parchment);
  background-image:
    linear-gradient(90deg,
      rgba(60, 38, 12, 0.5) 0%, rgba(90, 60, 25, 0.2) 2.5%,
      rgba(255, 248, 228, 0.32) 5%, rgba(255, 248, 228, 0) 10%,
      rgba(90, 60, 25, 0) 94%, rgba(90, 60, 25, 0.12) 100%),
    radial-gradient(ellipse at 50% 45%, rgba(255, 248, 228, 0.55), transparent 65%),
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(120, 82, 30, 0.28) 100%),
    url('../assets/img/paper-grain.webp');
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    1px 1px 0 #cdb98d, 2px 1.5px 0 #eadcb9, 3px 2.5px 0 #c9b385,
    4px 3px 0 #e6d6b0, 5px 4px 0 #bfa877,
    0 30px 60px -20px rgba(0, 0, 0, 0.75),
    0 12px 24px -12px rgba(0, 0, 0, 0.6);
  transform-style: preserve-3d;
}

/* Libro doblado hacia atrás (vista de teléfono): la tapa asoma por detrás
   de la hoja y el lomo queda a la izquierda, así se lee como un libro entero. */
.book::before {
  content: '';
  position: absolute;
  inset: -7px -4px -9px -11px;
  border-radius: 7px 12px 12px 7px;
  background-color: var(--leather);
  background-image:
    linear-gradient(90deg, var(--leather-deep) 0, rgba(255, 230, 160, 0.14) 3px, rgba(0, 0, 0, 0) 9px),
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.45) 100%),
    url('../assets/img/paper-grain.webp');
  background-blend-mode: normal, normal, multiply;
  box-shadow:
    inset 0 0 0 1px rgba(255, 230, 160, 0.14),
    inset 0 0 0 4px rgba(0, 0, 0, 0.18),
    2px 3px 0 var(--leather-edge),
    3px 5px 0 var(--leather-deep),
    0 30px 60px -18px rgba(0, 0, 0, 0.85);
  opacity: 0;
  transition: opacity var(--dur-reveal) var(--ease-out);
  pointer-events: none;
}

.book[data-state='open']::before {
  opacity: 1;
}

.book[data-scene='epilogo'] .spread {
  grid-template-rows: minmax(0, 0.85fr) minmax(0, 1.15fr);
}

.page {
  position: relative;
  min-width: 0;
  min-height: 0;
}

.page--illus {
  container-type: size;
  display: grid;
  place-items: center;
  padding: clamp(10px, 4%, 22px) clamp(14px, 6%, 32px) 0;
}

.page--text {
  container-type: size;
}

.spread__gutter {
  display: none;
}

/* Páginas ocultas mientras el libro está cerrado */
.book[data-state='closed'] .page,
.book[data-state='opening'] .page {
  opacity: 0;
}

/* ---------- Bloque de hojas (canto del libro cerrado) ---------- */
.book__block {
  position: absolute;
  inset: 0;
  border-radius: 4px 10px 10px 4px;
  background:
    repeating-linear-gradient(0deg, #e9dbb8 0 2px, #cdb98d 2px 3px);
  transform: translate(6px, 7px);
  box-shadow:
    2px 2px 0 var(--leather-edge),
    4px 5px 0 var(--leather),
    6px 7px 0 var(--leather-deep),
    0 30px 60px -18px rgba(0, 0, 0, 0.8);
}

.book[data-state='open'] .book__block {
  opacity: 0;
}

/* ---------- Portada ---------- */
.cover {
  position: absolute;
  inset: 0;
  z-index: 5;
  transform-origin: left center;
  transform-style: preserve-3d;
}

.book[data-state='open'] .cover {
  display: none;
}

.cover__face {
  position: absolute;
  inset: 0;
  border-radius: 4px 12px 12px 4px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.cover__face--front {
  background-color: var(--leather);
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0) 6%, rgba(255, 255, 255, 0.05) 7.5%, rgba(0, 0, 0, 0) 10%),
    radial-gradient(ellipse at 40% 30%, rgba(200, 130, 70, 0.22), transparent 60%),
    radial-gradient(ellipse at 50% 50%, transparent 50%, rgba(0, 0, 0, 0.5) 100%),
    url('../assets/img/paper-grain.webp');
  background-blend-mode: normal, screen, normal, multiply;
  box-shadow:
    inset 0 0 0 1px rgba(255, 230, 160, 0.12),
    inset 0 2px 1px rgba(255, 255, 255, 0.08),
    inset 0 0 0 5px rgba(0, 0, 0, 0.16),
    inset -2px -3px 6px rgba(0, 0, 0, 0.35),
    1px 1px 0 var(--leather-edge),
    2px 2px 0 var(--leather-deep),
    0 30px 60px -18px rgba(0, 0, 0, 0.85);
  overflow: hidden;
  container-type: inline-size;
}

/* Brillo dorado que recorre la portada una sola vez al cargar */
.cover__face--front::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 228, 160, 0.16) 48%, transparent 60%);
  transform: translateX(-100%);
  animation: cover-sheen 2.6s var(--ease-in-out) 0.9s both;
  pointer-events: none;
}

@keyframes cover-sheen {
  to { transform: translateX(100%); }
}

.cover__face--back {
  transform: rotateY(180deg);
  background-color: var(--parchment);
  background-image:
    linear-gradient(270deg, rgba(90, 60, 25, 0.3), rgba(90, 60, 25, 0) 8%),
    url('../assets/img/paper-grain.webp');
  border-radius: 12px 4px 4px 12px;
}

.cover__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
  opacity: 0.85;
}

.cover__corner {
  position: absolute;
  width: 15%;
  fill: none;
  stroke: var(--gold);
  stroke-width: 2;
  opacity: 0.9;
}
.cover__corner--tl { top: 6%; left: 7%; transform: rotate(0deg); }
.cover__corner--tr { top: 6%; right: 7%; transform: scaleX(-1); }
.cover__corner--bl { bottom: 6%; left: 7%; transform: scaleY(-1); }
.cover__corner--br { bottom: 6%; right: 7%; transform: scale(-1, -1); }

.cover__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7cqi;
  padding: 18%;
  text-align: center;
}

.cover__emblem {
  width: 34cqi;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.6;
}
.cover__emblem path:first-of-type {
  fill: rgba(201, 162, 79, 0.2);
}
.cover__emblem-quill {
  stroke-linecap: round;
  stroke-width: 2.4;
}

.cover__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.15rem, 9.4cqi, 2.5rem);
  line-height: 1.05;
  letter-spacing: 0.02em;
  background: linear-gradient(180deg, #fbe8b0 0%, #d8ad54 55%, #9a7228 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.55));
}
.cover__title span {
  display: block;
  font-family: var(--font-title);
  font-style: italic;
  font-size: 0.72em;
  margin-top: 0.25em;
}

/* El libro cerrado se abre con un clic */
.book[data-state='closed'] {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.book[data-state='closed'] .cover {
  transition: transform 300ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .book[data-state='closed']:hover .cover {
    transform: rotateY(-4deg);
  }
}

.book:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 10px;
  border-radius: 8px;
}

/* Entrada del libro cerrado (solo la primera vez, no al cerrarlo al final) */
.book[data-state='closed']:not([data-again]) {
  animation: book-in 1.2s var(--ease-out) 0.15s both;
}
@keyframes book-in {
  from { opacity: 0; translate: 0 12px; scale: 0.97; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}

/* ---------- Hoja que gira ---------- */
.leaf {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 8;
  transform-origin: left center;
  transform-style: preserve-3d;
  pointer-events: none;
}

.leaf__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background-color: var(--parchment);
  background-image:
    linear-gradient(90deg, rgba(90, 60, 25, 0.22), rgba(90, 60, 25, 0) 8%),
    url('../assets/img/paper-grain.webp');
  border-radius: 2px 8px 8px 2px;
}

.leaf__face--back {
  transform: rotateY(180deg);
  background-image:
    linear-gradient(270deg, rgba(90, 60, 25, 0.22), rgba(90, 60, 25, 0) 8%),
    url('../assets/img/paper-grain.webp');
}

.leaf__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(60, 38, 12, 0.35), rgba(60, 38, 12, 0) 60%);
  opacity: 0;
}

/* =========================================================
   Pliego de dos páginas: pantallas horizontales amplias
   ========================================================= */
@media (min-aspect-ratio: 21/20) and (min-width: 640px) {
  .book {
    --spread-h: min(var(--avail-h), 760px, calc((100vw - 32px) / 1.3));
    --spread-w: min(calc(100vw - 32px), 1180px, calc(var(--spread-h) * 1.6));
    width: var(--spread-w);
    height: var(--spread-h);
  }

  .spread,
  .book[data-scene='epilogo'] .spread {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    border-radius: 6px;
    background-image:
      linear-gradient(90deg,
        rgba(120, 82, 30, 0.25) 0%, rgba(120, 82, 30, 0) 6%,
        rgba(120, 82, 30, 0) 42%, rgba(90, 60, 25, 0.35) 49.6%,
        rgba(60, 40, 15, 0.55) 50%, rgba(90, 60, 25, 0.35) 50.4%,
        rgba(120, 82, 30, 0) 58%, rgba(120, 82, 30, 0) 94%, rgba(120, 82, 30, 0.25) 100%),
      radial-gradient(ellipse at 25% 45%, rgba(255, 248, 228, 0.45), transparent 60%),
      radial-gradient(ellipse at 75% 45%, rgba(255, 248, 228, 0.45), transparent 60%),
      url('../assets/img/paper-grain.webp');
  }

  .spread {
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.25) inset,
      0 30px 60px -20px rgba(0, 0, 0, 0.75),
      0 12px 24px -12px rgba(0, 0, 0, 0.6);
  }

  .book::before {
    inset: -10px -12px -12px -12px;
    border-radius: 8px;
    background-image:
      linear-gradient(90deg, rgba(0, 0, 0, 0) 48.6%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0) 51.4%),
      radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.45) 100%),
      url('../assets/img/paper-grain.webp');
  }

  .page--illus {
    padding: clamp(18px, 6%, 48px);
  }

  .book__block,
  .cover {
    left: 50%;
  }

  .book__block {
    inset: 0 0 0 50%;
  }

  .book[data-state='closed'],
  .book[data-state='opening'] {
    transform: translateX(-25%);
  }

  .book[data-state='closed'] .spread,
  .book[data-state='opening'] .spread {
    clip-path: inset(0 0 0 50%);
  }

  /* Centrado vertical "seguro": si el texto no cabe, no se recorta por arriba */
  .story__head { margin-top: auto; }
  .story__text { margin-bottom: auto; }

  .cover__face--back {
    border-radius: 6px 0 0 6px;
  }

  .leaf {
    left: 50%;
    width: 50%;
  }
}