/* --- GENERAL ANIMATION UTILITY CLASSES --- */
.anim-element {
    opacity: 0;
}

/* This class hides content on initial load to prevent a "flash". 
   It's removed by animations.js as soon as the script runs. */
.preload-hidden {
    opacity: 0;
}


/* --- KEYFRAMES --- */

@keyframes slide-in-from-left {
    0% { transform: translateX(-50px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

@keyframes slide-in-from-right {
    0% { transform: translateX(50px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

@keyframes slide-in-from-top {
    0% { transform: translateY(-40px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes slide-in-from-bottom {
    0% { transform: translateY(50px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes slide-out-to-left {
    0% { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(-50px); opacity: 0; }
}

@keyframes slide-out-to-right {
    0% { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(50px); opacity: 0; }
}

@keyframes slide-out-to-top {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(-40px); opacity: 0; }
}

@keyframes slide-out-to-bottom {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(50px); opacity: 0; }
}

/* --- KEYFRAMES FOR FEATURE CARDS --- */
/* ADD THIS RULE */
.feature-card {
    opacity: 0;
}

@keyframes card-fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes card-fade-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}