/* Add underscore cursor via ::after */
.typewriter::after {
  content: "_";
  animation: blink 1s step-start infinite;
  color: var(--menu-click-hold-color, red);
  position: absolute;
  right: calc(-0.025ch); /* position cursor after text */

}

/* Typing animations */
.line_endcursor_hidden {
  width: 0;
  animation: typing var(--animation-duration) steps(var(--line_character_count), end) forwards;
  animation-delay: var(--animation-delay);
}

.line_endcursor_active {
  width: 0;
  animation: typing var(--animation-duration) steps(var(--line_character_count), end) forwards;
  animation-delay: var(--animation-delay);
}

/* Hide the cursor when line animation finishes */
.line_endcursor_hidden::after {
  animation: blink 0.5s step-start infinite, hideCursor 1.5s forwards;
  animation-delay: var(--typing-delay), var(--cursor-hide-delay); /* typing delay, then hide cursor delay */
}

/* keep cursor active when line animation finishes */
.line_endcursor_active::after {
  animation: blink 1s step-start infinite;
  animation-delay: var(--typing-delay)
}

/* Keyframes for typing text */
@keyframes typing {
  from { width: 0; color: red; }
  to { width: calc(var(--line_character_count) * 1.05ch); color: black; }
}

/* Blinking cursor */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Hide cursor after typing finishes */
@keyframes hideCursor {
  to { opacity: 0; }
}

@media (orientation: landscape) {
  .typewriter {
    font-size: 1em; /* Match the rest of your paragraph text */
  }
}