/* Movimento da OZATI: entrada das seções ligada à rolagem e transição entre páginas. Tudo em CSS:
   sem suporte do navegador, o conteúdo aparece pronto; com movimento reduzido, nada se desloca.
   Durações e curvas vêm do tokens.css. */
@layer components {
  @keyframes reveal-in {
    from { opacity: 0; translate: 0 2.5rem; scale: 0.98; }
    to { opacity: 1; translate: 0; scale: 1; }
  }

  /* .reveal: o bloco entra quando chega na tela. .reveal-group: os filhos entram em sequência. */
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      .reveal, .reveal-group > * {
        animation: reveal-in linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 45%;
      }
      .reveal-group > :nth-child(2) { animation-range: entry 8% entry 53%; }
      .reveal-group > :nth-child(3) { animation-range: entry 16% entry 61%; }
      .reveal-group > :nth-child(n + 4) { animation-range: entry 24% entry 69%; }
    }
  }

  /* Entre páginas: o logo da barra é o elemento que continua; o resto troca com um esmaecer curto */
  .site-logo { view-transition-name: logo-ozati; }
  ::view-transition-group(root), ::view-transition-group(logo-ozati) { animation-duration: var(--duracao-media); animation-timing-function: var(--curva-saida); }
  @media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none; }
  }
}