/* ==========================================================================
   Animations — subtle reveal transitions, opt-in via [data-reveal].
   Respects prefers-reduced-motion.
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children — add data-reveal-stagger to the parent */
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
}

[data-reveal-stagger].is-revealed > * {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal-stagger] > *:nth-child(1)  { transition-delay: 0ms; }
[data-reveal-stagger] > *:nth-child(2)  { transition-delay: 60ms; }
[data-reveal-stagger] > *:nth-child(3)  { transition-delay: 120ms; }
[data-reveal-stagger] > *:nth-child(4)  { transition-delay: 180ms; }
[data-reveal-stagger] > *:nth-child(5)  { transition-delay: 240ms; }
[data-reveal-stagger] > *:nth-child(6)  { transition-delay: 300ms; }
[data-reveal-stagger] > *:nth-child(7)  { transition-delay: 360ms; }
[data-reveal-stagger] > *:nth-child(8)  { transition-delay: 420ms; }
[data-reveal-stagger] > *:nth-child(9)  { transition-delay: 480ms; }
[data-reveal-stagger] > *:nth-child(10) { transition-delay: 540ms; }

/* Fade in only (no translateY) */
[data-reveal="fade"] { transform: none; }

/* Reduced motion: skip all animations */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}