/* hero-vivo-20260906a.css — herói "vivo" da home, agora com a arte FATIADA EM CAMADAS.
   Substitui hero-vivo-20260905a.css (que trabalhava a foto chapada). O que muda:
   (1) a arte deixou de ser um <img> e virou 4 camadas com alfa — fundo/luz, laptop, iPad,
       iPhone. Fundo + as 3 camadas recompõem a arte original com diferença 0 por pixel no
       miolo do quadro (a borda tem vinheta assada no alfa, de propósito: sem ela a arte vira
       um retângulo visível quando não cobre a dobra inteira);
   (2) os três aparelhos ENTRAM JUNTOS, como uma peça só. Entrada em estágios deixava o
       laptop aparecendo recortado enquanto o iPad não chegava — a arte-fonte não tem os
       pixels do laptop que ficam atrás dele;
   (3) véu escuro sobre a metade esquerda da arte, para a copy não competir com a imagem.
       Só escurece, não borra: os aparelhos ficam com a nitidez original;
   (4) indicadores animados em SVG ADITIVO (mix-blend-mode:screen) rodando em loop lento —
       gauge, barras, KPIs, linha de evolução e o anel do celular. Como tudo volta a
       opacidade 0 entre os ciclos, a cena em repouso é idêntica à arte original.
   Segue valendo do 20260905a: varredura por máscara de luminância, orbe, rótulos-chip e
   parallax só em ponteiro fino. SAIU o vídeo na tela do notebook: o loop e o pôster
   (hero-tela-*-20260905) são uma captura da tela do DESIGN ANTIGO — headline, nav e tudo —,
   então não cabem dentro desta arte. Para trazer o movimento de volta é preciso um loop novo,
   enquadrado só nos dois apresentadores.
   Só transform/opacity animam. prefers-reduced-motion desliga tudo.
   Cache immutable: nome novo a cada mudança. */

/* chão do herói = preto da arte; a grade-blueprint sai; o halo genérico também */
.hero:has(.hero-vivo){background:#000;}
.hero:has(.hero-vivo)::before{display:none;}
.hero:has(.hero-vivo) .hero-halo{display:none;}
.hero:has(.hero-vivo)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:140px;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,12,14,0),var(--bg-0,#0B0C0E));}
.hero-split>.hero-foto.hero-vivo{overflow:visible;}

/* enquadramento herdado da passagem anterior */
 /* largura ajustada a ESTA arte: o iPad fica na borda direita da viewport, não além dela */
.hero-vivo .hv-stage{position:relative;width:140%;margin-left:-22%;}
@media(max-width:1380px){.hero-vivo .hv-stage{width:132%;margin-left:-22%;}}
@media(max-width:1000px){.hero-vivo .hv-stage{width:112%;margin-left:-6%;}}
@media(max-width:640px){.hero-vivo .hv-stage{width:120%;margin-left:-10%;}}

/* (1) camadas: a caixa mantém a proporção da arte; cada peça é posicionada em % dela */
.hv-art{position:relative;width:100%;aspect-ratio:1672/941;z-index:1;}
.hv-ly{position:absolute;pointer-events:none;}
/* neutraliza a regra de foto chapada do heroi-produto (.hero-split>.hero-foto img:
   width:136%, margin-left:-6% e máscara radial) — aqui cada camada já tem a sua caixa */
.hero-split>.hero-foto .hv-ly img{display:block;width:100%;max-width:none;height:auto;margin-left:0;
  -webkit-mask-image:none;mask-image:none;}
@media(max-width:1000px){.hero-split>.hero-foto .hv-ly img{width:100%;margin-left:0;}}
@media(max-width:640px){.hero-split>.hero-foto .hv-ly img{width:100%;margin-left:0;}}
/* a ordem de empilhamento é a da cena: fundo, laptop, VÍDEO, iPad, iPhone.
   É ela que faz o tablet e o celular passarem na frente do vídeo sem recorte manual. */
.hv-ly--fundo {left:0;         top:0;         width:100%;      z-index:1;}
.hv-ly--note  {left:1.9139%;   top:4.8884%;   width:60.5263%;  z-index:2;}
.hv-ly--tab   {left:59.3301%;  top:3.4006%;   width:39.0550%;  z-index:4;}
.hv-ly--fone  {left:47.1890%;  top:30.4995%;  width:18.6005%;  z-index:5;}

/* (3) véu: baixa a arte atrás da copy sem borrar nada */
.hv-veu{position:absolute;inset:0;z-index:8;pointer-events:none;
  background:
    linear-gradient(96deg,
      rgba(5,6,8,.94) 0%, rgba(5,6,8,.90) 16%, rgba(5,6,8,.74) 26%,
      rgba(5,6,8,.44) 35%, rgba(5,6,8,.16) 44%, rgba(5,6,8,0) 54%),
    linear-gradient(180deg, rgba(5,6,8,.30) 0%, rgba(5,6,8,0) 14%,
                            rgba(5,6,8,0) 74%, rgba(5,6,8,.42) 100%);}
@media(max-width:1000px){
  .hv-veu{background:linear-gradient(180deg, rgba(5,6,8,.18) 0%, rgba(5,6,8,0) 40%,
                                             rgba(5,6,8,.28) 100%);}
}

/* (2) orbe: luz atrás dos aparelhos, respirando devagar */
.hv-orb{position:absolute;left:50%;top:52%;width:78%;aspect-ratio:1.6/1;z-index:0;pointer-events:none;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center,rgba(59,130,246,.20) 0%,rgba(59,130,246,.08) 38%,transparent 68%);
  animation:hv-breathe 7s cubic-bezier(0.16,1,0.3,1) infinite alternate;}
@keyframes hv-breathe{from{transform:translate(-50%,-50%) scale(.94);opacity:.75}to{transform:translate(-50%,-50%) scale(1.06);opacity:1}}


/* varredura: faixa de luz mascarada pela luminância da arte */
.hv-sweep{position:absolute;inset:0;z-index:7;pointer-events:none;overflow:hidden;mix-blend-mode:screen;
  -webkit-mask-image:url(/assets/img/hero-sweep-mask-20260906.jpg);mask-image:url(/assets/img/hero-sweep-mask-20260906.jpg);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-source-type:luminance;mask-mode:luminance;}
.hv-sweep::before{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:34%;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.08) 30%,rgba(190,212,255,.30) 50%,rgba(255,255,255,.08) 70%,transparent 100%);
  transform:translateX(-140%) skewX(-8deg);
  animation:hv-sweep 9s cubic-bezier(0.16,1,0.3,1) 2.4s infinite;}
@keyframes hv-sweep{0%{transform:translateX(-140%) skewX(-8deg)}38%,100%{transform:translateX(420%) skewX(-8deg)}}

/* (4) indicadores: SVG aditivo, um por aparelho, para acompanharem o parallax da sua camada.
   Se ficarem num overlay único e parado, o brilho descola do gráfico e vira borrão branco. */
.hv-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen;z-index:6;}

/* rótulos-chip */
.hv-tags{position:absolute;inset:0;z-index:9;pointer-events:none;}
.hv-tag{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:6px 10px 6px 8px;border-radius:6px;
  font-family:var(--mono2,var(--mono));font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text);
  background:rgba(18,20,23,.74);border:1px solid var(--border-subtle,rgba(148,163,184,.12));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 24px -18px rgba(0,0,0,.8);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);white-space:nowrap;}
.hv-tag i{width:6px;height:6px;border-radius:50%;background:var(--brand);position:relative;flex:none;}
.hv-tag i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid rgba(59,130,246,.7);
  animation:hv-ping 2.6s cubic-bezier(0.16,1,0.3,1) infinite;}
@keyframes hv-ping{0%{transform:scale(.4);opacity:.9}70%,100%{transform:scale(1.7);opacity:0}}
.hv-tag b{font-weight:500;color:var(--muted);}
/* reposicionados para os aparelhos DESTA arte */
.hv-tag--tab{left:63%;top:5%;}
.hv-tag--fone{left:41%;top:89%;}
.hv-tag--note{left:23%;top:73%;}
@media(max-width:1000px){.hv-tag--note{left:16%;top:70%;}}
@media(max-width:640px){.hv-tags{display:none;}}

/* estados iniciais da entrada (só quando o GSAP carregou: html.gs) */
html.gs .hero-vivo .hv-art{opacity:0;}
html.gs .hero-vivo .hv-veu{opacity:0;}
html.gs .hero-vivo .hv-tag{opacity:0;}
html.gs .hero-vivo .hv-sweep::before{animation-play-state:paused;}
html.gs .hero-vivo.is-in .hv-sweep::before{animation-play-state:running;}

/* parallax: o JS escreve --px/--py em px; cada camada tem a sua profundidade, e o SVG de
   indicadores de um aparelho anda exatamente com a camada dele */
.hero-vivo{--px:0px;--py:0px;--sy:0px;}
@media(pointer:fine){
  .hero-vivo .hv-ly--fundo{transform:translate3d(calc(var(--px)*.18),calc(var(--py)*.18 + var(--sy)),0);}
  .hero-vivo .hv-ly--note{transform:translate3d(calc(var(--px)*.52),calc(var(--py)*.52 + var(--sy)),0);}
  .hero-vivo .hv-ly--tab,.hero-vivo #hv-fx-tab{transform:translate3d(calc(var(--px)*.70),calc(var(--py)*.70 + var(--sy)),0);}
  .hero-vivo .hv-ly--fone,.hero-vivo #hv-fx-fone{transform:translate3d(calc(var(--px)*1.02),calc(var(--py)*1.02 + var(--sy)),0);}
  .hero-vivo .hv-sweep{transform:translate3d(calc(var(--px)*.4),calc(var(--py)*.4 + var(--sy)),0);}
  .hero-vivo .hv-tags{transform:translate3d(var(--px),calc(var(--py) + var(--sy)*1.25),0);}
  .hero-vivo .hv-orb{margin-left:calc(var(--px)*-.8);margin-top:calc(var(--py)*-.8);}
}

@media(prefers-reduced-motion:reduce){
  .hv-orb,.hv-tag i::after,.hv-sweep::before{animation:none;}
  .hv-sweep,.hv-fx{display:none;}
  .hero-vivo{--px:0px;--py:0px;--sy:0px;}
}