/* ANIMATION */

.animate-lr-on-scroll {
    transform: translateX(-100%); /* Start from the left */
    opacity: 0;
    transition: transform 1s ease-in-out, opacity 1s ease-in-out;
}

.animate-bt-on-scroll {
    transform: translateY(100%); 
    opacity: 0;
    transition: transform 1s ease-in-out, opacity 1s ease-in-out;
}

.animate-y-active {
    transform: translateY(0);
    opacity: 1;
}

/* Class to activate animation */
.animate-x-active {
    transform: translateX(0);
    opacity: 1;
}

/* Initial state: fully transparent */
.animate-fade-on-scroll {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

/* When active, make it fully visible */
.animate-fade-active {
    opacity: 1;
}

/* Style for each letter */
.letter {
    display: inline-block;
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

/* Active state when animation starts */
.letter-drop {
    transform: translateY(0);
    opacity: 1;
}

/* Delay transition manually */
.delay-transition {
    transition-delay: 0.2s;
}