/* ========================================
   動きの共通部品 — 紙芝居の紙の出し入れ、場面の札、よく使う動き
   ----------------------------------------
   動きはすべて CSS の @keyframes で書く。
   JS がするのは「いまどの場面か（.is-active）」の切り替えと、声の再生位置に動きの時計を合わせることだけ。

   秒数は数字で直書きせず、声の区切りから決める（tools/measure-cues.mjs が実測、JS が場面ごとに入れる）。
     --beat-0, --beat-1 … その場面で n 番目の言葉（、。で区切った単位）を話し始める秒
     --cue-0, --cue-1 …  その場面で n 番目の字幕が出る秒
     --dur               その場面の長さ
   例）animation: pop 0.5s var(--ease-pop) var(--beat-2) both;  ← 3つめの言葉を言い始めたら、ぽんと出る

   SVG の部品を動かすときの決まり
   - 動かす要素には class="mv" を付ける。回転・拡大の中心は、その要素自身の大きさが基準になる
     （中心を変えるときは style="--o: 50% 100%"。例: 足もとを中心に揺らす）
   - 置き場所の transform="translate(…) scale(…)" は、動かす要素の「外側の g」に書く。
     同じ要素に transform 属性と CSS の動きを両方付けると、中心がずれて置き場所が変わる
   - 同じ性質（translate など）を2つの動きで使うときは、後から始まるほうを forwards にする
     （both にすると、始まる前の状態が先の動きを上書きする）
   ======================================== */

/* ---------- 紙芝居の紙（場面） ---------- */

.scene {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  visibility: hidden;
  background: var(--paper);
  box-shadow: 18px 0 28px rgba(30, 18, 10, 0.35);
}
.scene > * {
  grid-area: 1 / 1;
}

/* いまの場面。終わりの 0.55 秒で、左へ引き抜く（js/player.js の PULL_SECONDS と合わせる） */
.scene.is-active {
  visibility: visible;
  z-index: 2;
  animation: card-pull 0.55s cubic-bezier(0.55, 0, 0.75, 0.3) calc(var(--dur, 10s) - 0.55s) forwards;
}

/* 引き抜いている間だけ、次の場面を後ろに見せる（時計は 0 秒で止まっている） */
.scene.is-next {
  visibility: visible;
  z-index: 1;
}

/* 最後の場面は引き抜かずに止める */
.scene.is-last.is-active {
  animation: none;
}

@keyframes card-pull {
  from { translate: 0 0; }
  to { translate: -106% 0; }
}

.art {
  width: 1280px;
  height: 720px;
  display: block;
}

/* 場面の札（左上）。表紙のある第一場は、表紙を引き抜いてから出す（--label-at） */
.label {
  margin: 26px 0 0 30px;
  padding: 10px 22px 12px 18px;
  display: flex;
  align-items: baseline;
  gap: 14px;
  align-self: start;
  justify-self: start;
  background: rgba(255, 252, 244, 0.92);
  color: var(--ink);
  font-family: var(--font-title);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.06em;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(59, 42, 33, 0.16), inset 0 0 0 1px rgba(59, 42, 33, 0.08);
  animation: label-in 0.6s var(--ease-out) var(--label-at, 0.15s) both;
}
.label span {
  padding: 3px 8px 4px;
  background: #c8463c;
  color: #fff;
  font-family: var(--font-jp);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: 4px;
}

@keyframes label-in {
  from { opacity: 0; translate: -24px 0; }
  to { opacity: 1; translate: 0 0; }
}

/* ---------- SVG の部品を動かす土台 ---------- */

.mv {
  transform-box: fill-box;
  transform-origin: var(--o, 50% 50%);
}

/* ---------- よく使う動き ---------- */

@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes rise {
  from { opacity: 0; translate: 0 36px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes pop {
  0% { opacity: 0; scale: 0.3; }
  60% { opacity: 1; scale: 1.12; }
  100% { opacity: 1; scale: 1; }
}

/* ぴょんと一回はねる */
@keyframes hop {
  0%, 100% { translate: 0 0; }
  40% { translate: 0 -34px; }
  70% { translate: 0 4px; }
}

/* 歩くときの上下 */
@keyframes bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -7px; }
}

/* 左右にゆらゆら（回転） */
@keyframes sway {
  0%, 100% { rotate: -4deg; }
  50% { rotate: 4deg; }
}

/* しっぽや手を振る */
@keyframes wag {
  0%, 100% { rotate: -14deg; }
  50% { rotate: 14deg; }
}

/* 右側の腕（.arm-b）を上げて手を振り、下ろす */
@keyframes wave-hand {
  0%, 100% { rotate: 0deg; }
  18% { rotate: -150deg; }
  34% { rotate: -118deg; }
  50% { rotate: -150deg; }
  66% { rotate: -118deg; }
  82% { rotate: -150deg; }
}

/* うなずく（頭を小さく傾けて戻す） */
@keyframes nod {
  0%, 100% { rotate: 0deg; }
  50% { rotate: 7deg; }
}

/* ぶるぶる震える */
@keyframes shake {
  0%, 100% { rotate: 0deg; }
  20% { rotate: -5deg; }
  40% { rotate: 5deg; }
  60% { rotate: -4deg; }
  80% { rotate: 3deg; }
}

/* 羽ばたく（つばさ .wing を肩のあたりで上下に） */
@keyframes flap {
  0%, 100% { rotate: 0deg; }
  50% { rotate: -38deg; }
}

/* きらっと光る */
@keyframes twinkle {
  0%, 100% { opacity: 0; scale: 0.2; }
  50% { opacity: 1; scale: 1; }
}

/* ふわっと浮かんで消える（ハート・湯気） */
@keyframes float-up {
  0% { opacity: 0; translate: 0 10px; scale: 0.6; }
  25% { opacity: 1; }
  100% { opacity: 0; translate: 0 -90px; scale: 1.1; }
}

@keyframes spin {
  to { rotate: 360deg; }
}

/* SVG の線を描く（要素に pathLength="1" を付け、stroke-dasharray: 1 にしておく） */
@keyframes draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

/* 描いた線の内側を塗る */
@keyframes fill-in {
  from { fill-opacity: 0; }
  to { fill-opacity: 1; }
}

/* 雲が流れる */
@keyframes drift {
  from { translate: 0 0; }
  to { translate: 90px 0; }
}

/* 水面のさざなみ（破線を流す） */
@keyframes ripple-flow {
  to { stroke-dashoffset: -120; }
}