/* Banner changing-words animation (GSAP) */
.banner .words {
  display: inline-block;
  position: relative;
  overflow: hidden;
  vertical-align: bottom;
  white-space: nowrap;
  text-align: left;
}

.banner .words .words-current {
  display: inline-block;
  will-change: transform, opacity;
}

/* Typing mode keeps the caret visible, so it must not clip. */
.banner .words.words-typing {
  overflow: visible;
}

.banner .words .words-caret {
  display: inline-block;
  width: 0.06em;
  min-width: 2px;
  height: 1em;
  margin-left: 0.05em;
  vertical-align: text-bottom;
  background: currentColor;
  animation: yprm-words-caret 1s steps(1) infinite;
}

@keyframes yprm-words-caret {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .banner .words .words-caret {
    animation: none;
    opacity: 0;
  }
}