/* Reveal Text Effect - Text reveal with clipping mask */
.reveal-headline {
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
    margin: 0;
    color: inherit;
    display: inline;
    vertical-align: baseline;
}

.reveal-words-wrapper {
    display: inline-block;
    position: relative;
    vertical-align: baseline;
    min-width: 120px;
    height: 1em;
    line-height: 1em;
    --cursor-position: 0px;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Base styles for reveal words */
.reveal-words-wrapper b {
    display: none;
    white-space: nowrap;
    color: var(--theme-color1);
    font-weight: bold;
    vertical-align: baseline;
    clip-path: inset(0 100% 0 0);
    transition: none;
    will-change: clip-path;
}

/* State classes */
.reveal-words-wrapper b.is-visible {
    display: inline;
    clip-path: inset(0 0 0 0);
}

.reveal-words-wrapper b.is-hidden {
    display: none;
    clip-path: inset(0 100% 0 0);
}

/* Animation classes */
.reveal-words-wrapper b.revealing,
.reveal-words-wrapper b.hiding {
    display: inline;
    transition: none;
    will-change: clip-path;
}

/* Reveal cursor that follows text */
.reveal-words-wrapper::after {
    content: '|';
    color: var(--theme-color1);
    animation: blink 1s infinite;
    animation-play-state: running;
    font-weight: normal;
    vertical-align: baseline;
    position: absolute;
    left: var(--cursor-position, 0px);
    transition: none;
    will-change: left;
}

@keyframes blink {
    0%, 50% {
        opacity: 1;
    }
    51%, 100% {
        opacity: 0;
    }
}