/* ============================================
 * Animations - Reusable Animation Classes
 * All values reference CSS variables from variables.css
 * ============================================ */

/* --- Scroll Reveal --- */

.reveal {
  opacity: 0;
  transform: translateY(20px);
}

.reveal--visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--duration-slow) var(--easing-out-expo),
    transform var(--duration-slow) var(--easing-out-expo);
}

/* Stagger delays for sibling elements */
.reveal--delay-1 {
  transition-delay: 100ms;
}

.reveal--delay-2 {
  transition-delay: 200ms;
}

.reveal--delay-3 {
  transition-delay: 300ms;
}

.reveal--delay-4 {
  transition-delay: 400ms;
}

/* --- Parallax --- */

.parallax {
  will-change: transform;
}

/* --- Image Load Fade --- */

.lazy-image {
  opacity: 0;
  transform: scale(1.02);
  transition: opacity var(--duration-image) var(--easing-ease),
    transform var(--duration-image) var(--easing-ease);
}

.lazy-image.is-loaded {
  opacity: 1;
  transform: scale(1);
}

/* --- Reduced Motion Override --- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Scroll reveal: no movement, instant show */
  .reveal {
    opacity: 1;
    transform: none;
  }

  .reveal--visible {
    transition: none;
  }

  /* Parallax: disabled entirely */
  .parallax {
    transform: none !important;
    will-change: auto;
  }

  /* Image load: instant */
  .lazy-image {
    opacity: 1;
    transform: none;
  }
}