/* ---------- 03 · sunrise ---------- */

/* The cloud ocean is bright: a soft scrim under the hero copy and the badges. */
#ch03 .ch-copy { max-width: min(50ch, 90vw); }
#ch03 .ch-copy::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  inset: -16% -30% -16% -40%;
  background: radial-gradient(ellipse at 32% 50%, rgba(5, 7, 14, 0.6) 0%, rgba(5, 7, 14, 0.32) 44%, rgba(5, 7, 14, 0) 72%);
}
#ch03 .lede { max-width: 38ch; }

/* The home screen's sky is the page's sky; its glow turns warm with the sun. */
html[data-chapter="ch03"] .phone-glow { background: radial-gradient(closest-side, rgba(255, 190, 120, 0.42), rgba(255, 190, 120, 0)); }
html[data-chapter="ch03"] .phone-glass { transition: background 0.3s linear; }

@media (max-width: 900px) {
  #ch03 .ch-copy::before {
    inset: -30% -12% -20% -12%;
    background: linear-gradient(180deg, rgba(5, 7, 14, 0.72) 0%, rgba(5, 7, 14, 0.52) 62%, rgba(5, 7, 14, 0) 100%);
  }
  #ch03 .lede { max-width: 32ch; }
}

/* Mobile: the risen sun sits right behind the note under the store buttons.
   The scrim runs further down, and past the top and right edges of the
   screen (the copy box is capped at 90vw) so it never ends in a visible
   line; the small print gets a lift and a soft shadow. */
@media (max-width: 900px) {
  #ch03 .ch-copy::before {
    inset: -60% -40% -34% -12%;
    background: linear-gradient(180deg, rgba(5, 7, 14, 0.74) 0%, rgba(5, 7, 14, 0.7) 31%, rgba(5, 7, 14, 0.6) 62%, rgba(5, 7, 14, 0.4) 82%, rgba(5, 7, 14, 0) 100%);
  }
  #ch03 .lede, #ch03 .note { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5); }
  #ch03 .note { color: rgba(222, 231, 244, 0.84); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 2px 24px rgba(0, 0, 0, 0.5); }
}

/* Phones: the phone stands under the copy, so the store row and its note
   step aside (the header's "Get the app" stays on screen). */
@media (max-width: 900px) {
  #ch03 .store-row, #ch03 .note { display: none; }
}