/* DekoBokoTech character motion — HP用 keyframes
   使い方: このCSSを読み込み、キャラのラッパーに animation を指定する。
   色: --dbt-ink #201e1d / --dbt-paper #f3f2f2 / --dbt-red #f24028 */

:root {
  --dbt-ink: #201e1d;
  --dbt-paper: #f3f2f2;
  --dbt-red: #f24028;
}

/* 待機（ゆっくり上下） */
@keyframes dbt-bob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }
@keyframes dbt-bob-soft { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-4px) } }

/* まばたき（目のブロックに指定。transform-origin: center 必須） */
@keyframes dbt-blink { 0%, 90% { transform: scaleY(1) } 93% { transform: scaleY(0.08) } 96%, 100% { transform: scaleY(1) } }

/* 手をふる（腕のブロックに指定。transform-origin: 50% 100% 必須。頭の外側に置く） */
@keyframes dbt-wave { 0%, 100% { transform: rotate(-6deg) } 50% { transform: rotate(34deg) } }

/* 歩く（体に dbt-lean、左右の脚に step-a / step-b） */
@keyframes dbt-lean { 0%, 100% { transform: rotate(-2.5deg) } 50% { transform: rotate(2.5deg) } }
@keyframes dbt-step-a { 0%, 100% { transform: translate(0, 0) } 50% { transform: translate(6px, -10px) } }
@keyframes dbt-step-b { 0%, 100% { transform: translate(0, -10px) } 50% { transform: translate(-6px, 0) } }

/* よろこぶ（ジャンプ＋スカッシュ。外側にjump、内側にsquash） */
@keyframes dbt-jump { 0%, 60%, 100% { transform: translateY(0) } 20% { transform: translateY(-38px) } 40% { transform: translateY(-6px) } }
@keyframes dbt-squash { 0%, 100% { transform: scale(1, 1) } 12% { transform: scale(1.1, 0.88) } 30% { transform: scale(0.94, 1.06) } }

/* 読み込み中（3体に delay 0 / .14s / .28s） */
@keyframes dbt-hop { 0%, 70%, 100% { transform: translateY(0) } 35% { transform: translateY(-22px) } }

/* セクション角から覗く */
@keyframes dbt-peek { 0%, 100% { transform: translateY(14px) } 50% { transform: translateY(0) } }

/* アンテナだけ遅れて動く */
@keyframes dbt-antenna { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-5px) } }

/* 推奨スピード */
.dbt-idle    { animation: dbt-bob 2.6s ease-in-out infinite; }
.dbt-eye     { transform-origin: center; animation: dbt-blink 4.2s ease-in-out infinite; }
.dbt-wave    { transform-origin: 50% 100%; animation: dbt-wave 0.7s ease-in-out infinite; }
.dbt-walk    { transform-origin: 50% 92%; animation: dbt-lean 0.72s ease-in-out infinite; }
.dbt-joy     { animation: dbt-jump 1.6s cubic-bezier(0.3, 0, 0.4, 1) infinite; }
.dbt-loading { animation: dbt-hop 1.2s ease-in-out infinite; }
.dbt-peek    { animation: dbt-peek 3.4s ease-in-out infinite; }

/* ホバーで反応（カード・ボタンに乗せる場合） */
.dbt-hover { transition: transform 0.18s ease-out; }
.dbt-hover:hover { transform: translateY(-10px) rotate(-3deg); }

/* 動きを減らす設定の環境では止める */
@media (prefers-reduced-motion: reduce) {
  .dbt-idle, .dbt-eye, .dbt-wave, .dbt-walk, .dbt-joy, .dbt-loading, .dbt-peek { animation: none; }
}