/* ═══════════════════════════════════════════════════════════
   PORTRAIT MODE  —  stage is 450 × 800 px (set by fitStage)
   All positions below are in that coordinate space.

   Landscape defaults live in each scene's own CSS.
   This file overrides only what changes in portrait.
═══════════════════════════════════════════════════════════ */

@media (orientation: portrait) {

  /* ──────────────────────────────────────────────────────
     SCENE 2 — PART 01: characters walk in
     Foot baseline at y = 580 px
       Boy  (h=200) → top = 580 - 200 = 380 px
       Girl (h=158) → top = 580 - 158 = 422 px
  ────────────────────────────────────────────────────────*/

  /* Default (pre-click) off-screen positions */
  #s2-boy {
    top:  380px;
    left: 120px;                     /* centre-left of 450px stage */
    transform: translateX(-320px);   /* starts at -200px (off screen left) */
  }
  #s2-girl-wrap {
    top:  422px;
    left: 240px;                     /* centre-right of 450px stage */
    transform: translateX(220px);    /* starts at 460px (off screen right) */
  }

  /* Walk-in keyframes for portrait distances */
  @keyframes boyWalkIn {
    from { transform: translateX(-320px); }
    to   { transform: translateX(0); }
  }
  @keyframes girlWalkIn {
    from { transform: translateX(220px); }
    to   { transform: translateX(0); }
  }

  /* ──────────────────────────────────────────────────────
     SCENE 2 — PART 02: shock mark & sparkles
     Boy  head centre ≈ x 115,  y 408
     Girl head centre ≈ x 304,  y 448
  ────────────────────────────────────────────────────────*/
  /* Boy head centre ≈ x 165, girl head centre ≈ x 296 */
  .shock-mark {
    top:  332px;
    left: 130px;
  }

  .sp-1 { top: 382px; left: 268px; }
  .sp-2 { top: 366px; left: 292px; }
  .sp-3 { top: 380px; left: 318px; }
  .sp-4 { top: 410px; left: 330px; }
  .sp-5 { top: 435px; left: 314px; }
  .sp-6 { top: 415px; left: 255px; }

  /* ──────────────────────────────────────────────────────
     SCENE 2 — PART 04: close-up overlay (portrait)
     Portrait stage is 800px tall; SVG is 500px tall.
     Centre vertically: (800 - 500) / 2 = 150px from top.
     Stomach in SVG ≈ 239px from SVG top → 150+239 = 389px.
  ────────────────────────────────────────────────────────*/
  .cu-boy {
    top: 150px;   /* vertically centred in 800px stage */
  }
  .butterfly-ring {
    top: 389px;   /* 150 + 239 (stomach offset in SVG) */
  }

  /* ──────────────────────────────────────────────────────
     SCENE 3 — PART 01: characters standing
  ────────────────────────────────────────────────────────*/
  #s3-boy {
    top:  380px;
    left: 120px;
  }
  #s3-girl {
    top:  422px;
    left: 240px;
    /* scaleX(-1) already set in part-01.css */
  }

  /* ──────────────────────────────────────────────────────
     SCENE 3 — PARTS 02 & 03: talk bubbles
     Allow text wrap on narrow portrait screens.
     Boy  head centre ≈ x 115,  head top ≈ y 380
     Girl head centre ≈ x 304,  head top ≈ y 422
  ────────────────────────────────────────────────────────*/
  .talk-bubble {
    white-space: normal;
    max-width:   155px;
    font-size:   14px;
    line-height: 1.55;
  }

  /* Girl bubble: above girl's head (centre ≈ x 296) */
  .girl-bubble {
    top:  320px;
    left: 216px;
  }
  .girl-bubble::before { left: 60px; }
  .girl-bubble::after  { left: 62px; }

  /* Boy bubble: above boy's head (centre ≈ x 165) */
  .boy-bubble {
    top:  285px;
    left: 80px;
  }
  .boy-bubble::before { left: 70px; right: auto; }
  .boy-bubble::after  { left: 72px; right: auto; }

  /* ──────────────────────────────────────────────────────
     SCENE 5 — days passing (portrait 450 × 800)
     Narrow stage: sun arc reduced to ±250px.
     Thought bubble sits higher since stage is taller.
  ────────────────────────────────────────────────────────*/
  @keyframes sunArc {
    0%   { transform: translate(-280px, 420px) scale(0.7); opacity: 0;    }
    6%   { transform: translate(-200px, 220px) scale(0.9); opacity: 0.85; }
    20%  { transform: translate(-100px,  40px) scale(1.05); opacity: 1;  }
    50%  { transform: translate(0,      -220px) scale(1.15); opacity: 1; }
    80%  { transform: translate(100px,   40px) scale(1.05); opacity: 1;  }
    94%  { transform: translate(200px,  220px) scale(0.9); opacity: 0.85; }
    100% { transform: translate(280px,  420px) scale(0.7); opacity: 0;    }
  }

  #s5-thought-wrap {
    bottom: 300px;   /* more space in the taller portrait stage */
  }

  /* ──────────────────────────────────────────────────────
     SCENE 6 — portrait adjustments
  ────────────────────────────────────────────────────────*/

  /* Swap to portrait bolt SVG */
  .s6-bolt-landscape { display: none; }
  .s6-bolt-portrait  { display: block; }

  /* Zeus: fade out in place — translateX(80px) pushes him
     off the narrow 450px portrait stage, so we override it */
  @keyframes zeusByePortrait {
    to { opacity: 0; transform: scale(0.7) translateY(-10px); }
  }
  #s6-zeus.done {
    animation: zeusByePortrait 0.9s 0.2s ease-out forwards;
  }

  /* Zap guy: shift slightly higher so figure is fully visible */
  #s6-zap-guy {
    top: 52%;
  }

  /* ──────────────────────────────────────────────────────
     INTRO — story overlay text
  ────────────────────────────────────────────────────────*/
  .story-line { font-size: 18px; }
  .story-btn  { font-size: 30px; padding: 14px 32px; }

}