/* All phrases occupy the same line and reserve the longest phrase's width. */
.hero-tagline {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.hero-tagline > [data-typewriter-phrase] {
  grid-area: 1 / 1;
  white-space: nowrap;
}
/* With no JavaScript, show one complete phrase in the same stable slot. */
.hero-tagline > [data-typewriter-phrase] ~ [data-typewriter-phrase],
.hero-tagline.is-typewriter-ready > [data-typewriter-phrase] {
  visibility: hidden;
}
.hero-tagline.is-typewriter-ready > [data-typewriter-phrase].is-active {
  visibility: visible;
}
.hero-tagline > .hero-tagline-accessible {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.hero-tagline .typewriter-character { position: relative; }
.hero-tagline .typewriter-character.is-hidden { visibility: hidden; }
.hero-tagline .typewriter-character.is-cursor::after {
  content: '';
  position: absolute;
  left: 100%;
  top: .1em;
  width: 1px;
  height: .85em;
  background: currentColor;
  opacity: .65;
  animation: hero-cursor-blink .9s step-end infinite;
  animation-play-state: paused;
  visibility: visible;
  pointer-events: none;
}
.hero-tagline .typewriter-character.is-empty-cursor::after { left: 0; }
.hero-tagline[data-typewriter-state="playing"] .typewriter-character.is-cursor::after {
  animation-play-state: running;
}
.hero-tagline[data-typewriter-state="static"] .typewriter-character.is-cursor::after {
  display: none;
}
@keyframes hero-cursor-blink {
  0%, 100% { opacity: .65; }
  50% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-tagline .typewriter-character.is-cursor::after { display: none; }
}