/* Core class - required for all animations */
.animate-scroll {
    opacity: 0;
    transition: opacity 1s ease, transform 1.2s ease;
}

/* When element enters viewport - triggers animation */
.animate-scroll.visible {
    opacity: 1;
    transform: none !important;
}

/* === Your 4 Animation Styles === */

/* 1. From Left → slides in from left side */
.from-left {
    transform: translateX(-100px) scale(0.95);
}

/* 2. From Right → slides in from right side */
.from-right {
    transform: translateX(100px) scale(0.95);
}

/* 3. From Bottom → comes up to top */
.from-bottom {
    transform: translateY(100px) scale(0.95);
}

/* 4. From Top → comes down to bottom */
.from-top {
    transform: translateY(-100px) scale(0.95);
}

/* Optional: Stagger multiple items (add delay-1, delay-2, etc.) */
.delay-1 {
    transition-delay: 0.1s;
}

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

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

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

/* 3d fade effect end */