/* Hide elements initially so they don't jump */
[data-fade] {
    opacity: 0;
    will-change: opacity, transform;
}

/* Base class applied while animating */
.fade-item {
    animation-fill-mode: both !important;
}

/* Keeps elements visible permanently after animating */
.is-visible {
    opacity: 1 !important;
    transform: none !important;
}

/* Keyframe Animations */
@keyframes fade-up {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-down {
    0% {
        opacity: 0;
        transform: translateY(-50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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