.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;
  color: var(--title-color, inherit);
  font-size: inherit;
  line-height: inherit;
}

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

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

.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;
  transition:
    transform 0.6s cubic-bezier(0.25, 1, 0.35, 1),
    opacity 0.6s cubic-bezier(0.25, 1, 0.35, 1);
  transform: translate3d(0, 0, 0);
  transition-delay: 0.4s;
}

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

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