/* Animation Base Styles */
.animate-on-scroll {
    opacity: 0;
    visibility: hidden;
    transition: all 0.6s ease-out;
    will-change: transform, opacity;
}

.animate-on-scroll.animated {
    opacity: 1;
    visibility: visible;
}

/* Specific Animation Effects */
.slideInLeft {
    transform: translateX(-50px);
}
.slideInLeft.animated {
    transform: translateX(0);
}

.slideInRight {
    transform: translateX(50px);
}
.slideInRight.animated {
    transform: translateX(0);
}

.slideInTop {
    transform: translateY(-50px);
}
.slideInTop.animated {
    transform: translateY(0);
}

.slideInBottom {
    transform: translateY(50px);
}
.slideInBottom.animated {
    transform: translateY(0);
}

.slideInTopBounce {
    transform: translateY(-50px);
    animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.slideInTopBounce.animated {
    transform: translateY(0);
}

.fadeIn {
    opacity: 0;
}
.fadeIn.animated {
    opacity: 1;
}

.zoomIn {
    transform: scale(0.95);
}
.zoomIn.animated {
    transform: scale(1);
}

/* Optional: Staggered animations */
.animate-on-scroll.delay-1 { transition-delay: 0.1s; }
.animate-on-scroll.delay-2 { transition-delay: 0.2s; }
.animate-on-scroll.delay-3 { transition-delay: 0.3s; }
.animate-on-scroll.delay-4 { transition-delay: 0.4s; }
.animate-on-scroll.delay-5 { transition-delay: 0.5s; }