/* ============================================================
   SilSera — RotatingText CSS
   Character-level stagger animation, mirroring ReactBits style
   ============================================================ */

.rt-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.rt-text {
    grid-area: 1 / 1;
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    align-items: baseline;
    visibility: hidden;
    opacity: 0;
}

.rt-text.rt-entering {
    visibility: visible;
    opacity: 1;
    position: relative;
}

.rt-exiting {
    visibility: visible;
    opacity: 0;
    pointer-events: none;
}

.rt-word {
    display: flex;
    flex-wrap: nowrap;
}

.rt-space {
    white-space: pre;
    display: inline-block;
}

.rt-char {
    display: inline-block;
    will-change: transform, opacity;
}

/* ── ENTER ─────────────────────────────────── */
.rt-entering .rt-char {
    animation: rt-enter 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes rt-enter {
    from {
        opacity: 0;
        transform: translateY(100%);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── EXIT ──────────────────────────────────── */
.rt-exiting .rt-char {
    animation: rt-exit 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes rt-exit {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-100%);
    }
}