/* Scroll Animation Utilities */

/* Fade in from bottom on scroll */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(60px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade in from left */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-60px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Fade in from right */
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(60px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Scale in */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Scroll animation classes */
.scroll-animate {
    opacity: 0;
}

.scroll-animate.animate-in {
    animation-duration: 0.8s;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-animate.fade-up {
    animation-name: fadeInUp;
}

.scroll-animate.fade-left {
    animation-name: fadeInLeft;
}

.scroll-animate.fade-right {
    animation-name: fadeInRight;
}

.scroll-animate.scale-in {
    animation-name: scaleIn;
}

/* Stagger delays for multiple items */
.scroll-animate.delay-100 {
    animation-delay: 0.1s;
}

.scroll-animate.delay-200 {
    animation-delay: 0.2s;
}

.scroll-animate.delay-300 {
    animation-delay: 0.3s;
}

.scroll-animate.delay-400 {
    animation-delay: 0.4s;
}

.scroll-animate.delay-500 {
    animation-delay: 0.5s;
}

.scroll-animate.delay-600 {
    animation-delay: 0.6s;
}

.scroll-animate.delay-700 {
    animation-delay: 0.7s;
}

.scroll-animate.delay-800 {
    animation-delay: 0.8s;
}