/* ==========================================================================
   Animações
   Duas regras apenas:
   1. A primeira seção entra encadeada, subindo com fade.
   2. As demais seções entram apenas com fade, sem deslocamento.
   Tudo desligado sob prefers-reduced-motion.
   ========================================================================== */

@keyframes sobe-e-aparece {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* 1. Hero encadeado ------------------------------------------------- */
[data-hero-etapa] {
  animation: sobe-e-aparece var(--duracao-revelacao) var(--curva-suave) both;
}

[data-hero-etapa='1'] { animation-delay: calc(var(--passo-encadeamento) * 0); }
[data-hero-etapa='2'] { animation-delay: calc(var(--passo-encadeamento) * 1); }
[data-hero-etapa='3'] { animation-delay: calc(var(--passo-encadeamento) * 2); }
[data-hero-etapa='4'] { animation-delay: calc(var(--passo-encadeamento) * 3); }
[data-hero-etapa='5'] { animation-delay: calc(var(--passo-encadeamento) * 4); }
[data-hero-etapa='6'] { animation-delay: calc(var(--passo-encadeamento) * 5); }
[data-hero-etapa='7'] { animation-delay: calc(var(--passo-encadeamento) * 6); }

/* 2. Demais seções: fade puro -------------------------------------- */
/* A classe é aplicada por js/revelacao.js apenas no que está fora da dobra,
   para que o conteúdo visível na carga inicial nunca fique invisível. */
.aguardando-revelacao {
  opacity: 0;
  transition: opacity var(--duracao-revelacao) var(--curva-suave);
}

.revelado {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  [data-hero-etapa] {
    animation: none;
  }

  .aguardando-revelacao {
    opacity: 1;
    transition: none;
  }

  html {
    scroll-behavior: auto;
  }
}