/* ---------- 01 · orbit ---------- */

/* The switched-off phone (chapters 1 and 2): black glass, not a black slab.
   Layers, top to bottom: a soft sheen band that slides across the glass as
   the phone turns (--off-sheen 0..1, set per frame by the chapter), the
   dawn's warmth at the glass's right edge, a cool haze of sky light in the
   top corner, and a glass that is a shade lighter at the top.
   Chapter 2 swaps the reflected colours for fog and sodium light (ch02.css). */
html[data-chapter="ch01"] .phone.is-off,
html[data-chapter="ch02"] .phone.is-off {
  --off-warm: rgba(255, 168, 88, 0.17);
  --off-cool: rgba(120, 160, 230, 0.07);
  --off-top: #0d111a;
  --off-mid: #06080d;
  --off-bot: #020305;
  --off-rim: rgba(255, 180, 110, 0.34);
}
html[data-chapter="ch01"] .phone.is-off .phone-screen,
html[data-chapter="ch02"] .phone.is-off .phone-screen {
  background:
    radial-gradient(120% 55% at 112% 60%, var(--off-warm), rgba(0, 0, 0, 0) 62%),
    radial-gradient(90% 40% at -10% -4%, var(--off-cool), rgba(0, 0, 0, 0) 70%),
    linear-gradient(180deg, var(--off-top) 0%, var(--off-mid) 46%, var(--off-bot) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}
html[data-chapter="ch01"] .phone.is-off .phone-screen::after,
html[data-chapter="ch02"] .phone.is-off .phone-screen::after {
  content: ''; position: absolute; inset: -10% -60%; pointer-events: none;
  background: linear-gradient(128deg,
    rgba(255, 255, 255, 0) 37%,
    rgba(214, 226, 255, 0.065) 43.5%,
    rgba(214, 226, 255, 0.018) 47%,
    rgba(214, 226, 255, 0.045) 49%,
    rgba(255, 255, 255, 0) 54%);
  transform: translate3d(calc((var(--off-sheen, 0.5) - 0.5) * 22%), 0, 0);
}
/* The dawn catches the frame's right edge; a hairline of light on the top. */
html[data-chapter="ch01"] .phone.is-off .phone-body,
html[data-chapter="ch02"] .phone.is-off .phone-body {
  box-shadow:
    inset -1.5px 0 0 var(--off-rim), inset 0 1.5px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 2px #23262e, inset 0 0 0 5px #0a0b0f,
    0 40px 90px -30px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.07);
}