.hero{position:relative}
.hero-stage{position:relative;height:100svh;min-height:600px;overflow:hidden;isolation:isolate}
.hero-art{position:absolute;inset:0;z-index:0;--p:1}
.hero-art svg{width:100%;height:100%}
.scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(10,10,18,0) 35%,rgba(10,10,18,.62) 100%)}

/* Ilustração: tudo derivado de --p, só stroke-dashoffset, transform e opacity */
.bay-row{fill:none;stroke:var(--accent);stroke-opacity:.85;stroke-width:3;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:calc(1 - clamp(0, (var(--p) - .22 - var(--i) * .035) * 5, 1))}
.car{transform-box:fill-box;--ck:clamp(0, (var(--p) - .5 - var(--i) * .011) * 7, 1);
  opacity:var(--ck);transform:translateY(calc((1 - var(--ck)) * -90px))}
.light{opacity:clamp(0, (var(--p) - .55) * 5, 1)}
.settle-glow{opacity:clamp(0, (var(--p) - .78) * 5, 1)}

/* Topo estático: é o padrão sem JS, e o que as condições mostram */
.hero-bands{display:none}
.hero-static{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:18px;
  padding:0 max(16px,calc((100% - 1180px)/2)) clamp(48px,10vh,96px);text-shadow:var(--tshadow);
  background:linear-gradient(to top,rgba(11,20,38,.94) 0%,rgba(11,20,38,.6) 45%,rgba(11,20,38,0) 75%)}
.static-title{font-size:clamp(2.6rem,11vw,5.2rem);max-width:12ch}
.static-sub{max-width:34ch;font-size:1.15rem}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.ctas .btn{text-shadow:none}

/* Topo animado */
html.scrub .hero{height:560vh}
html.scrub .hero-stage{position:sticky;top:0;height:100vh;min-height:0}
html.scrub .hero-bands{display:block}
html.scrub .hero-static{display:none}

@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){
  html.scrub .hero{height:auto}
  html.scrub .hero-stage{position:relative;height:100svh;min-height:600px}
  html.scrub .hero-bands{display:none}
  html.scrub .hero-static{display:flex}
}

/* Faixas */
/* Faixas laterais (1, 2, 3): a ilustração do pátio ocupa uma faixa central
   travada pelo SVG (viewBox 1600x900, retângulo do pátio em x 520..1080,
   preserveAspectRatio slice). Rodada 2: o grupo `.yard-scale` encolhe essa
   ilustração para 80% em torno do centro (800,450), então a meia-largura
   projetada na tela cai de 280 para 224 unidades de viewBox: 224 *
   max(largura/1600, altura/900) = max(14vw, 24.89vh). As faixas laterais
   têm que caber entre a borda da tela e essa linha, com folga. */
.band{position:absolute;z-index:2;top:50%;transform:translateY(-50%);width:min(34vw,520px);
  opacity:0;pointer-events:none;text-shadow:var(--tshadow);--k:1}
.band.live{pointer-events:auto}
.band-l,.band-r{width:calc(50vw - max(14vw,24.89vh) - max(24px,(100% - 1280px)/2 + 24px) - 40px);min-width:160px}
.band-l{left:max(24px,calc((100% - 1280px)/2 + 24px))}
.band-r{right:max(24px,calc((100% - 1280px)/2 + 24px));text-align:right}
.band-settle{left:50%;top:auto;bottom:11vh;transform:translateX(-50%);width:min(760px,92vw);text-align:center}
.band::before{content:"";position:absolute;inset:-18% -14%;z-index:-1;pointer-events:none;
  opacity:calc(.25 + .75 * var(--k,1));
  background:radial-gradient(ellipse 74% 62% at 50% 50%,rgba(5,5,10,.66) 0%,rgba(5,5,10,.44) 46%,rgba(5,5,10,0) 76%)}
.band-title{font-family:var(--f-display);font-style:italic;font-weight:800;font-stretch:125%;
  font-size:clamp(2.2rem,1rem + 2.1vw,4.5rem);line-height:1.1;margin:0;text-wrap:balance}
.band-title + .band-title{margin-top:.3em}
.band-em{color:var(--accent-hover)}
.settle-brand{font-family:var(--f-display);font-style:italic;font-weight:800;font-stretch:125%;
  font-size:clamp(3rem,7vw,6.2rem);line-height:1}
.band-settle .sub{margin-top:14px;font-size:1.2rem;
  --ks:clamp(0, (var(--k,1) - .66) * 4, 1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks)) * 12px))}
.band-settle .ctas{justify-content:center;
  --kb:clamp(0, (var(--k,1) - .78) * 5, 1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb)) * 12px))}

/* Entradas por palavra/letra, dirigidas por --k da faixa */
.split .w{display:inline-block}
[data-split="rise"] .w{--kc:clamp(0, (var(--k,1) - var(--th,0)) * 2.4, 1);
  opacity:var(--kc);transform:translateY(calc((1 - var(--kc)) * .6em))}
[data-split="drift"] .w{--kc:clamp(0, (var(--k,1) - var(--th,0)) * 2.8, 1);
  opacity:var(--kc);transform:translateY(calc((1 - var(--kc)) * -.8em))}
[data-split="grid"] .c{display:inline-block;--kc:clamp(0, (var(--k,1) - var(--th,0)) * 2.6, 1);
  opacity:var(--kc);transform:translateX(calc((1 - var(--kc)) * var(--jx,0px)))}

/* Estrutura de vídeo (desligada enquanto HERO_VIDEO = null) */
.hero-video{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity .8s var(--ease-out);will-change:transform}
.video-ready .hero-video{opacity:1}
.video-failed .hero-video{display:none}
.ring{position:absolute;z-index:3;left:50%;bottom:28px;width:44px;height:44px;margin-left:-22px;color:var(--accent-hover)}

@media (max-height:560px){.band-settle{bottom:6vh}}