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

   秒数は数字で直書きせず、台本の区切りから決める。
     --cue-0, --cue-1 … その場面で n 番目の字幕（＝ナレーションの区切り）が始まる秒
     --dur             … その場面の長さ
   どちらも tools/make-audio.mjs が測った実尺から、JS が場面ごとに入れる。
   だから声を作り直しても、動きは台本の区切りに付いてくる（秒数を手で直さなくてよい）。
   ======================================== */

.scene {
  visibility: hidden;
}

.scene.is-active {
  visibility: visible;
  animation:
    scene-in 0.45s ease both,
    scene-out 0.4s ease calc(var(--dur, 10s) - 0.4s) forwards;
}

/* 最後の場面は消さずに止める */
.scene.is-active.is-last {
  animation: scene-in 0.45s ease both;
}

@keyframes scene-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

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

@keyframes slide-left {
  from { opacity: 0; translate: -48px 0; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes slide-right {
  from { opacity: 0; translate: 48px 0; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes pop {
  0% { opacity: 0; scale: 0.6; }
  60% { opacity: 1; scale: 1.06; }
  100% { opacity: 1; scale: 1; }
}

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

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

@keyframes draw-x {
  from { scale: 0 1; }
  to { scale: 1 1; }
}

@keyframes drift {
  0%, 100% { translate: 0 0; }
  50% { translate: 28px -20px; }
}

@keyframes blink {
  50% { opacity: 0; }
}