.eg-running-text {
position: relative;
display: inline-block;
color: inherit;
font-weight: 700;
word-break: normal;
overflow-wrap: normal;
}
.eg-running-text .eg-rt-word {
display: inline-block;
white-space: nowrap;
}
.eg-running-text .eg-rt-char {
display: inline-block;
color: inherit;
transition: color 0.25s ease, transform 0.25s ease;
will-change: color, transform;
}
.eg-running-text .eg-rt-char.active {
color: #dc3545;
transform: translateY(-3px);
}
.eg-running-text .eg-rt-char.done {
color: #ffc107;
}
.eg-running-text::after {
content: "";
position: absolute;
left: 0;
bottom: -8px;
width: 0;
height: 5px;
background: #dc3545;
transition: width 0.45s ease;
pointer-events: none;
}
.eg-running-text.eg-underline::after {
width: 100%;
}
@media (prefers-reduced-motion: reduce) {
.eg-running-text .eg-rt-char {
transition: none;
transform: none !important;
}
.eg-running-text::after {
transition: none;
}
}
.eg-rt-char {
transition: color 0.25s ease;
color: inherit;
}
.eg-rt-char.active {
color: #dc3545; }