/* =====================================================================
   Camada cinematográfica — branch preview-cinematografico
   Só adiciona movimento, luz e profundidade. Textos, cores (--lime #d4fc79,
   preto, #111/#1b1b1b), fontes (Poppins + DM Sans) e a estrutura das
   seções continuam os do index.html.
   ===================================================================== */
:root{--glow:rgba(212,252,121,.35);--ease-out:cubic-bezier(.16,1,.3,1)}

/* ---------- atmosfera: grão de filme + vinheta ---------- */
.grain{position:fixed;inset:-50%;z-index:50;pointer-events:none;opacity:.065;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px;animation:grain .9s steps(6) infinite}
@keyframes grain{0%,100%{transform:translate(0,0)}17%{transform:translate(-3%,2%)}33%{transform:translate(2%,-4%)}50%{transform:translate(-4%,-1%)}67%{transform:translate(3%,3%)}83%{transform:translate(-1%,4%)}}
.vignette{position:fixed;inset:0;z-index:49;pointer-events:none;background:radial-gradient(130% 95% at 50% 42%,transparent 62%,rgba(0,0,0,.42))}

/* ---------- header de vidro + barra de progresso ---------- */
header{background:rgba(0,0,0,.42);-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);border-bottom-color:rgba(255,255,255,.07);transition:background .4s,box-shadow .4s}
header.scrolled{background:rgba(0,0,0,.62);box-shadow:0 18px 40px -28px #000,inset 0 -1px 0 rgba(212,252,121,.1)}
header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--lime);box-shadow:0 0 12px var(--glow);transform:scaleX(var(--sp,0));transform-origin:left;pointer-events:none}
.js header{animation:fxDown .9s var(--ease-out) backwards}
@keyframes fxDown{from{opacity:0;transform:translateY(-100%)}}
nav a:not(.btn){position:relative;transition:color .25s}
nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1.5px;background:var(--lime);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-out)}
nav a:not(.btn):hover::after,nav a.on::after{transform:scaleX(1);transform-origin:left}
nav a.on{color:var(--text)}

/* ---------- botões: brilho que atravessa + elevação ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate;transition:transform .3s var(--ease-out),box-shadow .35s,border-color .3s,color .3s}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-130%);transition:transform .9s var(--ease-out);pointer-events:none}
.btn:hover::after{transform:translateX(130%)}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px -12px rgba(212,252,121,.6)}
.btn.ghost::after{background:linear-gradient(105deg,transparent 35%,rgba(212,252,121,.18) 50%,transparent 65%)}
.btn.ghost:hover{border-color:var(--lime);color:var(--lime);box-shadow:0 0 0 1px rgba(212,252,121,.15)}
.btn:active{transform:translateY(0) scale(.98)}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden}
.hero::before,.hero::after{content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none}
.hero::before{width:70vmax;height:70vmax;right:-26vmax;top:-30vmax;background:radial-gradient(closest-side,rgba(212,252,121,.14),transparent 72%);translate:0 var(--gy,0px);animation:drift 16s ease-in-out infinite alternate}
.hero::after{width:50vmax;height:50vmax;left:-24vmax;top:-12vmax;background:radial-gradient(closest-side,rgba(212,252,121,.06),transparent 72%);animation:drift 22s ease-in-out infinite alternate-reverse}
@keyframes drift{to{transform:translate(-6vmax,4vmax) scale(1.12)}}

@keyframes fxUp{from{opacity:0;transform:translateY(32px);filter:blur(10px)}}
.js .hero h1{animation:fxUp 1.1s var(--ease-out) .15s backwards}
.js .hero h1 span{animation:fxUp 1.1s var(--ease-out) .5s backwards}
.js .hero .lead{animation:fxUp 1s var(--ease-out) .78s backwards}
.js .hero .cta>*:nth-child(1){animation:fxUp .9s var(--ease-out) .95s backwards}
.js .hero .cta>*:nth-child(2){animation:fxUp .9s var(--ease-out) 1.08s backwards}

.stage{transition:transform .8s var(--ease-out);will-change:transform,translate}
.stage::before{content:"";position:absolute;inset:6% -8% -8% 6%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(212,252,121,.3),transparent);filter:blur(34px);animation:breathe 6s ease-in-out infinite alternate;pointer-events:none}
@keyframes breathe{from{opacity:.55;transform:scale(.94)}to{opacity:1;transform:scale(1.04)}}
.stage img{box-shadow:0 46px 90px -34px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.06)}
.js .stage img{animation:reveal 1.4s var(--ease-out) .3s backwards}
@keyframes reveal{from{clip-path:inset(20% 12% 20% 12% round 28px);opacity:0;scale:1.08}to{clip-path:inset(-30% round 28px);opacity:1;scale:1}}
.stage .chip{font-variant-numeric:tabular-nums;white-space:nowrap}
.js .stage .chip{animation:pop .9s cubic-bezier(.34,1.56,.64,1) 1.15s backwards,chipGlow 3.2s ease-in-out 2.6s infinite}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.85)}}
@keyframes chipGlow{0%,100%{box-shadow:0 0 0 0 rgba(212,252,121,.5),0 10px 30px -8px rgba(212,252,121,.35)}50%{box-shadow:0 0 0 12px rgba(212,252,121,0),0 16px 44px -6px rgba(212,252,121,.6)}}

/* pilares */
.proof .chips{padding:.7rem .3rem .9rem;margin:.1rem -.3rem 0}
.proof .chips span{transition:color .6s,border-color .6s,box-shadow .6s,background .6s,transform .4s var(--ease-out)}
.proof .chips span.on,.proof .chips span:hover{border-color:rgba(212,252,121,.6);color:var(--lime);background:#12170a;box-shadow:0 0 26px -6px rgba(212,252,121,.5)}
.proof .chips span:hover{transform:translateY(-2px)}

/* ---------- revelação ao rolar ---------- */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .95s var(--ease-out),transform .95s var(--ease-out);transition-delay:var(--d,0ms)}
.js .rv.in{opacity:1;transform:none}
.js h2.rv{text-decoration-color:transparent;transition:opacity .95s var(--ease-out) var(--d,0ms),transform .95s var(--ease-out) var(--d,0ms),text-decoration-color 1.1s ease .4s}
.js h2.rv.in{text-decoration-color:var(--lime)}
.js .final h2.rv.in{text-decoration-color:#000}
.js .kb.rv{transform:translateY(22px) scale(.96)}

/* ---------- como funciona: linha do tempo que acende ---------- */
.steps li::before{position:relative;z-index:2;transition:background .7s,color .7s,box-shadow .7s,transform .7s var(--ease-out)}
.js .steps li:not(.lit)::before{background:var(--panel2);color:var(--mute);box-shadow:inset 0 0 0 1.5px #343434}
.steps li.lit::before{box-shadow:0 0 0 6px rgba(212,252,121,.1),0 0 32px rgba(212,252,121,.55);transform:scale(1.06)}
.js .steps h3,.js .steps p{transition:opacity .7s,color .7s}
.js .steps li:not(.lit) h3,.js .steps li:not(.lit) p{opacity:.42}
.js .steps li:not(:last-child)::after{background:linear-gradient(var(--lime),var(--lime)) top/100% var(--fill,0%) no-repeat,var(--line);box-shadow:0 0 10px rgba(212,252,121,.18)}
@media(min-width:900px){
  .steps{position:relative}
  .steps::before,.steps::after{content:"";position:absolute;z-index:1;top:calc(2.8rem - 1px);left:2.8rem;right:calc((100% - 3rem)/4 - 2.8rem);height:2px;border-radius:2px;pointer-events:none}
  .steps::before{background:#2f2f2f}
  .steps::after{background:var(--lime);box-shadow:0 0 14px rgba(212,252,121,.65);transform:scaleX(var(--p,0));transform-origin:left;transition:transform .25s linear}
  .steps li{position:relative;transition:box-shadow .7s,background .7s}
  .steps li.lit{background:linear-gradient(180deg,#151b0d,var(--panel) 65%);box-shadow:inset 0 0 0 1px rgba(212,252,121,.22),0 26px 60px -36px rgba(212,252,121,.5)}
}

/* ---------- proposta: cards com elevação 3D ---------- */
.plans{position:relative;overflow:hidden;isolation:isolate}
.plans::before{content:"";position:absolute;z-index:-1;width:60vmax;height:60vmax;right:-28vmax;top:-30vmax;border-radius:50%;background:radial-gradient(closest-side,rgba(212,252,121,.08),transparent 72%);pointer-events:none}
.deliver div{position:relative;overflow:hidden;transition:transform .7s var(--ease-out),box-shadow .5s}
.deliver div>*{position:relative}
.deliver div::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px circle at var(--mx,30%) var(--my,0%),rgba(212,252,121,.14),transparent 45%);opacity:0;transition:opacity .45s}
.deliver div:hover::before{opacity:1}
.deliver div:hover{box-shadow:0 34px 60px -30px rgba(0,0,0,.95),0 0 0 1px rgba(212,252,121,.2),0 0 44px -18px rgba(212,252,121,.4)}
.deliver div.tilting{transition:transform .12s linear,box-shadow .5s}

/* ---------- galerias: widescreen, Ken Burns, rolo de filme ---------- */
.kb{position:relative;display:block;overflow:hidden;cursor:zoom-in;isolation:isolate;background:#0a0a0a;outline-offset:3px}
.kb img{width:100%;height:100%;max-width:none;object-fit:cover;transform-origin:var(--ox,50%) var(--oy,50%);animation:kb 18s ease-in-out infinite alternate;animation-play-state:paused;transition:filter .6s}
.kb.play img{animation-play-state:running}
@keyframes kb{from{transform:scale(1.03)}to{transform:scale(1.15) translate(var(--tx,1.5%),var(--ty,-1.5%))}}
.kb:hover img,.kb:focus-visible img{filter:brightness(1.1) contrast(1.05)}

.gal .kb{flex:none;width:250px;height:188px;border-radius:16px;scroll-snap-align:start}
.gal .kb.tall{width:130px}
.gal .kb img{border-radius:0;aspect-ratio:auto;height:100%}
.gal .kb::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;box-shadow:inset 0 0 0 0 #000,inset 0 0 0 0 #000;transition:box-shadow .6s var(--ease-out)}
.gal .kb:hover::before,.gal .kb:focus-visible::before{box-shadow:inset 0 22px 0 0 #000,inset 0 -22px 0 0 #000}
.gal .kb::after{content:attr(data-cap);position:absolute;left:0;right:0;bottom:0;z-index:2;height:22px;padding:0 .8rem;font:500 .72rem/22px "DM Sans",sans-serif;color:#ddd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translateY(6px);transition:opacity .45s,transform .45s var(--ease-out);pointer-events:none}
.gal .kb:hover::after,.gal .kb:focus-visible::after{opacity:1;transform:none}
@media(min-width:900px){.gal .kb,.gal .kb.tall{width:100%;height:auto;aspect-ratio:4/3}.gal .kb.tall{grid-row:span 2;aspect-ratio:auto;height:100%}}

.strip{gap:3px}
.strip .kb{flex:none;width:128px;height:186px;padding:13px 4px;border-radius:4px;scroll-snap-align:start;transition:box-shadow .4s;background:#0b0b0b}
.strip .kb img{height:100%}
/* película por cima da foto: janela recortada (o zoom fica dentro do quadro) + furos */
.strip .kb::before{content:"";position:absolute;inset:13px 4px;z-index:1;border-radius:3px;box-shadow:0 0 0 40px #0b0b0b;pointer-events:none}
.strip .kb::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:repeating-linear-gradient(90deg,#3b3b37 0 7px,transparent 7px 13px) 3px 3px/calc(100% - 6px) 6px no-repeat,
    repeating-linear-gradient(90deg,#3b3b37 0 7px,transparent 7px 13px) 3px calc(100% - 3px)/calc(100% - 6px) 6px no-repeat}
.strip .kb:hover,.strip .kb:focus-visible{box-shadow:0 0 0 1px rgba(212,252,121,.55),0 12px 30px -10px rgba(212,252,121,.4)}
@media(min-width:900px){.strip .kb{width:148px;height:213px}}

/* ---------- lightbox ---------- */
dialog.cine{overflow:visible;outline:none}
dialog.cine::backdrop{background:rgba(0,0,0,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:fade .45s ease}
@keyframes fade{from{opacity:0}}
dialog.cine img{max-width:92vw;max-height:80vh;box-shadow:0 40px 120px -20px #000,0 0 0 1px rgba(255,255,255,.07)}
dialog.cine img.swap{animation:lbIn .6s var(--ease-out)}
@keyframes lbIn{from{opacity:0;transform:translateX(calc(var(--dir,0) * 48px)) scale(.95);filter:blur(10px)}}
.lb-cap{position:fixed;left:50%;bottom:max(1.3rem,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(88vw,60ch);text-align:center;color:#d6d6cf;font-size:.95rem}
.lb-count{position:fixed;top:1.25rem;left:1.3rem;color:var(--mute);font:600 .8rem Poppins,sans-serif;letter-spacing:.12em}
.lb-close,.lb-nav{position:fixed;width:3rem;height:3rem;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(18,18,18,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0;transition:border-color .3s,color .3s,transform .3s var(--ease-out)}
.lb-close svg,.lb-nav svg{width:1.3rem;height:1.3rem}
.lb-close:hover,.lb-nav:hover{border-color:var(--lime);color:var(--lime)}
.lb-close{top:.8rem;right:.8rem}
.lb-nav{top:50%;margin-top:-1.5rem}
.lb-prev{left:1rem}.lb-next{right:1rem}
.lb-prev:hover{transform:translateX(-3px)}.lb-next:hover{transform:translateX(3px)}
@media(max-width:640px){.lb-nav{top:auto;bottom:4.4rem;margin:0}.lb-prev{left:calc(50% - 3.6rem)}.lb-next{right:calc(50% - 3.6rem)}}

/* ---------- quem vai te entrevistar + livro 3D ---------- */
.about .wrap{position:relative;isolation:isolate}
.about .wrap::before{content:"";position:absolute;z-index:-1;width:46vmax;height:46vmax;left:-14vmax;top:50%;margin-top:-23vmax;border-radius:50%;background:radial-gradient(closest-side,rgba(212,252,121,.08),transparent 72%);pointer-events:none}
.about img.p{box-shadow:0 46px 90px -40px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.05);transition:filter .6s}
.about img.p:hover{filter:brightness(1.06)}
.book{transition:border-color .45s,box-shadow .5s,transform .5s var(--ease-out)}
.book:hover{border-color:rgba(212,252,121,.45);box-shadow:0 26px 60px -30px rgba(212,252,121,.4);transform:translateY(-3px)}
.book .cover{position:relative;flex:none;display:block;width:76px;margin:.3rem .5rem .3rem .2rem;transform:perspective(700px) rotateY(-28deg) rotateX(3deg);transform-origin:35% 50%;transition:transform 1s var(--ease-out);filter:drop-shadow(14px 18px 14px rgba(0,0,0,.75)) drop-shadow(0 0 18px rgba(212,252,121,.1))}
.book .cover img{position:relative;z-index:1;width:76px;border-radius:2px 5px 5px 2px}
.book .cover::before{content:"";position:absolute;inset:0;z-index:2;border-radius:2px 5px 5px 2px;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.4) 0,rgba(255,255,255,.22) 4%,transparent 10%,transparent 82%,rgba(255,255,255,.14))}
.book .cover::after{content:"";position:absolute;top:3px;bottom:3px;right:-6px;width:7px;border-radius:0 2px 2px 0;background:repeating-linear-gradient(90deg,#f3f0e6 0 1px,#cfcabd 1px 2px)}
.book:hover .cover{transform:perspective(700px) rotateY(-8deg) rotateX(0) scale(1.05)}

/* ---------- palestras, parceiros, mídia, rodapé ---------- */
.row{background:linear-gradient(90deg,rgba(212,252,121,.08),transparent 70%) no-repeat 0 0/0% 100%;transition:background-size .7s var(--ease-out)}
.row:hover,.row:focus-visible{background-size:100% 100%}
.row b{display:inline-block;transition:transform .5s var(--ease-out),color .25s}
.row:hover b,.row:focus-visible b{transform:translateX(.5rem);color:var(--lime)}
.row::after{transition:transform .5s var(--ease-out)}
.row:hover::after{transform:translateX(.35rem)}
.row span{transition:color .3s}
.row:hover span{color:var(--text)}
.fine a,footer a{text-decoration:none;padding-bottom:1px;transition:background-size .5s var(--ease-out),color .3s;
  background:linear-gradient(var(--lime),var(--lime)) 0 100%/0 1px no-repeat,linear-gradient(#4a4a46,#4a4a46) 0 100%/100% 1px no-repeat}
.fine a:hover,footer a:hover{background-size:100% 1px,100% 1px;color:var(--lime)}
footer .legal{letter-spacing:.02em}

/* ---------- convite final ---------- */
.final{position:relative;overflow:hidden;isolation:isolate}
.final::before{content:"";position:absolute;inset:-40%;z-index:-1;pointer-events:none;background:radial-gradient(38% 38% at 30% 40%,rgba(255,255,255,.42),transparent 70%),radial-gradient(32% 32% at 74% 70%,rgba(255,255,255,.24),transparent 70%);animation:drift 14s ease-in-out infinite alternate}
.final .btn:hover{box-shadow:0 18px 40px -14px rgba(0,0,0,.55)}

/* ---------- acessibilidade: menos movimento ---------- */
@media (prefers-reduced-motion:reduce){
  .grain,.hero::before,.hero::after,.final::before,.stage::before{animation:none}
  .js header,.js .hero h1,.js .hero h1 span,.js .hero .lead,.js .hero .cta>*,.js .stage img,.js .stage .chip{animation:none}
  .js .rv{opacity:1;transform:none;transition:none}
  .kb img{animation:none}
  .btn::after{display:none}
  dialog.cine img.swap,dialog.cine::backdrop{animation:none}
}