.rotating-words {
    display: inline-block;
}

.rotating-words .prefix-text,
.rotating-words .rotating-text,
.rotating-words .suffix-text {
    display: inline-block;
    transform: translateZ(0);
}

.rotating-words .word {
    display: inline-block;
    line-height: inherit;
    font-size: inherit;
    color: var(--title-color, inherit);
}

.rotating-words .rotating-text {
    position: relative;
    transition: width 0.8s cubic-bezier(0.2, 1, 0.3, 1);
}

.rotating-words .rotating-text .word {
    transform: translate3d(0, 0, 0);
    overflow: clip;
    pointer-events: none;
    color: var(--rotating-color, var(--title-color, inherit));
}

.rotating-words .rotating-text .word:not(.active) {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate3d(-100%, 0, 0);
}

.rotating-words .rotating-text .word.active {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: transform .6s cubic-bezier(0.25, 1, 0.35, 1), opacity .6s cubic-bezier(0.25, 1, 0.35, 1);
    transition-delay: 0.4s;
}

.rotating-words .rotating-text .word span {
    display: block;
    white-space: nowrap;
    opacity: 0;
    margin: 0 1px;
    transform: translate3d(100%, 0, 0);
    transition: transform .6s cubic-bezier(0.25, 1, 0.35, 1);
}

.rotating-words .rotating-text .word.active > span {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.4s;
}