/* página inicial: o palco guiado pela rolagem e o ensaio interativo */
.hero{position:relative;height:460vh;background:#07090C}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate}
.shots{position:absolute;inset:0;z-index:0}
.shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;opacity:0;will-change:transform,opacity;transform:translateZ(0)}
.shot.s1{opacity:1}
.shot.s3{object-position:75% 30%}
/* modo vídeo: o vídeo do Higgsfield substitui as fotos 1 e 2; se falhar, as fotos voltam */
.vwrap{position:absolute;inset:0;display:none;will-change:opacity}
.stage.vmode .vwrap{display:block}
.stage.vmode .shot.s1,.stage.vmode .shot.s2{display:none}
.vposter{position:absolute;inset:0;background-size:cover;background-position:50% 50%}
.vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s var(--ease-out);transform:translateZ(0);will-change:transform}
.stage.video-ready .vid{opacity:1}
.beam{position:absolute;inset:-10% -20% 0;z-index:1;pointer-events:none;mix-blend-mode:screen;opacity:.35;will-change:transform,opacity;
  background:conic-gradient(from 180deg at 50% -6%,transparent 0deg,transparent 163deg,rgba(255,224,190,.10) 170deg,rgba(255,226,196,.22) 180deg,rgba(255,224,190,.10) 190deg,transparent 197deg)}
.vig{position:absolute;left:50%;top:46%;width:220vmax;height:220vmax;margin:-110vmax 0 0 -110vmax;z-index:2;pointer-events:none;will-change:transform;
  background:radial-gradient(circle at 50% 50%,rgba(7,9,12,0) 0,rgba(7,9,12,0) 9%,rgba(7,9,12,.55) 17%,rgba(7,9,12,.94) 30%)}
.scrim{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(7,9,12,0) 35%,rgba(7,9,12,.62) 100%),linear-gradient(0deg,rgba(17,21,28,1) 0%,rgba(17,21,28,0) 18%)}
.dust{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.6}
.dust i{position:absolute;top:0;width:3px;height:3px;border-radius:50%;background:rgba(255,232,210,.55);filter:blur(.5px);animation:dust 16s linear infinite}
@keyframes dust{0%{transform:translate(0,-5vh);opacity:0}15%{opacity:1}85%{opacity:.8}100%{transform:translate(4vw,90vh);opacity:0}}

.band{position:absolute;z-index:4;top:50%;transform:translateY(-50%);width:min(560px,40vw);display:grid;gap:22px;text-shadow:var(--tshadow);opacity:0;will-change:opacity}
.band::before{content:"";position:absolute;inset:-30% -40%;z-index:-1;pointer-events:none;opacity:calc(.25 + .75*var(--k,1));
  background:radial-gradient(ellipse 60% 56% at 50% 50%,rgba(5,6,10,.66) 0%,rgba(5,6,10,.44) 46%,rgba(5,6,10,0) 76%)}
.band.b1{left:max(24px,calc((100vw - 1200px)/2))}
.band.b2{right:max(24px,calc((100vw - 1200px)/2))}
.band.b3{left:max(24px,calc((100vw - 1200px)/2));width:min(600px,46vw)}
.band.b1{opacity:1}
.band .t{font-family:var(--f-display);font-stretch:118%;font-weight:800;font-size:clamp(2.4rem,5vw,4.6rem);line-height:1.02;letter-spacing:-.01em;margin:0}
.band.b3 .t{font-size:clamp(2.6rem,5.4vw,5rem)}
.band .s{font-size:clamp(1.02rem,1.3vw,1.2rem);color:#D4D8DF;max-width:44ch}
.band .cue{color:#C3C9D2}
.band .btn{text-shadow:none}
.band .btn-ghost{background:rgba(12,15,20,.55)}
.w,.c{display:inline-block}
/* entradas: só transform e opacity, guiadas por --k */
.b1 .kick,.b1 .s{opacity:clamp(0,calc(var(--k,0)*1.6 - .3),1);transform:translateY(calc((1 - var(--k,0))*14px))}
.b1 .tw{display:grid}
.b1 .tw > *{grid-area:1/1}
.b1 .soft{filter:blur(10px);opacity:calc(1 - var(--k,0))}
.b1 .sharp{opacity:var(--k,0)}
.b2 .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*30px))}
.b2 .kick,.b2 .s{opacity:clamp(0,calc((var(--k,0) - .45)*2.4),1);transform:translateY(calc((1 - clamp(0,calc((var(--k,0) - .45)*2.4),1))*12px))}
.b3 .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);--ks:clamp(0,(var(--k,0) - var(--th,0) - var(--sd,.1))*var(--ss,3.2),1);
  opacity:var(--kc);transform:scale(calc(.6 + (.4 + var(--ov,.12))*var(--kc) - var(--ov,.12)*var(--ks)))}
.b3 .w.em{--ov:.24;--sd:.16;--ss:2.6;color:var(--accent)}
.b3 .kick{opacity:clamp(0,calc(var(--k,0)*3),1)}
.b3 .s{--ks2:clamp(0,(var(--k,0) - .62)*4,1);opacity:var(--ks2);transform:translateY(calc((1 - var(--ks2))*14px))}
.b3 .btn-row{--kb:clamp(0,(var(--k,0) - .76)*5,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*14px))}

.iop-meter{position:absolute;z-index:5;right:24px;top:50%;transform:translateY(-50%);display:grid;gap:14px;font-family:var(--f-mono);font-size:.78rem;letter-spacing:.1em}
.iop-meter span{display:flex;align-items:center;gap:10px;color:rgba(236,232,225,.38);transition:color .5s var(--ease-out)}
.iop-meter span::before{content:"";width:18px;height:1px;background:currentColor;transition:width .5s var(--ease-out)}
.iop-meter span.on{color:var(--accent)}
.iop-meter span.on::before{width:30px}
.scroll-cue{position:absolute;z-index:5;left:50%;bottom:30px;transform:translateX(-50%);display:grid;justify-items:center;gap:10px;
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:#C3C9D2;transition:opacity .5s var(--ease-out)}
.scroll-cue i{width:1px;height:42px;background:linear-gradient(var(--accent),transparent);animation:cueDrop 2.4s ease-in-out infinite;animation-delay:-.6s;transform-origin:top}
@keyframes cueDrop{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
.scroll-cue.gone{opacity:0}
@media (max-height:560px){.iop-meter,.scroll-cue{display:none}}

/* hero estático: celular, tablet em pé, toque em pé, celular deitado, movimento reduzido */
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse), (orientation: landscape) and (pointer: coarse) and (max-height: 560px), (prefers-reduced-motion: reduce){
  .hero{height:auto}
  .stage{position:relative;height:auto;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end}
  .shot.s1,.shot.s2,.vwrap,.stage.vmode .vwrap{display:none}
  .shot.s3{opacity:1;object-position:80% 20%}
  .beam{opacity:.8;transform:translateX(24%)}
  .vig{display:none}
  .scrim{background:linear-gradient(0deg,rgba(17,21,28,1) 0%,rgba(12,15,20,.86) 38%,rgba(12,15,20,.2) 70%,rgba(12,15,20,.35) 100%)}
  .band.b1,.band.b2,.iop-meter,.scroll-cue,.dust{display:none}
  .band.b3{position:relative;top:auto;left:auto;right:auto;transform:none;width:auto;max-width:640px;margin:0 auto;padding:calc(var(--header-h) + 34vh) 24px 64px;opacity:1;--k:1}
  .band.b3::before{inset:10% -10% 0}
  .band.b3 .t{font-size:clamp(2.1rem,9.6vw,3.6rem)}
}

/* ensaio: segure para falar */
.hold{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(28px,5vw,70px);align-items:center;
  border:1px solid var(--line);border-radius:24px;padding:clamp(24px,4vw,56px);background:linear-gradient(160deg,rgba(26,32,41,.85),rgba(12,15,20,.6))}
.wave-box{position:relative;border-radius:16px;background:rgba(7,9,12,.6);border:1px solid var(--line);aspect-ratio:5/2;overflow:hidden}
.wave-box svg{position:absolute;inset:0;width:100%;height:100%}
.wave-box path{fill:none;stroke:var(--text-primary);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.wave-box .mid{stroke:var(--line);stroke-width:1}
.wave-box .meter{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--accent);transform:scaleX(var(--h,0));transform-origin:left}
.hold-status{font-family:var(--f-display);font-stretch:112%;font-weight:700;font-size:clamp(1.3rem,2.2vw,1.8rem);line-height:1.2;min-height:2.4em;margin-top:22px}
.hold-side{display:grid;gap:22px;justify-items:start}
.mic{position:relative;display:inline-flex;align-items:center;gap:14px;min-height:64px;padding:0 28px 0 12px;border-radius:999px;border:1px solid var(--accent);
  background:rgba(242,106,27,.08);cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;font-weight:600;font-size:1.02rem;
  transition:background-color .3s var(--ease-out),transform .3s var(--ease-out)}
.mic .ic{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--accent);color:#14100C}
.mic .ic svg{width:22px;height:22px}
.mic.holding{background:rgba(242,106,27,.2);transform:scale(.98)}
.hold-results{list-style:none;margin:0;padding:0;display:grid;gap:12px;width:100%}
.hold-results li{display:flex;gap:12px;align-items:baseline;padding:14px 0;border-top:1px solid var(--line);color:var(--text-secondary);opacity:.35;transform:translateX(-6px);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out),color .7s var(--ease-out)}
.hold-results li b{font-family:var(--f-mono);font-weight:500;font-size:.72rem;color:var(--accent)}
.hold.done .hold-results li{opacity:1;transform:none;color:var(--text-primary)}
.hold.done .hold-results li:nth-child(2){transition-delay:.2s}
.hold.done .hold-results li:nth-child(3){transition-delay:.4s}
.hold-hint{font-size:.9rem;color:var(--text-secondary)}
@media (max-width:900px){.hold{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.hold .hold-results li{opacity:1;transform:none;color:var(--text-primary)}}
