/* Base animation */
.animate-on-scroll {
    opacity: 0;
    transition: all 0.8s ease-out;
}

/* Directions */
.animate-from-left {
    transform: translateX(-50px);
}

.animate-from-right {
    transform: translateX(50px);
}

.animate-from-top {
    transform: translateY(-30px);
}

.animate-from-bottom {
    transform: translateY(30px);
}

/* Active state */
.animate-on-scroll.active {
    opacity: 1;
    transform: translateX(0) translateY(0);
}

/* Optional delay system for domino effect */
.animate-delay-1 {
    transition-delay: 0.1s;
}

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

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

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

.animate-delay-5 {
    transition-delay: 0.5s;
}

.animate-delay-6 {
    transition-delay: 0.6s;
}

.animate-delay-7 {
    transition-delay: 0.7s;
}

.animate-delay-8 {
    transition-delay: 0.8s;
}

.animate-delay-9 {
    transition-delay: 0.9s;
}

.animate-delay-10 {
    transition-delay: 1s;
}

.animate-delay-11 {
    transition-delay: 1.1s;
}

.animate-delay-12 {
    transition-delay: 1.2s;
}

.animate-delay-13 {
    transition-delay: 1.3s;
}

.animate-delay-14 {
    transition-delay: 1.4s;
}

.animate-delay-15 {
    transition-delay: 1.5s;
}

html, body {
    overflow-x: hidden; /* Hide horizontal scroll */
}