/* ==========================================================================
   Movimento — estados iniciais

   Quem anima é o GSAP (assets/js/animations.js). Este arquivo só esconde,
   antes do primeiro quadro, o que a animação vai revelar — sem isso o
   conteúdo aparece por um instante no lugar final e "pula" quando o JS
   assume.

   Nada aqui esconde de forma incondicional. Duas condições, as duas
   necessárias:

     .has-anim  — classe posta no <html> por um script inline no <head>, e
                  removida se o animations.js não se anunciar em 2,5 s. Sem
                  JavaScript, ou com o GSAP falhando, ela não existe.
     no-preference — quem pede menos movimento no sistema nunca chega a ver
                  conteúdo escondido, nem por um quadro.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  /* --- Revelação ao rolar ------------------------------------------------- */

  /* O contrato do markup: [data-reveal] existe nos templates desde antes do
     GSAP. Continua valendo — o que mudou é quem move. */
  .has-anim [data-reveal] { opacity: 0; }

  /* --- Entrada da dobra --------------------------------------------------- */

  /* Header, hero da home e banner das páginas internas entram no load, não no
     scroll: escondê-los aqui evita o flash antes de a linha do tempo começar.

     O <nav> em si fica de fora de propósito: no mobile é a opacidade dele que
     abre e fecha o menu, e um valor inline vindo daqui venceria a classe
     .is-open. Quem se esconde são os itens dentro dele. */
  .has-anim .site-header__inner > .brand,
  .has-anim .site-header__inner > .nav-toggle,
  .has-anim .site-nav .menu > li,
  .has-anim .hero__content,
  .has-anim .page-hero__content { opacity: 0; }

  /* Com o GSAP no comando, a troca de slides é feita por ele; a transição do
     CSS só brigaria com o estilo inline que o tween escreve. */
  .has-anim .hero__slide { transition: none; }

  /* --- Títulos divididos em linhas ---------------------------------------- */

  /* O split acontece depois de as fontes carregarem. Até lá o título fica
     escondido, senão a primeira medição de linha usaria a fonte de sistema e
     as linhas quebrariam noutro lugar. */
  .has-anim [data-anim-lines] { visibility: hidden; }
}

/* O SplitText embrulha cada linha num container com overflow escondido
   (mask: "lines") e a linha sobe de dentro dele. As duas regras abaixo evitam
   que letras com descida — g, j, p, q, y — sejam cortadas pela máscara: um
   respiro embaixo, descontado com margem negativa para o espaçamento entre
   linhas continuar o do design. */
.split-line-mask {
  padding-bottom: .12em;
  margin-bottom: -.12em;
}

/* --- Contadores ----------------------------------------------------------- */

/* Números que contam sozinhos mudam de largura a cada quadro; sem isto os
   dígitos dançam e o cartão inteiro treme. */
.fact__value,
.stat__value { font-variant-numeric: tabular-nums; }