/* =============================================================
   animations.css — Scroll Reveal Animation System
   Accessibility-first approach: content is visible by default.
   Animations only apply when user has NOT requested reduced motion.
   ============================================================= */

/* Default state: content is always visible.
   Reduced-motion users see everything immediately — no opacity 0,
   no transform offset. This must live OUTSIDE the media query. */
.fade-in {
  opacity: 1;
  transform: translateY(0);
}

/* Animated reveal — only when user allows motion.
   JS scroll.js checks the same media query before observing elements,
   so .is-visible is never added when this block is inactive. */
@media (prefers-reduced-motion: no-preference) {
  .fade-in {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    will-change: opacity, transform;
  }

  .fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}