/* Typing / typewriter effect styles (scoped) */
#typed {
  display: inline-block;
  white-space: nowrap;
  vertical-align: middle;
  color: inherit; /* inherit from parent h2 */
  font-weight: inherit;
}

.typing-cursor {
  display: inline-block;
  vertical-align: middle;
  width: 3px;
  height: 1.05em; /* matches line-height of heading */
  margin-left: 0.6rem;
  background-color: rgba(255,255,255,0.95); /* visible on hero */
  border-radius: 2px;
  animation: typing-cursor-blink 1s steps(2, start) infinite;
  /* allow the cursor to adapt if the heading uses a dark color */
  mix-blend-mode: normal;
}

@keyframes typing-cursor-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Small helper to ensure typed text breaks nicely on small screens */
@media (max-width: 767px) {
  #typed { max-width: 100%; display: inline-block; }
  .typing-cursor { margin-left: 0.4rem; }
}