/* ============================================
   SCROLL ANIMATIONS
   ============================================ */

/* Base state for animated elements - hidden by default only when JS is enabled */
.js-enabled [data-animate] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Visible state when element is in viewport */
.js-enabled [data-animate].animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* Different animation types */
.js-enabled [data-animate="fade"] {
  transform: none;
}

.js-enabled [data-animate="fade"].animate-in {
  transform: none;
}

.js-enabled [data-animate="slide-up"] {
  transform: translateY(100px);
}

.js-enabled [data-animate="slide-up"].animate-in {
  transform: translateY(0);
}

.js-enabled [data-animate="slide-left"] {
  transform: translateX(100px);
}

.js-enabled [data-animate="slide-left"].animate-in {
  transform: translateX(0);
}

.js-enabled [data-animate="slide-right"] {
  transform: translateX(-100px);
}

.js-enabled [data-animate="slide-right"].animate-in {
  transform: translateX(0);
}

/* Staggered delays for multiple elements */
.js-enabled [data-animate-delay="100"] {
  transition-delay: 0.1s;
}

.js-enabled [data-animate-delay="200"] {
  transition-delay: 0.2s;
}

.js-enabled [data-animate-delay="300"] {
  transition-delay: 0.3s;
}

.js-enabled [data-animate-delay="400"] {
  transition-delay: 0.4s;
}

.js-enabled [data-animate-delay="500"] {
  transition-delay: 0.5s;
}

.js-enabled [data-animate-delay="600"] {
  transition-delay: 0.6s;
}

/* Faster animations option */
.js-enabled [data-animate-speed="fast"] {
  transition-duration: 0.4s;
}

/* Slower animations option */
.js-enabled [data-animate-speed="slow"] {
  transition-duration: 1.2s;
}

/* ============================================
   NO-JS FALLBACK
   Elements are visible by default, only hidden when JS is enabled
   ============================================ */
[data-animate] {
  opacity: 1;
  transform: none;
}

/* ============================================
   REDUCED MOTION SUPPORT
   Respect user's motion preferences
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  
  [data-animate].animate-in {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================
   MOBILE OPTIMIZATIONS
   Simplified animations on smaller screens
   ============================================ */
@media (max-width: 768px) {
  .js-enabled [data-animate] {
    transform: translateY(20px);
  }
  
  .js-enabled [data-animate="slide-up"] {
    transform: translateY(30px);
  }
  
  .js-enabled [data-animate="slide-left"],
  .js-enabled [data-animate="slide-right"] {
    transform: translateY(20px);
  }
  
  .js-enabled [data-animate].animate-in {
    transform: translateY(0);
  }
  
  /* Faster transitions on mobile for better performance */
  .js-enabled [data-animate] {
    transition-duration: 0.5s;
  }
}

/* ============================================
   ACCESSIBILITY: HIGH CONTRAST MODE
   ============================================ */
@media (prefers-contrast: high) {
  [data-animate] {
    opacity: 1 !important;
  }
}