/**
 * 効率化されたテキストアニメーション CSS
 * 手動のnth-child指定を削除し、CSS変数とcalc()で自動計算
 */

/* ======================
   基本アニメーション定義
   ====================== */

@keyframes wave {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-25px);
  }
}

@keyframes waveCalm {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
}

@keyframes bounce {
  0%, 100% {
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(1.1) rotate(2deg);
  }
}

@keyframes flip {
  0% {
    transform: rotateY(0);
  }
  50% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

@keyframes glow {
  0%, 100% {
    text-shadow: 
      2px 2px 0 #000,
      0 0 10px currentColor;
  }
  50% {
    text-shadow: 
      2px 2px 0 #000,
      0 0 20px currentColor,
      0 0 30px currentColor;
  }
}

@keyframes slideUp {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes rainbow {
  0% { color: #ff0000; }
  16% { color: #ff8000; }
  33% { color: #ffff00; }
  50% { color: #00ff00; }
  66% { color: #0080ff; }
  83% { color: #8000ff; }
  100% { color: #ff0000; }
}

/* ======================
   効率化されたspan設定
   ====================== */

/* h2の基本スタイル（既存を維持） */
h2 {
  font-size: 60px;
  font-weight: 900;
  -webkit-text-stroke: 6px black;
  color: white;
  z-index: -1;
  position: relative;
  paint-order: stroke;
  text-shadow: 0px 0px transparent, 1px 2px #000000, 2px 4px #000000, 3px 6px #000000, 4px 8px #000000, 5px 10px #000000, 6px 12px #000000, 7px 14px #000000, 8px 16px #000000, 9px 18px #000000, 10px 20px #000000, 11px 22px #000000, 12px 24px #000000, 13px 26px #000000, 14px 28px #000000, 15px 30px #000000, 16px 32px #000000, 17px 34px #000000, 18px 36px #000000, 19px 38px #000000, 20px 40px #000000, 21px 42px #000000, 22px 44px #000000, 23px 46px #000000, 24px 48px #000000, 25px 50px #000000, 26px 52px #000000, 27px 54px #000000, 28px 56px #000000, 29px 58px #000000, 30px 60px #000000, 31px 62px #000000, 32px 64px #000000, 33px 66px #000000, 34px 68px #000000, 35px 70px #000000, 36px 72px #000000, 37px 74px #000000, 38px 76px #000000, 39px 78px #000000, 40px 80px #000000, 41px 82px #000000, 42px 84px #000000, 43px 86px #000000, 44px 88px #000000, 45px 90px #000000, 46px 92px #000000, 47px 94px #000000, 48px 96px #000000, 49px 98px #000000, 50px 100px #000000, 51px 102px #000000, 52px 104px #000000, 53px 106px #000000, 54px 108px #000000, 55px 110px #000000, 56px 112px #000000, 57px 114px #000000, 58px 116px #000000, 59px 118px #000000, 60px 120px #000000, 61px 122px #000000, 62px 124px #000000, 63px 126px #000000, 64px 128px #000000, 65px 130px #000000, 66px 132px #000000, 67px 134px #000000, 68px 136px #000000, 69px 138px #000000, 70px 140px #000000, 71px 142px #000000, 72px 144px #000000, 73px 146px #000000, 74px 148px #000000, 75px 150px #000000, 76px 152px #000000, 77px 154px #000000, 78px 156px #000000, 79px 158px #000000, 80px 160px #000000;
  margin-bottom: 30px;
}

/* 効率化されたh2 spanスタイル - 手動のnth-child不要 */
h2 span {
  display: inline-block;
  /* デフォルト値 - JavaScriptで上書きされる */
  animation: var(--animation-name, waveCalm) var(--animation-duration, 4s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform;
}

/* wave-textの基本スタイル */
.wave-text {
  font-size: 6vw;
  font-weight: 900;
  -webkit-text-stroke: 6px black;
  color: white;
  paint-order: stroke;
}

/* 効率化されたwave-text spanスタイル - 手動のnth-child不要 */
.wave-text span {
  display: inline-block;
  /* デフォルト値 - JavaScriptで上書きされる */
  animation: var(--animation-name, wave) var(--animation-duration, 2s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform;
}

/* ======================
   アニメーション制御クラス
   ====================== */

/* アニメーション一時停止 */
.animation-paused span {
  animation-play-state: paused !important;
}

/* アニメーション高速化 */
.animation-fast span {
  animation-duration: calc(var(--animation-duration, 2s) * 0.5) !important;
}

/* アニメーション低速化 */
.animation-slow span {
  animation-duration: calc(var(--animation-duration, 2s) * 2) !important;
}

/* ホバー時の特殊効果 */
.text-hover-effect:hover span {
  animation-duration: calc(var(--animation-duration, 2s) * 0.3) !important;
}

/* ======================
   レスポンシブ対応
   ====================== */

@media screen and (max-width: 767px) {
  /* モバイルでは少し小さく、速く */
  h2 {
    font-size: clamp(32px, 8vw, 48px);
    -webkit-text-stroke: 3px black;
  }
  
  .wave-text {
    font-size: clamp(24px, 10vw, 48px);
    -webkit-text-stroke: 3px black;
  }
  
  /* モバイルではアニメーション遅延を短縮 */
  h2 span,
  .wave-text span {
    animation-duration: calc(var(--animation-duration, 2s) * 0.8);
  }
}

@media screen and (max-width: 480px) {
  /* 非常に小さい画面ではさらに調整 */
  h2 {
    font-size: clamp(24px, 6vw, 36px);
    -webkit-text-stroke: 2px black;
  }
  
  .wave-text {
    font-size: clamp(18px, 8vw, 36px);
    -webkit-text-stroke: 2px black;
  }
}

/* ======================
   パフォーマンス最適化
   ====================== */

/* GPU加速を有効化 */
h2 span,
.wave-text span {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* アニメーションの滑らかさを向上 */
@media (prefers-reduced-motion: no-preference) {
  h2 span,
  .wave-text span {
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
}

/* ユーザーがアニメーション削減を希望する場合 */
@media (prefers-reduced-motion: reduce) {
  h2 span,
  .wave-text span {
    animation: none !important;
    transform: none !important;
  }
}

/* ======================
   ユーティリティクラス
   ====================== */

/* 特定のアニメーションタイプ用クラス */
.anim-wave span { animation-name: wave; }
.anim-wave-calm span { animation-name: waveCalm; }
.anim-bounce span { animation-name: bounce; }
.anim-flip span { animation-name: flip; }
.anim-glow span { animation-name: glow; }
.anim-slide-up span { animation-name: slideUp; }
.anim-rainbow span { animation-name: rainbow; }

/* 速度調整クラス */
.speed-slow span { animation-duration: 4s; }
.speed-normal span { animation-duration: 2s; }
.speed-fast span { animation-duration: 1s; }
.speed-ultra-fast span { animation-duration: 0.5s; }

/* 遅延調整クラス */
.stagger-tight span { --stagger-base: 0.05s; }
.stagger-normal span { --stagger-base: 0.1s; }
.stagger-loose span { --stagger-base: 0.2s; }
.stagger-wide span { --stagger-base: 0.3s; }

/* ======================
   デバッグ用スタイル
   ====================== */

/* 開発時の可視化用（本番では削除） */
.debug-animation span {
  border: 1px dashed rgba(255, 0, 0, 0.3);
  position: relative;
}

.debug-animation span::before {
  content: attr(data-index);
  position: absolute;
  top: -20px;
  left: 0;
  font-size: 10px;
  color: red;
  z-index: 1000;
}

/* ======================
   カスタムプロパティのデフォルト値
   ====================== */

:root {
  --text-animation-duration: 2s;
  --text-animation-stagger: 0.1s;
  --text-animation-easing: ease-in-out;
  --text-animation-iterations: infinite;
}

/* カスタムプロパティを使用したグローバル設定 */
.custom-animation span {
  animation-duration: var(--text-animation-duration);
  animation-delay: calc(var(--char-index, 0) * var(--text-animation-stagger));
  animation-timing-function: var(--text-animation-easing);
  animation-iteration-count: var(--text-animation-iterations);
}
