// glowAnimeにglowというクラス名を付ける定義
function GlowAnimeControl() {
  // すべてのglowAnimeクラスを持つ要素を取得
  const elements = document.querySelectorAll('.glowAnime');
  // ウィンドウの高さを取得（スクロール計算用）
  const windowHeight = window.innerHeight;

  // 各要素に対して処理を実行
  elements.forEach(function (element) {
      // 要素の上辺位置を取得して補正（ページ上部からの位置 - 50px）
      const elemPos = element.getBoundingClientRect().top + window.pageYOffset - 50;
      // 現在のスクロール位置を取得
      const scroll = window.pageYOffset;

      // スクロール位置が要素の表示位置を超えた場合
      if (scroll >= elemPos - windowHeight) {
          // glowクラスを追加してアニメーションを開始
          element.classList.add("glow");
      } else {
          // glowクラスを削除してアニメーションをリセット
          element.classList.remove("glow");
      }
  });
}

// 画面をスクロールをしたら動かしたい場合の記述
window.addEventListener('scroll', function () {
  // スクロール時にGlowAnimeControlを実行
  GlowAnimeControl();
});

// 画面が読み込まれたらすぐに動かしたい場合の記述
window.addEventListener('load', function () {
  // glowAnimeクラスを持つすべての要素を取得
  const elements = document.querySelectorAll('.glowAnime');

  // 各要素に対して処理を実行
  elements.forEach(function (element) {
      // 要素のテキスト内容を取得
      const text = element.textContent;
      // スパンタグでラップしたテキストを格納する変数
      let textbox = "";

      // テキストを1文字ずつ処理
      text.split('').forEach(function (t, i) {
          if (t !== " ") { // 空白でない文字の場合
              // アニメーションの遅延時間を計算
              const delay = i < 10 ? `.${i}` : `${i / 10}`;
              // スパンタグを作成し、遅延時間を設定
              textbox += `<span style="animation-delay: ${delay}s;">${t}</span>`;
          } else {
              // 空白の場合はそのまま追加
              textbox += t;
          }
      });

      // 元の要素の内容を生成したHTMLに置き換える
      element.innerHTML = textbox;
  });

  // アニメーション用の関数を呼び出して初期状態を設定
  GlowAnimeControl();
});