/* Word rotator — i2t3 component styles
 * A heading with one word that cycles through several alternatives. The small
 * own script toggles the visible / hidden word, types it out or animates per
 * letter. Faithful port of the Karma ns-wordrotator look.
 * Animation modes: rotate-1 (3D flip, default), fade, typewriter,
 * letters-rotate-2, loading-bar, slide, clip, zoom, letters-rotate-3,
 * letters-scale, push. No third-party library.
 */

/* Komponente managt ihren Aussenabstand ueber space_before/after, nicht ueber
   die geerbte Ueberschriften-Margin -> sonst oben < unten beim Zentrieren. */
/* heading inherits the body text colour (black) instead of the theme's
   --bs-heading-color (primary); only the rotating word gets a colour */
.i2t3-wordrotator__heading { margin: 0; color: inherit; }
.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; }

/* coloured pill around the rotating word (Karma backgrouncolor) */
.i2t3-wordrotator__words--pill {
    border-radius: .25rem;
    overflow: visible;
}
.i2t3-wordrotator__words--pill .i2t3-wordrotator__word {
    color: #fff;
    padding: 0.1rem 0.5rem;
}
.i2t3-wordrotator__words--pill .i2t3-wordrotator__type { color: #fff; }

/* rotate-1 (default): 3D rotateX flip, in and out */
.i2t3-wordrotator__words--rotate-1 { perspective: 300px; }
.i2t3-wordrotator__words--rotate-1 .i2t3-wordrotator__word {
    transform-origin: 50% 100%;
    transform: rotateX(180deg);
}
.i2t3-wordrotator__words--rotate-1 .i2t3-wordrotator__word.is-visible {
    transform: rotateX(0deg);
    animation: i2t3-wr-rotate-1-in 1.2s;
}
.i2t3-wordrotator__words--rotate-1 .i2t3-wordrotator__word.is-hidden {
    transform: rotateX(180deg);
    animation: i2t3-wr-rotate-1-out 1.2s;
}
@keyframes i2t3-wr-rotate-1-in {
    0%   { transform: rotateX(180deg); opacity: 0; }
    35%  { transform: rotateX(120deg); opacity: 0; }
    65%  { opacity: 0; }
    100% { transform: rotateX(360deg); opacity: 1; }
}
@keyframes i2t3-wr-rotate-1-out {
    0%   { transform: rotateX(0deg); opacity: 1; }
    35%  { transform: rotateX(-40deg); opacity: 1; }
    65%  { opacity: 0; }
    100% { transform: rotateX(180deg); opacity: 0; }
}

/* fade */
.i2t3-wordrotator__words--fade .i2t3-wordrotator__word { transition: opacity .4s ease; }

/* slide (vertical, in and out — Karma faithful) */
.i2t3-wordrotator__words--slide { overflow: hidden; vertical-align: middle; }
.i2t3-wordrotator__words--slide .i2t3-wordrotator__word.is-visible { animation: i2t3-wr-slide-in .6s; }
.i2t3-wordrotator__words--slide .i2t3-wordrotator__word.is-hidden { animation: i2t3-wr-slide-out .6s; }
@keyframes i2t3-wr-slide-in {
    0%   { opacity: 0; transform: translateY(-100%); }
    60%  { opacity: 1; transform: translateY(20%); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes i2t3-wr-slide-out {
    0%   { opacity: 1; transform: translateY(0); }
    60%  { opacity: 0; transform: translateY(120%); }
    100% { opacity: 0; transform: translateY(100%); }
}

/* zoom (translateZ, in and out) */
.i2t3-wordrotator__words--zoom { perspective: 300px; }
.i2t3-wordrotator__words--zoom .i2t3-wordrotator__word.is-visible { animation: i2t3-wr-zoom-in .8s; }
.i2t3-wordrotator__words--zoom .i2t3-wordrotator__word.is-hidden { animation: i2t3-wr-zoom-out .8s; }
@keyframes i2t3-wr-zoom-in {
    0%   { opacity: 0; transform: translateZ(100px); }
    100% { opacity: 1; transform: translateZ(0); }
}
@keyframes i2t3-wr-zoom-out {
    0%   { opacity: 1; transform: translateZ(0); }
    100% { opacity: 0; transform: translateZ(-100px); }
}

/* clip (hard cut with a 2px vertical caret on the right — Karma faithful) */
.i2t3-wordrotator__words--clip { overflow: hidden; vertical-align: middle; }
.i2t3-wordrotator__words--clip .i2t3-wordrotator__word { transition: opacity .3s ease; }
.i2t3-wordrotator__words--clip::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 2px;
    height: 100%;
    background-color: currentColor;
}

/* push (horizontal, in and out — Karma faithful) */
.i2t3-wordrotator__words--push .i2t3-wordrotator__word.is-visible { animation: i2t3-wr-push-in .6s; }
.i2t3-wordrotator__words--push .i2t3-wordrotator__word.is-hidden { animation: i2t3-wr-push-out .6s; }
@keyframes i2t3-wr-push-in {
    0%   { opacity: 0; transform: translateX(-100%); }
    60%  { opacity: 1; transform: translateX(10%); }
    100% { opacity: 1; transform: translateX(0); }
}
@keyframes i2t3-wr-push-out {
    0%   { opacity: 1; transform: translateX(0); }
    60%  { opacity: 0; transform: translateX(110%); }
    100% { opacity: 0; transform: translateX(100%); }
}

/* loading-bar (bar fills in 3s, then the word swaps — synced via .is-loading) */
.i2t3-wordrotator__words--loading-bar { overflow: hidden; vertical-align: middle; }
.i2t3-wordrotator__words--loading-bar .i2t3-wordrotator__word { transition: opacity .3s ease; }
.i2t3-wordrotator__words--loading-bar::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 0;
    background: currentColor;
    z-index: 2;
    transition: width .3s -0.1s;
}
.i2t3-wordrotator__words--loading-bar.is-loading::after {
    width: 100%;
    transition: width 3s linear;
}

/* letters (per-letter animation, staggered via inline transition-delay) */
.i2t3-wordrotator__letter { display: inline-block; opacity: 0; transition: opacity .4s ease, transform .4s ease; }
/* scoped one class higher so it beats the per-mode start-transform rules below
   (equal specificity otherwise → those win by source order → letter stays hidden) */
.i2t3-wordrotator__words .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; } }