/* --- 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);
}