/* ============================================================
   Typography Animation Widget — Styles
   ============================================================ */

/* Container */
.ce-typography-animation-container {
    overflow: hidden;
    position: relative;
}

.ce-typography-animation-link {
    color: inherit;
    display: inline-block;
    text-decoration: none;
}

.ce-typography-animation-link:hover,
.ce-typography-animation-link:focus {
    color: inherit;
    text-decoration: none;
}

/* Base text element */
.ce-typography-animation-text {
    line-height: 1.2;
    margin: 0;
    position: relative;
    display: inline-block;
    width: 100%;
    /* Prevent invisible flash on page load before JS splits chars */
    opacity: 1;
    transition: color 0.3s ease;
}

/* ── Splitting.js base ──────────────────────────────────────── */
.ce-typography-animation-text .word {
    display: inline-block;
    white-space: nowrap;
}

.ce-typography-animation-text .char {
    display: inline-block;
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* Do NOT set opacity here — GSAP owns it after splitting */
}

/* Whitespace between words */
.ce-typography-animation-text .whitespace {
    display: inline-block;
    white-space: pre;
}

/* ── Char-wrap (Effects 11 & 12 — clip reveal) ──────────────── */
.char-wrap {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    line-height: inherit;
}

/* ── 3-D perspective containers (Effects 6, 7, 13, 15, 20) ─── */
.ce-typography-animation-text[data-effect="6"]  .word,
.ce-typography-animation-text[data-effect="7"]  .word,
.ce-typography-animation-text[data-effect="13"] .word,
.ce-typography-animation-text[data-effect="15"] .word {
    perspective: 2000px;
    transform-style: preserve-3d;
}

/* ── Mobile: show text immediately when animation disabled ──── */
.ce-typography-animation-text[data-disable-mobile="true"] .char {
    /* JS sets chars invisible; on mobile (<768) we keep them visible */
}

@media (max-width: 767px) {
    .ce-typography-animation-text[data-disable-mobile="true"] .char,
    .ce-typography-animation-text[data-disable-mobile="true"] .word {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}

/* ── Editor stability ────────────────────────────────────────── */
/* In the Elementor editor, prevent invisible text if JS fails   */
.elementor-editor-active .ce-typography-animation-text .char {
    opacity: 1;
}

/* ── Pinned-effect wrapper ───────────────────────────────────── */
/* Effects 14 & 15 pin the parent; make sure it has enough height */
.ce-typography-animation-text[data-effect="14"],
.ce-typography-animation-text[data-effect="15"] {
    will-change: transform;
}