/* ---------- 09 · storm ---------- */

/* The phone is the only lamp: its screen glow is a warm spill, not the
   cool default, and it reaches further into the rain. */
html[data-chapter="ch09"] .phone-glow {
  inset: -85% -95%;
  background: radial-gradient(closest-side,
    rgba(255, 205, 150, 0.55) 0%,
    rgba(255, 180, 115, 0.22) 38%,
    rgba(255, 150, 80, 0.06) 62%,
    rgba(255, 150, 80, 0) 100%);
}

/* A soft dark scrim so the copy stays legible on flash frames. */
#ch09 .ch-copy { isolation: isolate; }
#ch09 .ch-copy::before {
  content: '';
  position: absolute; inset: -18% -12% -18% -30%; z-index: -1;
  background: radial-gradient(70% 70% at 35% 50%, rgba(5, 7, 14, 0.62), rgba(5, 7, 14, 0) 72%);
  pointer-events: none;
}
#ch09 .ch-copy h2 { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55); }

/* The thunder shakes the stage; nothing here may re-layout. */
html[data-chapter="ch09"] .stage, html[data-chapter="ch09"] .fx { will-change: transform; }

/* The lede sits over the storm tower; on flash frames and on a tall phone
   screen the cloud behind it is the brightest thing in view. */
#ch09 .ch-copy .lede { color: #C9D4E2; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 2px 24px rgba(0, 0, 0, 0.5); }
@media (max-width: 900px) {
  /* Copy runs full width at the top: the scrim covers the whole block. */
  #ch09 .ch-copy::before {
    inset: -30% 0 -26% 0;
    background: linear-gradient(180deg, rgba(5, 7, 14, 0) 0%, rgba(5, 7, 14, 0.6) 20%, rgba(5, 7, 14, 0.52) 64%, rgba(5, 7, 14, 0) 100%);
  }
}