/* ═══ THE VOID — the one continuous backdrop the whole site sits on ═══════════════════════
   The scrollytell monitor and the vragenlijst are not separate worlds: they are two panels
   side by side on this single surface. Each page paints the SAME fixed floor and declares
   only its bespoke hue (--void-a/b/c on its floor); the route transition fades those same
   properties, so panning from one panel to the other reads as one surface shifting colour —
   never a page swap.

   This file is the canonical module. The vragenlijst links it (<link href="/css/void.css">);
   the deck build (factsheet-deck/build.mjs) inlines it FIRST in its style cascade, so the
   deck's base.css builds on top (per-chapter hue classes, veil crossfades via VoidDeck).

   Structure (deck: built by VoidDeck in app.js; vragenlijst: static markup):
     <div id="void-deck" aria-hidden="true"><div class="void-layer void-floor"></div></div>

   A page sets its hue with:      #void-deck .void-floor{--void-a:…;--void-b:…;--void-c:…}
   Arrival holds set the ORIGIN panel's hue on the destination floor (rules below), so the
   backdrop is continuous during the pan and then fades to the local hue. */

@property --void-a{syntax:'<color>';inherits:true;initial-value:#e8eef6}
@property --void-b{syntax:'<color>';inherits:true;initial-value:#d9e3f0}
@property --void-c{syntax:'<color>';inherits:true;initial-value:#f5f8fc}

#void-deck{position:fixed;inset:0;width:100vw;z-index:-3;pointer-events:none;--void-a:#e8eef6;--void-b:#d9e3f0;--void-c:#f5f8fc}
/* c186 · 100vw reaches UNDER the scrollbar (inset:0 stops at the gutter) so the transparent track shows the void */
.void-layer{position:absolute;inset:0;background:linear-gradient(135deg,var(--void-a) 0%,var(--void-b) 50%,var(--void-c) 100%)}
.void-floor{opacity:1}
.void-veil{opacity:1;transition:opacity 1100ms ease;will-change:opacity}

/* ── the panel-to-panel colour fade ── the SAME module on every page: while it runs, the
   floor's hue properties transition; the route module seats the origin hue (the arrival
   hold pre-paints it, or the gate seeds the LIVE hue carried in the navigation intent),
   releases it, and the floor eases to the local hue. Same cadence as the deck's chapter
   veils (1100ms), and on its own class — html.route-void-fade outlives the short-lived
   route-transitioning lock, so the fade breathes past the slide instead of being cut. */
html.route-transitioning .void-floor,
html.route-void-fade .void-floor{transition:--void-a 1100ms ease,--void-b 1100ms ease,--void-c 1100ms ease}

/* ── arrival holds: the destination floor wears the ORIGIN panel's hue until the pan
   starts (set pre-paint by each page's inline gate; released by its route module) ── */
/* arriving on the monitor, coming from the vragenlijst (vragenlijst hue): */
html.route-hold-from-login #void-deck .void-floor{--void-a:#e2ecf2;--void-b:#d1e2ed;--void-c:#eff4f8}
/* arriving on the vragenlijst, coming from the monitor — STATIC FALLBACK ONLY: the
   monitor's void changes per chapter, so the vragenlijst gate seeds the LIVE hue carried
   in the navigation intent (inline, which overrides this rule). These values are the
   monitor's top-of-deck hue (lila — p02/Inleiding is its first section) for the rare
   case where no hue rode along. */
html.route-hold-from-scrollytell #void-deck .void-floor{--void-a:#efe7f5;--void-b:#e7daf0;--void-c:#faf7fc}