/* Load after pixel.css. Keep GSAP in control of every animated transform. */
@media (min-width: 900px) and (min-height: 620px) and (prefers-reduced-motion: no-preference) {
  .story-pin {
    /* Header + ticker + first-screen margin, with room for the fixed dock. */
    --hero-fit-height: calc(100svh - 238px);
    height: var(--hero-fit-height);
    min-height: 0;
  }

  .hero-copy {
    left: 47%;
    top: 6%;
    width: 49%;
    max-width: 760px;
  }

  .hero-copy h1 {
    font-size: clamp(44px, min(5.5vw, calc((100svh - 238px) * .117)), 88px);
    line-height: .97;
    margin: 18px 0 22px;
  }

  .hero-copy > p:not(.eyebrow) {
    font-size: clamp(16px, 1.08vw, 18px);
    line-height: 1.4;
    max-width: 420px;
  }

  .hero-actions {
    gap: 12px;
    margin-top: 22px;
    flex-wrap: wrap;
  }

  .hero-actions .morph-button {
    font-size: clamp(15px, 1.15vw, 18px);
    min-height: 48px;
    padding-left: 14px;
    padding-right: 48px;
  }

  .hero-pet {
    /* SVG is 640 × 620. Height, rather than ultrawide width, limits the figure. */
    width: min(52%, calc((100svh - 238px) * .94));
    left: 1%;
    right: auto;
    bottom: 4%;
    margin: 0;
  }

  .hero-orbit {
    width: min(40%, calc((100svh - 238px) * .7));
    left: 3%;
    bottom: 8%;
  }

  .hero-speech {
    left: 24%;
    top: 64%;
    max-width: 22%;
  }

  .scroll-note { right: 3%; bottom: 16px; }
  .chapter-indicator { left: 22px; bottom: 18px; }
}

@media (min-width: 900px) and (min-height: 620px) and (max-height: 740px) and (prefers-reduced-motion: no-preference) {
  .hero-copy { top: 5%; }
  .hero-copy h1 {
    font-size: clamp(38px, min(5.1vw, 7.8svh), 58px);
    margin: 12px 0 14px;
  }
  .hero-copy .eyebrow { font-size: 7px; }
  .hero-copy > p:not(.eyebrow) { font-size: 14px; max-width: 410px; }
  .hero-actions { margin-top: 16px; gap: 9px; }
  .hero-actions .morph-button {
    font-size: 14px;
    min-height: 42px;
    padding-left: 10px;
    padding-right: 38px;
  }
  .hero-speech { font-size: 13px; padding: 10px 12px; }
  .scroll-note span { display: none; }
}

/* Match the existing non-pinned choreography mode: everything remains scrollable. */
@media (max-width: 899px), (max-height: 619px), (prefers-reduced-motion: reduce) {
  .story { height: auto; }
  .story-pin { height: auto; min-height: 0; position: relative; top: 0; }
  .hero-copy {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    padding: 36px 30px 0;
  }
  .hero-actions { flex-wrap: wrap; }
  .hero-pet {
    position: relative;
    width: min(88%, 520px);
    left: auto;
    right: auto;
    bottom: auto;
    margin: 22px auto 0;
  }
  .hero-orbit {
    width: min(65%, 390px);
    left: 15%;
    top: 510px;
    bottom: auto;
  }
  .hero-speech { position: relative; top: auto; left: auto; right: auto; max-width: 220px; margin: -14px 8% 24px auto; }
}

@media (max-width: 650px) {
  .hero-copy { padding: 28px 22px 0; }
  .hero-copy h1 { font-size: clamp(44px, 12vw, 65px); line-height: 1.04; }
  .hero-copy > p:not(.eyebrow) { max-width: 100%; }
  .hero-actions { gap: 10px; }
  .hero-actions .morph-button { font-size: 14px; padding-right: 38px; }
  .hero-pet { width: 94%; margin: 20px auto 0; }
  .hero-orbit { width: 70%; left: 15%; top: 495px; }
  .hero-speech { top: auto; right: auto; max-width: 190px; margin: -14px 7% 24px auto; }
}