/* Base setup for the split elements */
.lw-anim-wrapper .char,
.lw-anim-wrapper .word,
.lw-anim-wrapper .line {
    opacity: 0;
    /* You can tweak the timing and easing here */
    transition: transform 1.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.6s ease-out;
}

/* Prevent layout breaking with split lines */
.lw-anim-wrapper .line {
    overflow: hidden;
}

/* --- Initial States (The Directions) --- */
.lw-fade-up .char, .lw-fade-up .word, .lw-fade-up .line { 
    transform: translateY(30px); 
}
.lw-fade-down .char, .lw-fade-down .word, .lw-fade-down .line { 
    transform: translateY(-30px); 
}
.lw-fade-left .char, .lw-fade-left .word, .lw-fade-left .line { 
    transform: translateX(30px); 
}
.lw-fade-right .char, .lw-fade-right .word, .lw-fade-right .line { 
    transform: translateX(-30px); 
}

/* --- The Animated State --- */
.lw-anim-wrapper.lw-is-animated .char,
.lw-anim-wrapper.lw-is-animated .word,
.lw-anim-wrapper.lw-is-animated .line {
    opacity: 1;
    transform: translate(0, 0);
}