/* トップ画面の右下のミル（miru-figure.js）。パーツを重ね、体の動きをここで出す。見本は docs/design/miru-motion/。 */
/* 読み込むまで（miru-figure-loading）は1枚絵を出さずに場所だけ空けておく（古いミルが一瞬見えないように）。
   読み終えたら重ねたミルを出し、読めなかったときだけ1枚絵（.mascot の背景）を出す。 */
.mascot.miru-figure-loading,
.mascot.miru-figure-ready { background-image: none; animation: none; }
.miru-figure { position: absolute; left: 50%; bottom: 0; height: 100%; transform: translateX(-50%); display: none; pointer-events: none; }
.mascot.miru-figure-ready .miru-figure { display: block; }
.miru-figure .miru-breath, .miru-figure .miru-hop, .miru-figure .miru-layer { position: absolute; inset: 0; }
.miru-figure .miru-part { position: absolute; background-repeat: no-repeat; }

/* 待機: ゆっくり呼吸する */
.miru-figure .miru-breath { transform-origin: 50% 100%; animation: miru-breath 3.4s ease-in-out infinite; }
@keyframes miru-breath { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.012, 0.988) translateY(0.4%); } }

/* 頭（裏と表の2枚）は首を軸に、同じ角度で傾ける */
.miru-figure .miru-head { transform-origin: 49.6% 60.4%; transform: rotate(var(--miru-tilt, 0deg)); transition: transform .45s cubic-bezier(.3, .7, .3, 1.25); }

/* 耳: ときどきぴくっと動く */
.miru-figure .miru-ear-l { transform-origin: 35.9% 11.7%; }
.miru-figure .miru-ear-r { transform-origin: 63.2% 11.7%; }
.miru-figure .miru-ear-l.miru-twitch { animation: miru-twitch-l .32s ease-out; }
.miru-figure .miru-ear-r.miru-twitch { animation: miru-twitch-r .32s ease-out; }
@keyframes miru-twitch-l { 0%, 100% { transform: none; } 35% { transform: rotate(-8deg); } 70% { transform: rotate(2deg); } }
@keyframes miru-twitch-r { 0%, 100% { transform: none; } 35% { transform: rotate(8deg); } 70% { transform: rotate(-2deg); } }

/* マウスを乗せたとき: ぴょんと跳ねて、挙げた右手を振る */
.miru-figure[data-pose="hover"] .miru-hop { animation: miru-hop .38s ease-out; }
@keyframes miru-hop { 0%, 100% { transform: none; } 40% { transform: translateY(-5%); } }
.miru-figure .miru-paw-r { transform-origin: 40% 75%; }
.miru-figure[data-pose="hover"] .miru-paw-r { animation: miru-wave .5s ease-in-out .3s infinite alternate; }
@keyframes miru-wave { from { transform: rotate(-4deg); } to { transform: rotate(7deg); } }

/* 動きを減らす設定の人には、表情（まばたき・口）だけ変えて、体は動かさない */
@media (prefers-reduced-motion: reduce) {
  .miru-figure .miru-breath, .miru-figure .miru-hop, .miru-figure .miru-layer { animation: none !important; transition: none !important; }
  .miru-figure .miru-head { transform: none; }
}