/* ========================================
   第四場 三匹の仲間
   言葉の頭（--beat-N）
     0 道の途中で、 / 1 犬、 / 2 猿、 / 3 雉に出会いました。
     4 桃太郎がきびだんごを分けると、 / 5 三匹は心強い仲間になり、 / 6 一緒に鬼ヶ島を目指しました。
   ======================================== */

/* ---------- 山道を歩いてくる（奥の山がゆっくり流れる） ---------- */

.scene-companions .s4-far {
  animation:
    s4-far-a 1.4s ease-out both,
    s4-far-b 2.3s linear var(--beat-6) forwards;
}
.scene-companions .s4-mid {
  animation:
    s4-mid-a 1.4s ease-out both,
    s4-mid-b 2.3s linear var(--beat-6) forwards;
}
@keyframes s4-far-a { to { translate: -30px 0; } }
@keyframes s4-far-b { from { translate: -30px 0; } to { translate: -110px 0; } }
@keyframes s4-mid-a { to { translate: -70px 0; } }
@keyframes s4-mid-b { from { translate: -70px 0; } to { translate: -250px 0; } }
.scene-companions .s4-light { animation: s4-light 3s ease-in-out infinite alternate; }
@keyframes s4-light {
  from { opacity: 0.6; }
  to { opacity: 1; }
}

.scene-companions .s4-momo-walk { animation: s4-walk-in 1.4s ease-out both; }
@keyframes s4-walk-in {
  from { translate: -260px 0; }
  to { translate: 0 0; }
}
.scene-companions .s4-momo-bob {
  animation:
    bob 0.45s ease-in-out 3,
    bob 0.45s ease-in-out var(--beat-6) infinite;
}
.scene-companions .momotaro .tails { animation: sway 1.1s ease-in-out infinite; }

/* ---------- 犬（茂みから） ---------- */

.scene-companions .s4-bush { animation: shake 0.5s ease-in-out calc(var(--beat-1) - 0.25s); }
.scene-companions .s4-dog-turn { animation: s4-turn 0.3s ease-in-out var(--beat-6) both; }
@keyframes s4-turn {
  from { scale: -1 1; }
  to { scale: 1 1; }
}
.scene-companions .s4-dog-out { animation: s4-dog-out 0.45s var(--ease-pop) calc(var(--beat-1) - 0.05s) both; }
@keyframes s4-dog-out {
  from { opacity: 0; translate: -120px 20px; }
  30% { opacity: 1; }
  to { opacity: 1; translate: 0 0; }
}
.scene-companions .s4-dog-hop {
  animation:
    hop 0.5s ease-out calc(var(--beat-1) + 0.4s),
    hop 0.5s ease-out calc(var(--beat-5) + 0.05s);
}
.scene-companions .dog .tail { animation: wag 0.45s ease-in-out var(--beat-1) infinite; }
.scene-companions .dog .head { animation: nod 0.4s ease-in-out calc(var(--beat-4) + 0.85s) 3; }
.scene-companions .s4-dog-bob { animation: bob 0.4s ease-in-out var(--beat-6) infinite; }

/* ---------- 猿（木から落ちてくる） ---------- */

.scene-companions .s4-branch { animation: shake 0.5s ease-in-out calc(var(--beat-2) - 0.15s); }
.scene-companions .s4-monkey-drop { animation: s4-drop 0.6s linear calc(var(--beat-2) - 0.1s) both; }
@keyframes s4-drop {
  0% { opacity: 0; translate: 0 -470px; animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.5); }
  8% { opacity: 1; }
  72% { translate: 0 0; animation-timing-function: ease-out; }
  86% { translate: 0 -26px; animation-timing-function: ease-in; }
  100% { opacity: 1; translate: 0 0; }
}
.scene-companions .monkey .tail { animation: sway 1.2s ease-in-out var(--beat-2) infinite; }
.scene-companions .monkey .head { animation: nod 0.4s ease-in-out calc(var(--beat-4) + 1.3s) 3; }
.scene-companions .s4-monkey-hop { animation: hop 0.5s ease-out calc(var(--beat-5) + 0.3s); }
.scene-companions .s4-monkey-bob { animation: bob 0.42s ease-in-out calc(var(--beat-6) + 0.1s) infinite; }

/* ---------- 雉（空から岩へ。最後は飛び立つ） ---------- */

.scene-companions .s4-bird-fly {
  animation:
    s4-bird-in 0.9s ease-out calc(var(--beat-3) - 0.05s) both,
    s4-bird-away 2s ease-in calc(var(--beat-6) + 0.25s) forwards;
}
@keyframes s4-bird-in {
  0% { opacity: 0; translate: 420px -420px; }
  12% { opacity: 1; }
  100% { opacity: 1; translate: 0 0; }
}
@keyframes s4-bird-away {
  from { translate: 0 0; }
  to { translate: 150px -330px; }
}
.scene-companions .s4-bird-turn { animation: s4-turn 0.3s ease-in-out var(--beat-6) both; }
.scene-companions .pheasant .wing {
  animation:
    flap 0.18s ease-in-out calc(var(--beat-3) - 0.05s) 5,
    flap 0.18s ease-in-out calc(var(--beat-6) + 0.2s) infinite;
}
.scene-companions .pheasant .tail { animation: sway 1.4s ease-in-out infinite; }
.scene-companions .pheasant .head { animation: nod 0.4s ease-in-out calc(var(--beat-4) + 1.75s) 3; }
.scene-companions .s4-bird-hop { animation: hop 0.5s ease-out calc(var(--beat-5) + 0.55s); }

/* ---------- きびだんごを分ける ---------- */

.scene-companions .momotaro .arm-b {
  animation:
    s4-offer 2.5s ease-in-out var(--beat-4) both,
    s4-cheer 2.2s ease-in-out calc(var(--beat-5) + 0.1s) forwards;
}
@keyframes s4-offer {
  0%, 100% { rotate: 0deg; }
  14%, 86% { rotate: -60deg; }
}
@keyframes s4-cheer {
  0%, 100% { rotate: 0deg; }
  20%, 80% { rotate: -130deg; }
}
.scene-companions .s4-dango { opacity: 0; }
.scene-companions .d1 { animation: s4-toss-1 0.6s ease-in-out calc(var(--beat-4) + 0.25s) both; }
.scene-companions .d2 { animation: s4-toss-2 0.7s ease-in-out calc(var(--beat-4) + 0.6s) both; }
.scene-companions .d3 { animation: s4-toss-3 0.8s ease-in-out calc(var(--beat-4) + 0.95s) both; }
@keyframes s4-toss-1 {
  0% { opacity: 0; translate: 0 0; }
  10%, 90% { opacity: 1; }
  50% { translate: 40px -70px; }
  100% { opacity: 0; translate: 79px 82px; }
}
@keyframes s4-toss-2 {
  0% { opacity: 0; translate: 0 0; }
  10%, 90% { opacity: 1; }
  50% { translate: 195px -140px; }
  100% { opacity: 0; translate: 391px 54px; }
}
@keyframes s4-toss-3 {
  0% { opacity: 0; translate: 0 0; }
  10%, 90% { opacity: 1; }
  50% { translate: 272px -170px; }
  100% { opacity: 0; translate: 544px 7px; }
}
.scene-companions .s4-hearts .heart { animation: float-up 1.3s ease-out calc(var(--beat-4) + 0.85s) both; }
.scene-companions .s4-hearts g:nth-child(2) .heart { animation-delay: calc(var(--beat-4) + 1.3s); }
.scene-companions .s4-hearts g:nth-child(3) .heart { animation-delay: calc(var(--beat-4) + 1.75s); }

/* ---------- 心強い仲間になる（はねて、スカーフに桃の印） ---------- */

.scene-companions .dog .badge { animation: pop 0.4s var(--ease-pop) calc(var(--beat-5) + 0.25s) both; }
.scene-companions .monkey .badge { animation: pop 0.4s var(--ease-pop) calc(var(--beat-5) + 0.5s) both; }
.scene-companions .pheasant .badge { animation: pop 0.4s var(--ease-pop) calc(var(--beat-5) + 0.75s) both; }
.scene-companions .s4-shine .sparkle { animation: twinkle 1.1s ease-in-out calc(var(--beat-5) + 0.2s) 2 both; }
.scene-companions .s4-shine g:nth-child(2) .sparkle { animation-delay: calc(var(--beat-5) + 0.45s); }
.scene-companions .s4-shine g:nth-child(3) .sparkle { animation-delay: calc(var(--beat-5) + 0.7s); }
.scene-companions .s4-shine g:nth-child(4) .sparkle { animation-delay: calc(var(--beat-5) + 0.95s); }

/* ---------- 一緒に鬼ヶ島を目指す（みんなで右へ。遠くに島） ---------- */

.scene-companions .s4-party { animation: s4-march 2.3s linear var(--beat-6) forwards; }
@keyframes s4-march {
  to { translate: 150px 0; }
}
.scene-companions .s4-island { animation: fade 0.8s ease calc(var(--beat-6) + 0.3s) both; }