.text-type--active {
  position: relative;
  display: block;
}

.text-type__measure {
  display: block;
  visibility: hidden;
  pointer-events: none;
  user-select: none;
}

.text-type__animation {
  position: absolute;
  inset: 0;
  display: block;
  white-space: pre-wrap;
}

.text-type__content {
  color: inherit;
}

.text-type__cursor {
  position: relative;
  left: 0.08em;
  display: inline-block;
  width: 0;
  color: inherit;
  font-weight: 400;
  opacity: 1;
  animation: text-type-cursor-blink 0.7s ease-in-out infinite;
}

.text-type--complete .text-type__cursor {
  opacity: 0;
  animation: none;
}

@keyframes text-type-cursor-blink {
  0%, 45% { opacity: 1; }
  55%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .text-type__cursor {
    display: none;
    animation: none;
  }
}