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

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

/* Fade In */
.fade-in {
    opacity: 0;
}
.fade-in.animated {
    opacity: 1;
}

/* Fade In Up */
.fade-in-up {
    opacity: 0;
    transform: translateY(50px);
}
.fade-in-up.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Fade In Down */
.fade-in-down {
    opacity: 0;
    transform: translateY(-50px);
}
.fade-in-down.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Slide In Left */
.slide-in-left {
    opacity: 0;
    transform: translateX(-100px);
}
.slide-in-left.animated {
    opacity: 1;
    transform: translateX(0);
}

/* Slide In Right */
.slide-in-right {
    opacity: 0;
    transform: translateX(100px);
}
.slide-in-right.animated {
    opacity: 1;
    transform: translateX(0);
}

/* Zoom In */
.zoom-in {
    opacity: 0;
    transform: scale(0.8);
}
.zoom-in.animated {
    opacity: 1;
    transform: scale(1);
}

/* Bounce In */
.bounce-in {
    opacity: 0;
    transform: scale(0.3);
}
.bounce-in.animated {
    opacity: 1;
    transform: scale(1);
    animation: bounce 0.6s;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: scale(1);
    }
    40% {
        transform: scale(1.1);
    }
    60% {
        transform: scale(1.05);
    }
}

/* Slower animations for better UX */
.animate-slow {
    transition-duration: 1.2s !important;
}