/* Animated text — i2t3 component styles
 * Effect via i2t3_textanimation_effect: typewriter / letters / words / marquee /
 * text-appear / background-clip / spotlight / reveal.
 * CSS drives marquee, text-appear, background-clip; the own script drives
 * typewriter, letters, words and spotlight. (reveal uses the shared infra.)
 */

.i2t3-textanimation__title { margin-bottom: .75rem; }
.i2t3-textanimation__headline { margin: 0; }
.i2t3-textanimation__text { margin-top: 1rem; }
.i2t3-textanimation__text > :last-child { margin-bottom: 0; }

/* marquee */
.i2t3-textanimation--marquee .i2t3-textanimation__marquee { overflow: hidden; white-space: nowrap; }
.i2t3-textanimation__track { display: inline-flex; gap: 3rem; animation: i2t3-ta-marquee var(--i2t3-ta-dur, 8s) linear infinite; }
.i2t3-textanimation__track .i2t3-textanimation__headline { white-space: nowrap; }
@keyframes i2t3-ta-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* text-appear (mask wipe up on load) */
.i2t3-textanimation--text-appear .i2t3-textanimation__fx {
    animation: i2t3-ta-appear var(--i2t3-ta-dur, 1s) ease both;
}
@keyframes i2t3-ta-appear {
    from { clip-path: inset(0 0 100% 0); opacity: 0; }
    to { clip-path: inset(0 0 0 0); opacity: 1; }
}

/* background-clip (animated gradient text) */
.i2t3-textanimation--background-clip .i2t3-textanimation__fx {
    background: linear-gradient(90deg, var(--i2t3-primary, #0d6efd), #f5a623, var(--i2t3-primary, #0d6efd));
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: i2t3-ta-bgclip var(--i2t3-ta-dur, 8s) linear infinite;
}
@keyframes i2t3-ta-bgclip { to { background-position: 200% center; } }

/* letters / words (per-part reveal, staggered via inline transition-delay) */
.i2t3-textanimation__part { display: inline-block; opacity: 0; transform: translateY(.4em); transition: opacity .5s ease, transform .5s ease; }
.i2t3-textanimation__part.is-in { opacity: 1; transform: none; }

/* spotlight (bright text follows the cursor) */
.i2t3-textanimation--spotlight .i2t3-textanimation__fx {
    color: rgba(0, 0, 0, .25);
    background: radial-gradient(circle 120px at var(--i2t3-ta-mx, 50%) var(--i2t3-ta-my, 50%), var(--i2t3-primary, #0d6efd), transparent 60%);
    -webkit-background-clip: text;
    background-clip: text;
}

@media (prefers-reduced-motion: reduce) {
    .i2t3-textanimation__track { animation: none; }
    .i2t3-textanimation__part { opacity: 1; transform: none; }
}