/* ==========================================================
   TEXT SWIPE REVEAL
   Two-rect wipe reveal for text elements, line by line.
   Grey rect leads, colored rect follows and stays with
   inverted text. Configurable for dark/light backgrounds.

   Variants (set via class on the element or parent):
     .tsr--dark   — for light backgrounds (dark rect stays)
     .tsr--light  — for dark backgrounds (light rect stays)
   ========================================================== */

/* ── Ready state — add to any element that will use TextSwipeReveal ── */
.tsr-ready {
    visibility: hidden;
}

/* ── Line wrapper (created by JS) ── */
.tsr-line {
    position: relative;
    display: block;
}

/* ── Original text — hidden, used for sizing ── */
.tsr-line .tsr-inner {
    display: block;
    visibility: hidden;
}

/* ── Rect overlays ── */
.tsr-rect-1,
.tsr-rect-2 {
    position: absolute;
    top: -0.15em;
    bottom: -0.15em;
    left: -0.15em;
    /* width set by JS to match line text width */
    clip-path: inset(0 100% 0 0);
}

.tsr-rect-1 { z-index: 1; }
.tsr-rect-2 { z-index: 2; }

/* ── Text inside rect-2 (inverted color) ── */
.tsr-text {
    position: absolute;
    top: 0;
    left: 0.15em;
    white-space: nowrap;
    font: inherit;
    letter-spacing: inherit;
    line-height: inherit;
}

/* ── DARK VARIANT (for light backgrounds) ── */
.tsr--dark .tsr-rect-1 { background: var(--color-greyish); }
.tsr--dark .tsr-rect-2 { background: var(--color-black2); }
.tsr--dark .tsr-text    { color: var(--color-white); }

/* ── LIGHT VARIANT (for dark backgrounds) ──
   The inverted-text inside rect-2 is intentionally hidden — the
   light variant should read as "white bar sweeps across, white
   text underneath revealed". No mid-wipe black text flash. */
.tsr--light .tsr-rect-1 { background: var(--color-greyish); }
.tsr--light .tsr-rect-2 { background: var(--color-white); }
.tsr--light .tsr-text   { display: none; }

/* ── ALIGNMENT VARIANTS ── */
.tsr--align-center .tsr-line { text-align: center; }
.tsr--align-right .tsr-line  { text-align: right; }

/* ── Wipe animations ── */
.tsr-wipe-in {
    animation: tsrWipeIn var(--tsr-duration, 0.5s) var(--tsr-ease, cubic-bezier(0.77, 0, 0.175, 1)) forwards;
}

.tsr-wipe-out {
    animation: tsrWipeOut var(--tsr-duration, 0.5s) var(--tsr-ease, cubic-bezier(0.77, 0, 0.175, 1)) forwards;
}

/* Forward: left to right */
@keyframes tsrWipeIn {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0% 0 0); }
}

@keyframes tsrWipeOut {
    from { clip-path: inset(0 0% 0 0); }
    to   { clip-path: inset(0 0% 0 100%); }
}

/* Reverse: right to left */
@keyframes tsrWipeInReverse {
    from { clip-path: inset(0 0 0 100%); }
    to   { clip-path: inset(0 0 0 0); }
}

@keyframes tsrWipeOutReverse {
    from { clip-path: inset(0 0 0 0); }
    to   { clip-path: inset(0 100% 0 0); }
}

.tsr-wipe-in-rev {
    animation: tsrWipeInReverse var(--tsr-duration, 0.5s) var(--tsr-ease, cubic-bezier(0.77, 0, 0.175, 1)) forwards;
}

.tsr-wipe-out-rev {
    animation: tsrWipeOutReverse var(--tsr-duration, 0.5s) var(--tsr-ease, cubic-bezier(0.77, 0, 0.175, 1)) forwards;
}