/* ---------- 13 · live ---------- */
#ch13 { --live-in: 0; --live-rise: 0; --scrim: 0; }

/* The cards rise in with the dive (done by p = 0.68) and only fade at the very end. */
#ch13 .live-wrap {
  opacity: var(--live-in);
  transform: translateY(calc(-50% + (1 - var(--live-rise)) * 28px));
  pointer-events: none;
}
#ch13 .live-wrap.is-in { pointer-events: auto; }

/* A soft scrim behind the copy, only as bright as the chosen sky demands. */
#ch13 .live-copy { z-index: 5; text-shadow: 0 2px 22px rgba(5, 7, 14, calc(var(--scrim) * 0.9)); }
#ch13 .live-copy::before {
  content: ''; position: absolute; inset: -16% -26% -16% -8%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 38% 50%, rgba(5, 7, 14, 0.82), rgba(5, 7, 14, 0.5) 42%, rgba(5, 7, 14, 0) 72%);
  opacity: var(--scrim);
}
#ch13 .live-copy .lede { color: color-mix(in srgb, var(--fg-mute), var(--paper) calc(var(--scrim) * 60%)); }

/* "Turned by your clock" lights while the globe is turning. */
#ch13 .globe-chip { transition: color 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease); }
#ch13 .globe-chip.is-turning {
  color: var(--sun-1); border-color: rgba(255, 180, 61, 0.55);
  box-shadow: 0 0 22px -6px rgba(255, 180, 61, 0.6);
}

@media (max-width: 900px) {
  #ch13 .live-wrap { transform: translateY(calc((1 - var(--live-rise)) * 28px)); }
  #ch13 .live-copy::before { inset: -10% -10% -10% -10%; }
}

/* Short phones: the cards need the space the lede sits in. As they rise the
   lede and the chip step back, so no card ever covers live text. */
@media (max-width: 900px) and (max-height: 740px) {
  #ch13 .live-copy .lede, #ch13 .live-copy .globe-chip { opacity: calc(1 - var(--live-rise)); }
}

/* Static tier (reduced motion / no WebGL2): no chapter script runs, so the
   scroll-driven variables stay 0 — the cards must simply be there. */
html.is-static #ch13 .live-wrap { opacity: 1; transform: none; pointer-events: auto; left: auto; right: auto; bottom: auto; }