.typing {
  visibility: hidden;
  animation: typing-reveal 0s 1.2s forwards;
}

.typing.is-typing,
.typing.is-static {
  visibility: visible;
  animation: none;
}

.typing.is-typing::after {
  content: "";
  display: inline-block;
  width: .08em;
  height: .9em;
  margin-left: .06em;
  vertical-align: -.06em;
  border-radius: 2px;
  background: var(--color-brand-400);
  animation: typing-caret 1s steps(1) infinite;
}

.typing.is-done::after {
  opacity: 0;
  animation: none;
  transition: opacity var(--duration-slow) var(--ease-out);
}

@keyframes typing-reveal {
  to {
    visibility: visible;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .typing {
    visibility: visible;
    animation: none;
  }
}