.reveal-word,
.reveal-char,
.reveal-line,
.reveal-text-scroll {
    display: inline;
}

.reveal-text-scroll span,
.reveal-text-scroll-alt span,
.reveal-line span {
    font-size: unset;
    line-height: 110%;
}

/* ─── Clip wrapper (slide effect) ────────────────────────────────────────── */

.reveal-clip,
.reveal-line {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding-bottom: 0.1em;
    margin-bottom: -0.1em;
}

/* ─── Lines ──────────────────────────────────────────────────────────────── */

.reveal-line-inner {
    display: block;
}

/* ─── Color reveal ───────────────────────────────────────────────────────── */

.reveal-color {
    color: var(--border);
    transition: color 400ms ease-out;
    transition-delay: var(--stagger, 0ms);
}

.reveal-color.is-visible {
    color: var(--text);
}

/* ─── Opacity reveal ─────────────────────────────────────────────────────── */

.reveal-opacity {
    opacity: 0.15;
    transition: opacity 800ms ease-out;
    transition-delay: var(--stagger, 0ms);
}

.reveal-opacity.is-visible {
    opacity: 1;
}

/* ─── Slide reveal (clip) ────────────────────────────────────────────────── */

.reveal-word.reveal-slide,
.reveal-line-inner.reveal-slide {
    display: inline-block;
    transform: translateY(110%);
    transition: transform 500ms cubic-bezier(0.33, 0.66, 0.66, 1);
    transition-delay: var(--stagger, 0ms);
}

.reveal-word.reveal-slide.is-visible,
.reveal-line-inner.reveal-slide.is-visible {
    transform: translateY(0);
}

/* ─── Slide skew ─────────────────────────────────────────────────────────── */

.reveal-slide-skew {
    display: inline-block;
    transform: skewX(-15deg) translateY(110%) translateX(0.5rem);
    transition: transform 500ms cubic-bezier(0.33, 0.66, 0.66, 1);
    transition-delay: var(--stagger, 0ms);
}

.reveal-slide-skew.is-visible {
    transform: skewX(0deg) translateY(0) translateX(0);
}

/* ─── Blur reveal ────────────────────────────────────────────────────────── */

.reveal-blur {
    opacity: 0;
    filter: blur(0.25rem);
    transition:
        opacity 300ms ease-out,
        filter 400ms ease-out;
    transition-delay: var(--stagger, 0ms);
}

.reveal-blur.is-visible {
    opacity: 1;
    filter: blur(0);
}

/* =========================================
   IN-VIEW COMPONENT EFFECTS
========================================= */

/* shared base — transition uses CSS var for delay */
.inview-fade,
.inview-slide,
.inview-scale,
.inview-blur,
.inview-color,
.inview-slide-left,
.inview-slide-right,
.inview-slide-bottom,
.inview-to-dark {
    transition-duration: 700ms;
    transition-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);
    transition-delay: var(--inview-delay, 0ms);
}

/* ─── Color ───────────────────────────────────────────────────────────────── */

p.inview-color,
.inview-color {
    color: var(--border);
    transition-property: all;
}

p.inview-color.is-visible,
.inview-color.is-visible {
    color: var(--text);
}

/* ─── Fade ───────────────────────────────────────────────────────────────── */

.inview-fade {
    opacity: 0;
    transition-property: opacity;
}

.inview-fade.is-visible {
    opacity: 1;
}

/* ─── Slide up ───────────────────────────────────────────────────────────── */

.inview-slide {
    opacity: 0;
    transform: translateY(2rem);
    transition-property: opacity, transform;
}

.inview-slide.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ─── Slide left ─────────────────────────────────────────────────────────── */

.inview-slide-left {
    opacity: 0;
    transform: translateX(-2rem);
    transition-property: opacity, transform;
}

.inview-slide-left.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* ─── Slide right ────────────────────────────────────────────────────────── */

.inview-slide-right {
    opacity: 0;
    transform: translateX(2rem);
    transition-property: opacity, transform;
}

.inview-slide-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* ─── Slide bottom ────────────────────────────────────────────────────────── */

.inview-slide-bottom {
    opacity: 0;
    transform: translateY(2rem);
    transition-property: opacity, transform;
}

.inview-slide-bottom.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ─── Scale ──────────────────────────────────────────────────────────────── */

.inview-scale {
    opacity: 0;
    transform: scale(0.9) translateY(-2rem);
    transition-property: opacity, transform;
}

.inview-scale.is-visible {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* ─── Blur ───────────────────────────────────────────────────────────────── */

.inview-blur {
    opacity: 0;
    filter: blur(8px);
    transition-property: opacity, filter;
}

.inview-blur.is-visible {
    opacity: 1;
    filter: blur(0);
}

/* ─── Blur ───────────────────────────────────────────────────────────────── */
.inview-to-dark {
    transition-property: color, background-color;
}

/* ─── Reveal text highlight ─────────────────────────────────────────────── */

.reveal-word.is-visible > em {
    color: var(--hover-prime);
}

.reveal-word > em {
    font-style: normal;
}

/* ─── Reduce motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .reveal-color,
    .reveal-opacity,
    .reveal-slide,
    .reveal-blur,
    .reveal-slide-skew,
    .inview-fade,
    .inview-slide,
    .inview-scale,
    .inview-blur,
    .inview-slide-left,
    .inview-slide-right {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
        filter: none !important;
        color: var(--text) !important;
    }
}