/* ==========================================================================
   Animações — somente entradas leves (specs/design.md §3.6)
   Só transform/opacity: não geram layout shift (CLS = 0).
   ========================================================================== */

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(1.5rem); }
  to   { opacity: 1; transform: none; }
}

@keyframes slide-down {
  from { opacity: 0; transform: translateY(-0.5rem); }
  to   { opacity: 1; transform: none; }
}

/* Entrada no carregamento (conteúdo acima da dobra — não depende de JS) */
.animate-in {
  animation: slide-up var(--duration-slow) var(--ease-out) both;
  animation-delay: var(--delay, 0ms);
}

.animate-fade {
  animation: fade-in var(--duration-slow) var(--ease-out) both;
  animation-delay: var(--delay, 0ms);
}

/* Entrada ao rolar — .reveal-ready é aplicada pelo js/main.js.
   Sem JS, o conteúdo permanece visível. */
.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(1.5rem);
  transition:
    opacity var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
  transition-delay: var(--delay, 0ms);
}

.reveal-ready [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal-ready [data-reveal] {
    opacity: 1;
    transform: none;
  }
}