/* =====================================================================
   V21 — CAMADA DE MOVIMENTO (motion.css)
   ---------------------------------------------------------------------
   Somente efeitos de entrada. Não altera textos, cores, tamanhos ou
   posições finais: cada regra abaixo define apenas o estado INICIAL
   (oculto) de um elemento; ao entrar na tela, o motion.js adiciona
   .m-in e o elemento transita para o seu estilo original.

   • Só é ativada com a classe html.motion-ready (definida no <head>).
   • Sem JavaScript ou com "reduzir movimento" no sistema operacional,
     nada aqui se aplica e o site aparece exatamente como antes.
   • Usa translate/scale/rotate individuais e clip-path, sem tocar no
     transform já usado pelo layout (título, contador, linhas, botões).
   ===================================================================== */

html.motion-ready{
  --m-ease:cubic-bezier(.16,1,.3,1);      /* expo-out: chegada macia   */
  --m-wipe:cubic-bezier(.77,0,.18,1);     /* quint in-out: cortinas     */
  --m-pop:cubic-bezier(.34,1.56,.64,1);   /* leve ultrapassagem         */
  --m-x:72px;                             /* amplitude lateral          */
  --m-y:38px;                             /* amplitude vertical         */
}
@media (max-width:760px){html.motion-ready{--m-x:34px;--m-y:26px}}

/* ---------- Motor de transição (ativo apenas durante a entrada) ---------- */
/* !important: vence a regra antiga de styles.css que zera transições no modo
   "reduzir movimento" do sistema (as animações são uma escolha do site). */
html.motion-ready .m.m{
  transition-property:opacity,translate,scale,rotate,filter,clip-path,letter-spacing,background-size,color !important;
  transition-duration:var(--m-dur,1000ms) !important;
  transition-timing-function:var(--m-curve,var(--m-ease)) !important;
  transition-delay:var(--m-delay,0ms) !important;
}

/* ---------- Neutraliza as entradas antigas (V3–V20) para não competirem ---------- */
html.motion-ready .fade-up,
html.motion-ready .hero-title,
html.motion-ready .fact .fact-emphasis,
html.motion-ready .signup-header .signup-new-framework,
html.motion-ready .signup.is-visible .signup-form{animation:none}
html.motion-ready .signup .signup-header,
html.motion-ready .signup .signup-form,
html.motion-ready .cover .support-inner,
html.motion-ready .reform .reform-animate{opacity:1;transform:none}
html.motion-ready .compare-section .compare-appear{opacity:1;translate:none}
/* Mantido da V20: os cards não sobem no hover. */
html.motion-ready .reform-card:hover,
html.motion-ready .compare-card:hover{transform:none}

/* Recortes "visíveis" permanentes (margem generosa para itálicos e sombras). */
html.motion-ready .hero-title .line-green,
html.motion-ready .hero-title .line-white{clip-path:inset(-60px -60px -60px -60px)}
html.motion-ready .compare-card h3,
html.motion-ready .reform-card h3{clip-path:inset(-.35em -.35em -.35em -.35em)}
html.motion-ready .compare-list{clip-path:inset(-12px -60px -12px -60px)}
html.motion-ready .hero-content .eyebrow i,
html.motion-ready .compare-eyebrow i,
html.motion-ready .reform-kicker-line,
html.motion-ready .signup-header .eyebrow i,
html.motion-ready .counter-underline{clip-path:inset(0 0 0 0)}
/* Necessário para deslocar palavras dentro dos títulos. */
html.motion-ready .reform-heading h2 span,
html.motion-ready .reform-heading h2 em,
html.motion-ready .signup-header h2>span{display:inline-block}


/* =====================================================================
   1. ABERTURA — menu e capa (sequência temporizada no carregamento)
   ===================================================================== */
html.motion-ready .topbar{--m-dur:1000ms}
html.motion-ready .topbar:not(.m-in){translate:0 -105%}

html.motion-ready .topbar .brand{--m-dur:1100ms}
html.motion-ready .topbar .brand:not(.m-in){opacity:0;translate:calc(var(--m-x) * -.5) 0}

html.motion-ready .nav-counter{--m-dur:1000ms}
html.motion-ready .nav-counter:not(.m-in){opacity:0;translate:0 -16px;filter:blur(6px)}

html.motion-ready .btn-nav{--m-dur:1100ms}
html.motion-ready .btn-nav:not(.m-in){opacity:0;translate:calc(var(--m-x) * .5) 0}

/* Estádio: aproximação cinematográfica lenta (Ken Burns de entrada). */
html.motion-ready .stadium-graphic{--m-dur:2600ms;--m-curve:cubic-bezier(.22,1,.36,1)}
html.motion-ready .stadium-graphic:not(.m-in){opacity:0;scale:1.16;translate:44px 0}

html.motion-ready .hero-content .eyebrow span{--m-dur:1200ms}
html.motion-ready .hero-content .eyebrow span:not(.m-in){opacity:0;translate:-28px 0;letter-spacing:12px}
html.motion-ready .hero-content .eyebrow i{--m-dur:1100ms;--m-curve:var(--m-wipe)}
html.motion-ready .hero-content .eyebrow i:not(.m-in){clip-path:inset(0 100% 0 0)}

/* Título: cada linha desliza da esquerda revelada por uma cortina. */
html.motion-ready .hero-title .line-green,
html.motion-ready .hero-title .line-white{--m-dur:1350ms}
html.motion-ready .hero-title .line-green:not(.m-in),
html.motion-ready .hero-title .line-white:not(.m-in){opacity:0;translate:calc(var(--m-x) * -1) 0;clip-path:inset(-60px 100% -60px -60px)}

html.motion-ready .hero-sub{--m-dur:1200ms}
html.motion-ready .hero-sub:not(.m-in){opacity:0;translate:0 var(--m-y);filter:blur(10px)}
/* Marca-texto verde "pintado" da esquerda para a direita. */
html.motion-ready .hero-sub mark{--m-dur:850ms;--m-curve:var(--m-wipe)}
html.motion-ready .hero-sub mark:not(.m-done){background:linear-gradient(var(--lime),var(--lime)) left center/100% 100% no-repeat}
html.motion-ready .hero-sub mark:not(.m-in){background-size:0% 100%;color:#fff}

html.motion-ready .hero-content .btn-main{--m-dur:1150ms}
html.motion-ready .hero-content .btn-main:not(.m-in){opacity:0;translate:0 var(--m-y);scale:.92}


/* =====================================================================
   2. FAIXA INFORMATIVA — cortina do centro + cascata lateral
   ===================================================================== */
html.motion-ready .facts-bar{--m-dur:1200ms;--m-curve:var(--m-wipe)}
/* O fundo claro se abre do centro (sem clip-path, que esconderia os cards do detector). */
html.motion-ready .facts-bar:not(.m-done){background-repeat:no-repeat;background-position:center}
html.motion-ready .facts-bar:not(.m-in){background-size:0% 100%}

html.motion-ready .fact{--m-dur:1100ms}
html.motion-ready .fact:not(.m-in){opacity:0;translate:calc(var(--m-x) * .6) 0;filter:blur(6px)}
html.motion-ready .fact svg{--m-dur:450ms}
html.motion-ready .fact svg:not(.m-in){opacity:0}
html.motion-ready .fact .fact-icon{--m-dur:1100ms;--m-curve:var(--m-pop)}
html.motion-ready .fact .fact-icon:not(.m-in){opacity:0;scale:.5;rotate:-90deg}
/* Destaques verdes: efeito marca-texto. */
html.motion-ready .fact .fact-emphasis{--m-dur:900ms;--m-curve:var(--m-wipe)}
html.motion-ready .fact .fact-emphasis:not(.m-done){background-repeat:no-repeat}
html.motion-ready .fact .fact-emphasis:not(.m-in){background-size:0% 100%}


/* =====================================================================
   3. FAIXA DE APOIO — bandeira e Congresso convergem; contador surge
   ===================================================================== */
html.motion-ready .support-banner .flag,
html.motion-ready .support-banner .congress{--m-dur:1900ms}
html.motion-ready .support-banner .flag:not(.m-in){opacity:0;translate:calc(var(--m-x) * -1.4) 0}
html.motion-ready .support-banner .congress:not(.m-in){opacity:0;translate:calc(var(--m-x) * 1.4) 0}

html.motion-ready .support-counter{--m-dur:700ms}
html.motion-ready .support-counter:not(.m-in){opacity:0}
html.motion-ready .counter-label{--m-dur:1100ms}
html.motion-ready .counter-label:not(.m-in){opacity:0;translate:0 -12px;letter-spacing:9px}
html.motion-ready .counter-value{--m-dur:1200ms}
html.motion-ready .counter-value:not(.m-in){opacity:0;scale:.7;filter:blur(10px)}
html.motion-ready .counter-underline{--m-dur:1000ms;--m-curve:var(--m-wipe)}
html.motion-ready .counter-underline:not(.m-in){clip-path:inset(0 100% 0 0)}
html.motion-ready .counter-foot,
html.motion-ready .counter-note{--m-dur:900ms}
html.motion-ready .counter-foot:not(.m-in),
html.motion-ready .counter-note:not(.m-in){opacity:0;translate:0 12px}

html.motion-ready .support-cta h2{--m-dur:1250ms}
html.motion-ready .support-cta h2:not(.m-in){opacity:0;translate:var(--m-x) 0;filter:blur(8px)}
html.motion-ready .btn-banner{--m-dur:1100ms}
html.motion-ready .btn-banner:not(.m-in){opacity:0;translate:0 22px;scale:.94}


/* =====================================================================
   4. DIFERENÇAS — cards entram pelos lados opostos e se montam por dentro
   ===================================================================== */
html.motion-ready .compare-flare{--m-dur:2400ms}
html.motion-ready .compare-flare-left:not(.m-in){opacity:0;translate:-18% 0}
html.motion-ready .compare-flare-right:not(.m-in){opacity:0;translate:18% 0}

html.motion-ready .compare-eyebrow i{--m-dur:1100ms;--m-curve:var(--m-wipe)}
html.motion-ready .compare-eyebrow i:not(.m-in){clip-path:inset(0 0 0 100%)}
html.motion-ready .compare-eyebrow span{--m-dur:1300ms}
html.motion-ready .compare-eyebrow span:not(.m-in){opacity:0;letter-spacing:.7em;filter:blur(6px)}
html.motion-ready .compare-header p{--m-dur:1100ms}
html.motion-ready .compare-header p:not(.m-in){opacity:0;translate:0 calc(var(--m-y) * .6);filter:blur(6px)}

html.motion-ready .compare-section .compare-card{--m-dur:1350ms}
html.motion-ready .compare-section .compare-card-sports:not(.m-in){opacity:0;translate:calc(var(--m-x) * -1.3) 0;scale:.96}
html.motion-ready .compare-section .compare-card-casino:not(.m-in){opacity:0;translate:calc(var(--m-x) * 1.3) 0;scale:.96}
html.motion-ready .compare-visual{--m-dur:2100ms}
html.motion-ready .compare-visual:not(.m-in){opacity:0;scale:1.18}
html.motion-ready .compare-card h3{--m-dur:1150ms}
html.motion-ready .compare-card h3:not(.m-in){opacity:0;translate:-30px 0;clip-path:inset(-.35em 100% -.35em -.35em)}
/* A borda verde da lista é "desenhada" de cima para baixo. */
html.motion-ready .compare-list{--m-dur:1100ms;--m-curve:var(--m-wipe)}
html.motion-ready .compare-list:not(.m-in){clip-path:inset(-12px -60px 100% -60px)}
html.motion-ready .compare-list li{--m-dur:950ms}
html.motion-ready .compare-list li:not(.m-in){opacity:0;translate:-22px 0;filter:blur(5px)}
html.motion-ready .compare-list li svg{--m-dur:400ms}
html.motion-ready .compare-list li svg:not(.m-in){opacity:0}


/* =====================================================================
   5. PROPOSTAS — título em movimentos opostos + cards em cascata
   ===================================================================== */
html.motion-ready .reform-light{--m-dur:2200ms}
html.motion-ready .reform-light:not(.m-in){opacity:0}

html.motion-ready .reform-kicker{--m-dur:1300ms}
html.motion-ready .reform-kicker:not(.m-in){opacity:0;letter-spacing:.45em;filter:blur(5px)}
html.motion-ready .reform-kicker-line{--m-dur:1100ms;--m-curve:var(--m-wipe)}
html.motion-ready .reform-kicker-line:not(.m-in){clip-path:inset(0 0 0 100%)}
html.motion-ready .reform-heading h2 span,
html.motion-ready .reform-heading h2 em{--m-dur:1350ms}
html.motion-ready .reform-heading h2 span:not(.m-in){opacity:0;translate:calc(var(--m-x) * -1) 0;filter:blur(8px)}
html.motion-ready .reform-heading h2 em:not(.m-in){opacity:0;translate:var(--m-x) 0;filter:blur(8px)}
html.motion-ready .reform-lead{--m-dur:1100ms}
html.motion-ready .reform-lead:not(.m-in){opacity:0;translate:0 calc(var(--m-y) * .6);filter:blur(6px)}

html.motion-ready .reform-grid .reform-card{--m-dur:1300ms}
html.motion-ready .reform-grid .reform-card:not(.m-in){opacity:0;translate:0 calc(var(--m-y) * 1.6);scale:.94}
html.motion-ready .reform-index{--m-dur:900ms}
html.motion-ready .reform-index:not(.m-in){opacity:0;translate:-16px 0}
html.motion-ready .reform-card-top svg{--m-dur:400ms}
html.motion-ready .reform-card-top svg:not(.m-in){opacity:0}
html.motion-ready .reform-card h3{--m-dur:1150ms}
html.motion-ready .reform-card h3:not(.m-in){opacity:0;translate:-20px 0;clip-path:inset(-.35em 100% -.35em -.35em)}
html.motion-ready .reform-card p{--m-dur:1000ms}
html.motion-ready .reform-card p:not(.m-in){opacity:0;translate:0 16px;filter:blur(4px)}


/* =====================================================================
   6. FORMULÁRIO — título converge, card emerge, campos em sequência
   ===================================================================== */
html.motion-ready .signup-orb{--m-dur:2400ms}
html.motion-ready .signup-orb:not(.m-in){opacity:0;scale:1.2}

html.motion-ready .signup-header .eyebrow i{--m-dur:1100ms;--m-curve:var(--m-wipe)}
html.motion-ready .signup-header .eyebrow i:first-child:not(.m-in){clip-path:inset(0 0 0 100%)}
html.motion-ready .signup-header .eyebrow i:last-child:not(.m-in){clip-path:inset(0 100% 0 0)}
html.motion-ready .signup-header .eyebrow span{--m-dur:1300ms}
html.motion-ready .signup-header .eyebrow span:not(.m-in){opacity:0;letter-spacing:12px;filter:blur(5px)}
/* "ASSINE O" vem da esquerda e "MOVIMENTO" da direita, encontrando-se ao centro. */
html.motion-ready .signup-header h2,
html.motion-ready .signup-header h2>span{--m-dur:1350ms}
html.motion-ready .signup-header h2:not(.m-in){opacity:0;translate:calc(var(--m-x) * .6) 0;filter:blur(8px)}
html.motion-ready .signup-header h2>span:not(.m-in){translate:calc(var(--m-x) * -1.2) 0}
html.motion-ready .signup-header p{--m-dur:1100ms}
html.motion-ready .signup-header p:not(.m-in){opacity:0;translate:0 20px;filter:blur(6px)}
html.motion-ready .signup-header .signup-new-framework{--m-dur:900ms;--m-curve:var(--m-wipe)}
html.motion-ready .signup-header .signup-new-framework:not(.m-done){background-repeat:no-repeat}
html.motion-ready .signup-header .signup-new-framework:not(.m-in){background-size:0% 100%;color:#fff}

html.motion-ready .signup .signup-form{--m-dur:1300ms}
html.motion-ready .signup .signup-form:not(.m-in){opacity:0;translate:0 calc(var(--m-y) * 1.5);scale:.95}
html.motion-ready .signup-form>label,
html.motion-ready .signup-form>input,
html.motion-ready .signup-form>.btn-submit,
html.motion-ready .signup-form>.warning{--m-dur:900ms}
html.motion-ready .signup-form>label:not(.m-in),
html.motion-ready .signup-form>input:not(.m-in),
html.motion-ready .signup-form>.btn-submit:not(.m-in),
html.motion-ready .signup-form>.warning:not(.m-in){opacity:0;translate:0 18px}

html.motion-ready .back-top{--m-dur:900ms}
html.motion-ready .back-top:not(.m-in){opacity:0;translate:0 16px}
html.motion-ready body>footer{--m-dur:900ms}
html.motion-ready body>footer:not(.m-in){opacity:0}