/**
 * Scroll Animation System
 * Integrates with motion tokens from design system
 * Works with data-animate attributes on any HTML element
 */

/* Base animation state */
[data-animate] {
  opacity: 0;
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Visible state */
[data-animate].is-visible {
  opacity: 1;
  transform: none !important;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* === Fade Animations === */
[data-animate="fade"] {
  transition-duration: 0.4s;
}

[data-animate="fadeUp"] {
  transform: translateY(40px);
  transition-duration: 0.6s;
}

[data-animate="fadeDown"] {
  transform: translateY(-40px);
  transition-duration: 0.6s;
}

[data-animate="fadeLeft"] {
  transform: translateX(40px);
  transition-duration: 0.6s;
}

[data-animate="fadeRight"] {
  transform: translateX(-40px);
  transition-duration: 0.6s;
}

/* === Scale Animations === */
[data-animate="scale"] {
  transform: scale(0.9);
  transition-duration: 0.5s;
}

[data-animate="scaleUp"] {
  transform: scale(0.8);
  transition-duration: 0.5s;
}

/* === Slide Animations === */
[data-animate="slideUp"] {
  transform: translateY(60px);
  transition-duration: 0.7s;
}

[data-animate="slideDown"] {
  transform: translateY(-60px);
  transition-duration: 0.7s;
}

[data-animate="slideLeft"] {
  transform: translateX(60px);
  transition-duration: 0.7s;
}

[data-animate="slideRight"] {
  transform: translateX(-60px);
  transition-duration: 0.7s;
}

/* === Rotation Animations === */
[data-animate="rotateIn"] {
  transform: rotate(-10deg) scale(0.9);
  transition-duration: 0.8s;
}

/* === Blur Animations === */
[data-animate="blur"] {
  filter: blur(8px);
  transition-property: opacity, transform, filter;
  transition-duration: 0.6s;
}

[data-animate="blur"].is-visible {
  filter: blur(0);
}

/* === Stagger Support === */
/* Automatically adds delay based on child index */
[data-animate-stagger] > [data-animate] {
  transition-delay: calc(var(--stagger-index, 0) * 0.1s);
}

/* Fast stagger */
[data-animate-stagger="fast"] > [data-animate] {
  transition-delay: calc(var(--stagger-index, 0) * 0.05s);
}

/* Slow stagger */
[data-animate-stagger="slow"] > [data-animate] {
  transition-delay: calc(var(--stagger-index, 0) * 0.15s);
}

/* === Duration Modifiers === */
[data-animate-duration="fast"] {
  transition-duration: 0.2s !important;
}

[data-animate-duration="normal"] {
  transition-duration: 0.4s !important;
}

[data-animate-duration="slow"] {
  transition-duration: 0.8s !important;
}

[data-animate-duration="slower"] {
  transition-duration: 1.2s !important;
}

/* === Delay Modifiers === */
[data-animate-delay="1"] {
  transition-delay: 0.1s;
}

[data-animate-delay="2"] {
  transition-delay: 0.2s;
}

[data-animate-delay="3"] {
  transition-delay: 0.3s;
}

[data-animate-delay="4"] {
  transition-delay: 0.4s;
}

[data-animate-delay="5"] {
  transition-delay: 0.5s;
}