/* =========================================
   Typing Animation (per-char + caret)
   - JSが .char-animate に文字span(.char-ch)を差し込み
   - 末尾にカーソル .typing-caret を常に維持
   調整: アニメ時間は CSS(0.25s)、間隔は JS(stepDelay)
========================================= */

/* --- 文字の初期状態＆出現アニメ --- */
.char-animate .char-ch {
  opacity: 0;
  display: inline-block;
  transform: translateY(0.2em);
}

.char-animate .char-ch.show {
  animation: typewriterIn 0.25s steps(1, end) forwards;
}

@keyframes typewriterIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- 末尾カーソル（常に最後に位置＆点滅） --- */
.typing-caret {
  display: inline-block;
  width: 0.1ch;               /* カーソルの細さ。0〜0.15ch程度で調整 */
  height: 1em;                /* JSでline-heightが数値なら自動上書き */
  background-color: currentColor;
  vertical-align: bottom;
  animation: blinkCursor 0.8s steps(1) infinite;
  will-change: opacity;       /* ブリンクの描画安定化 */
  transform: translateZ(0);   /* レイヤー化でチラつき抑制（任意） */
}

@keyframes blinkCursor {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* --- アクセシビリティ: 動きを減らす設定に配慮 --- */
@media (prefers-reduced-motion: reduce) {
  .char-animate .char-ch,
  .char-animate .char-ch.show,
  .typing-caret {
    animation: none !important;
  }
  .char-animate .char-ch {
    opacity: 1 !important;
    transform: none !important;
  }
}