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

[data-animate] {
    opacity: 0;
    transition: opacity var(--transition-slower),
                transform var(--transition-slower);
}

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

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

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

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

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

/* Visible state */
[data-animate].is-visible {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

/* Staggered children */
[data-animate="stagger"] {
    opacity: 1;
    transform: none;
}

[data-animate="stagger"] > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--transition-slower),
                transform var(--transition-slower);
}

[data-animate="stagger"].is-visible > *:nth-child(1) { transition-delay: 0ms; opacity: 1; transform: none; }
[data-animate="stagger"].is-visible > *:nth-child(2) { transition-delay: 100ms; opacity: 1; transform: none; }
[data-animate="stagger"].is-visible > *:nth-child(3) { transition-delay: 200ms; opacity: 1; transform: none; }
[data-animate="stagger"].is-visible > *:nth-child(4) { transition-delay: 300ms; opacity: 1; transform: none; }
[data-animate="stagger"].is-visible > *:nth-child(5) { transition-delay: 400ms; opacity: 1; transform: none; }
[data-animate="stagger"].is-visible > *:nth-child(6) { transition-delay: 500ms; opacity: 1; transform: none; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    [data-animate] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    [data-animate="stagger"] > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}