/* ============================================================================
   THE CONDUIT — from section 4 to the alumni band.
   Section 4's four community lines carry on. Two beats
   (js/behaviour/conduit.js). Just after the figure lets go, while the
   labels are still on screen, the scroll runs the lines: the names fade and the lines run left, turn down on concentric
   curves into a lane in the left margin and drop to the bottom of the
   screen (and back, scrolling up); the lane then runs
   beside the reach map and lands on a small violet bar across the four lines,
   the alumni band's top edge, already in its violet: they darken into it
   over the last stretch above it. As the lines' ends come on screen, the
   bar opens the band from the first line: its sides run out to the full
   width while its bottom edge runs down (once, and it stays open). Live mode only (>= 980px, motion allowed): elsewhere
   there are no lines and the alumni band is simply open.

   Recorded exception, decided by the client:
   - The alumni band's opening (1.3s), a one-off timed animation, runs
     past the {motion.slow} cap. It does not hold the scroll: it plays as
     the band comes on screen.
   ========================================================================= */

main {
  /* tier-3: the room the lane needs left of the text column (the figure sections' text,
     the reach map's text). Only binds below ~1380px, where the page's own
     gutter is narrower. layers.css reads it too. */
  --conduit-lane: 112px;
}

.conduit {
  position: fixed; inset: 0; z-index: 45;   /* under the topbar (50) */
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
}

/* The names go first, quickly; the lines stay (they are the conduit). */
.layers.is-live .community__name { transition: scale var(--motion-medium), opacity var(--motion-fast); }
.layers.is-live .community.is-conduit .community__name { opacity: 0; }
.layers.is-live .community.is-conduit .community__btn { pointer-events: none; }