/* Base styles for animated elements */
[data-animate] {
    will-change: transform, opacity;
    transition-property: transform, opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 700ms;
}

/* Ensure elements are hidden by default */
[data-animate] {
    opacity: 0;
}

/* Fade In Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Slide Up Animation */
@keyframes slideUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Slide In Animation */
@keyframes slideIn {
    from {
        transform: translateX(-50px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Animation Classes */
.fadeIn {
    animation: fadeIn 0.8s ease-out forwards;
}

.animate-slideUp {
    animation: slideUp 0.8s ease-out forwards;
}

.slideIn {
    animation: slideIn 0.8s ease-out forwards;
}

/* Initial state for animated elements */
.scroll-animate,
.animate-on-scroll,
.animate-on-scroll-slide {
    opacity: 0;
}