/* =========================================================
   Camada de movimento (GSAP + ScrollTrigger + Lenis)
   Só vale com a classe .has-motion, que o motion.js coloca no <html>.
   Sem JS, sem GSAP ou com "reduzir movimento", a página fica estática e completa.
   ========================================================= */

/* Antes da entrada do hero: esconde o que vai animar (o motion.js revela).
   Trava de segurança no <head> tira a classe em 4 s se o GSAP não carregar. */
.js-motion :is(.header, #hero-title, .hA .eyebrow, .hA__sub, .hA__cta, .hA__stats, .hA__media,
  .hB__chip, .hB__sub, .hB__cta, .hB__marquee, .hB__bg,
  .hC .eyebrow, .hC__sub, .hC__cta, .hC__fit, .hC__media, .hC__proof){visibility:hidden}

/* Lenis */
html.lenis, html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}

/* O GSAP assume o lugar do reveal em CSS */
.has-motion .rv{opacity:1;transform:none;transition:none}
.has-motion .btn{transition:background .25s var(--ease),box-shadow .25s var(--ease)}
.has-motion .btn:hover{transform:none}

/* Texto quebrado em palavras / letras com máscara */
.mw{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .02em .12em;margin:0 -.02em -.12em}
.mw__i{display:inline-block;will-change:transform}
.mc{display:inline-block}
.m-fade .mw{overflow:visible}

/* Brilho que percorre as palavras douradas do título */
.m-shine-el{
  background:linear-gradient(100deg,var(--gold) 0%,var(--gold) 42%,#fff7cc 50%,var(--gold) 58%,var(--gold) 100%);
  background-size:320% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

/* Reflexo que passa pelo botão principal */
.m-sheen{position:relative;overflow:hidden;isolation:isolate}
.m-sheen::after{
  content:"";position:absolute;top:-20%;bottom:-20%;left:-60%;width:40%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);
  transform:skewX(-20deg);animation:mSheen 4.5s var(--ease) 2.2s infinite;
}
@keyframes mSheen{0%{left:-60%}28%,100%{left:130%}}

/* Barra de progresso de leitura */
.m-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:70;background:var(--gold);transform:scaleX(0);transform-origin:0 50%;pointer-events:none;box-shadow:0 0 12px rgba(255,212,0,.7)}

/* Luz que segue o mouse dentro dos cards */
.m-glow{position:relative}
.m-glow::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(255,212,0,.13),transparent 62%);
  opacity:0;transition:opacity .35s var(--ease);
}
.m-glow:hover::before{opacity:1}
.m-glow > *{position:relative;z-index:1}
.logo-tile.m-glow > img{position:relative;z-index:1}

/* Pulso no botão de play do vídeo */
.has-motion .video__play::before,.has-motion .video__play::after{
  content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,212,0,.6);animation:mRing 2.4s ease-out infinite
}
.has-motion .video__play::after{animation-delay:1.2s}
@keyframes mRing{from{transform:scale(1);opacity:.9}to{transform:scale(1.9);opacity:0}}

/* Passos: linha que se preenche de dourado conforme a rolagem */
.has-motion .step__n i{position:relative;overflow:hidden}
.has-motion .step__n i::after{content:"";position:absolute;inset:0;background:var(--gold);transform:scaleX(var(--p,0));transform-origin:0 50%;box-shadow:0 0 10px rgba(255,212,0,.6)}
.has-motion .step__n b{transition:background .45s var(--ease),border-color .45s var(--ease),color .45s var(--ease),box-shadow .45s var(--ease)}
.has-motion .step__n b.is-lit{background:var(--gold);border-color:var(--gold);color:#0a0a0a;box-shadow:0 0 0 8px rgba(255,212,0,.12),0 0 30px rgba(255,212,0,.35)}
@media (max-width:640px){
  .has-motion .step__n i::after{transform:scaleY(var(--p,0));transform-origin:50% 0}
}

/* Números que contam */
.m-count{font-variant-numeric:tabular-nums}

/* Hero B: luz que segue o mouse */
.hB__spot{position:absolute;left:0;top:0;width:640px;height:640px;margin:-320px 0 0 -320px;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(255,212,0,.16) 0%,rgba(255,212,0,.05) 35%,transparent 65%);mix-blend-mode:screen;opacity:0}

/* Hero A/C: a foto tem folga para o parallax não mostrar borda */
.has-motion .hA__media img,.has-motion .hC__media img{will-change:transform}