/**
 * Animation System
 * 
 * This file defines all animation utilities and keyframes.
 * To add new animations:
 * 1. Define a @keyframes rule below
 * 2. Create a corresponding .animate-* utility class
 * 3. Use data-animate attribute in HTML to trigger on scroll
 * 
 * Requirements: 4.1, 4.2, 4.3, 4.4, 4.5, 4.6, 4.8
 */


/* ============================================
   KEYFRAME DEFINITIONS
   ============================================
   Core animation keyframes used throughout the site.
*/

/* Fade In - Simple opacity transition */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Fade Up - Fade in while moving up */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Slide Left - Slide in from the right */
@keyframes slideLeft {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Slide Right - Slide in from the left */
@keyframes slideRight {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Scale In - Grow from slightly smaller */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}


/* ============================================
   ANIMATION UTILITY CLASSES
   ============================================
   Apply these classes to trigger animations.
   Used by the ScrollAnimator JavaScript class.
*/

.animate-fade-in {
  animation: fadeIn var(--duration-normal) var(--ease-smooth);
}

.animate-fade-up {
  animation: fadeUp var(--duration-normal) var(--ease-smooth);
}

.animate-slide-left {
  animation: slideLeft var(--duration-normal) var(--ease-smooth);
}

.animate-slide-right {
  animation: slideRight var(--duration-normal) var(--ease-smooth);
}

.animate-scale-in {
  animation: scaleIn var(--duration-normal) var(--ease-spring);
}


/* ============================================
   INITIAL STATE FOR ANIMATED ELEMENTS
   ============================================
   Elements with data-animate start invisible.
*/

[data-animate] {
  opacity: 0;
}


/* ============================================
   REDUCED MOTION SUPPORT
   ============================================
   Respects user's motion preferences for accessibility.
   When prefers-reduced-motion is enabled, animations are
   nearly instant to avoid triggering motion sensitivity.
   
   Requirements: 4.8, 5.5
*/

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  /* Ensure animated elements are visible immediately */
  [data-animate] {
    opacity: 1;
  }
}


/* ============================================
   PERFORMANCE OPTIMIZATION
   ============================================
   Reduces animation complexity when low FPS is detected.
   Applied automatically by performance monitor.
   
   Requirements: 6.6, 11.6
*/

body.reduce-animations *,
body.reduce-animations *::before,
body.reduce-animations *::after {
  animation-duration: 0.1s !important;
  transition-duration: 0.1s !important;
}

body.reduce-animations [data-animate] {
  opacity: 1;
}