/* --- Fade-Up Animation --- */
/* use class fade-up */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

    .fade-up.is-visible {
        opacity: 1;
        transform: translateY(0);
    }



/* --- Side-by-Side Animation --- */
/* use class slide-in-left, slide-in-right */
.slide-in-left, .slide-in-right {
    opacity: 0;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.slide-in-left {
    transform: translateX(-50px);
}

.slide-in-right {
    transform: translateX(50px);
}

    .slide-in-left.is-visible,
    .slide-in-right.is-visible {
        opacity: 1;
        transform: translateX(0);
    }


/* --- Letter-by-Letter Fade-in Animation --- */
/* use class animate-letters */
.animate-letters span {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.animate-letters.is-visible span {
    opacity: 1;
    transform: translateY(0);
}