/* ch08 — Smog at Sunset.
   Skyline silhouettes stacked in aerial perspective. Every layer is scaled
   in the same way — `--u` viewport-heights per 100 drawing units — so the
   buildings keep their proportions on any screen, and each SVG is cropped to
   its own tallest roof (`--top`, set from JS) so nothing is ever cut flat.
   Far layers are fainter (tint from JS), softened, and dissolve into the haze
   at their base; the near layer stays under ~45 vh on desktop.
   The phone shows the real air-quality capture; it wakes from black glass
   over the first moments of the chapter (--ch08-wake). */

#ch08 .ch08-stack {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  --ch08-par: 0;
}
#ch08 .ch08-layer {
  --top: 0; --u: 7; --b: 0; --k: 0; --sx: 0;
  position: absolute; left: -8vw; right: -8vw;
  bottom: calc(var(--b) * 1vh);
  height: calc((600 - var(--top)) * var(--u) * 0.01vh);
  overflow: hidden; pointer-events: none; opacity: 0;
  transform: translate3d(calc(var(--ch08-par) * var(--k) * 1vw), 0, 0);
  will-change: transform, opacity;
  color: #1a1210;
}
#ch08 .ch08-layer svg {
  position: absolute; left: 50%; bottom: 0; display: block;
  height: 100%; width: calc(61.44 * var(--u) * 1vh); max-width: none;
  transform: translateX(calc(-50% + var(--sx) * var(--u) * 0.01vh));
}
/* depth: far (1) → near (5). Bases rise with distance; scale falls with it. */
#ch08 .ch08-layer[data-d="1"] { --u: 4.2; --b: 24; --k: -1.6; --sx: 200;
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 70%); mask-image: linear-gradient(to top, transparent 0%, #000 70%); }
#ch08 .ch08-layer[data-d="2"] { --u: 4.8; --b: 19; --k: -0.6; --sx: 900;
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 55%); mask-image: linear-gradient(to top, transparent 0%, #000 55%); }
#ch08 .ch08-layer[data-d="3"] { --u: 5.6; --b: 13; --k: 0.8; --sx: -500;
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.2) 0%, #000 40%); mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.2) 0%, #000 40%); }
#ch08 .ch08-layer[data-d="4"] { --u: 6.6; --b: 6;  --k: 2.4; --sx: 600; }
#ch08 .ch08-layer[data-d="5"] { --u: 7.4; --b: -1; --k: 4.6; --sx: 1535; }
html[data-tier="full"] #ch08 .ch08-layer[data-d="1"] { filter: blur(1.2px); }
html[data-tier="full"] #ch08 .ch08-layer[data-d="2"] { filter: blur(0.7px); }

/* Copy scrim: the picture is bright behind the text at golden hour. */
#ch08 .ch-copy { z-index: 5; }
#ch08 .ch-copy::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  inset: -30% -30% -30% -40%;
  background: radial-gradient(closest-side at 42% 50%, rgba(24, 14, 10, 0.52) 0%, rgba(24, 14, 10, 0.32) 50%, rgba(24, 14, 10, 0) 100%);
}
#ch08 .ch-copy h2, #ch08 .lede { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45); }

/* The stuck header over golden-hour haze: a warm dark tint, not the cool default. */
html[data-chapter="ch08"] .site-head.is-stuck { background: rgba(30, 18, 11, 0.7); }

/* ---- the phone while this chapter is active ---- */
html[data-chapter="ch08"] .phone { --ch08-wake: 1; }
html[data-chapter="ch08"] .phone-screen { background: #05060a; }
html[data-chapter="ch08"] .ps-shot { opacity: var(--ch08-wake); }
html[data-chapter="ch08"] .ch08-glass {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none;
}

/* Drag the phone through the smog — desktop only, only while the chapter is active. */
@media (pointer: fine) and (min-width: 900px) {
  html[data-chapter="ch08"][data-tier="full"] .phone { pointer-events: auto; cursor: grab; touch-action: none; }
  html[data-chapter="ch08"][data-tier="full"] .phone.is-dragging { cursor: grabbing; }
}

@media (max-width: 900px) {
  #ch08 .ch08-layer[data-d="1"] { --u: 4.0; --b: 22; --sx: 300; }
  #ch08 .ch08-layer[data-d="3"] { --u: 5.0; --b: 12; --sx: -300; }
  #ch08 .ch08-layer[data-d="5"] { --u: 6.0; --b: -1; --sx: 1320; }
  #ch08 .ch-copy::before { inset: -40% -10% -30% -12%; background: radial-gradient(closest-side at 40% 50%, rgba(24, 14, 10, 0.6) 0%, rgba(24, 14, 10, 0.38) 50%, rgba(24, 14, 10, 0) 100%); }
}