/* ============================================================
   Widget Title — Animation styles
   ============================================================ */

/* ── Keyframe: word sweep (left-to-right gradient brush) ── */
@keyframes gteaTitleWordSweep {
    from {
        background-position:   0%   center;
        -webkit-mask-position: 100% center;
                mask-position: 100% center;
    }
    to {
        background-position:   100% center;
        -webkit-mask-position: 0%   center;
                mask-position: 0%   center;
    }
}

/* ── Gradient base ──
   CSS vars are set via JS from data attributes at runtime. */
.gtea-widget-title--gradient {
    --title-from: #ffffff;
    --title-to:   #cccccc;
}

/* ── Word spans: inline-block for mask + background-clip support ──
   Words are hidden initially (mask-position 100% = fully masked out).
   Spaces use display:inline to stay in natural text flow. */
.gtea-widget-title--gradient .gtea-title-word {
    display: inline-block;
    vertical-align: baseline;

    /* Text invisible until animated */
    -webkit-text-fill-color: transparent;
    color: transparent;

    /* Gradient: bright brush color (left half) → settled color (right half) */
    background-image: linear-gradient(
        to right,
        var(--title-from) 50%,
        var(--title-to)   50%
    );
    background-size:         200% 100%;
    background-position:     0% center;
    -webkit-background-clip: text;
            background-clip: text;

    /* Soft-edged mask: word is fully hidden before animation (position 100%) */
    -webkit-mask-image: linear-gradient(
        to right,
        black 0%, black 40%,
        rgba(0, 0, 0, 0.7) 44%,
        rgba(0, 0, 0, 0.15) 48%,
        transparent 50%, transparent 100%
    );
            mask-image: linear-gradient(
        to right,
        black 0%, black 40%,
        rgba(0, 0, 0, 0.7) 44%,
        rgba(0, 0, 0, 0.15) 48%,
        transparent 50%, transparent 100%
    );
    -webkit-mask-size: 200% 100%;
            mask-size: 200% 100%;
    -webkit-mask-position: 100% center; /* fully hidden initially */
            mask-position: 100% center;
}

/* Space between words: transparent but occupies glyph-advance width */
.gtea-widget-title--gradient .gtea-title-space {
    display: inline;
    color: transparent;
}

/* ── Word actively sweeping (Gradient Reveal — time-based) ── */
.gtea-widget-title--gradient .gtea-title-word--active {
    animation-name:            gteaTitleWordSweep;
    animation-timing-function: ease-out;
    animation-fill-mode:       forwards;
}

/* ── Word fully revealed: clean settled state ── */
.gtea-widget-title--gradient .gtea-title-word--revealed {
    -webkit-mask-image:      none;
            mask-image:      none;
    background:              none;
    -webkit-background-clip: border-box;
            background-clip: border-box;
    -webkit-text-fill-color: var(--title-to, #cccccc);
    color:                   var(--title-to, #cccccc);
}

/* ── Space after a revealed word ── */
.gtea-widget-title--gradient .gtea-title-space--visible {
    color: var(--title-to, #cccccc);
}

/* ────────────────────────────────────────────────────────────
   <strong> inside animated word spans — color preservation
   ────────────────────────────────────────────────────────────
   The parent .gtea-title-word sets `-webkit-text-fill-color`
   (transparent during sweep, var(--title-to) when revealed).
   That property cascades to every child including <strong>,
   overriding its own `color` rule for actual text rendering.
   We re-anchor the fill to currentColor so <strong> always
   renders with the color the Elementor "Title strong" panel
   sets via `{{WRAPPER}} .gtea-widget-title strong`. When the
   strong control hasn't been touched, currentColor falls back
   to the parent's inherited color and behavior matches the
   non-strong text. The BEM class `.gtea-title__strong` is the
   primary hook; the bare `strong` selector keeps legacy markup
   working. */
.gtea-widget-title--gradient .gtea-title-word .gtea-title__strong,
.gtea-widget-title--gradient .gtea-title-word strong {
    -webkit-text-fill-color: currentColor;
            text-fill-color: currentColor;
}

/* ============================================================
   Per-character sequential reveal (char-mode)
   ============================================================
   Applied only when JS has split each .gtea-title-word into
   .gtea-title__char spans and marks the title with
   `--char-mode`. The legacy word-level mask/gradient is then
   neutralised so visibility is driven by the chars instead.

   Each char's `transition-delay` is set inline by JS based on
   a SINGLE global cumulative index (does NOT reset per word),
   guaranteeing strict left-to-right order across the whole
   title.

   Note: the legacy word-level rules above remain untouched so
   widgets that share `gteaWidgetTitleStyles` and animate at
   the word level (counters, testimonials, media-text) keep
   working exactly as before. */

/* Neutralise the word-level mask/hide when chars carry the reveal */
.gtea-widget-title--gradient.gtea-widget-title--char-mode .gtea-title-word {
    -webkit-text-fill-color: initial;
            text-fill-color: initial;
    color: inherit;
    background: none;
    background-image: none;
    -webkit-background-clip: border-box;
            background-clip: border-box;
    -webkit-mask-image: none;
            mask-image: none;
}

.gtea-widget-title--gradient.gtea-widget-title--char-mode .gtea-title-space {
    color: inherit;
    -webkit-text-fill-color: inherit;
            text-fill-color: inherit;
}

/* Per-character initial (pre-reveal) state */
.gtea-widget-title--gradient .gtea-title__char {
    display: inline-block;
    will-change: opacity, transform;
    opacity: 0;
    transform: translateY(0.18em);
    color:                   var(--title-from, #ffffff);
    -webkit-text-fill-color: var(--title-from, #ffffff);
            text-fill-color: var(--title-from, #ffffff);
    transition-property:        opacity, transform, color, -webkit-text-fill-color;
    transition-duration:        var(--gtea-char-duration, 400ms);
    transition-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1);
    transition-delay:           0ms; /* overridden inline by JS per char */
}

/* Revealing state — driven by each char's own transition-delay */
.gtea-widget-title--gradient.gtea-widget-title--revealing .gtea-title__char {
    opacity: 1;
    transform: translateY(0);
    color:                   var(--title-to, #cccccc);
    -webkit-text-fill-color: var(--title-to, #cccccc);
            text-fill-color: var(--title-to, #cccccc);
}

/* Chars belonging to a <strong>/<b>: inherit the parent's color (set by
   the Elementor "Title strong" control) instead of --title-from/--title-to.
   `currentColor` resolves to the <strong>'s own `color`, which keeps
   bold runs distinguishable throughout and after the animation. */
.gtea-widget-title--gradient .gtea-title__char--in-strong,
.gtea-widget-title--gradient .gtea-title-word .gtea-title__strong .gtea-title__char,
.gtea-widget-title--gradient.gtea-widget-title--revealing .gtea-title__char--in-strong,
.gtea-widget-title--gradient.gtea-widget-title--revealing .gtea-title-word .gtea-title__strong .gtea-title__char {
    color: inherit;
    -webkit-text-fill-color: currentColor;
            text-fill-color: currentColor;
}