/* Animated text — i2t3 component styles
 * Effect via i2t3_textanimation_effect: typewriter / letters / words / marquee /
 * infinite-rotate / text-appear / background-clip / spotlight / reveal.
 * CSS drives marquee, infinite-rotate, text-appear, background-clip; the own
 * script drives typewriter, letters, words, spotlight and the scroll triggers
 * for text-appear / background-clip. (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%); } }

/* infinite-rotate (text on a circular path, endless spin) */
.i2t3-textanimation__rotate-svg { position: relative; display: inline-block; width: 100%; animation: i2t3-ta-rotate 10s infinite linear; }
.i2t3-textanimation__rotate-svg svg { width: 100%; height: auto; display: block; }
@keyframes i2t3-ta-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* text-appear — triggers on scroll-in via .is-visible (set by script.js) */
.i2t3-textanimation--text-appear .i2t3-textanimation__fx { opacity: 0; }
/* maskUp: wipe up from a clipped baseline */
.i2t3-textanimation__fx--maskUp { clip-path: inset(0 0 100% 0); }
.i2t3-textanimation__fx--maskUp.is-visible {
    opacity: 1;
    animation: i2t3-ta-maskup var(--i2t3-ta-dur, 800ms) ease var(--i2t3-ta-delay, 0ms) both;
}
@keyframes i2t3-ta-maskup {
    from { clip-path: inset(0 0 100% 0); opacity: 0; }
    to { clip-path: inset(0 0 0 0); opacity: 1; }
}
/* textEntrance: 3D rotate-in from below */
.i2t3-textanimation__fx--textEntrance {
    transform-origin: center top;
    transform-style: preserve-3d;
    transform: translateY(100%) rotateX(-80deg);
}
.i2t3-textanimation__fx--textEntrance.is-visible {
    opacity: 1;
    animation: i2t3-ta-textentrance var(--i2t3-ta-dur, 800ms) cubic-bezier(0.215, 0.61, 0.355, 1) var(--i2t3-ta-delay, 0ms) both;
}
@keyframes i2t3-ta-textentrance {
    from { opacity: 0; transform: translateY(100%) rotateX(-80deg); }
    to { opacity: 1; transform: none; }
}

/* background-clip — photo seen through the text mask, slow zoom 40%->10%.
 * Falls back to an animated gradient when no image is set. */
.i2t3-textanimation--background-clip .i2t3-textanimation__fx {
    -webkit-background-clip: text;
    background-clip: text;
    color: rgba(0, 0, 0, .08);
    font-weight: 800;
    background-repeat: no-repeat;
}
.i2t3-textanimation__fx--image {
    background-size: 40%;
    background-position: 50% 50%;
}
.i2t3-textanimation__fx--image.is-visible {
    animation: i2t3-ta-bgzoom 10s ease 500ms forwards;
}
@keyframes i2t3-ta-bgzoom {
    from { background-size: 40%; }
    to { background-size: 10%; }
}
/* gradient fallback (no image uploaded) */
.i2t3-textanimation--background-clip .i2t3-textanimation__fx:not(.i2t3-textanimation__fx--image) {
    background-image: linear-gradient(90deg, var(--i2t3-ta-accent, var(--bs-primary, #0d6efd)), #f5a623, var(--i2t3-ta-accent, var(--bs-primary, #0d6efd)));
    background-size: 200% auto;
    color: transparent;
}
.i2t3-textanimation--background-clip .i2t3-textanimation__fx:not(.i2t3-textanimation__fx--image).is-visible {
    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--down .i2t3-textanimation__part { transform: translateY(-.4em); }
.i2t3-textanimation__part.is-in { opacity: 1; transform: none; }

/* spotlight — full-screen, colour shapes follow the cursor through the mask */
.i2t3-textanimation--spotlight { margin: 0; }
.i2t3-textanimation__spotlight {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background: var(--i2t3-ta-accent, var(--bs-primary, #0d6efd));
}
.i2t3-textanimation__shape {
    will-change: transform;
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
}
.i2t3-textanimation__shape--1 { background: #1ea6ea; width: 650px; height: 650px; margin: -325px 0 0 -325px; }
.i2t3-textanimation__shape--2 { background: #3cc4ff; width: 440px; height: 440px; margin: -220px 0 0 -220px; }
.i2t3-textanimation__shape--3 { background: #5ae2ff; width: 270px; height: 270px; margin: -135px 0 0 -135px; }
.i2t3-textanimation__spotlight-content {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    background: var(--bs-light, #f8f9fa);
    mix-blend-mode: screen;
}
.i2t3-textanimation__spotlight-title {
    font-size: 150px;
    line-height: 150px;
    font-weight: 900;
    color: #000;
    margin: 0;
    text-align: center;
}
@media (max-width: 1200px) {
    .i2t3-textanimation__spotlight-title { font-size: 75px; line-height: 75px; }
}

@media (prefers-reduced-motion: reduce) {
    .i2t3-textanimation__track,
    .i2t3-textanimation__rotate-svg { animation: none; }
    .i2t3-textanimation__part { opacity: 1; transform: none; }
    .i2t3-textanimation--text-appear .i2t3-textanimation__fx { opacity: 1; animation: none; clip-path: none; transform: none; }
}