/* ==============================
   Base setup
   ============================== */

.scroll-animate {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    will-change: opacity, transform;
}

    .scroll-animate.active {
        opacity: 1;
        transform: translate(0, 0);
    }

/* ==============================
   Animations
   ============================== */

/* Fade In */
.fadeIn {
    transform: none;
}

/* Fade In Left */
.fadeInLeft {
    transform: translateX(-60px);
}

.scroll-animate.active.fadeInLeft {
    transform: translateX(0);
}

/* Fade In Right */
.fadeInRight {
    transform: translateX(60px);
}

.scroll-animate.active.fadeInRight {
    transform: translateX(0);
}

/* Fade In Up */
.fadeInUp {
    transform: translateY(60px);
}

.scroll-animate.active.fadeInUp {
    transform: translateY(0);
}

/* Fade In Down */
.fadeInDown {
    transform: translateY(-60px);
}

.scroll-animate.active.fadeInDown {
    transform: translateY(0);
}

/* Zoom In */
.zoomIn {
    transform: scale(0.85);
}

.scroll-animate.active.zoomIn {
    transform: scale(1);
}

/* ==============================
   Delay utilities
   ============================== */

.delay-1 {
    transition-delay: 0.2s;
}

.delay-2 {
    transition-delay: 0.4s;
}

.delay-3 {
    transition-delay: 0.6s;
}

.delay-4 {
    transition-delay: 0.8s;
}