/* As duas cenas de scroll. Mesmo método da caixa de música (css/14-rolagem.css do Amorama):
   position:sticky numa seção alta, sem sequestrar a roda. --p vai de 0 a 1 (js/site/rolagem.js). */

.cena{--p:0; --topo:57px; position:relative; margin:0 clamp(12px,2vw,20px)}
.cena-fixa{position:sticky; top:calc(var(--topo) + 8px); height:calc(100vh - var(--topo) - 16px); height:calc(100dvh - var(--topo) - 16px); overflow:hidden; isolation:isolate; border-radius:24px}
.cena-barra{position:absolute; left:50%; bottom:18px; width:min(180px,40%); height:3px; transform:translateX(-50%); border-radius:2px; background:rgb(142 79 69/.16); overflow:hidden}
.cena-barra i{display:block; height:100%; background:var(--rose-profundo); transform-origin:0 50%; transform:scaleX(var(--p))}
.legendas{position:absolute; left:0; right:0; bottom:clamp(42px,7vh,70px); z-index:5; height:clamp(44px,8vh,72px); pointer-events:none}
.legendas p{position:absolute; left:16px; right:16px; bottom:0; margin:0; text-align:center; font-family:var(--f-display); font-variation-settings:"SOFT" 100; font-size:clamp(22px,3vw,38px); line-height:1.15; letter-spacing:-.012em; color:var(--tinta); opacity:0; transform:translateY(14px); transition:opacity .4s var(--ease-padrao),transform .55s var(--ease-saida)}
.legendas p.on{opacity:1; transform:none}

/* ---------- a carta ---------- */
.cena-carta{height:460vh}
.carta-ceu{position:absolute; inset:0; z-index:-2; background:var(--ceu)}
/* o sol sobe atrás da carta conforme ela abre */
.carta-sol{position:absolute; left:50%; top:50%; width:min(120vh,110vw); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,#FFFFFB 0%,#FFF8EA 30%,#FDE9D8 50%,rgb(247 214 198/.4) 62%,rgb(247 214 198/0) 71%); transform:translate(-50%,calc(70% - var(--sol,0)*52%)) scale(calc(.8 + var(--sol,0)*.3)); opacity:calc(.35 + var(--sol,0)*.65)}
.carta-palco{position:absolute; inset:0; z-index:1; opacity:0; transition:opacity .5s var(--ease-padrao); transform:translate3d(calc(var(--dx,0px)*var(--entra,1)),calc(var(--dy,0px)*var(--entra,1) - 3%),0) scale(.86)}
.carta-palco.pronto{opacity:1}
.carta-palco > div,.carta-palco canvas{width:100%!important; height:100%!important}
.cv-tres{position:absolute; inset:0}
.carta-poster{position:absolute; z-index:0; left:50%; top:50%; width:min(62vw,560px); transform:translate(-50%,-50%) translate3d(calc(var(--dx,0px)*var(--entra,1)),calc(var(--dy,0px)*var(--entra,1)),0); transition:opacity .4s}
.carta-palco.pronto ~ .carta-poster,.cena-carta:has(.carta-palco.pronto) .carta-poster{opacity:0}
.carta-titulo{position:absolute; z-index:4; left:clamp(20px,6vw,90px); top:50%; width:min(42vw,520px); transform:translateY(-50%) translateY(calc(var(--entra-inv,0)*-46px)); opacity:calc(1 - var(--entra-inv,0))}
.carta-titulo h2{font-size:clamp(38px,5.2vw,74px); line-height:1.05; letter-spacing:-.022em; margin:0}

/* ---------- o varal ---------- */
.cena-varal{height:520vh}
.cena-varal .cena-fixa{background:linear-gradient(180deg,#FFFBF5 0%,var(--nevoa-rosa) 56%,var(--blush) 100%)}
.varal-titulo{position:absolute; z-index:6; left:0; right:0; top:50%; text-align:center; padding-inline:16px; transform:translateY(-50%) translateY(calc(var(--sai-t,0)*-40px)); opacity:calc(1 - var(--sai-t,0))}
.varal-titulo h2{font-size:clamp(38px,5.2vw,74px); line-height:1.05; letter-spacing:-.022em; margin:0}
.corda{position:absolute; z-index:2; left:0; top:clamp(16px,4vh,44px); width:100%; height:60px; overflow:visible}
.corda{opacity:var(--corda-a,1)}
.corda{clip-path:inset(-20px calc((1 - var(--corda,0))*100%) -20px 0)}
.varal{position:absolute; inset:0; z-index:4; pointer-events:none}

.pv{position:absolute; left:0; top:0; width:var(--w); padding:calc(var(--w)*.05) calc(var(--w)*.05) 0; background:var(--superficie); border-radius:3px; box-shadow:0 16px 26px -12px rgb(110 70 58/.5),0 0 0 1px rgb(29 29 28/.04); transform-origin:50% 0; will-change:transform; visibility:hidden}
.pv img{display:block; width:100%; aspect-ratio:1; object-fit:cover; border-radius:1.5px}
.pv figcaption{font-family:var(--f-display); font-variation-settings:"SOFT" 100; font-size:calc(var(--w)*.085); line-height:1.1; text-align:center; padding:calc(var(--w)*.045) 2px calc(var(--w)*.06); color:var(--grafite); white-space:nowrap}
/* a foto revela: um véu escuro que só muda de opacidade */
.pv .pv-im{position:relative; display:block; overflow:hidden; border-radius:1.5px}
.pv .pv-im::after{content:""; position:absolute; inset:0; background:#4A3530; opacity:var(--escuro,1)}
.pv .pregador{top:calc(var(--w)*-.09); transition:opacity .2s}
.pv.solta .pregador{opacity:0}

/* o livro aberto */
.livro3d{--lv:min(72vw,calc(54vh*1.42),820px); position:absolute; z-index:3; left:50%; top:57%; width:var(--lv); aspect-ratio:1.42; transform:translate(-50%,-50%) translateY(calc((1 - var(--livro,0))*105vh)) scale(calc(.92 + var(--livro,0)*.08)); perspective:1800px}
.lv-capa{position:absolute; inset:-1.4% -1.2%; border-radius:10px; background:linear-gradient(180deg,#E8B9AB,#D7A08F); box-shadow:0 34px 56px -26px rgb(110 70 58/.6)}
.lv-pag{position:absolute; top:0; bottom:0; width:50%; padding:4.2% 3.6%; background:var(--superficie); display:flex; flex-direction:column; gap:3.5%; overflow:hidden}
.lv-esq{left:0; border-radius:6px 0 0 6px; box-shadow:inset -18px 0 22px -18px rgb(110 70 58/.32)}
.lv-dir2,.lv-frente{left:50%; border-radius:0 6px 6px 0; box-shadow:inset 18px 0 22px -18px rgb(110 70 58/.32)}
.lv-folha{position:absolute; left:50%; top:0; width:50%; height:100%; transform-style:preserve-3d; transform-origin:0 50%; transform:rotateY(calc(var(--giro,0)*-180deg)); z-index:2}
.lv-folha .lv-pag{left:0; width:100%; backface-visibility:hidden; -webkit-backface-visibility:hidden}
.lv-frente{box-shadow:inset 18px 0 22px -18px rgb(110 70 58/.32)}
.lv-verso{transform:rotateY(180deg); border-radius:6px 0 0 6px; box-shadow:inset -18px 0 22px -18px rgb(110 70 58/.32)}
.lv-capitulo small{display:block; font-size:clamp(9px,1vw,13px); font-weight:800; color:var(--rose-profundo)}
.lv-capitulo b{display:block; font-family:var(--f-display); font-weight:400; font-variation-settings:"SOFT" 100; font-size:clamp(15px,2.2vw,30px); line-height:1.1; letter-spacing:-.012em}
.lv-slot{position:relative; flex:1; min-height:0; border-radius:3px; background:var(--linho); overflow:hidden}
.lv-slot img{display:block; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .12s linear}
.lv-slot.colada img{opacity:1}
.lv-frase{margin:0; font-size:clamp(9px,1.15vw,15px); line-height:1.3; color:var(--grafite); text-align:center; flex:none}

/* sem movimento: tudo no estado final, sem altura extra */
.cena.plano{height:auto; margin-block:16px}
.cena.plano .cena-fixa{position:relative; height:auto; min-height:92vh; padding:clamp(28px,5vw,60px) 16px 40px; display:grid; gap:20px; justify-items:center}
.cena.plano .carta-titulo,.cena.plano .varal-titulo{position:relative; inset:auto; left:auto; top:auto; width:auto; transform:none; opacity:1; text-align:center}
.cena.plano .carta-poster{position:relative; left:auto; top:auto; transform:none; opacity:1; width:min(82vw,560px)}
.cena.plano .carta-palco,.cena.plano .cena-barra,.cena.plano .corda{display:none}
.cena.plano .legendas{position:relative; bottom:auto; height:auto; display:grid; gap:4px}
.cena.plano .legendas p{position:relative; opacity:1; transform:none; font-size:18px; left:auto; right:auto}
.cena.plano .livro3d{position:relative; left:auto; top:auto; transform:none}
.cena.plano .varal{display:none}
.cena.plano .lv-slot img{opacity:1}

@media (max-width:820px){
  .carta-titulo{left:20px; right:20px; width:auto; top:15%; transform:translateY(calc(var(--entra-inv,0)*-46px)); text-align:center}
  .carta-titulo h2{font-size:clamp(34px,9.6vw,50px)}
  .legendas p{font-size:clamp(20px,5.8vw,28px)}
  .livro3d{--lv:min(88vw,calc(46vh*1.42)); top:60%}
}