/* ============================================
   Premium Scroll Animation Framework
   ============================================ */

/* Base Animation Setup */
[class*="animate-"] {
  opacity: 0;
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

[class*="animate-"].is-visible {
  opacity: 1;
}

/* ============================================
   Fade Animations
   ============================================ */
.animate-fade-in {
  opacity: 0;
}

.animate-fade-in.is-visible {
  opacity: 1;
}

/* ============================================
   Slide Animations
   ============================================ */
.animate-slide-up {
  opacity: 0;
  transform: translateY(50px);
}

.animate-slide-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.animate-slide-down {
  opacity: 0;
  transform: translateY(-50px);
}

.animate-slide-down.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.animate-slide-left {
  opacity: 0;
  transform: translateX(50px);
}

.animate-slide-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.animate-slide-right {
  opacity: 0;
  transform: translateX(-50px);
}

.animate-slide-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* ============================================
   Scale Animations
   ============================================ */
.animate-scale-up {
  opacity: 0;
  transform: scale(0.85);
  transform-origin: center;
}

.animate-scale-up.is-visible {
  opacity: 1;
  transform: scale(1);
}

.animate-scale-down {
  opacity: 0;
  transform: scale(1.15);
  transform-origin: center;
}

.animate-scale-down.is-visible {
  opacity: 1;
  transform: scale(1);
}

.animate-zoom-in {
  opacity: 0;
  transform: scale(0.5);
  transform-origin: center;
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.animate-zoom-in.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* ============================================
   Rotation Animations
   ============================================ */
.animate-rotate-in {
  opacity: 0;
  transform: rotate(-15deg);
}

.animate-rotate-in.is-visible {
  opacity: 1;
  transform: rotate(0deg);
}

.animate-flip-x {
  opacity: 0;
  transform: perspective(1000px) rotateX(90deg);
  transform-origin: center;
}

.animate-flip-x.is-visible {
  opacity: 1;
  transform: perspective(1000px) rotateX(0deg);
}

.animate-flip-y {
  opacity: 0;
  transform: perspective(1000px) rotateY(90deg);
  transform-origin: center;
}

.animate-flip-y.is-visible {
  opacity: 1;
  transform: perspective(1000px) rotateY(0deg);
}

/* ============================================
   Timing Functions
   ============================================ */
.ease-in {
  transition-timing-function: ease-in;
}

.ease-out {
  transition-timing-function: ease-out;
}

.ease-in-out {
  transition-timing-function: ease-in-out;
}

.bounce {
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.elastic {
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ============================================
   Animation Delays
   ============================================ */
.delay-100 {
  transition-delay: 0.1s;
}

.delay-200 {
  transition-delay: 0.2s;
}

.delay-300 {
  transition-delay: 0.3s;
}

.delay-400 {
  transition-delay: 0.4s;
}

.delay-500 {
  transition-delay: 0.5s;
}

/* ============================================
   Parallax Effects
   ============================================ */
.parallax-slow,
.parallax-medium,
.parallax-fast {
  transition: transform 0.1s linear;
  will-change: transform;
}

/* ============================================
   Stagger Container
   ============================================ */
.stagger-children > * {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.stagger-children > *.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Individual delays for stagger effect */
.stagger-children > *:nth-child(1).is-visible { transition-delay: 0s; }
.stagger-children > *:nth-child(2).is-visible { transition-delay: 0.1s; }
.stagger-children > *:nth-child(3).is-visible { transition-delay: 0.2s; }
.stagger-children > *:nth-child(4).is-visible { transition-delay: 0.3s; }
.stagger-children > *:nth-child(5).is-visible { transition-delay: 0.4s; }
.stagger-children > *:nth-child(6).is-visible { transition-delay: 0.5s; }
.stagger-children > *:nth-child(7).is-visible { transition-delay: 0.6s; }
.stagger-children > *:nth-child(8).is-visible { transition-delay: 0.7s; }
.stagger-children > *:nth-child(9).is-visible { transition-delay: 0.8s; }
.stagger-children > *:nth-child(10).is-visible { transition-delay: 0.9s; }
.stagger-children > *:nth-child(11).is-visible { transition-delay: 1s; }
.stagger-children > *:nth-child(12).is-visible { transition-delay: 1.1s; }
.stagger-children > *:nth-child(13).is-visible { transition-delay: 1.2s; }
.stagger-children > *:nth-child(14).is-visible { transition-delay: 1.3s; }
.stagger-children > *:nth-child(15).is-visible { transition-delay: 1.4s; }
.stagger-children > *:nth-child(16).is-visible { transition-delay: 1.5s; }
.stagger-children > *:nth-child(17).is-visible { transition-delay: 1.6s; }
.stagger-children > *:nth-child(18).is-visible { transition-delay: 1.7s; }
.stagger-children > *:nth-child(19).is-visible { transition-delay: 1.8s; }
.stagger-children > *:nth-child(20).is-visible { transition-delay: 1.9s; }
.stagger-children > *:nth-child(5).is-visible { transition-delay: 0.4s; }
.stagger-children > *:nth-child(6).is-visible { transition-delay: 0.5s; }
.stagger-children > *:nth-child(7).is-visible { transition-delay: 0.6s; }
.stagger-children > *:nth-child(8).is-visible { transition-delay: 0.7s; }
.stagger-children > *:nth-child(9).is-visible { transition-delay: 0.8s; }
.stagger-children > *:nth-child(10).is-visible { transition-delay: 0.9s; }

/* ============================================
   Mobile Responsive Adjustments
   ============================================ */
@media (max-width: 767px) {
  /* Reduce animation distances by 50% */
  .animate-slide-up {
    transform: translateY(25px);
  }
  
  .animate-slide-down {
    transform: translateY(-25px);
  }
  
  .animate-slide-left {
    transform: translateX(25px);
  }
  
  .animate-slide-right {
    transform: translateX(-25px);
  }
  
  /* Reduce animation durations by 25% */
  [class*="animate-"] {
    transition-duration: 0.6s;
  }
  
  .animate-zoom-in {
    transition-duration: 0.75s;
  }
  
  /* Disable parallax on mobile */
  .parallax-slow,
  .parallax-medium,
  .parallax-fast {
    transform: none !important;
    will-change: auto;
  }
}

/* ============================================
   Accessibility - Reduced Motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  [class*="animate-"],
  .parallax-slow,
  .parallax-medium,
  .parallax-fast,
  .stagger-children > * {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================
   Critical Content - Always Visible
   ============================================ */
.critical-content {
  opacity: 1 !important;
  transform: none !important;
}

/* ============================================
   Legacy Support (Backward Compatibility)
   ============================================ */
.scroll-animate {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scroll-animate.animate-visible {
  opacity: 1;
  transform: translateY(0);
}

.scroll-animate-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scroll-animate-left.animate-visible {
  opacity: 1;
  transform: translateX(0);
}

.scroll-animate-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scroll-animate-right.animate-visible {
  opacity: 1;
  transform: translateX(0);
}

.scroll-animate-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scroll-animate-scale.animate-visible {
  opacity: 1;
  transform: scale(1);
}

.scroll-animate-delay-1 {
  transition-delay: 0.1s;
}

.scroll-animate-delay-2 {
  transition-delay: 0.2s;
}

.scroll-animate-delay-3 {
  transition-delay: 0.3s;
}

.scroll-animate-delay-4 {
  transition-delay: 0.4s;
}