/* ============================================================
   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);
}