/* ---------- Capa do livro (escala por container query) ---------- */
.cover {
  container-type: inline-size;
  position: relative; width: 100%; aspect-ratio: 3 / 4; overflow: hidden;
  color: var(--cover-ink);
  background:
    var(--grain),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.03) 0 1px, transparent 1px 3px),
    radial-gradient(120% 90% at 30% 15%, rgba(255,255,255,.18), transparent 55%),
    linear-gradient(155deg, var(--cover-1), var(--cover-2));
  border-radius: 3px 8px 8px 3px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 0 40px rgba(0,0,0,.18);
}
.cover::before { /* lombada / dobra */
  content: ''; position: absolute; inset: 0 auto 0 0; width: 7%;
  background: linear-gradient(90deg, rgba(0,0,0,.28), rgba(255,255,255,.1) 55%, rgba(0,0,0,.18) 80%, transparent);
}
.cover::after { /* sulco da dobradiça, como numa capa dura */
  content: ''; position: absolute; inset: 0 auto 0 8.6%; width: 1.1%; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.26), rgba(0,0,0,.08) 45%, rgba(255,255,255,.18) 80%, transparent);
}
.cover-frame { position: absolute; inset: 6.5cqw 6.5cqw 6.5cqw 9.5cqw; border: 1px solid currentColor; opacity: .55; outline: 1px solid currentColor; outline-offset: -4px; outline-width: 1px; }
.cover[data-style='minimal'] .cover-frame { inset: 8cqw 8cqw 8cqw 11cqw; outline: 0; opacity: .35; }
.cover[data-style='monogram'] .cover-frame { border-radius: 100cqw 100cqw 3px 3px; inset: 6cqw 7cqw 6cqw 10cqw; }
.cover-corner { position: absolute; width: 17cqw; color: currentColor; opacity: .85; }
.cover-corner.c0 { top: 6cqw; left: 9cqw; }
.cover-corner.c1 { top: 6cqw; right: 6cqw; transform: scaleX(-1); }
.cover-corner.c2 { bottom: 6cqw; left: 9cqw; transform: scaleY(-1); }
.cover-corner.c3 { bottom: 6cqw; right: 6cqw; transform: scale(-1); }
.cover-inner { position: absolute; inset: 0 0 0 7%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 16cqw 14cqw; gap: 3.2cqw; }
.cover-kicker { font-family: var(--font-ui); font-size: 2.5cqw; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; margin: 0 0 2cqw; padding-left: .3em; }
.cover-names { font-size: 13.5cqw; line-height: 1.12; padding: 0 1cqw .6cqw; max-width: 100%; overflow-wrap: break-word; text-wrap: balance; }
.cover[data-style='monogram'] .cover-names { font-size: 10.5cqw; }
.cover-div { width: 44cqw; } .cover-div svg { width: 100%; }
.cover-sub { font-family: var(--font-display); font-style: italic; font-size: 4.6cqw; letter-spacing: .06em; }
.cover-monogram { width: 30cqw; height: 30cqw; border: 1px solid currentColor; border-radius: 50%; display: grid; place-items: center; margin-bottom: 1cqw; box-shadow: 0 0 0 1.4cqw transparent, 0 0 0 1.5cqw color-mix(in srgb, currentColor 35%, transparent); }
.cover-monogram span { font-size: 11cqw; line-height: 1; padding: 1cqw 1cqw 0; }
.cover-sprig { width: 52cqw; } .cover-sprig svg { width: 100%; }
.cover .foil { filter: drop-shadow(0 1px 0 rgba(255,255,255,.35)) drop-shadow(0 -1px 0 rgba(0,0,0,.18)); }

/* ---------- Palco + livro 3D ---------- */
.stage {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; overflow: hidden; perspective: 2000px;
  background: radial-gradient(120% 90% at 50% 40%, var(--bg-2), var(--bg) 70%);
  transition: opacity .9s var(--ease-soft), transform 1.1s var(--ease);
}
.stage::before { content: ''; position: absolute; inset: 0; background: var(--grain); opacity: .7; pointer-events: none; }
.stage-glow { position: absolute; width: 90vmin; height: 90vmin; border-radius: 50%; background: radial-gradient(closest-side, var(--glow), transparent); animation: breathe 6s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.12); opacity: .75; } }
.stage.is-entering { opacity: 0; transform: scale(1.18); pointer-events: none; transition-duration: 1.25s, 1.4s; }

.open-btn { position: relative; border: 0; background: none; padding: 0; display: grid; justify-items: center; gap: clamp(1.6rem, 5vh, 3rem); -webkit-tap-highlight-color: transparent; transform-style: preserve-3d; }
.open-btn:focus-visible { outline-offset: 14px; }
.book-float { --w: min(74vw, 420px, 60dvh * .75); width: var(--w); transform-style: preserve-3d; animation: float 7s ease-in-out infinite; }
@keyframes float {
  0%, 100% { transform: rotateX(4deg) rotateY(-16deg) translateY(0); }
  50% { transform: rotateX(2deg) rotateY(-10deg) translateY(-10px); }
}
.book3d { position: relative; width: 100%; aspect-ratio: 3 / 4; transform-style: preserve-3d; transition: transform 1.5s cubic-bezier(.5,.05,.2,1); }
.is-opening .book-float { animation: none; transform: rotateX(0) rotateY(0); transition: transform 1.2s var(--ease); }
.is-opening .book3d { transform: translateX(50%) scale(1.05); }
.is-opening .book-shadow { transform: translateZ(-40px) scaleX(1.9); transition: transform 1.5s cubic-bezier(.5,.05,.2,1); }
.book-shadow { transition: transform 1.5s cubic-bezier(.5,.05,.2,1); transform-origin: 20% 50%; }
/* luz que percorre o relevo da capa ao abrir */
.face-out::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.34) 50%, transparent 65%) -120% 0 / 220% 100% no-repeat; }
.is-opening .face-out::after { animation: sheen 1.3s .1s ease-out both; }
@keyframes sheen { 0% { opacity: 1; background-position: -120% 0; } 100% { opacity: 0; background-position: 120% 0; } }
/* a folha de rosto revela-se à medida que a capa se abre */
.book-firstpage > * { opacity: .0; transform: translateY(8px); transition: opacity .9s var(--ease-soft), transform .9s var(--ease); }
.is-opening .book-firstpage > * { opacity: 1; transform: none; }
.is-opening .book-firstpage > :nth-child(1) { transition-delay: .55s; } .is-opening .book-firstpage > :nth-child(2) { transition-delay: .7s; } .is-opening .book-firstpage > :nth-child(3) { transition-delay: .85s; }
.book-shadow { position: absolute; left: 4%; right: -6%; bottom: -5%; height: 8%; background: radial-gradient(closest-side, rgba(0,0,0,.45), transparent); filter: blur(10px); transform: translateZ(-40px); }
.book-block {
  position: absolute; inset: 1.2% -1.6% 1.2% 0; background: var(--paper); border-radius: 0 6px 6px 0;
  box-shadow: 2px 0 0 var(--paper-2), 4px 0 0 var(--paper), 6px 1px 0 var(--paper-2), 8px 2px 0 var(--paper), 10px 3px 0 rgba(0,0,0,.12), 16px 14px 34px -10px rgba(0,0,0,.5);
  transform: translateZ(-2px);
}
.book-firstpage { position: absolute; inset: 0; background: var(--grain), linear-gradient(90deg, rgba(0,0,0,.12), transparent 14%), var(--paper); border-radius: 0 8px 8px 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1rem; padding: 14%; color: var(--accent-deep); }
.fp-names { font-size: clamp(1.8rem, 9vw, 2.9rem); line-height: 1.1; }
.fp-div { width: 55%; } .fp-div svg { width: 100%; }
.book-front { position: absolute; inset: 0; transform-origin: left center; transform-style: preserve-3d; transition: transform 1.5s cubic-bezier(.55,.05,.25,1); }
.is-opening .book-front { transform: rotateY(-172deg); }
.face { position: absolute; inset: 0; border-radius: 3px 8px 8px 3px; overflow: hidden; }
/* a face visível troca aos 90° por animação de visibilidade (sem backface-visibility, que o Safari trata de forma diferente) */
.face-in { visibility: hidden; }
.is-opening .face-out { animation: face-out-vis 1.5s linear both; }
.is-opening .face-in { animation: face-in-vis 1.5s linear both; }
@keyframes face-out-vis { 0% { visibility: visible; } 42.7% { visibility: hidden; } 100% { visibility: hidden; } }
@keyframes face-in-vis { 0% { visibility: hidden; } 42.7% { visibility: visible; } 100% { visibility: visible; } }
.face-out .cover { height: 100%; aspect-ratio: auto; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 0 40px rgba(0,0,0,.18), 0 22px 40px -18px rgba(0,0,0,.6); }
.face-in { transform: rotateY(180deg); background: var(--cover-2); border-radius: 8px 3px 3px 8px; }
.endpaper { position: absolute; inset: 3%; background: var(--grain), linear-gradient(135deg, var(--paper-2), var(--paper)); border-radius: 2px; box-shadow: inset 0 0 30px rgba(0,0,0,.12); }
.open-hint { font-size: .72rem; letter-spacing: .36em; text-transform: uppercase; color: var(--ink-soft); padding-left: .36em; animation: hint 2.8s ease-in-out infinite; transition: opacity .5s; }
.is-opening .open-hint { opacity: 0; }
@keyframes hint { 50% { opacity: .45; transform: translateY(2px); } }

.dust { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.dust span { position: absolute; bottom: -10px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; background: var(--accent); opacity: 0; box-shadow: 0 0 8px var(--accent); animation: rise var(--d) linear var(--delay) infinite; }
@keyframes rise { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: .75; } 85% { opacity: .5; } 100% { transform: translate(var(--drift), -105dvh); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .book-float { animation: none; transform: rotateY(-8deg); }
  .is-opening .book-front { transform: rotateY(-172deg); transition-duration: .01ms; }
  .book-firstpage > * { opacity: 1; transform: none; transition: none; }
  .is-opening .face-out::after { animation: none; }
}