/**
 * Dynamic Headline Animator Styles
 * Version: 1.0.0
 * Author: P Adhil Khan
 * Website: ebookdata.store
 */

/* The main wrapper for the headline. We use this for alignment and basic styles. */
.dha-wrapper {
    /* Set opacity to 1 so the container itself is visible. The children are hidden. */
    opacity: 1;
    /* This makes sure that even if text wraps, it stays aligned. */
    display: flex;
    flex-wrap: wrap;
    /* Align to the baseline of the text. */
    align-items: baseline; 
}

/* 
 * This is the individual animation unit (a letter or a word). 
 * This is the most important part for preparing the animation.
*/
.dha-wrapper .dha-unit {
    /* Initially hide each unit. The JS animation will make it visible. */
    opacity: 0; 
    /* 
     * Using inline-block allows us to apply transforms like translateY, scale, rotate etc.
     * which don't work on default inline elements like <span>.
     */
    display: inline-block;
}

/* Add a tiny bit of space to words for better readability. */
.dha-wrapper[data-split-by="word"] .dha-unit {
    margin-right: 0.25em;
}