.webbo-scroll-text-reveal {
    --webbo-scroll-text-revealed-blur: 0;
    --webbo-scroll-text-revealed-opacity: 1;
    --webbo-scroll-text-unrevealed-blur: 5;
    --webbo-scroll-text-unrevealed-opacity: 1;
    margin: 0;
}

.webbo-scroll-text-reveal__visual {
    display: block;
    white-space: pre-wrap;
}

.webbo-scroll-text-reveal__word {
    display: inline-block;
    white-space: nowrap;
}

.webbo-scroll-text-reveal__unit {
    display: inline-block;
}

/* Static units use shared CSS variables and do not keep their own compositor
 * layer. Only the small feathered reveal band receives will-change. */
.webbo-scroll-text-reveal__unit--revealed {
    opacity: var(--webbo-scroll-text-revealed-opacity, 1);
    filter: blur(calc(var(--webbo-scroll-text-revealed-blur, 0) * 1px));
}

.webbo-scroll-text-reveal__unit--unrevealed {
    opacity: var(--webbo-scroll-text-unrevealed-opacity, 1);
    filter: blur(calc(var(--webbo-scroll-text-unrevealed-blur, 5) * 1px));
}

.webbo-scroll-text-reveal__unit--transitioning {
    opacity: var(--webbo-scroll-text-unit-opacity, 1);
    filter: blur(calc(var(--webbo-scroll-text-unit-blur, 0) * 1px));
    will-change: filter, opacity;
}

.webbo-scroll-text-reveal__sr {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
    .webbo-scroll-text-reveal__unit {
        opacity: 1 !important;
        filter: none !important;
        will-change: auto;
    }
}