/* ============================================
   SCROLL ANIMATION SYSTEM
   Smooth fade-in animations on scroll
   ============================================ */

/* Base animation setup - elements start hidden */
.scroll-animate,
[data-scroll] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), 
              transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}

/* Active state - when element is in viewport */
.scroll-animate.active,
[data-scroll].active {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered animation delays for child elements */
.scroll-animate.active:nth-child(1),
[data-scroll].active:nth-child(1) {
  transition-delay: 0s;
}

.scroll-animate.active:nth-child(2),
[data-scroll].active:nth-child(2) {
  transition-delay: 0.1s;
}

.scroll-animate.active:nth-child(3),
[data-scroll].active:nth-child(3) {
  transition-delay: 0.2s;
}

.scroll-animate.active:nth-child(4),
[data-scroll].active:nth-child(4) {
  transition-delay: 0.3s;
}

.scroll-animate.active:nth-child(5),
[data-scroll].active:nth-child(5) {
  transition-delay: 0.4s;
}

.scroll-animate.active:nth-child(6),
[data-scroll].active:nth-child(6) {
  transition-delay: 0.5s;
}

/* Animation variants */
[data-scroll-animate] {
  opacity: 0;
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

[data-scroll-animate="fade-up"] {
  transform: translateY(40px);
}

[data-scroll-animate="fade-down"] {
  transform: translateY(-40px);
}

[data-scroll-animate="fade-left"] {
  transform: translateX(40px);
}

[data-scroll-animate="fade-right"] {
  transform: translateX(-40px);
}

[data-scroll-animate="fade"] {
  transform: none;
}

[data-scroll-animate="zoom-in"] {
  transform: scale(0.9);
}

[data-scroll-animate="zoom-out"] {
  transform: scale(1.1);
}

[data-scroll-animate="rotate-in"] {
  transform: rotate(-10deg) scale(0.9);
}

[data-scroll-animate="flip-left"] {
  transform: perspective(1000px) rotateY(-20deg);
}

[data-scroll-animate="flip-right"] {
  transform: perspective(1000px) rotateY(20deg);
}

/* Active state - when element is in viewport */
[data-scroll-animate].animate-in {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1) rotate(0) rotateY(0);
}

/* Delay variations for staggered animations */
[data-scroll-delay="100"].animate-in {
  transition-delay: 0.1s;
}

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

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

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

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

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

[data-scroll-delay="700"].animate-in {
  transition-delay: 0.7s;
}

[data-scroll-delay="800"].animate-in {
  transition-delay: 0.8s;
}

/* Duration variations */
[data-scroll-duration="fast"] {
  transition-duration: 0.4s;
}

[data-scroll-duration="normal"] {
  transition-duration: 0.8s;
}

[data-scroll-duration="slow"] {
  transition-duration: 1.2s;
}

/* Easing variations */
[data-scroll-easing="ease"] {
  transition-timing-function: ease;
}

[data-scroll-easing="ease-in"] {
  transition-timing-function: ease-in;
}

[data-scroll-easing="ease-out"] {
  transition-timing-function: ease-out;
}

[data-scroll-easing="ease-in-out"] {
  transition-timing-function: ease-in-out;
}

[data-scroll-easing="bounce"] {
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Repeat animation option */
[data-scroll-repeat="true"] {
  /* Animation will trigger every time element enters viewport */
}

/* Once animation option (default) */
[data-scroll-repeat="false"].animate-in {
  /* Animation triggers only once */
}

/* Disable animations on reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .scroll-animate,
  [data-scroll],
  [data-scroll-animate] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Mobile optimization - simpler animations */
@media (max-width: 768px) {
  .scroll-animate,
  [data-scroll] {
    transform: translateY(20px);
    transition-duration: 0.5s;
  }
  
  [data-scroll-animate] {
    transition-duration: 0.5s;
  }
  
  [data-scroll-animate="fade-up"],
  [data-scroll-animate="fade-down"] {
    transform: translateY(20px);
  }
  
  [data-scroll-animate="fade-left"],
  [data-scroll-animate="fade-right"] {
    transform: translateX(20px);
  }
}