/* ============================================================
   Mouse Trail Animation Widget — Styles
   ============================================================ */

/* ── Container ───────────────────────────────────────────── */
.ce-mouse-trail {
    position: relative;
    overflow: hidden;
    cursor: none;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-user-select: none;
    user-select: none;
}

/* ── Headings wrapper ────────────────────────────────────── */
.ce-content-title {
    position: relative;
    z-index: 90;
    pointer-events: none;
    text-align: center;
}

.ce-heading {
    margin: 0;
    padding: 0;
    line-height: 1.2;
    position: relative;
    z-index: 91;
    /* Pre-hide before JS runs; JS will reveal via animation */
    /* DO NOT set opacity:0 here — let GSAP handle it to avoid
       flash if JS is slow. Instead, we use a tiny delay in CSS
       that JS overrides immediately. */
}

/* Prevent flash: hide headings just long enough for GSAP to set up */
.ce-mouse-trail:not(.ce-text-ready) .ce-heading {
    opacity: 0;
}
.ce-mouse-trail.ce-text-ready .ce-heading {
    opacity: 1;
}

/* Fallback: if JS fails, show after 2s anyway */
@keyframes ce-reveal-fallback {
    to { opacity: 1; }
}
.ce-mouse-trail:not(.ce-text-ready) .ce-heading {
    animation: ce-reveal-fallback 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;
}

/* ── Source images (hidden, used as data sources) ────────── */
.ce-content-img {
    display: none !important;
}

/* ── Trail container items ───────────────────────────────── */
.ce-trail-item {
    position: absolute;
    pointer-events: none;
    z-index: 10;
    will-change: transform, opacity;
}

/* ── Simple flame-style images ───────────────────────────── */
.ce-trail-img {
    position: absolute;
    pointer-events: none;
    z-index: 10;
    object-fit: cover;
    will-change: transform;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.35),
        0 2px 8px rgba(0, 0, 0, 0.2);
    /* border-radius is set inline per-widget setting */
}

/* ── Fragment backgrounds (liquid / curtain effects) ─────── */
.ce-trail-item > div {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    will-change: clip-path, transform, opacity;
}

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 768px) {
    .ce-mouse-trail {
        cursor: default;
    }
    .ce-content-title {
        padding: 0 16px;
    }
}

/* ── Elementor editor ────────────────────────────────────── */
.elementor-editor-active .ce-mouse-trail {
    cursor: default;
    min-height: 200px;
}

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

/* ── Box model ───────────────────────────────────────────── */
.ce-mouse-trail *,
.ce-mouse-trail *::before,
.ce-mouse-trail *::after {
    box-sizing: border-box;
}