/* ═══════════════════════════════════════════════════════════
   PART 01 — Characters walk in and stop facing each other

   Positioning uses `top` so both characters share an exact
   foot-level baseline regardless of their different heights.

   Stage: 900 × 506 px
   Target foot Y: 440px from top  (66px above stage bottom)
   Boy  SVG height 200px → top = 440 - 200 = 240px
   Girl SVG height 158px → top = 440 - 158 = 282px
═══════════════════════════════════════════════════════════ */

/* ── Walk keyframes ─────────────────────────────────────── */
@keyframes walkLegL {
  0%, 100% { transform: rotate(-22deg); }
  50%       { transform: rotate( 20deg); }
}
@keyframes walkLegR {
  0%, 100% { transform: rotate( 20deg); }
  50%       { transform: rotate(-22deg); }
}
@keyframes boyWalkIn {
  from { transform: translateX(-480px); }
  to   { transform: translateX(0); }
}
@keyframes girlWalkIn {
  from { transform: translateX(450px); }
  to   { transform: translateX(0); }
}

/* ── Fright / stomach / look-down keyframes ─────────────── */
@keyframes boyFright {
  0%   { transform: translateX(0) translateY(0)      rotate(0deg);  }
  35%  { transform: translateX(0) translateY(-28px)  rotate(-6deg); }
  70%  { transform: translateX(4px) translateY(-10px) rotate(4deg); }
  100% { transform: translateX(0) translateY(0)      rotate(0deg);  }
}
@keyframes boyShake {
  0%, 100% { transform: translateX(0);   }
  33%       { transform: translateX(-5px); }
  66%       { transform: translateX( 5px); }
}
@keyframes boyLookDown {
  from { transform: translateX(0) rotate(0deg); }
  to   { transform: translateX(0) rotate(8deg) translateY(6px); }
}
@keyframes armToStomach {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(-68deg); }
}
@keyframes smileAppear {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── BOY — off-screen left until play is clicked ────────── */
#s2-boy {
  position: absolute;
  top:  240px;
  left: 290px;
  transform: translateX(-480px);
}

/* ── GIRL wrapper — off-screen right until play is clicked ─ */
#s2-girl-wrap {
  position: absolute;
  top:  282px;
  left: 460px;
  transform: translateX(450px);
}

/* Girl SVG sits naturally — no flip needed */
#s2-girl { display: block; }

/* ═══════════════════════════════════════════════════════════
   All animations activate only when play is clicked
═══════════════════════════════════════════════════════════ */

/* Boy body: walk → fright → shake */
body.scenes-started #stage #s2-boy {
  animation:
    boyWalkIn 8s    1.5s ease-out    both,
    boyFright 0.55s 10s  ease-in-out 2,
    boyShake  0.12s 11s  ease-in-out 5;
}

/* Girl body: walk in */
body.scenes-started #stage #s2-girl-wrap {
  animation: girlWalkIn 8s 1.5s ease-out both;
}

/* Boy legs */
body.scenes-started #stage #s2-boy .leg.left  { animation: walkLegL 0.62s 1.5s ease-in-out 13; }
body.scenes-started #stage #s2-boy .leg.right { animation: walkLegR 0.62s 1.5s ease-in-out 13; }

/* Girl legs — same cadence, walk naturally forward */
body.scenes-started #stage #s2-girl .leg.left  { animation: walkLegL 0.62s 1.5s ease-in-out 13; }
body.scenes-started #stage #s2-girl .leg.right { animation: walkLegR 0.62s 1.5s ease-in-out 13; }

/* Boy smile — appears when the close-up begins */
body.scenes-started #stage #s2-boy .mouth.smile {
  animation: smileAppear 1s 12s ease-out both;
}