/* Homepage hero: COBOL program lines typed around the visual */
.typewriter {
  display: inline-block;
}

.typewriter p {
  color: var(--color-text-subtle);
  font-family: var(--font-mono);
  overflow: hidden;
  border-right: 1em solid rgba(0, 255, 0, 0.2);
  white-space: nowrap;
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: 0.05em;
  animation:
    typing 2s steps(30, end),
    blink-caret 1s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 105% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: rgba(0, 255, 0, 0.2) }
}

/* No typing animation for visitors who asked for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .typewriter p {
    animation: none;
    border-right-color: transparent;
  }
}