/* 共通: 初期状態は透明＋transformで待機 */
.text-section__title {
  opacity: 0;
}

/* animateクラス付与時に発火 */

/* title-a: シンプル表示（変化なし） */
.title-a.animate .text-section__title {
  opacity: 1; /* 何も動かさない */
}
/* 説明: 動きなし。ただフェードインで表示 */

/* title-b: 上に飛び上がるフェードイン */
.title-b.animate .text-section__title {
  animation: fadeUp 1s ease-out forwards;
}
@keyframes fadeUp {
  0%   { opacity: 0; transform: translateY(40px); }
  60%  { opacity: 1; transform: translateY(-10px); }
  100% { opacity: 1; transform: translateY(0); }
}
/* 説明: 上方向にジャンプしてから落ち着く動き */

/* title-c: 左からスライドイン */
.title-c.animate .text-section__title {
  animation: slideLeft 1s ease-out forwards;
}
@keyframes slideLeft {
  0%   { opacity: 0; transform: translateX(-80px); }
  60%  { opacity: 1; transform: translateX(10px); }
  100% { opacity: 1; transform: translateX(0); }
}
/* 説明: 左側から勢いよく滑り込む */

/* title-d: 右からスライドイン */
.title-d.animate .text-section__title {
  animation: slideRight 1s ease-out forwards;
}
@keyframes slideRight {
  0%   { opacity: 0; transform: translateX(80px); }
  60%  { opacity: 1; transform: translateX(-10px); }
  100% { opacity: 1; transform: translateX(0); }
}
/* 説明: 右側から勢いよく滑り込む */

/* title-e: 上から降りるフェードイン（b/c/d と同じ系統） */
.title-e.animate .text-section__title {
  animation: fallDown 1s ease-out forwards;
}

@keyframes fallDown {
  0%   { opacity: 0; transform: translateY(-80px); }  /* 上から開始 */
  60%  { opacity: 1; transform: translateY(10px); }   /* 少し下に落ちる */
  100% { opacity: 1; transform: translateY(0); }      /* 最後に止まる */
}
/* 説明: 上から降りてきて最後に止まるシンプルなフェードイン */



/* title-f: ゆっくり拡大＋フェードイン */
.title-f.animate .text-section__title {
  animation: fadeScale 1.5s ease-out forwards;
}
@keyframes fadeScale {
  0%   { opacity: 0; transform: scale(0.7); }
  100% { opacity: 1; transform: scale(1); }
}
/* 説明: 徐々に拡大して現れる、優雅な印象 */

/* title-g: 左右に揺れる＋フェードイン */
.title-g.animate .text-section__title {
  animation: swayFade 1s ease-out forwards;
}
@keyframes swayFade {
  0%   { opacity: 0; transform: translateX(-30px); }
  30%  { opacity: 1; transform: translateX(25px); }
  50%  { transform: translateX(-15px); }
  70%  { transform: translateX(10px); }
  90%  { transform: translateX(-5px); }
  100% { opacity: 1; transform: translateX(0); }
}
/* 説明: 左右に揺れながらフェードイン、コミカルな印象 */

/* title-h: 回転＋フェードイン */
.title-h.animate .text-section__title {
  animation: rotateFade 1s ease-out forwards;
}
@keyframes rotateFade {
  0%   { opacity: 0; transform: rotate(-25deg); }
  50%  { opacity: 1; transform: rotate(20deg); }
  75%  { transform: rotate(-10deg); }
  100% { opacity: 1; transform: rotate(0deg); }
}
/* 説明: 回転しながら現れ、遊び心ある動き */

/* title-i: 上下ジャンプ＋フェードイン */
.title-i.animate .text-section__title {
  animation: jumpFade 1s ease-out forwards;
}
@keyframes jumpFade {
  0%   { opacity: 0; transform: translateY(30px); }
  50%  { opacity: 1; transform: translateY(-15px); }
  75%  { transform: translateY(10px); }
  90%  { transform: translateY(-5px); }
  100% { opacity: 1; transform: translateY(0); }
}
/* 説明: 上下に跳ねる動き、リズミカル */

/* title-j: バウンス＋フェードイン */
.title-j.animate .text-section__title {
  animation: bounceIn 1s ease-out forwards;
}
@keyframes bounceIn {
  0%   { opacity: 0; transform: scale(0.2); }
  40%  { opacity: 1; transform: scale(1.2); }
  60%  { transform: scale(0.9); }
  80%  { transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}
/* 説明: 縮んでから大きく跳ね、最後に安定する */