/* =====================================================================
   SOUL CORE ADS · hero-arrow.css
   SETA DE CRESCIMENTO da Hero — v4.3

   O QUE MUDOU DA v4.2 (e por quê)
   Em produção o h1 quebra em 3 LINHAS, então o bloco de texto desce muito
   mais do que o mock previa: a seta cruzava subtítulo e botões. A correção
   não foi encolher — foi trocar a opacidade uniforme por um FADE DIRECIONAL:
   a cauda dissolve exatamente onde o texto vive e só a ponta brilha, no
   vazio do canto superior direito. O percurso completo (canto inferior
   esquerdo → superior direito) fica preservado.

   PILHA DE MÁSCARAS (aninhadas — cada nível com UMA máscara, multiplicadas
   pelo aninhamento; nada de mask-composite, cujo suporte é irregular)
     .hero-arrow        fade direcional  (cauda → ponta)
     .hero-arrow__in    elipse de leitura (protege a coluna de texto)
     .hero-arrow__draw  traçado (animado por --draw)

   DONOS DO transform (para nenhuma engine disputar a mesma propriedade)
     .hero-arrow        GSAP · parallax de scroll (script.js §6.5)
     .hero-arrow__in    parallax de cursor (--mx/--my, via JS)
     .hero-arrow__lead  luz da ponta (--draw)
   ===================================================================== */

/* Progresso do traçado. inherits:true de propósito: a MESMA propriedade
   move a máscara e a luz da ponta — sincronia por construção, não por
   dois timings que combinam de perto. */
@property --draw {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 100%;
}

.hero-arrow{
  position:absolute;
  z-index:0;                       /* .hero-inner é z-index:1 */
  pointer-events:none;
  user-select:none; -webkit-user-select:none;
  -webkit-user-drag:none;
  will-change:transform, opacity;
  contain:layout paint style;

  /* Proporção travada pelo arquivo real: distorcer é impossível. */
  aspect-ratio:2618 / 1331;

  left:8%;
  bottom:3%;
  width:94%;
  opacity:.88;

  /* FADE DIRECIONAL — o coração da v4.3.
     ~97deg acompanha o eixo da fita. A cauda entra em 0 e só a partir de
     ~60% do percurso o metal ganha corpo. */
  --wv-dir:linear-gradient(97deg,
      transparent 2%,
      rgba(0,0,0,.14) 28%,
      rgba(0,0,0,.58) 60%,
      rgba(0,0,0,.92) 82%,
      #000 94%);
  -webkit-mask-image:var(--wv-dir);
          mask-image:var(--wv-dir);
}

.hero-arrow__in{
  position:absolute; inset:0;
  /* elipse sobre a coluna de leitura, em coordenadas da caixa da seta */
  --wv-read:radial-gradient(40% 51% at 37% 56%,
      rgba(0,0,0,.16) 0%, rgba(0,0,0,.38) 60%, rgba(0,0,0,.82) 90%, #000 115%);
  -webkit-mask-image:var(--wv-read);
          mask-image:var(--wv-read);
  /* parallax de cursor (JS escreve --mx/--my) */
  transform:translate3d(var(--mx, 0px), var(--my, 0px), 0);
  will-change:transform;
}

.hero-arrow__draw{
  position:absolute; inset:0;
  isolation:isolate;               /* o shimmer mistura só com a seta */
  opacity:0;

  /* v5.0: o halo SAIU daqui. Na v4.4/4.5 ele era um background raster
     porque o metal era raster e mask-image multiplicava — separar as
     camadas era a única forma de o halo não ser elevado ao quadrado.
     Com o desenho vetorial o brilho vive DENTRO do SVG, modulado pelo
     eixo da própria seta (sutil na origem, intenso na ponta), o que era
     impossível com um halo isotrópico assado num arquivo. Menos uma
     requisição, menos um arquivo para manter em par. */
}
.hero-arrow.is-in .hero-arrow__draw{
  opacity:1;
  transition:opacity 420ms ease-out;
}

/* O traçado só é ativado quando o JS confirma suporte a @property
   (.can-draw). Sem isso a máscara ficaria presa em 0% e a seta sumiria. */
.hero-arrow.can-draw .hero-arrow__draw{
  --draw:0%;
  --wv-draw:linear-gradient(101deg,
      #000 calc(var(--draw) - 15%), transparent var(--draw));
  -webkit-mask-image:var(--wv-draw);
          mask-image:var(--wv-draw);
}
.hero-arrow.can-draw.is-in .hero-arrow__draw{
  animation:heroArrowDraw 1700ms cubic-bezier(.33,0,.12,1) both;
}
@keyframes heroArrowDraw{
  from{ --draw:0%; }
  to  { --draw:122%; }
}

/* ---------------------------------------------------------------------
   ARESTA VETORIAL (v4.4) · o único ponto onde o raster perdia

   Diagnóstico medido, não suposto: o arquivo tem 2618px e a seta é
   renderizada a ~1800 CSS px. Em tela 1x isso DESCE (nítido). Em tela 2x
   sobe para ~3600 device px — 1,37x de ampliação — e num monitor 2560@2x
   chega a 4506 px, 1,72x. É a BORDA que denuncia isso; o interior de metal
   polido é suave na própria arte.

   A máscara resolve porque o alfa passa a vir de um <path>: geometria não
   tem resolução. seta-mask.svg é a silhueta do metal e SÓ ela — o halo mora
   no background de .hero-arrow__draw, fora do caminho da multiplicação
   (o porquê está documentado lá em cima, no bug da névoa ao quadrado).

   Pré-condição, senão a máscara não serve para nada: o alfa do webp foi
   REGRAVADO com o metal dilatado 5px. Cortar uma rampa de antialiasing com
   um traço nítido devolve a mesma rampa, só que cortada — o ganho só existe
   se o pixel sob a borda vetorial for 100% opaco. A coroa de 5px também
   herdou COR de metal; com a cor do halo ela apareceria como um fio pálido.

   v5.0 encerrou essa discussão: o desenho deixou de ser raster. Não há
   mais ampliação para medir — a geometria não tem resolução em DPI nenhum.
   O caminho até aqui fica registrado no LEIA-ME-SETA (§11–§23).

   Peso: 158 KB (v4.3) → 99 KB (v4.5) → 6,3 KB (v5.0, arquivo único).
   --------------------------------------------------------------------- */
.hero-arrow__img{
  display:block; width:100%; height:100%;
  object-fit:contain;
  -webkit-user-drag:none;
  /* v5.0: sem mask-image aqui. A máscara existia para dar borda vetorial a
     um metal raster; agora o desenho JÁ é vetorial e recortá-lo com uma
     cópia de si mesmo só custaria uma requisição e um risco de par
     desalinhado. As máscaras que sobraram (__lead e __sh) são outra coisa:
     ali a silhueta serve para confinar a LUZ ao metal. */
}

/* ---------------------------------------------------------------------
   LUZ DA PONTA · viaja na frente do traçado
   MASCARADA PELA SILHUETA: a luz só existe SOBRE o metal. Sem isso ela
   vira uma cortina vertical varrendo a Hero inteira (erro pego na prova
   de animação quadro a quadro).
   Máscara no PAI (parado) e movimento no <i> — se a máscara ficasse no
   elemento que translada, ela viajaria junto e perderia o alinhamento.
   O <i> tem 100% da largura do pai, então translateX(var(--draw))
   desloca exatamente --draw% do pai, composto na GPU.
   --------------------------------------------------------------------- */
.hero-arrow__lead{
  position:absolute; inset:0;
  overflow:hidden;
  opacity:0;
  will-change:opacity;
  mix-blend-mode:screen;
  /* v4.4: a máscara passou do .webp (155 KB) para seta-mask.svg (2,8 KB).
     Muda uma coisa, e para melhor: o alfa do webp incluía o halo, então a
     luz também acendia a névoa em volta. A silhueta vetorial é só o metal —
     que é exatamente o que o comentário acima sempre pediu. */
  -webkit-mask-image:url("img/seta-mask-v51.svg");
          mask-image:url("img/seta-mask-v51.svg");
  -webkit-mask-size:100% 100%;  mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
.hero-arrow__lead i{
  position:absolute; top:-20%; bottom:-20%; left:0; width:100%;
  transform:translate3d(var(--draw), 0, 0);
  will-change:transform;
}
/* Pico em .82 (não 1.0) e blur maior: na prova quadro a quadro o branco
   estourava e virava flare. A marca pede contenção — a luz deve sugerir
   o traçado, não anunciar-se. */
.hero-arrow__lead i::before{
  content:"";
  position:absolute; top:0; bottom:0; left:-4%; width:8%;
  background:linear-gradient(92deg,
      rgba(255,238,196,0) 0%, rgba(255,240,200,.42) 38%,
      rgba(255,248,224,.82) 50%, rgba(255,240,200,.42) 62%,
      rgba(255,238,196,0) 100%);
  filter:blur(17px);
}
.hero-arrow.can-draw.is-in .hero-arrow__lead{
  animation:heroArrowLead 1700ms cubic-bezier(.33,0,.12,1) both;
}
@keyframes heroArrowLead{
  0%{ opacity:0 } 10%{ opacity:1 } 78%{ opacity:1 } 100%{ opacity:0 }
}

/* ---------------------------------------------------------------------
   SHIMMER (repetição discreta a cada 10–15s)
   Faixa de luz mascarada pela SILHUETA: o brilho corre por dentro do
   metal, nunca num retângulo por cima dele.
   --------------------------------------------------------------------- */
.hero-arrow__sh{
  position:absolute; inset:0;
  overflow:hidden;
  opacity:0;
  mix-blend-mode:screen;
  /* v4.4 · mesma troca do .hero-arrow__lead: silhueta vetorial. */
  -webkit-mask-image:url("img/seta-mask-v51.svg");
          mask-image:url("img/seta-mask-v51.svg");
  -webkit-mask-size:100% 100%;  mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
.hero-arrow__sh i{
  position:absolute;
  top:-30%; bottom:-30%; left:0; width:22%;
  background:linear-gradient(100deg,
      rgba(255,246,214,0) 0%, rgba(255,240,190,.5) 38%,
      rgba(255,255,246,.88) 50%, rgba(255,240,190,.5) 62%,
      rgba(255,246,214,0) 100%);
  filter:blur(11px);
  transform:translate3d(-170%,0,0);
  will-change:transform;
}
.hero-arrow.is-shimmer .hero-arrow__sh{ opacity:.62; }
.hero-arrow.is-shimmer .hero-arrow__sh i{
  animation:heroArrowShine 1800ms cubic-bezier(.4,0,.25,1) both;
}
@keyframes heroArrowShine{
  from{ transform:translate3d(-170%,0,0); }
  to  { transform:translate3d(540%,0,0);  }
}

/* ---------------------------------------------------------------------
   RESPONSIVO · só a LARGURA muda; a altura vem do aspect-ratio.
   --------------------------------------------------------------------- */
@media (max-width:1180px){
  .hero-arrow{
    left:4%; bottom:4%; width:96%; opacity:.82;
    --wv-dir:linear-gradient(97deg,
        transparent 4%, rgba(0,0,0,.12) 30%, rgba(0,0,0,.55) 62%, #000 92%);
  }
  /* ELIPSE DE LEITURA ALARGADA (v4.6) · correção de acessibilidade medida.
     A coluna de texto não encolhe junto com a viewport: .hero-inner tem
     max-width 820px, então sua borda direita fica em 68% da largura a
     1440px mas em 83% a 1024px. A elipse de 44%/34% cobria até 78% da
     caixa da seta — e a partir daí a fita entrava no h1 em força total.
     Medido a 1024px: o h1 (#F5F5F5, texto grande, alvo 3:1) caía para
     2,02:1 contra a fita. Com 58%/38% sobe para 3,32:1.
     Desktop e notebook NÃO foram tocados: já medem 6,35:1 e 5,10:1. */
  .hero-arrow__in{
    --wv-read:radial-gradient(58% 52% at 38% 52%,
        rgba(0,0,0,.14) 0%, rgba(0,0,0,.34) 60%, rgba(0,0,0,.82) 90%, #000 108%);
  }
}

/* MOBILE — a Hero é quase toda texto: a seta desce para a faixa inferior e
   é cortada à esquerda. A PONTA continua visível (~7% de folga da borda);
   enquadramentos mais largos a decepavam. */
@media (max-width:640px){
  .hero-arrow{
    left:-14%; bottom:1%; width:116%; opacity:.76;
    --wv-dir:linear-gradient(97deg,
        transparent 6%, rgba(0,0,0,.18) 34%, rgba(0,0,0,.62) 64%, #000 90%);
  }
  .hero-arrow__in{ --wv-read:none; -webkit-mask-image:none; mask-image:none; }
  .hero-arrow__sh i{ width:28%; filter:blur(8px); }
}

/* Paisagem baixa no celular: recolhe */
@media (max-height:520px) and (orientation:landscape){
  .hero-arrow{ opacity:.34; bottom:-6%; }
}

/* Monitores grandes: segura o crescimento */
@media (min-width:1800px){
  .hero-arrow{ left:10%; width:88%; opacity:.84; }
}

/* ---------------------------------------------------------------------
   ACESSIBILIDADE · prefers-reduced-motion
   A seta continua no layout (é design, não enfeite): aparece PRONTA e
   completa — sem traçado, sem parallax, sem brilho.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .hero-arrow{ will-change:auto; }
  .hero-arrow__in{ transform:none; will-change:auto; }
  .hero-arrow__draw{ opacity:1; transition:none; animation:none !important; }
  .hero-arrow.can-draw .hero-arrow__draw{
    -webkit-mask-image:none; mask-image:none;   /* traçado completo */
  }
  .hero-arrow__sh, .hero-arrow__lead{ display:none; }
}

@media print{ .hero-arrow{ display:none !important; } }

/* =====================================================================
   LEGIBILIDADE DOS ELEMENTOS QUE FICAM SOBRE A SETA · v4.6

   Auditoria WCAG por elemento (não por "pixel mais claro da Hero" — não
   existe texto dourado no pixel mais claro; conflacionar isso levava a
   exigir um véu de 56% de preto sobre o bloco inteiro, que apagaria a
   seta sem necessidade).

   O que sobrou depois de medir região por região:

     mobile 390 · faixa dos botões  → 4,0% da largura da coluna em risco
     mobile 390 · faixa dos chips   → 3,9%

   Justamente onde .hero-chips li tinha `background:rgba(255,255,255,.02)`
   — transparente na prática — e .btn-ghost tinha `background:transparent`.
   Sobre a cabeça da seta (#B9B932) o rótulo prata caía para 1,31:1.

   A correção NÃO é escurecer a seta: é dar fundo próprio a quem precisa.
   Ganha-se contraste garantido seja lá o que passe atrás, e o elemento
   ganha material — vidro escuro é o mesmo padrão já usado e documentado
   em .site-header (`rgba(10,10,10,.65)`), então não é invenção nova.

   Medido sobre o pior fundo (#B9B932):
     chip  rgba(10,10,10,.68) → prata 6,8:1 · ícone ouro 5,2:1   (min 4,5)
     ghost rgba(10,10,10,.55) → #F5F5F5 6,6:1                    (min 4,5)

   Este arquivo carrega DEPOIS de style.css (index.html §111 vs §114),
   então `.hero-chips li` aqui vence por ordem, com a mesma especificidade.
   ===================================================================== */
.hero-chips li{
  background:rgba(10,10,10,.68);
  -webkit-backdrop-filter:blur(10px) saturate(118%);
          backdrop-filter:blur(10px) saturate(118%);
}
.hero-actions .btn-ghost{
  background:rgba(10,10,10,.55);
  -webkit-backdrop-filter:blur(10px) saturate(118%);
          backdrop-filter:blur(10px) saturate(118%);
}
/* O hover do .btn-ghost em style.css só mexe em border-color/color/transform,
   então continua valendo; aqui só reforço o fundo para não "acender" ao
   passar o mouse sobre a região da seta. */
.hero-actions .btn-ghost:hover{
  background:rgba(10,10,10,.62);
}

/* Sem suporte a backdrop-filter o fundo sólido já resolve o contraste —
   a única perda é o desfoque. Nada quebra. */