/* ========================================
   第三場 鬼退治へ出発
   言葉の頭（--beat-N）
     0 たくましく育った桃太郎は、 / 1 村を困らせる鬼を退治するため、 / 2 鬼ヶ島へ向かうことにしました。
     3 おばあさんは、 / 4 力のわくきびだんごを持たせました。
   ======================================== */

/* ---------- ずっと動いているもの（朝日・雲・海のきらめき・旗・はちまき） ---------- */

.scene-departure .s3-sun { animation: s3-sunrise 12s linear both; }
@keyframes s3-sunrise {
  to { translate: 0 -40px; }
}
.scene-departure .s3-cloud-a { animation: drift 18s ease-in-out -5s infinite alternate; }
.scene-departure .s3-cloud-b { animation: drift 22s ease-in-out -11s infinite alternate-reverse; }
.scene-departure .s3-glitter { animation: s3-glitter 1.6s linear infinite; }
@keyframes s3-glitter {
  to { stroke-dashoffset: -48; }
}
.scene-departure .momotaro .tails { animation: sway 1.1s ease-in-out infinite; }
.flag-text {
  fill: #2b2320;
  font-family: var(--font-title);
  font-size: 46px;
  font-weight: 900;
}

/* ---------- たくましく育った桃太郎（ぐんと大きくなって現れる） ---------- */

.scene-departure .s3-momo { animation: s3-grow 1.1s var(--ease-pop) calc(var(--beat-0) + 0.05s) both; }
@keyframes s3-grow {
  0% { opacity: 0; scale: 0.45; }
  25% { opacity: 1; }
  65% { scale: 1.08; }
  100% { opacity: 1; scale: 1; }
}
.scene-departure .s3-flag .cloth { animation: s3-unfurl 0.6s var(--ease-out) calc(var(--beat-0) + 1s) both; }
@keyframes s3-unfurl {
  from { scale: 0 1; }
  to { scale: 1 1; }
}
.scene-departure .s3-flag .cloth-wave { animation: s3-flutter 1.4s ease-in-out calc(var(--beat-0) + 1.6s) infinite; }
@keyframes s3-flutter {
  0%, 100% { scale: 1 1; }
  50% { scale: 0.93 1; }
}
.scene-departure .s3-shine .sparkle { animation: twinkle 0.9s ease-in-out calc(var(--beat-0) + 0.6s) 2 both; }
.scene-departure .s3-shine g:nth-child(2) .sparkle { animation-delay: calc(var(--beat-0) + 0.8s); }
.scene-departure .s3-shine g:nth-child(3) .sparkle { animation-delay: calc(var(--beat-0) + 1s); }

/* ---------- 村を困らせる鬼（島に黒い雲と鬼の影）→ 桃太郎がこぶしを上げる ---------- */

.scene-departure .s3-storm { animation: s3-storm-in 0.9s ease-out var(--beat-1) both; }
@keyframes s3-storm-in {
  from { opacity: 0; translate: 160px 0; }
  to { opacity: 1; translate: 0 0; }
}
.scene-departure .s3-bolt { animation: s3-bolt 1.3s steps(1) calc(var(--beat-1) + 0.4s) infinite both; }
@keyframes s3-bolt {
  0%, 18%, 36%, 100% { opacity: 0; }
  10%, 26% { opacity: 1; }
}
.scene-departure .s3-oni-a { animation: pop 0.45s var(--ease-pop) calc(var(--beat-1) + 0.5s) both; }
.scene-departure .s3-oni-b { animation: pop 0.45s var(--ease-pop) calc(var(--beat-1) + 0.7s) both; }
.scene-departure .momotaro .arm-b {
  animation:
    s3-fist 0.5s ease-out calc(var(--beat-1) + 0.6s) both,
    s3-point 0.5s ease-in-out var(--beat-2) forwards;
}
@keyframes s3-fist {
  to { rotate: -130deg; }
}
@keyframes s3-point {
  to { rotate: -112deg; }
}

/* ---------- 鬼ヶ島へ向かう（島を指さし、道に足あとが続く） ---------- */

.scene-departure .momotaro .head { animation: s3-look 0.5s ease-out var(--beat-2) forwards; }
@keyframes s3-look {
  to { rotate: 7deg; }
}
.scene-departure .s3-steps .fp { animation: pop 0.3s ease-out calc(var(--beat-2) + 0.3s) both; }
.scene-departure .s3-steps .fp:nth-child(2) { animation-delay: calc(var(--beat-2) + 0.45s); }
.scene-departure .s3-steps .fp:nth-child(3) { animation-delay: calc(var(--beat-2) + 0.6s); }
.scene-departure .s3-steps .fp:nth-child(4) { animation-delay: calc(var(--beat-2) + 0.75s); }
.scene-departure .s3-steps .fp:nth-child(5) { animation-delay: calc(var(--beat-2) + 0.9s); }
.scene-departure .s3-steps .fp:nth-child(6) { animation-delay: calc(var(--beat-2) + 1.05s); }
.scene-departure .s3-steps .fp:nth-child(7) { animation-delay: calc(var(--beat-2) + 1.2s); }
.scene-departure .s3-steps .fp:nth-child(8) { animation-delay: calc(var(--beat-2) + 1.35s); }
.scene-departure .s3-steps .fp:nth-child(9) { animation-delay: calc(var(--beat-2) + 1.5s); }
.scene-departure .s3-steps .fp:nth-child(10) { animation-delay: calc(var(--beat-2) + 1.65s); }

/* ---------- おばあさんが、きびだんごを持たせる ---------- */

.scene-departure .s3-grandma { animation: s3-step 0.6s ease-in-out var(--beat-3) both; }
@keyframes s3-step {
  0% { translate: 0 0; }
  50% { translate: 40px -14px; }
  100% { translate: 80px 0; }
}
.scene-departure .s3-grandpa .arm-b { animation: wave-hand 2.4s ease-in-out calc(var(--beat-3) + 0.2s) both; }
.scene-departure .s3-pouch-hold { animation: pop 0.45s var(--ease-pop) calc(var(--beat-3) + 0.45s) both; }
.scene-departure .s3-pouch-fly { animation: s3-pouch-fly 0.9s ease-in-out var(--beat-4) both; }
@keyframes s3-pouch-fly {
  0% { opacity: 1; translate: 0 0; }
  50% { opacity: 1; translate: 108px -96px; }
  90% { opacity: 1; translate: 204px 4px; }
  100% { opacity: 0; translate: 214px 9px; }
}
.scene-departure .momotaro .pouch { animation: fade 0.2s ease calc(var(--beat-4) + 0.8s) both; }

/* 力がわく（光の輪が広がり、もう片方のこぶしも上がる） */
.scene-departure .s3-aura .ring { animation: s3-aura 1.1s ease-out calc(var(--beat-4) + 0.9s) 2 both; }
.scene-departure .s3-aura .r2 { animation-delay: calc(var(--beat-4) + 1.3s); }
@keyframes s3-aura {
  0% { opacity: 0; scale: 0.6; }
  6% { opacity: 0.95; }
  100% { opacity: 0; scale: 1.5; }
}
.scene-departure .momotaro .arm-a { animation: s3-flex 0.5s var(--ease-pop) calc(var(--beat-4) + 1.05s) both; }
@keyframes s3-flex {
  to { rotate: 115deg; }
}