/* Word rotator — i2t3 component styles
 * A heading with one word that cycles through several alternatives. The small
 * own script toggles the visible word / types it out / animates per letter.
 * All 10 Karma modes: fade, typewriter, letters-rotate-2, loading-bar, slide,
 * clip, zoom, letters-rotate-3, letters-scale, push. No third-party library.
 */

.i2t3-wordrotator__words {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    vertical-align: baseline;
    transition: width .3s ease;
    text-align: left;
}
.i2t3-wordrotator__word {
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
    opacity: 0;
}
.i2t3-wordrotator__word.is-visible { position: relative; opacity: 1; }

/* fade */
.i2t3-wordrotator__words--fade .i2t3-wordrotator__word { transition: opacity .4s ease; }
/* slide up */
.i2t3-wordrotator__words--slide .i2t3-wordrotator__word { transition: opacity .4s ease, transform .4s ease; transform: translateY(.45em); }
.i2t3-wordrotator__words--slide .i2t3-wordrotator__word.is-visible { transform: translateY(0); }
/* zoom */
.i2t3-wordrotator__words--zoom .i2t3-wordrotator__word { transition: opacity .4s ease, transform .4s ease; transform: scale(.6); }
.i2t3-wordrotator__words--zoom .i2t3-wordrotator__word.is-visible { transform: scale(1); }
/* clip (reveal left-to-right) */
.i2t3-wordrotator__words--clip .i2t3-wordrotator__word { transition: clip-path .5s ease, opacity .3s ease; clip-path: inset(0 100% 0 0); }
.i2t3-wordrotator__words--clip .i2t3-wordrotator__word.is-visible { clip-path: inset(0 0 0 0); }
/* push (slide up from below, clipped) */
.i2t3-wordrotator__words--push { overflow: hidden; }
.i2t3-wordrotator__words--push .i2t3-wordrotator__word { transition: transform .45s ease, opacity .3s ease; transform: translateY(100%); }
.i2t3-wordrotator__words--push .i2t3-wordrotator__word.is-visible { transform: translateY(0); }
/* loading-bar (animated underline that fills, then the word swaps) */
.i2t3-wordrotator__words--loading-bar .i2t3-wordrotator__word { transition: opacity .3s ease; }
.i2t3-wordrotator__words--loading-bar::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -.15em;
    height: 2px;
    width: 100%;
    background: currentColor;
    transform-origin: left;
    animation: i2t3-wr-load 2.5s linear infinite;
}
@keyframes i2t3-wr-load { 0% { transform: scaleX(0); } 80%, 100% { transform: scaleX(1); } }

/* letters (per-letter animation, staggered via inline transition-delay) */
.i2t3-wordrotator__letter { display: inline-block; opacity: 0; transition: opacity .4s ease, transform .4s ease; }
.i2t3-wordrotator__letter.is-in { opacity: 1; transform: none; }
.i2t3-wordrotator__words--letters-rotate-2 .i2t3-wordrotator__letter { transform: rotateY(90deg); }
.i2t3-wordrotator__words--letters-rotate-3 .i2t3-wordrotator__letter { transform: rotateX(90deg); }
.i2t3-wordrotator__words--letters-scale .i2t3-wordrotator__letter { transform: scale(0); }

/* typewriter */
.i2t3-wordrotator__caret {
    display: inline-block;
    width: .08em;
    align-self: stretch;
    background: currentColor;
    margin-left: .06em;
    animation: i2t3-wr-blink 1s steps(1) infinite;
}
@keyframes i2t3-wr-blink { 50% { opacity: 0; } }