/*
How to add another word (example: add a 3rd name):
1) HTML: add `<span class="option">NewName</span>` inside `.option-container`.
2) Count: set `--option-count: 3`.
3) Delay: add
   `.option:nth-child(3) { animation-delay: calc(var(--option-slice) * 2); }`
4) Keyframes: update the % stops for N words (total = N * 1.25s):
   - transition end% = (0.25 / total) * 100
   - visible end%    = (1.25 / total) * 100
   - fade-out end%   = (1.50 / total) * 100
*/
:root {
  --option-visible: 1s;
  --option-transition: 0.25s;
  --option-count: 3;
  --option-slice: calc(var(--option-visible) + var(--option-transition));
  --option-total: calc(var(--option-slice) * var(--option-count));
}

.option-container {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
  height: 1em;
  min-width: 6ch;
}

.option {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  opacity: 0;
  font-weight: 800;
  transform: translateY(0.6em);
  animation: option-cycle var(--option-total) infinite;
  animation-fill-mode: both;
  will-change: transform, opacity;
  padding-top: 2px;
}

.option:nth-child(1) {
  animation-delay: calc(var(--option-slice) * 0);
}

.option:nth-child(2) {
  animation-delay: calc(var(--option-slice) * 1);
}

.option:nth-child(3) {
  animation-delay: calc(var(--option-slice) * 2);
}

@keyframes option-cycle {
  0% {
    opacity: 0;
    transform: translateY(0.6em);
  }
  6.6667% {
    opacity: 1;
    transform: translateY(0);
  }
  33.3333% {
    opacity: 1;
    transform: translateY(0);
  }
  40% {
    opacity: 0;
    transform: translateY(-0.6em);
  }
  100% {
    opacity: 0;
    transform: translateY(0.6em);
  }
}

@media (prefers-reduced-motion: reduce) {
  .option {
    animation: none;
    opacity: 0;
    transform: none;
  }

  .option:nth-child(1) {
    opacity: 1;
    position: static;
  }

  .option-container {
    height: auto;
    min-width: 0;
  }
}