/* ==========================================================================
   ANIMAÇÕES — revelação discreta no scroll

   O tom da referência é sóbrio: as entradas são sutis, sem deslocamentos
   grandes. O estado oculto só vale quando a classe `js` está no elemento
   raiz, de modo que, sem JavaScript, todo o conteúdo permanece visível.
   ========================================================================== */

.js [data-revelar] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--suave), transform 0.7s var(--suave);
  transition-delay: var(--atraso, 0s);
  will-change: opacity, transform;
}

.js [data-revelar='esquerda'] {
  transform: translateX(-20px);
}

.js [data-revelar='direita'] {
  transform: translateX(20px);
}

.js [data-revelar='escala'] {
  transform: scale(0.98);
}

.js [data-revelar].revelado {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   Keyframes compartilhados
   -------------------------------------------------------------------------- */

@keyframes surgir {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-revelar] {
    opacity: 1 !important;
    transform: none !important;
  }
}