/* ==== つるやまさんの動き ====
 *
 * 絵（画像）なので、動かせるのは全体だけ。
 * まばたき・口パク・片手だけ振る、はできない。
 *
 * 回転の軸（transform-origin）は、どれも足元に置いてある。
 * 中心にすると、宙で回っているように見えて重さが出ない。
 */

.tsuruyama {
  display: inline-block;
  line-height: 0;              /* 画像の下に余白が出るのを止める */
  will-change: transform;
}
/* ハートが満ちていくとき、PNG の上にハートの図形だけを重ねる
   （tsuruyama.js の tsuruyamaHeartRising）。枠が同じなので、
   同じ大きさに広げるだけで同じ場所に乗る。 */
.tsuruyama.ty-heartfill { position: relative; }
.tsuruyama .ty-heart {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.tsuruyama img {
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-drag: none;
}
/* 場面スタンプ。出たときに「ぽん」と現れ、そのあとは中身に合った動きを繰り返す。
   出る動きと繰り返す動きは、2本を時間差で重ねている（pop が終わってから始まる）。 */
.tsuruyama-scene {
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.tsuruyama-scene.pop { animation: fpop .42s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes fpop {
  from { transform: scale(.72) rotate(-5deg); opacity: 0; }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}

/* 鼓動。マッチ成立。心臓の打ち方に寄せて、速く縮んでゆっくり戻す
   （等速にすると呼吸に見えて、高鳴りにならない） */
.tsuruyama-scene.m-beat.pop { animation: fpop .42s cubic-bezier(.3, 1.5, .5, 1) both,
                                    fbeat 1.5s ease-in-out .42s infinite; }
@keyframes fbeat {
  0%, 100% { transform: scale(1); }
  14%      { transform: scale(1.07); }
  26%      { transform: scale(1); }
  38%      { transform: scale(1.04); }
  50%      { transform: scale(1); }
}

/* 跳ねる。行こう！ 潰しを入れないと、ただの上下移動に見える */
.tsuruyama-scene.m-bounce.pop { animation: fpop .42s cubic-bezier(.3, 1.5, .5, 1) both,
                                      fbounce 1.1s cubic-bezier(.3, 1.3, .5, 1) .42s infinite; }
@keyframes fbounce {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  20%      { transform: translateY(0) scale(1.05, .95); }
  50%      { transform: translateY(-7%) scale(.98, 1.03); }
  80%      { transform: translateY(0) scale(1.05, .95); }
}

/* 小刻みに揺れる。メッセージ来てるよ！ 気づいてほしいときの動き */
.tsuruyama-scene.m-wiggle.pop { animation: fpop .42s cubic-bezier(.3, 1.5, .5, 1) both,
                                      fwiggle 1.9s ease-in-out .42s infinite; }
@keyframes fwiggle {
  0%, 62%, 100% { transform: rotate(0deg); }
  68%, 80%      { transform: rotate(-4deg); }
  74%, 86%      { transform: rotate(4deg); }
}

/* ゆらゆら。考え中 */
.tsuruyama-scene.m-sway.pop { animation: fpop .42s cubic-bezier(.3, 1.5, .5, 1) both,
                                    fscenesway 3.4s ease-in-out .42s infinite; }
@keyframes fscenesway {
  0%, 100% { transform: rotate(-2.4deg); }
  50%      { transform: rotate(2.4deg); }
}

.tsuruyama-icon {
  vertical-align: -3px;
  flex-shrink: 0;
  user-select: none;
}
.tsuruyama-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  white-space: nowrap;
}

/* 待機＝ぽよんぽよん（2026-10-08、新井さんの指示でこれを既定にした）。
   沈む → 伸びて跳ぶ → 着地でつぶれる、の4拍。1.5秒でひと回り。
   ★ ゴムの質感は「潰し(squash)と伸ばし(stretch)」で出す。上下に動かすだけだと
     ただのジャンプに見えて「ぽよん」にならない。
   ★ 軸は足元(50% 100%)に置く。中心にすると宙で潰れて見えて重さが出ない。 */
.p-stand { animation: fpoyon 1.5s cubic-bezier(.33,.9,.4,1.1) infinite;
           transform-origin: 50% 100%; }
@keyframes fpoyon {
  0%        { transform: translateY(0)     scale(1, 1); }
  10%       { transform: translateY(0)     scale(1.12, .88); }
  32%       { transform: translateY(-11%)  scale(.95, 1.06); }
  48%       { transform: translateY(0)     scale(1, 1); }
  56%       { transform: translateY(0)     scale(1.14, .86); }
  64%       { transform: translateY(-3.5%) scale(.99, 1.02); }
  78%       { transform: translateY(0)     scale(1.04, .97); }
  88%, 100% { transform: translateY(0)     scale(1, 1); }
}

/* 元の待機（ゆらゆら揺れる）。落ち着かせたい画面で pose:"sway" を渡すと使える */
.p-sway { animation: fsway 3.6s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes fsway {
  0%, 100% { transform: rotate(-5deg); }
  50%      { transform: rotate(5deg); }
}

/* 手を振る。腕だけは動かせないので、体ごと小刻みに傾ける。
   もとの絵がすでに手を上げているので、これで振っているように見える。 */
.p-wave { animation: fwave 1.5s ease-in-out infinite; transform-origin: 50% 92%; }
@keyframes fwave {
  0%, 100% { transform: rotate(-7deg); }
  50%      { transform: rotate(7deg); }
}

/* 跳ねる。上がる前と着いた瞬間に潰す。潰しが無いと、ただの上下移動に見える。 */
.p-jump { animation: fjump 1.15s cubic-bezier(.3, 1.3, .5, 1) infinite; transform-origin: 50% 96%; }
@keyframes fjump {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  18%      { transform: translateY(0) scale(1.09, .9); }
  50%      { transform: translateY(-18%) scale(.96, 1.05); }
  82%      { transform: translateY(0) scale(1.09, .9); }
}

/* おじぎ */
.p-bow { animation: fbow 2.6s ease-in-out infinite; transform-origin: 50% 96%; }
@keyframes fbow {
  0%, 62%, 100% { transform: rotate(0deg) translateY(0); }
  22%, 42%      { transform: rotate(22deg) translateY(3%); }
}

/* 七転び八起き。倒れて、ためて、勢いよく起きる。
   だるまだった頃の由来の動き。**鶴になった 2026-10-08 以降は意味を持たない**ので、
   新しく使わないこと。既存の呼び出しのために残してあるだけ。 */
.p-tumble { animation: ftumble 3.4s cubic-bezier(.34, 1.56, .64, 1) infinite; transform-origin: 50% 97%; }
@keyframes ftumble {
  0%       { transform: rotate(0deg); }
  14%      { transform: rotate(-76deg); }
  38%      { transform: rotate(-76deg); }
  56%      { transform: rotate(14deg); }
  68%      { transform: rotate(-9deg); }
  78%      { transform: rotate(5deg); }
  88%,100% { transform: rotate(0deg); }
}

/* .p-none は動かさない（一覧に並べるときなど） */

@media (prefers-reduced-motion: reduce) {
  .p-stand, .p-sway, .p-wave, .p-jump, .p-bow, .p-tumble,
  .tsuruyama-scene, .tsuruyama-scene.pop { animation: none; }
}