/* Typing wrapper and caret */
.typer {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
}

/* The typed span */
[data-typer] {
  will-change: contents, opacity;
  -webkit-font-smoothing: antialiased;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Caret */
.typer-caret {
  width: 2px;
  height: 1em;
  margin-left: 2px;
  background: currentColor; /* uses heading color */
  animation: caret-blink 1s step-end infinite;
}

@keyframes caret-blink {
  50% { opacity: 0; }
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  .typer-caret { animation: none; }
}