/* Motion global do site — um sistema só: mesma curva (--ease-out), durações do tokens.css (--dur-*),
   sempre transform/opacity (propriedade `translate`), nada muda de lugar no layout.
   Aqui ficam: entrada editorial dos cabeçalhos das sections, entrada das páginas internas, flutuação
   contínua (.float) e rolagem suave. Hero, "Na prática", Transparência, Treinamentos e FAQ têm o
   restante no CSS da própria section, usando os mesmos tokens.
   O estado escondido dos cabeçalhos só existe com JavaScript (classe .js no <html>) e sem "reduzir movimento". */

/* Entrada: opacity + pequeno deslocamento vertical. Usada pelo Hero e pelas páginas internas. */
@keyframes hero-enter {
  from {
    opacity: 0;
    translate: 0 var(--enter-y, 24px);
  }
}

/* Flutuação contínua e discreta (só `translate`, então convive com rotação/transform do elemento).
   Amplitude em --float-y; fase e duração variam por elemento. */
@keyframes float-y {
  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 calc(var(--float-y, 6px) * -1);
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* Rolagem suave para âncoras (Header → seções; as páginas de header fixo compensam com scroll-padding) */
  html {
    scroll-behavior: smooth;
  }

  /* Páginas internas (Política, Canais): contexto e conteúdo entram em sequência curta, como o Hero.
     Só os dois blocos principais, o header (navegação) fica parado. */
  .page-policy {
    --enter-y: 16px;
  }

  .page-policy .policy__side,
  .page-policy .policy__body,
  .page-policy .co-body {
    animation: hero-enter var(--dur-enter) var(--ease-out) 60ms backwards;
  }

  .page-policy .policy__body,
  .page-policy .co-body {
    animation-delay: 180ms;
  }
}

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .page-policy {
    --enter-y: 24px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal-group] [data-reveal] {
    opacity: 0;
    translate: 0 var(--reveal-y, 28px);
    transition:
      opacity 600ms var(--ease-out),
      translate 700ms var(--ease-out);
    transition-delay: calc(var(--i, 0) * 90ms); /* eyebrow → título → descrição, em sequência curta */
  }

  .js [data-reveal-group].is-revealed [data-reveal] {
    opacity: 1;
    translate: 0 0;
  }
}

/* Mobile: deslocamento menor */
@media (max-width: 1023px) {
  :root {
    --reveal-y: 16px;
  }
}

/* Rede de segurança: com "reduzir movimento" tudo aparece direto na posição final */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    translate: none !important;
    transition: none !important;
  }
}