.typewriter-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: 'Noto Sans JP', monospace;
}

.typewriter-item {
  opacity: 0.9;
  transition: opacity 0.3s ease;
  position: relative;
}

.text-scroller-text {
  display: inline-block;
  letter-spacing: 0.08em;
}

.cursor {
  display: inline-block;
  animation: blink-and-glitch 1.2s infinite;
  position: relative;
}

@keyframes blink-and-glitch {
  0%, 100% {
    opacity: 1;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 1;
    transform: translateY(0);
  }
  76% {
    opacity: 1;
    transform: translateY(-3px);
  }
  78% {
    opacity: 0.5;
    transform: translateY(2px);
  }
  80% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Occasional text flicker effect */
.typewriter-item:nth-child(2n+1) .text-scroller-text {
  animation: text-flicker 4s infinite;
  animation-delay: calc(var(--i, 0) * 1s);
}

@keyframes text-flicker {
  0%, 100% {
    opacity: 0.9;
  }
  92% {
    opacity: 0.9;
  }
  92.5% {
    opacity: 0.2;
  }
  92.8% {
    opacity: 0.9;
  }
  93.5% {
    opacity: 0.2;
  }
  94% {
    opacity: 0.9;
  }
}
