/* ========================================
   第一場 川から来た桃
   言葉の頭（--beat-N）
     0 むかしむかし、 / 1 あるところに、 / 2 おじいさんとおばあさんが暮らしていました。
     3 ある日、 / 4 川へ洗濯に行くと、 / 5 大きな桃が、 / 6 どんぶらこ、 / 7 どんぶらこと流れてきました。
   ======================================== */

.scene-peach .label {
  --label-at: calc(var(--beat-2) - 0.05s);
}

/* ---------- 表紙：線から桃を描き、題名を出す。3つ目の言葉の前に引き抜く ---------- */

.scene-peach .s1-cover {
  animation: s1-cover-pull 0.55s cubic-bezier(0.55, 0, 0.75, 0.3) calc(var(--beat-2) - 0.58s) forwards;
}
@keyframes s1-cover-pull {
  to { translate: -1360px 0; }
}

.scene-peach .s1-cover-sub {
  fill: #8a6f5c;
  font-family: var(--font-title);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0.4em;
  animation: fade 0.5s ease 0.1s both;
}
.scene-peach .s1-cover-title {
  fill: #3b2a21;
  font-family: var(--font-title);
  font-size: 128px;
  font-weight: 900;
  letter-spacing: 0.14em;
  animation: rise 0.6s var(--ease-out) 0.25s both;
}
.scene-peach .s1-cover-note {
  fill: #a08a78;
  font-family: var(--font-jp);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.1em;
  animation: fade 0.5s ease 0.9s both;
}

.scene-peach .s1-cover-peach .line {
  fill: none;
  stroke: #b9463f;
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 0.9s ease-in-out 0.15s both;
}
.scene-peach .s1-cover-peach .cleft {
  opacity: 0.55;
  animation-delay: 0.8s;
  animation-duration: 0.35s;
}
.scene-peach .s1-cover-peach .leaf-line {
  stroke: #4f8c3c;
  animation-delay: 0.6s;
  animation-duration: 0.5s;
}
.scene-peach .s1-cover-peach .fill {
  animation: fill-in 0.55s ease 0.75s both;
}
.scene-peach .s1-cover-peach .leaf {
  animation-delay: 0.9s;
}
.scene-peach .s1-cover-peach .sparkle {
  animation: twinkle 1.4s ease-in-out 1.15s infinite both;
}
.scene-peach .s1-cover-peach g + g .sparkle {
  animation-delay: 1.5s;
}

/* ---------- 視点を川へ送る（奥ほどゆっくり） ---------- */

.scene-peach .s1-sky { animation: s1-pan-sky 0.9s ease-in-out calc(var(--beat-3) + 0.02s) both; }
.scene-peach .s1-far { animation: s1-pan-far 0.9s ease-in-out calc(var(--beat-3) + 0.02s) both; }
.scene-peach .s1-mid { animation: s1-pan-mid 0.9s ease-in-out calc(var(--beat-3) + 0.02s) both; }
.scene-peach .s1-near { animation: s1-pan-near 0.9s ease-in-out calc(var(--beat-3) + 0.02s) both; }
.scene-peach .s1-front { animation: s1-pan-front 0.9s ease-in-out calc(var(--beat-3) + 0.02s) both; }
@keyframes s1-pan-sky { to { translate: -120px 0; } }
@keyframes s1-pan-far { to { translate: -250px 0; } }
@keyframes s1-pan-mid { to { translate: -400px 0; } }
@keyframes s1-pan-near { to { translate: -620px 0; } }
@keyframes s1-pan-front { to { translate: -800px 0; } }

/* ---------- ずっと動いているもの（雲・鳥・煙・川・花） ---------- */

.scene-peach .s1-cloud-a { animation: drift 16s ease-in-out -4s infinite alternate; }
.scene-peach .s1-cloud-b { animation: drift 21s ease-in-out -9s infinite alternate-reverse; }
.scene-peach .s1-birds { animation: s1-birds 12s linear both; }
.scene-peach .s1-birds path { animation: s1-flap 0.55s ease-in-out infinite; }
.scene-peach .s1-birds path + path { animation-delay: -0.25s; }
@keyframes s1-birds {
  to { translate: 220px -30px; }
}
@keyframes s1-flap {
  50% { scale: 1 0.55; }
}

.scene-peach .s1-smoke .puff { animation: s1-smoke 3s ease-out infinite; }
.scene-peach .s1-smoke .p2 { animation-delay: -1s; }
.scene-peach .s1-smoke .p3 { animation-delay: -2s; }
@keyframes s1-smoke {
  0% { opacity: 0; translate: 0 0; scale: 0.5; }
  25% { opacity: 0.8; }
  100% { opacity: 0; translate: 30px -110px; scale: 1.6; }
}

.scene-peach .s1-ripples path {
  stroke-dasharray: 38 110;
  animation: ripple-flow 2.6s linear infinite;
}
.scene-peach .s1-ripples path:nth-child(2n) { animation-delay: -1.2s; }
.scene-peach .s1-ripples path:nth-child(3n) { animation-duration: 3.2s; }

.scene-peach .sway-a { animation: sway 3s ease-in-out infinite; }
.scene-peach .sway-b { animation: sway 3.6s ease-in-out -1.4s infinite; }

/* ---------- 家の前の二人 ---------- */

.scene-peach .s1-grandpa { animation: pop 0.6s var(--ease-pop) var(--beat-2) both; }
.scene-peach .s1-grandma { animation: pop 0.6s var(--ease-pop) calc(var(--beat-2) + 0.15s) both; }
.scene-peach .s1-grandpa .arm-b { animation: wave-hand 2.3s ease-in-out calc(var(--beat-2) + 0.55s) both; }
.scene-peach .s1-grandma .head { animation: nod 1s ease-in-out calc(var(--beat-2) + 0.75s) 2; }

/* 「ある日、」で、おばあさんが川へ向かう */
.scene-peach .s1-grandma-leave { animation: s1-leave 0.7s ease-in var(--beat-3) forwards; }
@keyframes s1-leave {
  to { opacity: 0; translate: 130px 0; }
}

/* ---------- 川で洗濯 ---------- */

.scene-peach .s1-washer { animation: rise 0.6s var(--ease-out) calc(var(--beat-4) + 0.05s) both; }
.scene-peach .s1-tub { animation: rise 0.6s var(--ease-out) calc(var(--beat-4) + 0.12s) both; }
.scene-peach .s1-washer .scrub { animation: s1-scrub 0.5s ease-in-out calc(var(--beat-4) + 0.55s) 7; }
@keyframes s1-scrub {
  50% { rotate: -9deg; }
}
/* 桃に気づく */
.scene-peach .s1-washer .head { animation: s1-look 0.4s ease-out calc(var(--beat-7) + 0.45s) forwards; }
.scene-peach .s1-washer-hop { animation: hop 0.55s ease-out calc(var(--beat-7) + 0.5s); }
.scene-peach .s1-bang { animation: pop 0.45s var(--ease-pop) calc(var(--beat-7) + 0.45s) both; }
@keyframes s1-look {
  to { rotate: 9deg; }
}

/* ---------- 流れてくる桃 ---------- */

.scene-peach .s1-peach-path { animation: s1-peach-path 4.05s cubic-bezier(0.3, 0.1, 0.5, 1) var(--beat-5) both; }
@keyframes s1-peach-path {
  0% { opacity: 0; translate: 0 0; scale: 0.26; }
  8% { opacity: 1; }
  35% { opacity: 1; translate: -220px 32px; scale: 0.45; }
  65% { opacity: 1; translate: -400px 92px; scale: 0.7; }
  100% { opacity: 1; translate: -520px 160px; scale: 0.95; }
}
/* 「どんぶらこ」「どんぶらこ」で大きく揺れる */
.scene-peach .s1-peach-dunk-a { animation: s1-dunk 0.75s ease-in-out var(--beat-6); }
.scene-peach .s1-peach-dunk-b { animation: s1-dunk 0.75s ease-in-out var(--beat-7); }
@keyframes s1-dunk {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  35% { translate: 0 16px; rotate: -8deg; }
  70% { translate: 0 -12px; rotate: 6deg; }
}
.scene-peach .s1-peach-idle { animation: bob 1.7s ease-in-out infinite; }
.scene-peach .s1-peach-sparkles { animation: fade 0.4s ease calc(var(--beat-5) + 0.6s) both; }
.scene-peach .s1-peach-sparkles .sparkle { animation: twinkle 1.5s ease-in-out infinite; }
.scene-peach .s1-peach-sparkles g:nth-child(2) .sparkle { animation-delay: -0.5s; }
.scene-peach .s1-peach-sparkles g:nth-child(3) .sparkle { animation-delay: -1s; }
.scene-peach .s1-rings .ring { animation: s1-ring 2s ease-out infinite; }
.scene-peach .s1-rings .r2 { animation-delay: -1s; }
@keyframes s1-ring {
  0% { opacity: 0.9; scale: 0.7; }
  100% { opacity: 0; scale: 1.3; }
}