/* ============================================================
   立ち絵マスコット（1枚絵ゆらぎ＋ホバー表情チェンジ）
   - パーツ分解しない。同じ絵の「表情違い」を重ねてクロスフェード
   - 常時：呼吸(微拡縮)＋ふわ浮き。ホバー(またはタップ)で表情切替
   - 透過PNG推奨。すべて同一サイズ・同一構図で書き出すこと
   関連: _still_mascot.html / mascot-still.js / docs/MASCOT_RIG_SPEC.md
   ============================================================ */

.still-mascot {
  position: relative;
  display: inline-block;
  width: var(--sm-w, 300px);
  line-height: 0;
  cursor: pointer;
}
.sm-inner {
  position: relative;
  width: 100%;
  animation: sm-breathe 4s ease-in-out infinite, sm-float 6.5s ease-in-out infinite;
  transform-origin: 50% 100%;
  will-change: transform;
}
.sm-layer {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity .3s ease;
}
/* 先頭(base)以外は重ねて既定は透明 */
.sm-layer.sm-over {
  position: absolute;
  inset: 0;
  opacity: 0;
}

/* ホバー / アクティブ(タップ) で表情切替 */
.still-mascot:hover .sm-hover,
.still-mascot.is-active .sm-hover { opacity: 1; }
.still-mascot:hover .sm-base,
.still-mascot.is-active .sm-base { opacity: 0; }

/* ふわっと拡大のマイクロインタラクション（任意） */
.still-mascot { transition: transform .3s cubic-bezier(.2,1.2,.4,1); }
.still-mascot:hover { transform: translateY(-4px) scale(1.03); }

@keyframes sm-breathe {
  0%,100% { transform: scaleX(1) scaleY(1); }
  50%     { transform: scaleX(0.994) scaleY(1.012); }
}
@keyframes sm-float {
  0%,100% { margin-top: 0; }
  50%     { margin-top: -8px; }
}

/* 任意：ゆっくりズームの"生きてる背景"用（背景配置時に .sm-kenburns を付与） */
.still-mascot.sm-kenburns .sm-inner { animation: sm-kb 18s ease-in-out infinite; }
@keyframes sm-kb {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .sm-inner, .still-mascot.sm-kenburns .sm-inner { animation: none; }
  .still-mascot:hover { transform: none; }
}