/* ==================================================
   うさ委員（キャラクター）

   assets/rabbit.js とセットの部品。録音画面と LP の両方が読む。
   app.css に置いていたが、あちらは録音画面の都合で書いてあるので、
   LP から読むと要らない指定まで付いてくる。

   ★接地の原則: 画像の底辺（＝床のライン）は絶対に動かさない。
     そのため回転（rotate）と縦横の平行移動（translate）は使わない。
     どちらも底のラインを動かしてしまう。
     使うのは底辺を軸にした「潰し・伸び」(scale) と「傾き」(skewX) だけ。
     transform-origin は必ず 50% 100%（底の中央）にする。

   層を分けているのは、複数の動きが同じ transform を取り合わないため:
     .rabbit         ぴょこっと出入り（登場時のみ）
     .rabbit-nod     音量への反応（skew + scale）
     .rabbit-tilt    傾きの単発（skew。個別プロパティが無いので transform）
     .rabbit-move    伸縮の単発（scale の個別プロパティ）
     .rabbit-breathe 呼吸（transform。単発と混ざらないよう独立させる）
   ================================================== */
:root {
  --rb-skew: 0deg;    /* 音量に応じた傾き（底を軸に上だけ倒れる） */
  --rb-swell: 1;      /* 音量に応じた縦の伸び */
  --rb-grip: 22px;    /* 前足がコンソールに掛かる深さ */
}

.rabbit-stage {
  position: absolute;
  left: 0; right: 0; top: 0;
  bottom: calc(-1 * var(--rb-grip));
  z-index: 20;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}

.rabbit {
  width: min(88vw, 380px);
  max-height: 100%;
  /* 舞台は pointer-events:none のまま。うさぎ本体だけタップを受ける。 */
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transform: translateY(115%);
  transition: transform .68s cubic-bezier(.32, 1.6, .55, 1);
  will-change: transform;
}
.rabbit.is-in { transform: translateY(0); }

.rabbit-nod,
.rabbit-tilt,
.rabbit-move,
.rabbit-breathe {
  width: 100%; height: 100%;
  transform-origin: 50% 100%;
}
.rabbit-tilt, .rabbit-move, .rabbit-breathe { position: relative; }

/* 音量への反応。縦に伸びたぶん横を縮めて体積を保つ。 */
.rabbit-nod {
  transform: skewX(var(--rb-skew)) scaleY(var(--rb-swell)) scaleX(calc(2 - var(--rb-swell)));
  transition: transform .1s ease-out;
}

/* 呼吸。ここは常時ループなので、単発と混ざらないよう独立した層にする。 */
.rabbit-breathe { animation: rbBreathe 3.9s ease-in-out infinite; }
@keyframes rbBreathe {
  0%, 100% { transform: scale(1, 1); }
  50%      { transform: scale(.988, 1.024); }
}

/* ---------- 傾きの単発（skew） ---------- */

/* ゆらゆら … つつかれたとき */
.rabbit-tilt.is-wiggle { animation: rbWiggle .78s cubic-bezier(.34, 1.4, .5, 1); }
@keyframes rbWiggle {
  0%, 100% { transform: skewX(0deg); }
  14%      { transform: skewX(-9deg); }
  38%      { transform: skewX(8deg); }
  62%      { transform: skewX(-5deg); }
  82%      { transform: skewX(2.5deg); }
}

/* ぶるっ … しょんぼりに入る瞬間 */
.rabbit-tilt.is-shake { animation: rbShake .5s linear; }
@keyframes rbShake {
  0%, 100% { transform: skewX(0deg); }
  20%      { transform: skewX(-6deg); }
  40%      { transform: skewX(6deg); }
  60%      { transform: skewX(-3.5deg); }
  80%      { transform: skewX(3.5deg); }
}

/* ゆったり左右に揺れる … ごきげんなとき */
.rabbit-tilt.is-sway { animation: rbSway 2.6s ease-in-out; }
@keyframes rbSway {
  0%, 100% { transform: skewX(0deg); }
  25%      { transform: skewX(-7deg); }
  50%      { transform: skewX(0deg); }
  75%      { transform: skewX(7deg); }
}

/* 首をかしげる … きょろきょろと相性がいい */
.rabbit-tilt.is-lean { animation: rbLean 1.8s cubic-bezier(.4, 0, .3, 1); }
@keyframes rbLean {
  0%       { transform: skewX(0deg); }
  20%, 68% { transform: skewX(-11deg); }
  100%     { transform: skewX(0deg); }
}

/* ぷるぷる … 細かく速い */
.rabbit-tilt.is-shiver { animation: rbShiver .62s linear; }
@keyframes rbShiver {
  0%, 100% { transform: skewX(0deg); }
  10% { transform: skewX(-3.5deg); }  20% { transform: skewX(3.5deg); }
  30% { transform: skewX(-3deg); }    40% { transform: skewX(3deg); }
  50% { transform: skewX(-2.2deg); }  60% { transform: skewX(2.2deg); }
  70% { transform: skewX(-1.4deg); }  80% { transform: skewX(1.4deg); }
}

/* ---------- 伸縮の単発（scale の個別プロパティ） ---------- */

/* うなずき */
.rabbit-move.is-nodding { animation: rbNod .66s cubic-bezier(.36, 0, .28, 1); }
@keyframes rbNod {
  0%   { scale: 1 1; }
  20%  { scale: 1.11 .86; }
  48%  { scale: .93 1.10; }
  70%  { scale: 1.04 .97; }
  86%  { scale: .99 1.01; }
  100% { scale: 1 1; }
}

/* うんうん（二度うなずく） */
.rabbit-move.is-nod2 { animation: rbNod2 .98s cubic-bezier(.36, 0, .28, 1); }
@keyframes rbNod2 {
  0%   { scale: 1 1; }
  13%  { scale: 1.10 .87; }
  28%  { scale: .95 1.07; }
  44%  { scale: 1.09 .89; }
  62%  { scale: .95 1.07; }
  80%  { scale: 1.03 .98; }
  100% { scale: 1 1; }
}

/* 喜び。床から離れられないので、深くしゃがんで大きく伸びる。 */
.rabbit-move.is-hop { animation: rbHop .82s cubic-bezier(.3, 1.2, .5, 1); }
@keyframes rbHop {
  0%   { scale: 1 1; }
  12%  { scale: 1.20 .78; }
  34%  { scale: .82 1.26; }
  52%  { scale: 1.08 .94; }
  68%  { scale: .93 1.09; }
  84%  { scale: 1.03 .98; }
  100% { scale: 1 1; }
}

/* ぼよよん … 減衰しながら何度も弾む */
.rabbit-move.is-boing { animation: rbBoing 1.15s cubic-bezier(.25, .8, .4, 1); }
@keyframes rbBoing {
  0%   { scale: 1 1; }
  9%   { scale: 1.19 .79; }
  24%  { scale: .83 1.23; }
  40%  { scale: 1.12 .91; }
  55%  { scale: .91 1.11; }
  69%  { scale: 1.06 .95; }
  81%  { scale: .96 1.04; }
  91%  { scale: 1.02 .99; }
  100% { scale: 1 1; }
}

/* ぴくっ … 大きな声への反応 */
.rabbit-move.is-bounce { animation: rbBounce .5s cubic-bezier(.3, 1.3, .5, 1); }
@keyframes rbBounce {
  0%, 100% { scale: 1 1; }
  28%      { scale: .90 1.13; }
  58%      { scale: 1.07 .95; }
  82%      { scale: .98 1.02; }
}

/* のび … 眠りから覚めたとき */
.rabbit-move.is-stretch { animation: rbStretch 1.6s ease-in-out; }
@keyframes rbStretch {
  0%   { scale: 1 1; }
  28%  { scale: .90 1.15; }
  52%  { scale: .87 1.19; }
  76%  { scale: 1.06 .95; }
  100% { scale: 1 1; }
}

/* しょんぼり。沈んだまま止まる。 */
.rabbit-move.is-sad { animation: rbSad .5s ease-out forwards; }
@keyframes rbSad {
  to { scale: 1.03 .94; }
}

@media (prefers-reduced-motion: reduce) {
  .rabbit-breathe { animation: none; }
  .rabbit, .rabbit-nod, .rabbit-pose { transition: none; }
  .rabbit-tilt, .rabbit-move { animation: none !important; }
}

/* 表情レイヤー。すべて同じ箱に重ね、opacity で切り替える。 */
.rabbit-pose {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: bottom center;
  opacity: 0;
  transition: opacity .17s ease-in-out;
  -webkit-user-drag: none;
  user-select: none;
}
.rabbit-pose.is-on { opacity: 1; }
/* 耳を横に開いた絵（ウインク・困り顔・しょんぼり）は箱を左右に 48px ずつ広げてある（tools/build-rabbit-faces.py の PAD）。
   同じ割合だけ外へはみ出させ、真ん中の 440px を base と重ねる（48 / 440 = 10.909%・536 / 440 = 121.818%） */
.rabbit-pose.is-wide { left: -10.909%; right: auto; width: 121.818%; }
/* まばたき。base に目だけ閉じた絵を一瞬重ねる（表情のクロスフェードより速く） */
.rabbit-blink { transition-duration: .05s; }