/**
 * motion.css — 動詞モーションライブラリ（FR-004）
 *
 * 適用モデル:
 *   .kw[data-motion="X"] の中の1文字 .ch にモーションを適用する。
 *   .ch は display:inline-block + animation-delay で「語頭からの伝播」stagger を持つ
 *   （--i は文字インデックス。HTML側で style="--i:n" が付与される前提）。
 *
 * 実装方針:
 *   - transform / opacity / filter のみを操作し、width/height/margin 等の
 *     レイアウトに影響するプロパティはアニメーションしない（行崩れ防止）。
 *   - 振幅は em 基準（文字サイズに追従し、行内に収まる）。
 *   - 各 data-motion ルールは animation-name / -duration / -timing-function /
 *     -iteration-count のみを longhand で指定し、animation-delay は
 *     .kw .ch の基底ルールに委譲する（shorthand で上書きして stagger を
 *     消さないための意図的な設計）。
 */

.kw .ch {
  display: inline-block;
  animation-delay: calc(var(--i, 0) * 60ms);
  animation-fill-mode: backwards;
}

/* bounce: 跳ねる — 上下バウンス（減衰）。40%以降は静止してリズムを作る */
@keyframes telopia-bounce {
  0% {
    transform: translateY(0);
  }
  12% {
    transform: translateY(-0.55em);
  }
  24% {
    transform: translateY(0);
  }
  32% {
    transform: translateY(-0.22em);
  }
  40% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}
.kw[data-motion="bounce"] .ch {
  animation-name: telopia-bounce;
  animation-duration: 2.4s;
  animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  animation-iteration-count: infinite;
}

/* drift: 流れる — 横方向ゆらぎドリフト */
@keyframes telopia-drift {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  25% {
    transform: translateX(0.35em);
    opacity: 0.85;
  }
  50% {
    transform: translateX(0);
    opacity: 1;
  }
  75% {
    transform: translateX(-0.35em);
    opacity: 0.85;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
.kw[data-motion="drift"] .ch {
  animation-name: telopia-drift;
  animation-duration: 3.2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

/* shake: 震える — 小刻みシェイク。60%以降は静止区間 */
@keyframes telopia-shake {
  0%,
  100% {
    transform: translate(0, 0);
  }
  10% {
    transform: translate(-0.06em, 0.03em);
  }
  20% {
    transform: translate(0.06em, -0.03em);
  }
  30% {
    transform: translate(-0.05em, 0.02em);
  }
  40% {
    transform: translate(0.05em, -0.02em);
  }
  50% {
    transform: translate(-0.03em, 0.02em);
  }
  60% {
    transform: translate(0, 0);
  }
}
.kw[data-motion="shake"] .ch {
  animation-name: telopia-shake;
  animation-duration: 1.6s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

/* pop: 弾ける — スケールポップ + 微回転。75%以降は静止してリズムを作る */
@keyframes telopia-pop {
  0% {
    transform: scale(1) rotate(0deg);
  }
  30% {
    transform: scale(1.35) rotate(-6deg);
  }
  50% {
    transform: scale(0.92) rotate(4deg);
  }
  65% {
    transform: scale(1.06) rotate(-2deg);
  }
  75%,
  100% {
    transform: scale(1) rotate(0deg);
  }
}
.kw[data-motion="pop"] .ch {
  animation-name: telopia-pop;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}

/* melt: 溶ける — 下方へにじむ（translateY + blur） */
@keyframes telopia-melt {
  0% {
    transform: translateY(0);
    filter: blur(0);
    opacity: 1;
  }
  50% {
    transform: translateY(0.4em);
    filter: blur(0.035em);
    opacity: 0.7;
  }
  100% {
    transform: translateY(0);
    filter: blur(0);
    opacity: 1;
  }
}
.kw[data-motion="melt"] .ch {
  animation-name: telopia-melt;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

/* glow: 光る — 明滅グロー（text-shadow + opacity） */
@keyframes telopia-glow {
  0%,
  100% {
    text-shadow: 0 0 0.05em currentColor;
    opacity: 0.8;
  }
  50% {
    text-shadow: 0 0 0.4em currentColor, 0 0 0.18em currentColor;
    opacity: 1;
  }
}
.kw[data-motion="glow"] .ch {
  animation-name: telopia-glow;
  animation-duration: 1.8s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

/* spin: 回る — 1文字回転 */
@keyframes telopia-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.kw[data-motion="spin"] .ch {
  animation-name: telopia-spin;
  animation-duration: 1.4s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* rise: 昇る — ゆっくり上昇ループ（translateY + opacity フェード） */
@keyframes telopia-rise {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  80% {
    transform: translateY(-0.9em);
    opacity: 1;
  }
  100% {
    transform: translateY(-0.9em);
    opacity: 0;
  }
}
.kw[data-motion="rise"] .ch {
  animation-name: telopia-rise;
  animation-duration: 3.4s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}

/* US-002: prefers-reduced-motion 対応。すべてのモーションを停止する */
@media (prefers-reduced-motion: reduce) {
  .kw .ch {
    animation: none !important;
  }
}