/* ========================================
   第五場 鬼ヶ島で
   言葉の頭（--beat-N）
     0 鬼ヶ島に着いた桃太郎たちは、 / 1 力を合わせてお城へ進みました。 / 2 鬼はみんなの勇気にまいり、
     3 悪いことをやめて、 / 4 奪った宝物を返しました。
   ======================================== */

.s5-plaque {
  fill: #e3c06a;
  font-family: var(--font-title);
  font-size: 24px;
  font-weight: 900;
}
.s5-bubble-text {
  fill: #3b2a21;
  font-family: var(--font-jp);
  font-size: 28px;
  font-weight: 700;
}

/* ---------- ずっと動いているもの（波・舟・旗・稲妻） ---------- */

.scene-oni .s5-waves path {
  stroke-dasharray: 60 90;
  animation: ripple-flow 2.2s linear infinite;
}
.scene-oni .s5-waves path:nth-child(2) { animation-duration: 2.8s; animation-delay: -1s; }
.scene-oni .s5-boat-bob { animation: s5-rock 1.6s ease-in-out infinite; }
@keyframes s5-rock {
  0%, 100% { translate: 0 0; rotate: -1.5deg; }
  50% { translate: 0 6px; rotate: 1.5deg; }
}
.scene-oni .s5-banner { animation: s5-banner 1.2s ease-in-out infinite; }
.scene-oni .s5-banner.b2 { animation-delay: -0.6s; }
@keyframes s5-banner {
  0%, 100% { scale: 1 1; }
  50% { scale: 0.82 1; }
}
.scene-oni .s5-bolt { animation: s5-bolt 1.5s steps(1) 0.3s infinite both; }
@keyframes s5-bolt {
  0%, 16%, 34%, 100% { opacity: 0; }
  8%, 24% { opacity: 1; }
}

/* ---------- 鬼ヶ島に着く（舟が入ってきて、みんなが岸へ跳ぶ） ---------- */

.scene-oni .s5-sail { animation: s5-sail 1.7s ease-out both; }
@keyframes s5-sail {
  from { translate: -560px 0; }
  to { translate: 0 0; }
}
.scene-oni .s5-team {
  animation:
    s5-hop-out 0.6s ease-in-out 1.85s both,
    s5-march 2.4s linear var(--beat-1) forwards;
}
@keyframes s5-hop-out {
  0% { translate: 0 0; }
  50% { translate: 120px -70px; }
  100% { translate: 230px -6px; }
}
@keyframes s5-march {
  from { translate: 230px -6px; }
  to { translate: 470px -48px; }
}
.scene-oni .momotaro .tails { animation: sway 1.1s ease-in-out infinite; }

/* 雉は舟の上を飛んできて、門へ進むときに岩へおりる */
.scene-oni .s5-bird-fly {
  animation:
    s5-bird-a 1.7s ease-out both,
    s5-bird-b 1.8s ease-in-out var(--beat-1) forwards;
}
@keyframes s5-bird-a {
  from { translate: -1100px -450px; }
  to { translate: -617px -433px; }
}
@keyframes s5-bird-b {
  from { translate: -617px -433px; }
  to { translate: 0 0; }
}
.scene-oni .pheasant .wing { animation: flap 0.18s ease-in-out 24; }

/* ---------- 力を合わせてお城へ進む ---------- */

.scene-oni .s5-walk {
  animation:
    bob 0.42s ease-in-out var(--beat-1) 5,
    hop 0.55s ease-out calc(var(--beat-4) + 0.9s);
}
.scene-oni .s5-walk.w2 { animation-delay: calc(var(--beat-1) + 0.1s), calc(var(--beat-4) + 1s); }
.scene-oni .s5-walk.w3 { animation-delay: calc(var(--beat-1) + 0.2s), calc(var(--beat-4) + 1.1s); }

/* ---------- 門が開いて鬼 → みんなの勇気にまいる ---------- */

.scene-oni .s5-door-l { animation: s5-door 0.55s ease-in-out calc(var(--beat-2) - 0.4s) both; }
.scene-oni .s5-door-r { animation: s5-door 0.55s ease-in-out calc(var(--beat-2) - 0.4s) both; }
@keyframes s5-door {
  to { scale: 0.1 1; }
}
.scene-oni .s5-oni-step { animation: s5-loom 0.6s var(--ease-pop) var(--beat-2) both; }
@keyframes s5-loom {
  0% { scale: 0.94; }
  60% { scale: 1.06; }
  100% { scale: 1.02; translate: 0 8px; }
}
.scene-oni .oni .body { animation: s5-bow 0.5s ease-out calc(var(--beat-2) + 0.9s) forwards; }
@keyframes s5-bow {
  to { scale: 1 0.88; translate: 0 16px; }
}
.scene-oni .oni .head { animation: s5-head-down 0.5s ease-out calc(var(--beat-2) + 0.95s) forwards; }
@keyframes s5-head-down {
  to { scale: 1 0.92; translate: 0 26px; }
}
.scene-oni .oni .arm-a { animation: s5-sorry-a 0.5s ease-out calc(var(--beat-2) + 0.95s) forwards; }
.scene-oni .oni .arm-b { animation: s5-sorry-b 0.5s ease-out calc(var(--beat-2) + 0.95s) forwards; }
@keyframes s5-sorry-a { to { rotate: -24deg; } }
@keyframes s5-sorry-b { to { rotate: 24deg; } }
.scene-oni .s5-club { animation: s5-fall 0.5s cubic-bezier(0.5, 0, 1, 0.6) calc(var(--beat-2) + 0.8s) forwards; }
@keyframes s5-fall {
  to { rotate: 78deg; }
}
.scene-oni .s5-sweat .drop { animation: s5-sweat 1s ease-in calc(var(--beat-2) + 1s) 3 both; }
.scene-oni .s5-sweat .d2 { animation-delay: calc(var(--beat-2) + 1.4s); }
@keyframes s5-sweat {
  0% { opacity: 0; translate: 0 0; }
  20% { opacity: 1; }
  100% { opacity: 0; translate: 0 30px; }
}
.scene-oni .s5-bubble {
  animation:
    pop 0.45s var(--ease-pop) calc(var(--beat-2) + 1.05s) both,
    fade-out 0.4s ease calc(var(--beat-4) - 0.2s) forwards;
}
.scene-oni .momotaro .arm-b { animation: s5-fist 0.45s ease-out calc(var(--beat-2) + 0.3s) both; }
@keyframes s5-fist {
  to { rotate: -130deg; }
}

/* ---------- 悪いことをやめる（黒い雲が去り、空が晴れる） ---------- */

.scene-oni .s5-cloud-l { animation: s5-away-l 1.3s ease-in var(--beat-3) forwards; }
.scene-oni .s5-cloud-r { animation: s5-away-r 1.3s ease-in var(--beat-3) forwards; }
@keyframes s5-away-l {
  to { opacity: 0; translate: -700px 0; }
}
@keyframes s5-away-r {
  to { opacity: 0; translate: 700px 0; }
}
.scene-oni .s5-clear { animation: fade 1.3s ease var(--beat-3) both; }
.scene-oni .s5-rays { animation: fade 1s ease calc(var(--beat-3) + 0.6s) both; }

/* ---------- 宝物を返す（宝箱が出てきて、ふたが開き、宝があふれる） ---------- */

.scene-oni .s5-chest-slide { animation: s5-chest-in 0.7s ease-out calc(var(--beat-4) - 0.1s) both; }
@keyframes s5-chest-in {
  0% { opacity: 0; translate: 105px -12px; scale: 0.6; }
  20% { opacity: 1; }
  100% { opacity: 1; translate: 0 0; scale: 1; }
}
.scene-oni .chest .lid { animation: s5-lid 0.4s var(--ease-pop) calc(var(--beat-4) + 0.6s) both; }
@keyframes s5-lid {
  to { rotate: -38deg; translate: 0 -10px; }
}
.scene-oni .chest .inner-glow { animation: pop 0.4s ease-out calc(var(--beat-4) + 0.6s) both; }
.scene-oni .s5-glow-back { animation: fade 0.6s ease calc(var(--beat-4) + 0.6s) both; }
.scene-oni .s5-treasure .item { animation: s5-burst 0.8s ease-out calc(var(--beat-4) + 0.7s) both; }
.scene-oni .s5-treasure .item:nth-child(2) { animation-delay: calc(var(--beat-4) + 0.76s); }
.scene-oni .s5-treasure .item:nth-child(3) { animation-delay: calc(var(--beat-4) + 0.82s); }
.scene-oni .s5-treasure .item:nth-child(4) { animation-delay: calc(var(--beat-4) + 0.88s); }
.scene-oni .s5-treasure .item:nth-child(5) { animation-delay: calc(var(--beat-4) + 0.94s); }
.scene-oni .s5-treasure .item:nth-child(6) { animation-delay: calc(var(--beat-4) + 1s); }
.scene-oni .s5-treasure .item:nth-child(7) { animation-delay: calc(var(--beat-4) + 1.06s); }
@keyframes s5-burst {
  0% { opacity: 0; translate: 0 0; scale: 0.4; }
  15% { opacity: 1; }
  50% { translate: calc(var(--x) * 0.6) calc(var(--y) - 80px); scale: 1.15; }
  100% { opacity: 1; translate: var(--x) var(--y); scale: 1; }
}
.scene-oni .s5-chest-shine .sparkle { animation: twinkle 1.2s ease-in-out calc(var(--beat-4) + 0.8s) infinite both; }
.scene-oni .s5-chest-shine g + g .sparkle { animation-delay: calc(var(--beat-4) + 1.2s); }
.scene-oni .s5-bird-hop { animation: hop 0.55s ease-out calc(var(--beat-4) + 1.1s); }
.scene-oni .momotaro .arm-a { animation: s5-flex 0.5s var(--ease-pop) calc(var(--beat-4) + 0.9s) both; }
@keyframes s5-flex {
  to { rotate: 115deg; }
}