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

/* Animation definitions */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideLeft {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideRight {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleUp {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes scaleDown {
    from {
        opacity: 0;
        transform: scale(1.1);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate(-10deg) scale(0.95);
    }
    to {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}

/* Base animation state */
[data-animate] {
    opacity: 0;
    /* Ensure initial state without animation */
}

/* Applied animation state */
[data-animate].animate-in[data-animate="fade-in"] {
    animation: fadeIn 0.6s var(--ease-smooth) forwards;
}

[data-animate].animate-in[data-animate="slide-up"] {
    animation: slideUp 0.6s var(--ease-smooth) forwards;
}

[data-animate].animate-in[data-animate="slide-down"] {
    animation: slideDown 0.6s var(--ease-smooth) forwards;
}

[data-animate].animate-in[data-animate="slide-left"] {
    animation: slideLeft 0.6s var(--ease-smooth) forwards;
}

[data-animate].animate-in[data-animate="slide-right"] {
    animation: slideRight 0.6s var(--ease-smooth) forwards;
}

[data-animate].animate-in[data-animate="scale-up"] {
    animation: scaleUp 0.6s var(--ease-smooth) forwards;
}

[data-animate].animate-in[data-animate="scale-down"] {
    animation: scaleDown 0.6s var(--ease-smooth) forwards;
}

[data-animate].animate-in[data-animate="rotate-in"] {
    animation: rotateIn 0.6s var(--ease-smooth) forwards;
}

[data-animate].animate-in[data-animate="bounce-in"] {
    animation: bounceIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

/* Stagger effect for grouped elements */
[data-animate][data-stagger] {
    --stagger-delay: calc(var(--stagger-index, 0) * 0.1s);
    animation-delay: var(--stagger-delay);
}

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