/* Base state — elements are hidden before animation */
.will-animate {
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Starting transforms for each direction */
.will-animate.fade-in {
    transform: translateY(20px);
}

.will-animate.fade-in-left {
    transform: translateX(-40px);
}

.will-animate.fade-in-right {
    transform: translateX(40px);
}

.will-animate.fade-in-up {
    transform: translateY(40px);
}

/* Animated state — triggered when .animated is added */
.will-animate.animated {
    opacity: 1 !important;
    transform: translate(0, 0);
}