/* 親要素 */
.js-scroll-trigger {
  display: block; /* 状況に合わせて inline-block などでも可 */
}

/* 1文字ごとのスタイル */
.js-scroll-trigger span {
  display: inline-block;
  white-space: pre; /* 改行や空白の崩れを防止 */
  
  /* --- 変更点：初期状態は透明にするだけ --- */
  opacity: 0;
  
  /* --- 変更点：アニメーションは opacity のみ設定 --- */
  transition: opacity 0.4s ease;
  
  will-change: opacity;
}

/* 画面内に入ったときの状態 */
.js-scroll-trigger.is-active span {
  /* --- 変更点：不透明にするだけ --- */
  opacity: 1;
}