/* Animated Text Blocks — Frontend Styles */

.atb-block {
    display: block;
    width: 100%;
    /*
     * overflow must be visible so letters flying in from outside the block
     * bounds are not clipped. Page builders (Themify, Elementor, etc.) often
     * set overflow:hidden on their module wrappers — we can't override those
     * outer containers, but we ensure our own element doesn't add clipping.
     */
    overflow: visible;
}

/*
 * Themify Builder wraps modules in .module-content which can have
 * overflow:hidden. We nudge our stage to ensure the text area itself
 * has room, but cannot override the builder's outer wrapper.
 * Best practice: in Themify Builder, set the module's padding to give
 * the animation room to breathe (e.g. 60px top/bottom padding on the row).
 */
.themify_builder .atb-block,
.tf_builder_module .atb-block {
    overflow: visible;
}

.atb-stage {
    display: block;
    position: relative;
}

.atb-line {
    display: block;
    margin-bottom: 0.1em;
}

.atb-blank {
    height: 0.7em;
}

.atb-word {
    display: inline-block;
    white-space: nowrap;
    margin-right: 0.28em;
}

.atb-word:last-child {
    margin-right: 0;
}

.atb-letter {
    display: inline-block;
    will-change: transform, opacity, color;
    /* Prevent layout shift during animation */
    position: relative;
}

.atb-space {
    display: inline-block;
    width: 0.3em;
}

/* Trigger button */
.atb-trigger-btn {
    display: inline-block;
    margin-top: 12px;
    padding: 6px 18px;
    border: 1px solid currentColor;
    border-radius: 3px;
    background: transparent;
    cursor: pointer;
    font-size: 0.85em;
    opacity: 0.65;
    transition: opacity 0.2s;
}

.atb-trigger-btn:hover {
    opacity: 1;
}

/* Responsive font scaling — can be overridden per-block */
@media (max-width: 480px) {
    .atb-block {
        word-break: break-word;
    }
    .atb-word {
        margin-right: 0.22em;
    }
}