/* ==========================================================================
   Animações — todas desativadas com prefers-reduced-motion
   ========================================================================== */

/* Entrada ao rolar (classe aplicada por js/main.js via IntersectionObserver) */
.js .revelar {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 1s var(--ease), transform 1.1s var(--ease);
  transition-delay: var(--atraso, 0s);
}
.js .revelar--esq { transform: translateX(-40px); }
.js .revelar--dir { transform: translateX(40px); }
.js .revelar--zoom { transform: scale(.96); }
.js .revelar.is-visivel { opacity: 1; transform: none; }

/* Revelação das fotos em arco/quadro: cortina que se abre */
.js .cortina { clip-path: inset(100% 0 0 0); transition: clip-path 1.5s var(--ease) var(--atraso, .1s); }
.js .cortina.is-visivel { clip-path: inset(0 0 0 0); }

/* Entrada do hero, ao carregar */
.js .hero .entra {
  opacity: 0;
  transform: translateY(26px);
  animation: entrar 1.2s var(--ease) forwards;
  animation-delay: var(--atraso, 0s);
}
@keyframes entrar { to { opacity: 1; transform: none; } }

/* Ondas: movimento discreto e contínuo */
.onda use {
  transform-box: fill-box;
  transform-origin: center;
  animation: flutuar 16s ease-in-out infinite alternate;
}
.onda--inf-dir use,
.onda--sup-dir use { animation-duration: 19s; }
@keyframes flutuar {
  0%   { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(-10px, 8px) rotate(-.8deg); }
}

/* Linha dourada que se desenha */
.js .etapas::before { transform: scaleX(0); transition: transform 1.8s var(--ease) .2s; }
.js .etapas.is-visivel::before { transform: scaleX(1); }

/* Selo giratório */
.selo svg { animation: girar 28s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* Faixa de palavras */
.faixa__trilho { animation: correr 38s linear infinite; }
.faixa:hover .faixa__trilho { animation-play-state: paused; }
@keyframes correr { to { transform: translateX(-50%); } }

/* Indicador "role" */
.rolar span { animation: descer 2.4s var(--ease) infinite; }
@keyframes descer {
  0%   { background-position: 0 100%; }
  100% { background-position: 0 -100%; }
}

/* Stories: surgem ao entrar na tela. Sempre visíveis por padrão; fill "backwards" não trava o hover */
.story.is-visivel { animation: subir 1s var(--ease) backwards; animation-delay: var(--atraso, 0s); }
@keyframes subir { from { transform: translateY(36px); } to { transform: none; } }

/* Itens novos da galeria */
.galeria__item.is-novo { animation: surgir .9s var(--ease) both; animation-delay: var(--atraso, 0s); }
@keyframes surgir { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
  }
  .js .revelar,
  .js .hero .entra { opacity: 1; transform: none; }
  .js .cortina { clip-path: none; }
  .faixa__trilho { animation: none; }
}