/* ---------- 10 · whiteout ---------- */

/* --- The phone: the darkest object in view --------------------------- */
/* Its glass keeps the app's own dark screen instead of mirroring the
   (now white) page sky, and its shadow is a cold shadow on snow. */
html[data-chapter="ch10"] .phone-glass { background: linear-gradient(180deg, #0B1018 0%, #141B29 100%); }
html[data-chapter="ch10"] .phone-body {
  box-shadow:
    inset 0 0 0 2px #23262e, inset 0 0 0 5px #0a0b0f,
    0 40px 90px -30px rgba(20, 32, 55, 0.55), 0 0 0 1px rgba(10, 14, 22, 0.35);
}

/* --- The snow cap on the phone --------------------------------------- */
/* Two mounds on the top edge; their height follows --snow-depth. */
html[data-chapter="ch10"] .phone-body::before,
html[data-chapter="ch10"] .phone-body::after {
  content: '';
  position: absolute; top: 0; z-index: 8; pointer-events: none;
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F7FB 100%);
  box-shadow: 0 2px 5px -1px rgba(50, 70, 100, 0.35), inset 0 -3px 4px rgba(150, 172, 205, 0.55);
  opacity: clamp(0, calc(var(--snow-depth) * 6), 1);
}
/* The mounds grow by transform, not height, so the snow costs no layout per
   frame: the box keeps its full-depth height and scales down from its top;
   translateY(-72% · k) keeps the same footprint as the old height-based cap. */
html[data-chapter="ch10"] .phone-body::after {
  left: 1.5%; right: 1.5%;
  height: 6.2%;
  --k: calc((1 + var(--snow-depth, 0) * 5.2) / 6.2);
  transform-origin: 50% 0;
  transform: translateY(calc(-72% * var(--k))) scaleY(var(--k));
  border-radius: 46% 54% 38% 42% / 100% 100% 34% 40%;
}
html[data-chapter="ch10"] .phone-body::before {
  left: 8%; right: 52%;
  height: 8.4%;
  --k: calc((1.4 + var(--snow-depth, 0) * 7) / 8.4);
  transform-origin: 50% 0;
  transform: translateY(calc(-78% * var(--k))) scaleY(var(--k));
  border-radius: 50% 50% 40% 45% / 100% 100% 40% 45%;
}

/* --- Snow on the headline letters ------------------------------------ */
#ch10 .h-snow .sw { display: inline-block; white-space: nowrap; }
#ch10 .h-snow .sl { position: relative; display: inline-block; }
#ch10 .h-snow .sl::before {
  content: '';
  position: absolute; pointer-events: none; z-index: 1;
  left: var(--sl, 4%); right: var(--sr, 4%);
  top: var(--st, 0.18em);
  height: calc(0.215em * var(--sk, 1));
  --k: calc((0.045 + var(--snow-depth, 0) * 0.17) / 0.215);
  transform-origin: 50% 0;
  transform: translateY(calc(-70% * var(--k))) scaleY(var(--k));
  background: linear-gradient(180deg, #FFFFFF 0%, #F5F8FC 100%);
  border-radius: 48% 52% 36% 42% / 100% 100% 30% 36%;
  box-shadow: 0 0.025em 0.05em -0.01em rgba(50, 70, 100, 0.38), inset 0 -0.025em 0.03em rgba(150, 172, 205, 0.5);
  opacity: clamp(0, calc(var(--snow-depth) * 6), 1);
}
#ch10 .h-snow .sl[data-sv="1"]::before { border-radius: 55% 45% 40% 30% / 100% 100% 40% 30%; }
#ch10 .h-snow .sl[data-sv="2"]::before { border-radius: 40% 60% 30% 40% / 100% 100% 30% 42%; }
#ch10 .h-snow .sl.no-cap::before { display: none; }

/* --- Copy on a white frame ------------------------------------------- */
/* Two scrims crossfade with the page's whiteness (--ch10-w, set per frame
   from progress): dark under light text while the storm is still in view,
   pale under dark text once the frame has frozen over. The fallbacks are the
   dark state: the static tier never runs the chapter and keeps dark tokens. */
#ch10 .ch-copy { isolation: isolate; }
#ch10 .ch-copy::before,
#ch10 .ch-copy::after {
  content: '';
  position: absolute; inset: -16% -10% -16% -28%; z-index: -1;
  pointer-events: none;
}
#ch10 .ch-copy::before {
  background: radial-gradient(70% 70% at 35% 50%, rgba(247, 248, 250, 0.7), rgba(247, 248, 250, 0) 72%);
  opacity: var(--ch10-w, 0);
}
#ch10 .ch-copy::after {
  background: radial-gradient(70% 70% at 35% 50%, rgba(5, 7, 14, 0.55), rgba(5, 7, 14, 0) 72%);
  opacity: calc(1 - var(--ch10-w, 0));
}
#ch10 .eyebrow { color: var(--ch10-brow, var(--sun-1)); }

/* --- The header follows the scene, not the chapter boundary ----------- */
/* site.css turns the stuck header white the moment chapter 10 activates;
   here its glass, rim and wordmark move with --ch10-w instead, together. */
html[data-chapter="ch10"] .site-head.is-stuck { background: var(--ch10-head, rgba(5, 7, 14, 0.66)); }
html[data-chapter="ch10"] .sound-toggle { border-color: var(--ch10-line, var(--line)); }
html[data-chapter="ch10"] .brand img { box-shadow: 0 0 0 1px rgba(11, 16, 24, calc(0.15 * var(--ch10-w, 0))); }

@media (max-width: 900px) {
  #ch10 .ch-copy::before, #ch10 .ch-copy::after { inset: -24% 0 -20% 0; }
}