/**
 * ACG Native Solutions - Scroll Animation System
 * Intersection Observer driven, Elementor-portable
 * Animations use only transform + opacity (GPU-composited)
 */

/* Base state: hidden, waiting to be revealed */
.animate-on-scroll {
  opacity: 0;
  will-change: transform, opacity;
  transition:
    opacity var(--animate-duration) var(--animate-easing),
    transform var(--animate-duration) var(--animate-easing);
}

/* Revealed state */
.animate-on-scroll.is-visible {
  opacity: 1;
  transform: none;
}

/* Direction variants -- starting positions */
[data-animate="fade-up"] {
  transform: translateY(40px);
}

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

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

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

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

[data-animate="scale-up"] {
  transform: scale(0.92);
}

/* Stagger delay utilities (applied via data-delay attribute) */
[data-delay="100"] { transition-delay: 100ms; }
[data-delay="200"] { transition-delay: 200ms; }
[data-delay="300"] { transition-delay: 300ms; }
[data-delay="400"] { transition-delay: 400ms; }
[data-delay="500"] { transition-delay: 500ms; }
[data-delay="600"] { transition-delay: 600ms; }
[data-delay="700"] { transition-delay: 700ms; }
[data-delay="800"] { transition-delay: 800ms; }

/* Hero entrance -- plays on page load, not scroll */
.hero-animate {
  opacity: 0;
  transform: translateY(30px);
  animation: heroEntrance var(--animate-duration) var(--animate-easing) forwards;
}

.hero-animate--delay-1 { animation-delay: 200ms; }
.hero-animate--delay-2 { animation-delay: 400ms; }
.hero-animate--delay-3 { animation-delay: 600ms; }

@keyframes heroEntrance {
  to {
    opacity: 1;
    transform: none;
  }
}