/* Vesto ERP. Estilos do hero de scrub. Depende dos tokens em site.css. */

.hero{position:relative;height:var(--hero-vh,520vh);margin:0;z-index:1}
.hero .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--canvas)}
.hero .stage>*{position:absolute}
.hero .poster{inset:0;background:var(--canvas) center/cover no-repeat}
.hero video{inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s var(--ease-out);will-change:transform;transform:translateZ(0);pointer-events:none}
.hero .stage.video-ready video{opacity:1}
.hero .stage.video-failed video{display:none}
.hero .scrim{inset:0;pointer-events:none;background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(6,12,18,0) 35%,rgba(6,12,18,.62) 100%)}
.hero .vignette-top{left:0;right:0;top:0;height:22vh;pointer-events:none;background:linear-gradient(to bottom,rgba(6,12,18,.72),rgba(6,12,18,0))}

/* anel de carregamento honesto */
.hero .ring{left:50%;bottom:28px;width:44px;height:44px;margin-left:-22px;color:var(--accent);transform:rotate(-90deg);transition:opacity .5s var(--ease-out);opacity:.9}
.hero .ring circle{transition:stroke-dashoffset .12s linear}
.hero .ring.done{opacity:0}
.hero .cue{left:50%;bottom:26px;transform:translateX(-50%);opacity:0;transition:opacity .6s var(--ease-out);color:var(--text-secondary);font:500 .72rem/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.hero .cue.show,.hero .stage.video-ready .cue{opacity:.85}
.hero .cue svg{width:16px;height:16px;animation:cueBob 2.4s var(--ease-inout) -1.2s infinite}
@keyframes cueBob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ---------- faixas de legenda ---------- */
.band{--k:0;opacity:0;pointer-events:none;text-shadow:var(--tshadow);width:min(44vw,560px);top:50%;transform:translateY(-50%);transition:opacity .4s cubic-bezier(.33,1,.68,1)}
.band.on{pointer-events:auto}
.band.left{left:clamp(24px,7vw,120px)}
.band.right{right:clamp(24px,7vw,120px);text-align:right}
.band.center{left:50%;width:min(88vw,900px);transform:translate(-50%,-50%);text-align:center}
.band.settle{top:37%}
.band.deep::before{background:radial-gradient(ellipse 80% 68% at 50% 50%,rgba(4,9,14,.84) 0%,rgba(4,9,14,.60) 48%,rgba(4,9,14,0) 78%)}
.band.open .title{font-size:clamp(2.6rem,6vw,5.6rem)}
.band .btn{text-shadow:none}
.band::before{content:"";position:absolute;inset:-14% -12%;pointer-events:none;z-index:-1;opacity:calc(.25 + .75*var(--k,1));background:radial-gradient(ellipse 76% 64% at 50% 50%,rgba(4,9,14,.72) 0%,rgba(4,9,14,.50) 46%,rgba(4,9,14,0) 76%)}
.band.center::before{inset:-24% -18%;background:radial-gradient(ellipse 72% 66% at 50% 50%,rgba(4,9,14,.78) 0%,rgba(4,9,14,.52) 48%,rgba(4,9,14,0) 76%)}
.band .kicker{display:inline-block;font:500 .74rem/1 var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:18px;opacity:calc(var(--k)*1);transform:translateY(calc((1 - var(--k))*8px));padding:8px 12px;border-radius:10px;background:rgba(8,8,15,.7);border:1px solid rgba(96,96,126,.3);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);text-shadow:0 1px 3px rgba(5,5,10,.85)}
.band h1,.band h2,.band .title{font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;line-height:1.04;color:var(--text-primary);margin:0}
.band .title{font-size:clamp(2rem,4.6vw,4.4rem);max-width:12ch}
.band h1{font-size:clamp(2.2rem,5.4vw,5.2rem);max-width:16ch;margin-inline:auto}
.band .lede{font:400 clamp(1rem,1.25vw,1.2rem)/1.5 var(--font-text);color:#C9D4DC;margin:18px 0 0;max-width:36ch}
.band.right .lede,.band.right .title{margin-left:auto}
.band.center .lede{margin-inline:auto;font-size:clamp(1.05rem,1.4vw,1.3rem);max-width:46ch}
.band .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.band .vis{display:inline}
.band .w{display:inline-block;white-space:nowrap;transition:transform .6s cubic-bezier(.22,1,.36,1),opacity .5s cubic-bezier(.33,1,.68,1);will-change:transform,opacity}
.band .c{display:inline-block}

/* entradas: só transform e opacity, guiadas por --k, reversíveis */
.band[data-entry="scatter"] .c,
.band[data-entry="grid"] .c,
.band[data-entry="weave"] .c{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);
  transform:translate(calc((1 - var(--kc))*var(--jx,0px)),calc((1 - var(--kc))*var(--jy,0px))) rotate(calc((1 - var(--kc))*var(--jr,0deg)))}
.band[data-entry="drift"] .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*1.9,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*(1 - var(--kc))*-20px))}
.band[data-entry="punch"] .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*1.9,1);--ks:clamp(0,(var(--k,0) - var(--th,0) - var(--sd,.12))*var(--ss,2.2),1);opacity:var(--kc);
  transform:scale(calc(0.86 + (0.14 + var(--ov,.05))*var(--kc) - var(--ov,.05)*var(--ks)))}
.band[data-entry="punch"] .w.em{--ov:.1;--sd:.16;--ss:2;color:var(--accent)}
.band[data-entry="rise"] .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*1.9,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*(1 - var(--kc))*20px))}
/* soft: cada palavra sobe 14px e surge, em escalonamento longo; a entrada mais quieta e elegante */
.band[data-entry="soft"] .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*1.9,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*(1 - var(--kc))*16px))}
.band[data-entry="soft"] .lede,.band[data-entry="sway"] .lede,.band[data-entry="drift"] .lede,.band[data-entry="punch"] .lede{--ks:clamp(0,(var(--k,0) - .4)*2,1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks))*(1 - var(--ks))*12px))}
/* sway: palavras chegam alternando dos dois lados, ecoando os fios se cruzando */
.band[data-entry="sway"] .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*1.9,1);opacity:var(--kc);transform:translate(calc((1 - var(--kc))*(1 - var(--kc))*var(--jx,0px)),calc((1 - var(--kc))*(1 - var(--kc))*10px))}
.band[data-entry="rise"] .lede{--ks:clamp(0,(var(--k,0) - .5)*2.6,1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks))*(1 - var(--ks))*14px))}
.band[data-entry="rise"] .actions{--kb:clamp(0,(var(--k,0) - .66)*3,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*(1 - var(--kb))*12px))}
.band[data-entry="blur"] .split{position:relative;display:block}
.band[data-entry="blur"] .soft{position:absolute;inset:0;filter:blur(10px);opacity:calc(1 - var(--k,0));pointer-events:none}
.band[data-entry="blur"] .vis{opacity:var(--k,0)}
.band[data-entry="approach"] .split{--kc:var(--k,0);opacity:var(--kc);transform:scale(calc(0.86 + 0.14*var(--kc)));transform-origin:50% 60%}
.band .lede,.band .actions,.band .kicker{transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .55s cubic-bezier(.33,1,.68,1)}
.band .actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:28px}

/* assentamento: o site começa aqui. A camada de assento cobre a base do palco para a transição ler como chegada */
.hero .settle-fade{left:0;right:0;bottom:0;height:34vh;pointer-events:none;background:linear-gradient(to bottom,rgba(11,19,27,0),var(--canvas) 92%);opacity:clamp(0,(var(--p,0) - .84)*8,1)}

/* ---------- o hero estático (os cinco portões, idênticos ao JS) ---------- */
.hero .static-hero{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){
  .hero{height:auto;min-height:100svh}
  .hero .stage{position:relative;height:auto;min-height:100svh}
  .hero video,.hero .ring,.hero .cue,.hero .band,.hero .settle-fade,.hero .vignette-top{display:none}
  .hero .poster{background-image:var(--static-bg)}
  .hero .scrim{background:linear-gradient(to bottom,rgba(6,12,18,.55),rgba(6,12,18,.82))}
  .hero .static-hero{display:flex;position:relative;flex-direction:column;justify-content:flex-end;min-height:100svh;padding:120px 24px 56px;gap:18px;text-shadow:var(--tshadow)}
  .hero .static-hero .kicker{font:500 .72rem/1 var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
  .hero .static-hero h1{font:600 clamp(2rem,9vw,3.4rem)/1.05 var(--font-display);letter-spacing:-.02em;margin:0;color:var(--text-primary)}
  .hero .static-hero p{font:400 1.05rem/1.5 var(--font-text);color:var(--text-secondary);margin:0;max-width:40ch}
  .hero .static-hero .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
  .hero .static-hero .btn{text-shadow:none}
}
/* ---------- celular capaz: a jornada em quadros (classe m2, posta pelo JS só depois dos testes de capacidade) ----------
   Vence as regras dos portões estáticos acima por especificidade; sem JS ou sem a classe, nada disto se aplica. */
.hero.m2{height:var(--hero-vh-m,820vh);min-height:0}
.hero.m2 .stage{position:sticky;top:0;height:100vh;height:100svh;min-height:0}
.hero.m2 .poster{background-image:none}
.hero .frames{display:none}
.hero.m2 .frames{display:block;position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .7s var(--ease-out)}
.hero.m2 .stage.frames-ready .frames{opacity:1}
.hero.m2 .static-hero{display:none}
.hero.m2 .band,.hero.m2 .ring,.hero.m2 .settle-fade,.hero.m2 .vignette-top{display:block}
.hero.m2 .cue{display:flex}
.hero.m2 .scrim{background:linear-gradient(to bottom,rgba(6,12,18,.36),rgba(6,12,18,.16) 16%,rgba(6,12,18,.66) 34%,rgba(6,12,18,.70) 60%,rgba(6,12,18,.30) 80%,rgba(6,12,18,.50) 100%)}
.hero.m2 .band{left:20px;right:20px;width:auto;top:45%;bottom:auto;transform:translateY(-50%);text-align:left}
.hero.m2 .band.right,.hero.m2 .band.center{left:20px;right:20px;width:auto;transform:translateY(-50%);text-align:left}
.hero.m2 .band.settle{top:46%}
.hero.m2 .band::before,.hero.m2 .band.center::before,.hero.m2 .band.deep::before{inset:-48% -34% -48%;background:radial-gradient(ellipse 58% 56% at 50% 50%,rgba(4,9,14,.94) 0%,rgba(4,9,14,.76) 42%,rgba(4,9,14,.30) 68%,rgba(4,9,14,0) 84%)}
.hero.m2 .band .title{font-size:clamp(1.7rem,8vw,2.5rem);max-width:none}
.hero.m2 .band.open .title{font-size:clamp(2.4rem,11.5vw,3.5rem)}
.hero.m2 .band h1{font-size:clamp(1.85rem,8.8vw,2.7rem);max-width:none;margin-inline:0}
.hero.m2 .band .lede,.hero.m2 .band.center .lede{font-size:1rem;line-height:1.45;max-width:none;margin:14px 0 0}
.hero.m2 .band.right .lede,.hero.m2 .band.right .title{margin-left:0}
.hero.m2 .band .kicker{margin-bottom:12px;font-size:.68rem}
.hero.m2 .band .actions{justify-content:flex-start;margin-top:20px;gap:10px}
.hero.m2 .band .w{white-space:normal}
.hero.m2 .ring{bottom:calc(22px + env(safe-area-inset-bottom,0px))}
.hero.m2 .cue{bottom:calc(20px + env(safe-area-inset-bottom,0px))}

/* janela de desktop rasa: mantém o scrub, esconde os overlays pequenos */
@media (max-height:560px){.hero .cue,.hero .ring{display:none}}