/* ============================================================
   Typography Animation 2 — Styles
   ============================================================ */

.ce-typography-2 {
    position: relative;
    overflow: hidden;
    display: block;
}

.ce-heading {
    margin: 0;
    padding: 0;
    line-height: 1.2;
    position: relative;
    z-index: 10;
}

/* Pre-hide before JS runs */
.ce-typography-2:not(.ce-text-ready) .ce-heading {
    opacity: 0;
}
.ce-typography-2.ce-text-ready .ce-heading {
    opacity: 1;
}

/* Fallback: if JS fails, show after 2s anyway */
@keyframes ce-reveal-fallback-2 {
    to { opacity: 1; }
}
.ce-typography-2:not(.ce-text-ready) .ce-heading {
    animation: ce-reveal-fallback-2 0.5s 2s forwards;
}

/* Splitting.js char/word wrappers inside headings */
.ce-heading .char,
.ce-heading .word {
    display: inline-block;
    will-change: transform, opacity;
}

.ce-heading .whitespace {
    display: inline-block;
    white-space: pre;
}

/* Ensure chars are visible inside editor */
.elementor-editor-active .ce-heading .char,
.elementor-editor-active .ce-heading {
    opacity: 1 !important;
}

.ce-typography-2 *,
.ce-typography-2 *::before,
.ce-typography-2 *::after {
    box-sizing: border-box;
}