/* ========================================
   第二場 桃から生まれた男の子
   言葉の頭（--beat-N）
     0 家へ持ち帰って桃を切ろうとすると、 / 1 桃は、 / 2 ぱかっと割れました。
     3 中から元気な男の子が現れ、 / 4 二人は桃太郎と名づけて、 / 5 大切に育てました。
   ======================================== */

/* ---------- ずっと動いているもの（湯気・火） ---------- */

.scene-born .s2-steam .puff { animation: s2-steam 2.6s ease-out infinite; }
.scene-born .s2-steam .p2 { animation-delay: -0.9s; }
.scene-born .s2-steam .p3 { animation-delay: -1.8s; }
@keyframes s2-steam {
  0% { opacity: 0; translate: 0 0; scale: 0.5; }
  30% { opacity: 0.75; }
  100% { opacity: 0; translate: -10px -90px; scale: 1.5; }
}
.scene-born .s2-fire { animation: s2-flicker 0.45s ease-in-out infinite alternate; }
@keyframes s2-flicker {
  from { scale: 1 0.9; }
  to { scale: 0.96 1.08; }
}

/* ---------- 包丁を近づける → 桃がふるえる ---------- */

.scene-born .s2-grandpa .arm-b {
  animation:
    s2-knife 2.2s ease-in-out calc(var(--beat-0) + 0.3s) both,
    s2-startle-arm 0.35s ease-out var(--beat-2) forwards;
}
@keyframes s2-knife {
  0% { rotate: 0deg; }
  45% { rotate: -34deg; }
  80% { rotate: -22deg; }
  100% { rotate: -25deg; }
}
@keyframes s2-startle-arm {
  to { rotate: 8deg; }
}
.scene-born .s2-peach { animation: shake 0.6s ease-in-out var(--beat-1); }

/* ---------- ぱかっと割れる ---------- */

.scene-born .half-a { animation: s2-open-a 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) var(--beat-2) both; }
.scene-born .half-b { animation: s2-open-b 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) var(--beat-2) both; }
@keyframes s2-open-a { to { rotate: -26deg; } }
@keyframes s2-open-b { to { rotate: 26deg; } }
.scene-born .s2-inner { animation: pop 0.4s ease-out var(--beat-2) both; }

.scene-born .s2-flash { animation: s2-flash 0.6s ease-out var(--beat-2) both; }
@keyframes s2-flash {
  0% { opacity: 0; scale: 0.3; }
  30% { opacity: 0.95; scale: 1; }
  100% { opacity: 0; scale: 1.5; }
}
.scene-born .s2-rays {
  animation:
    s2-rays-in 0.7s ease-out var(--beat-2) both,
    spin 26s linear var(--beat-2) infinite;
}
@keyframes s2-rays-in {
  from { opacity: 0; scale: 0.3; }
  to { opacity: 0.75; scale: 1; }
}
.scene-born .s2-glow { animation: s2-glow 0.7s ease-out var(--beat-2) both; }
@keyframes s2-glow {
  from { opacity: 0; scale: 0.4; }
  to { opacity: 1; scale: 1; }
}
.scene-born .s2-burst .sparkle { animation: twinkle 1.3s ease-in-out var(--beat-2) infinite both; }
.scene-born .s2-burst g:nth-child(2) .sparkle { animation-delay: calc(var(--beat-2) + 0.35s); }
.scene-born .s2-burst g:nth-child(3) .sparkle { animation-delay: calc(var(--beat-2) + 0.7s); }
.scene-born .s2-burst g:nth-child(4) .sparkle { animation-delay: calc(var(--beat-2) + 1s); }

/* 二人がびっくり */
.scene-born .s2-grandpa { animation: hop 0.5s ease-out var(--beat-2); }
.scene-born .s2-grandma { animation: hop 0.5s ease-out calc(var(--beat-2) + 0.08s); }
.scene-born .s2-bang-a,
.scene-born .s2-bang-b {
  animation:
    pop 0.4s var(--ease-pop) calc(var(--beat-2) + 0.05s) both,
    fade-out 0.3s ease var(--beat-3) forwards;
}

/* ---------- 中から男の子が現れる ---------- */

.scene-born .s2-baby { animation: s2-baby-up 0.8s var(--ease-pop) var(--beat-3) both; }
@keyframes s2-baby-up {
  from { translate: 0 250px; }
  to { translate: 0 0; }
}
.scene-born .s2-baby .arm-a { animation: s2-cheer-a 0.7s ease-in-out calc(var(--beat-3) + 0.8s) infinite; }
.scene-born .s2-baby .arm-b { animation: s2-cheer-b 0.7s ease-in-out calc(var(--beat-3) + 0.8s) infinite; }
.scene-born .s2-baby .head { animation: sway 1.4s ease-in-out calc(var(--beat-3) + 0.8s) infinite; }
@keyframes s2-cheer-a {
  0%, 100% { rotate: 0deg; }
  50% { rotate: -18deg; }
}
@keyframes s2-cheer-b {
  0%, 100% { rotate: 0deg; }
  50% { rotate: 18deg; }
}

/* ---------- 名づける（命名の紙が下りる） ---------- */

.scene-born .s2-name { animation: s2-unroll 0.8s var(--ease-out) var(--beat-4) both; }
@keyframes s2-unroll {
  from { scale: 1 0; }
  to { scale: 1 1; }
}
.scene-born .s2-name-small {
  fill: #c8463c;
  font-family: var(--font-title);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.3em;
  animation: fade 0.4s ease calc(var(--beat-4) + 0.35s) both;
}
.scene-born .s2-name-big {
  fill: #2b2320;
  font-family: var(--font-title);
  font-size: 50px;
  font-weight: 900;
  animation: fade 0.4s ease calc(var(--beat-4) + 0.55s) both;
}
.scene-born .s2-name-big.c2 { animation-delay: calc(var(--beat-4) + 0.75s); }
.scene-born .s2-name-big.c3 { animation-delay: calc(var(--beat-4) + 0.95s); }
.scene-born .s2-grandpa .head { animation: nod 0.9s ease-in-out calc(var(--beat-4) + 0.3s) 2; }
.scene-born .s2-grandma .head { animation: nod 0.9s ease-in-out calc(var(--beat-4) + 0.5s) 2; }

/* ---------- 大切に育てる（ハートと、柱の背比べの傷） ---------- */

.scene-born .s2-hearts .heart { animation: float-up 2.2s ease-out var(--beat-5) infinite both; }
.scene-born .s2-hearts g:nth-child(2) .heart { animation-delay: calc(var(--beat-5) + 0.4s); }
.scene-born .s2-hearts g:nth-child(3) .heart { animation-delay: calc(var(--beat-5) + 0.8s); }
.scene-born .s2-hearts g:nth-child(4) .heart { animation-delay: calc(var(--beat-5) + 1.2s); }
.scene-born .s2-marks .mark {
  transform-origin: 0% 50%;
  animation: draw-mark 0.3s ease-out calc(var(--beat-5) + 0.1s) both;
}
.scene-born .s2-marks .m2 { animation-delay: calc(var(--beat-5) + 0.5s); }
.scene-born .s2-marks .m3 { animation-delay: calc(var(--beat-5) + 0.9s); }
@keyframes draw-mark {
  from { scale: 0 1; }
  to { scale: 1 1; }
}
