@conduction/docusaurus-preset 0.1.0

package/static/lib/clients-flow.js

@@ -0,0 +1,317 @@
+/* Clients Flow: continuous-spawn marquee runtime for the Clients hex
+   wall. Replaces the old CSS-animated track-with-duplicate approach,
+   which had a one-pixel seam at the wrap boundary. Each row is a
+   simple relative container; the runtime spawns absolutely-positioned
+   <a class="hex"> children on the right, drifts them left at a per-row
+   speed via translateX, and removes them once they leave the left
+   edge. Logos are picked at random from the supplied client pool,
+   avoiding immediate repeats so the same shield doesn't keep flashing
+   in one row.
+
+   Hooks:
+     - data-memory-marquee on the marquee element (also serves as the
+       Logo Memory game trigger surface)
+     - data-clients='[{"src":"...","name":"..."}, ...]' on the marquee
+     - data-hex-class on the marquee (optional) — class name for spawned
+       hex anchors. CSS Modules hashes the React build's class to
+       something like hex_QXzL; pass that through. Falls back to "hex"
+       which the preview HTML uses literally.
+     - data-row-stagger on a row (optional) — px offset added to the
+       row's first hex x. Used by row 2 to slot half-hex into the
+       honeycomb stagger between row 1 and row 3.
+     - data-row-speed on a row (optional) — drift speed in px/sec.
+       Defaults to 50; row 2 defaults to 58 and row 3 to 46 for slight
+       visual desync.
+
+   Public API:
+     window.ConductionClientsFlow.hydrate()   — find + initialise marquees
+     window.ConductionClientsFlow.pause()     — freeze drift (used by Logo
+                                                Memory while a game is in
+                                                progress)
+     window.ConductionClientsFlow.resume()    — un-freeze
+     window.ConductionClientsFlow.reset()     — clear all hex children
+                                                and re-fill from scratch.
+                                                Logo Memory calls this on
+                                                game tear-down so the
+                                                marquee comes back fresh.
+*/
+(function () {
+  const DEFAULT_SPEED = 50;
+  /* All rows use the same default speed so honeycomb alignment is
+     preserved (rows 1 and 3 stay column-aligned, row 2 stays at the
+     half-hex offset). Per-row data-row-speed still lets a host page
+     override this if that's the look they want. The "more dynamic"
+     feel comes from random-logo selection on each spawn, not from
+     per-row drift desync. */
+  const DEFAULT_ROW_SPEEDS = [50, 50, 50];
+  const RECENT_REPEAT_AVOID = 5;
+  const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+  /* All running marquees. Each entry holds the per-row state for that
+     marquee plus the rAF id so global pause/resume can address them. */
+  const REGISTRY = [];
+  let rafId = null;
+
+  function readPx(value, fallback) {
+    const n = parseFloat(value);
+    return isFinite(n) && n >= 0 ? n : fallback;
+  }
+
+  function pickLogo(state, clients) {
+    let pick;
+    let attempts = 0;
+    do {
+      pick = clients[(Math.random() * clients.length) | 0];
+      attempts++;
+    } while (state.recent.includes(pick.src) && attempts < 10);
+    state.recent.push(pick.src);
+    if (state.recent.length > RECENT_REPEAT_AVOID) state.recent.shift();
+    return pick;
+  }
+
+  function spawnHex(state, baseX, scrollPx) {
+    /* baseX is the hex's "world" x at scrollPx=0. Current visible
+       position = baseX - scrollPx. Storing baseX lets every tick
+       recompute current x from the shared scroll accumulator without
+       per-hex per-row drift accumulation. */
+    const logo = pickLogo(state, state.clients);
+    const x = baseX - (scrollPx || 0);
+    const a = document.createElement('a');
+    a.className = state.hexClass;
+    a.href = '#';
+    a.setAttribute('aria-label', logo.name);
+    a.style.position = 'absolute';
+    a.style.top = '0';
+    a.style.left = '0';
+    a.style.transform = 'translateX(' + x + 'px)';
+    a.style.willChange = 'transform';
+    const img = document.createElement('img');
+    img.src = logo.src;
+    img.alt = logo.name;
+    img.title = logo.name;
+    img.loading = 'lazy';
+    if (state.hexLogoClass) img.className = state.hexLogoClass;
+    a.appendChild(img);
+    a.addEventListener('click', function (e) { e.preventDefault(); });
+    state.row.appendChild(a);
+    state.hexes.push({ el: a, baseX: baseX, x: x });
+    return a;
+  }
+
+  function initialFill(state) {
+    /* Pre-populate the row with hexes from its stagger offset out
+       past the right edge, so users never see an empty row. baseX
+       starts at stagger; advance by pitch and spawn while still in
+       the right-edge spawn zone. */
+    const containerWidth = state.row.getBoundingClientRect().width;
+    let baseX = state.stagger;
+    while (baseX < containerWidth + state.hexW) {
+      spawnHex(state, baseX, 0);
+      baseX += state.pitch;
+    }
+    state.cursorBaseX = baseX;
+  }
+
+  function tickMarquee(marqueeState, scrollPx) {
+    /* `scrollPx` is the cumulative drift since the marquee started, in
+       pixels, shared across all rows. Each hex stores its spawn-time
+       baseline (h.baseX = the x at scroll = 0); current position is
+       baseX - scrollPx. Going via this single shared accumulator
+       guarantees rows stay perfectly in lockstep — there is no per-
+       row dt to diverge on. */
+    marqueeState.rows.forEach(function (state) {
+      if (state.paused) return;
+      const containerWidth = state.row.getBoundingClientRect().width;
+      /* Update every hex's transform from its baseline. */
+      for (let i = 0; i < state.hexes.length; i++) {
+        const h = state.hexes[i];
+        h.x = h.baseX - scrollPx;
+        h.el.style.transform = 'translateX(' + h.x + 'px)';
+      }
+      /* Cull anything that fully left the viewport on the left. */
+      for (let i = state.hexes.length - 1; i >= 0; i--) {
+        if (state.hexes[i].x + state.hexW < -16) {
+          state.hexes[i].el.remove();
+          state.hexes.splice(i, 1);
+        }
+      }
+      /* Cursor is also baseline-relative: cursor world position =
+         cursorBaseX - scrollPx. Spawn while it falls inside the spawn
+         zone (the right-edge buffer). */
+      let safety = 0;
+      while ((state.cursorBaseX - scrollPx) < containerWidth + state.hexW && safety < 50) {
+        const newBaseX = state.cursorBaseX;
+        spawnHex(state, newBaseX, scrollPx);
+        state.cursorBaseX += state.pitch;
+        safety++;
+      }
+    });
+  }
+
+  /* Single shared scroll accumulator for all marquees + rows. Stays
+     constant while paused, advances by speed*dt while running. Each
+     hex's visible position is baseX - scrollPx, so all hexes (any
+     row, any marquee) move in lockstep. */
+  let scrollStart = null;       // ts when the current run began
+  let scrollAccum = 0;          // total scroll px captured at last pause
+  let running = true;
+
+  function currentScroll(timestamp) {
+    const speed = REGISTRY[0]?.rows[0]?.speed ?? DEFAULT_SPEED;
+    if (!running) return scrollAccum;
+    if (scrollStart === null) scrollStart = timestamp;
+    return scrollAccum + (timestamp - scrollStart) * speed / 1000;
+  }
+
+  function tick(timestamp) {
+    const scrollPx = currentScroll(timestamp);
+    REGISTRY.forEach(function (m) { tickMarquee(m, scrollPx); });
+    rafId = requestAnimationFrame(tick);
+  }
+
+  function startLoop() {
+    if (rafId !== null) return;
+    lastTimestamp = null;
+    rafId = requestAnimationFrame(tick);
+  }
+
+  function hydrateMarquee(marquee) {
+    if (marquee.dataset.flowHydrated === '1') return;
+    marquee.dataset.flowHydrated = '1';
+
+    let clients;
+    /* Two ways to pass the client pool: a JSON string in
+       data-clients (compact, used by the React build) or an inner
+       <script type="application/json" data-clients-source> (less
+       quote-noise, used by the preview HTML). */
+    try { clients = JSON.parse(marquee.dataset.clients || '[]'); }
+    catch (e) { clients = []; }
+    if (!clients.length) {
+      const inline = marquee.querySelector('script[type="application/json"][data-clients-source]');
+      if (inline) {
+        try { clients = JSON.parse(inline.textContent); }
+        catch (e) { clients = []; }
+      }
+    }
+    if (!clients || !clients.length) return;
+
+    const hexClass = marquee.dataset.hexClass || 'hex';
+    const hexLogoClass = marquee.dataset.hexLogoClass || 'hexLogo';
+    const hexW = readPx(getComputedStyle(marquee).getPropertyValue('--hex-w'), 120);
+    const gap = readPx(getComputedStyle(marquee).getPropertyValue('--gap'), 8);
+    const pitch = hexW + gap;
+
+    const rowEls = Array.from(marquee.querySelectorAll('[data-flow-row]'));
+    if (!rowEls.length) return;
+
+    const rows = rowEls.map(function (row, idx) {
+      const stagger = readPx(row.dataset.rowStagger, idx === 1 ? pitch / 2 : 0);
+      const speedAttr = parseFloat(row.dataset.rowSpeed);
+      const speed = isFinite(speedAttr) && speedAttr > 0
+        ? speedAttr
+        : (DEFAULT_ROW_SPEEDS[idx] || DEFAULT_SPEED);
+      return {
+        row: row,
+        stagger: stagger,
+        speed: reduceMotion ? 0 : speed,
+        hexW: hexW,
+        pitch: pitch,
+        clients: clients,
+        hexClass: hexClass,
+        hexLogoClass: hexLogoClass,
+        hexes: [],
+        cursorBaseX: stagger,
+        recent: [],
+        paused: false,
+      };
+    });
+
+    const marqueeState = { marquee: marquee, rows: rows };
+    rows.forEach(initialFill);
+    REGISTRY.push(marqueeState);
+    if (!reduceMotion) startLoop();
+  }
+
+  function hydrate() {
+    document.querySelectorAll('[data-memory-marquee]').forEach(hydrateMarquee);
+  }
+
+  function pause() {
+    if (!running) return;
+    /* Capture scroll into the accumulator and FULLY halt the rAF.
+       Setting paused flags isn't enough — Logo Memory snapshots and
+       lifts hex positions, and any subsequent tick that reads/writes
+       a transform on a now-lifted hex would corrupt its placement. */
+    scrollAccum = currentScroll(performance.now());
+    scrollStart = null;
+    running = false;
+    if (rafId !== null) {
+      cancelAnimationFrame(rafId);
+      rafId = null;
+    }
+    REGISTRY.forEach(function (m) {
+      m.rows.forEach(function (r) { r.paused = true; });
+    });
+  }
+
+  function resume() {
+    if (running) return;
+    scrollStart = null;          // first tick after resume re-anchors
+    running = true;
+    REGISTRY.forEach(function (m) {
+      m.rows.forEach(function (r) { r.paused = false; });
+    });
+    if (!reduceMotion) startLoop();
+  }
+
+  function reset() {
+    /* Halt rAF before mutating state so a stray tick can't write to
+       elements we're about to remove. */
+    if (rafId !== null) {
+      cancelAnimationFrame(rafId);
+      rafId = null;
+    }
+    scrollAccum = 0;
+    scrollStart = null;
+    running = true;
+    REGISTRY.forEach(function (m) {
+      m.rows.forEach(function (r) {
+        r.hexes.forEach(function (h) { h.el.remove(); });
+        r.hexes.length = 0;
+        r.recent.length = 0;
+        r.cursorBaseX = r.stagger;
+        r.paused = false;
+        initialFill(r);
+      });
+    });
+    if (!reduceMotion) startLoop();
+  }
+
+  window.ConductionClientsFlow = window.ConductionClientsFlow || {};
+  window.ConductionClientsFlow.hydrate = hydrate;
+  window.ConductionClientsFlow.pause = pause;
+  window.ConductionClientsFlow.resume = resume;
+  window.ConductionClientsFlow.reset = reset;
+  window.ConductionClientsFlow._inspect = function () {
+    return REGISTRY.map(function (m) {
+      return {
+        rows: m.rows.map(function (r) {
+          return {
+            stagger: r.stagger,
+            speed: r.speed,
+            cursorBaseX: r.cursorBaseX,
+            hexCount: r.hexes.length,
+            baseXs: r.hexes.map(function (h) { return h.baseX; }),
+            currentXs: r.hexes.map(function (h) { return Math.round(h.x * 100) / 100; }),
+          };
+        }),
+      };
+    });
+  };
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', hydrate);
+  } else {
+    hydrate();
+  }
+})();

package/static/lib/conduction-bg.css

@@ -0,0 +1,50 @@
+/* ============================================================
+   Conduction background — reusable parallax honeycomb depth field
+   ------------------------------------------------------------
+   Drop <div class="conduction-bg" aria-hidden="true"></div> as
+   the first child of any position:relative + overflow:hidden
+   container. The hydrator (conduction-bg.js) generates
+   depth-tiered hexes that parallax on scroll and slowly
+   breathe in opacity.
+
+   Themes (set by class on .conduction-bg):
+     (default)            white hexes — for cobalt / cobalt-800 surfaces
+     .conduction-bg.on-light   cobalt hexes — for white / cobalt-50 surfaces
+
+   Per huisstijl: hexes are always pointy-top, never rotated.
+   Requires tokens.css to provide --hex-pointy-top, --c-blue-cobalt,
+   and --c-orange-knvb.
+   ============================================================ */
+.conduction-bg {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+  --cbg-hex: #ffffff;
+  --cbg-accent: var(--c-orange-knvb);
+}
+.conduction-bg.on-light {
+  --cbg-hex: var(--c-blue-cobalt);
+  --cbg-accent: var(--c-orange-knvb);
+}
+.conduction-bg .hex {
+  position: absolute;
+  clip-path: var(--hex-pointy-top);
+  background: var(--cbg-hex);
+  will-change: transform, opacity;
+  transform: translate(-50%, -50%);
+  animation: conduction-hex-breathe var(--cbg-dur, 14s) ease-in-out var(--cbg-delay, 0s) infinite;
+}
+.conduction-bg .hex.accent {
+  background: var(--cbg-accent);
+}
+@keyframes conduction-hex-breathe {
+  0%, 100% { opacity: var(--cbg-opa-min, 0.04); }
+  50%      { opacity: var(--cbg-opa-max, 0.18); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .conduction-bg .hex {
+    animation: none;
+    opacity: var(--cbg-opa-max, 0.12);
+  }
+}

package/static/lib/conduction-bg.js

@@ -0,0 +1,122 @@
+/* Conduction background — parallax honeycomb hydrator.
+
+   Walks every .conduction-bg in the document, injects depth-tiered hex
+   spans, and wires them up to scroll-based parallax. Smaller hexes have
+   smaller depth → less translate per scroll-pixel → read as further away.
+
+   Per huisstijl: hexes are pointy-top only, never rotated.
+
+   Hosts opt in by adding <div class="conduction-bg"></div> inside any
+   position:relative + overflow:hidden container, plus this script tag
+   and conduction-bg.css. The script auto-runs on DOMContentLoaded and
+   is idempotent — calling init() twice on the same element is a no-op.
+
+   Optional dataset hooks on .conduction-bg:
+     data-count="N"  — override default hex count (default 18)
+*/
+(function () {
+  const TIERS = [
+    { d: 0.10, sMin: 32,  sMax: 56,  oMin: 0.03, oMax: 0.10, w: 5 },
+    { d: 0.25, sMin: 56,  sMax: 96,  oMin: 0.04, oMax: 0.13, w: 4 },
+    { d: 0.45, sMin: 96,  sMax: 150, oMin: 0.05, oMax: 0.16, w: 3 },
+    { d: 0.65, sMin: 150, sMax: 220, oMin: 0.07, oMax: 0.18, w: 2 },
+    { d: 0.85, sMin: 220, sMax: 300, oMin: 0.08, oMax: 0.20, w: 1 },
+  ];
+  const PARALLAX_FACTOR = 0.4;
+  const TIER_TOTAL = TIERS.reduce((s, t) => s + t.w, 0);
+
+  const rand = (a, b) => Math.random() * (b - a) + a;
+  const pickTier = () => {
+    let r = Math.random() * TIER_TOTAL;
+    for (const t of TIERS) { if ((r -= t.w) <= 0) return t; }
+    return TIERS[0];
+  };
+
+  function hydrate(bg) {
+    if (bg.dataset.cbgHydrated === '1') return;
+    bg.dataset.cbgHydrated = '1';
+
+    const host = bg.parentElement;
+    if (!host) return;
+    const onLight = bg.classList.contains('on-light');
+    /* Cobalt-on-white reads stronger per opacity-unit than white-on-cobalt,
+       so scale back the on-light range to keep the field a soft veil. */
+    const opaScale = onLight ? 0.55 : 1.0;
+    const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+    const hexCount = parseInt(bg.dataset.count, 10) || 18;
+    const accentIndex = Math.floor(hexCount / 2);
+
+    const hexes = [];
+    for (let i = 0; i < hexCount; i++) {
+      const tier = pickTier();
+      const size = rand(tier.sMin, tier.sMax);
+      const isAccent = (i === accentIndex);
+      const hex = document.createElement('span');
+      hex.className = isAccent ? 'hex accent' : 'hex';
+      hex.style.width = size + 'px';
+      hex.style.height = (size * 1.1547) + 'px';
+      hex.style.left = rand(-5, 105) + '%';
+      hex.style.top = rand(-25, 125) + '%';
+      hex.style.setProperty('--cbg-opa-min', (tier.oMin * opaScale).toFixed(3));
+      hex.style.setProperty(
+        '--cbg-opa-max',
+        ((isAccent ? Math.min(tier.oMax + 0.05, 0.28) : tier.oMax) * opaScale).toFixed(3)
+      );
+      hex.style.setProperty('--cbg-dur', rand(11, 18).toFixed(1) + 's');
+      hex.style.setProperty('--cbg-delay', rand(-18, 0).toFixed(1) + 's');
+      hex.dataset.depth = tier.d;
+      bg.appendChild(hex);
+      hexes.push(hex);
+    }
+
+    if (reduceMotion) return;
+
+    let visible = false;
+    let ticking = false;
+
+    const update = () => {
+      const rect = host.getBoundingClientRect();
+      const offset = (rect.top + rect.height / 2) - window.innerHeight / 2;
+      for (const h of hexes) {
+        const d = parseFloat(h.dataset.depth);
+        const ty = -offset * d * PARALLAX_FACTOR;
+        h.style.transform = `translate(-50%, -50%) translateY(${ty.toFixed(1)}px)`;
+      }
+      ticking = false;
+    };
+
+    const onScroll = () => {
+      if (!visible || ticking) return;
+      ticking = true;
+      requestAnimationFrame(update);
+    };
+
+    const io = new IntersectionObserver(([entry]) => {
+      visible = entry.isIntersecting;
+      if (visible) update();
+    }, { rootMargin: '300px 0px' });
+    io.observe(host);
+
+    window.addEventListener('scroll', onScroll, { passive: true });
+    window.addEventListener('resize', onScroll, { passive: true });
+    update();
+  }
+
+  function init() {
+    /* hydrate() has its own dataset.cbgHydrated guard so calling it
+       repeatedly across SPA route changes is a no-op for already-
+       mounted nodes. */
+    document.querySelectorAll('.conduction-bg').forEach(hydrate);
+  }
+
+  /* SPA-friendly: expose so React/MDX components can re-trigger after
+     route changes without double-hydrating already-hydrated nodes. */
+  window.ConductionBg = {hydrate: init};
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+})();

package/static/lib/hex-rain.css

@@ -0,0 +1,128 @@
+
+  /* ===== Hex rain, slow vertical fall of icon hexes =====
+     The IIFE at the end of the page hydrates this with icon-bearing
+     hexes that fall finite cycles (one pass each) and get garbage-
+     collected on `animationend` so the spawn loop can ramp without
+     stacking density. Each hex carries an app id 0-11 in dataset.app
+     and clicking it toggles that app's collection state in the game.
+     Always pointy-top per huisstijl. */
+  .hex-rain {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    min-height: 520px;
+    overflow: hidden;
+  }
+  .hex-rain .h {
+    position: absolute;
+    top: 0;
+    left: var(--rain-x, 50%);
+    width: var(--rain-size, 80px);
+    height: calc(var(--rain-size, 80px) * 1.1547);
+    clip-path: var(--hex-pointy-top);
+    background: var(--c-blue-cobalt);
+    color: white;
+    display: flex; align-items: center; justify-content: center;
+    will-change: transform, opacity;
+    cursor: pointer;
+    animation: hex-rain-fall var(--rain-dur, 28s) linear var(--rain-delay, 0s) 1 forwards;
+  }
+  .hex-rain .h.alt    { background: var(--c-cobalt-700); }
+  .hex-rain .h.accent { background: var(--c-orange-knvb); }
+  .hex-rain .h.clicking { pointer-events: none; }
+  .hex-rain .h svg {
+    width: 44%; height: 44%;
+    stroke: currentColor;
+    stroke-width: 1.6;
+    fill: none;
+    pointer-events: none;
+  }
+  @keyframes hex-rain-fall {
+    0%   { transform: translate(-50%, calc(-1 * var(--rain-size, 80px) - 24px)); opacity: 0; }
+    8%   { opacity: 1; }
+    92%  { opacity: 1; }
+    100% { transform: translate(-50%, var(--rain-end, 600px)); opacity: 0; }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .hex-rain .h { animation: none; transform: translate(-50%, 50%); opacity: 1; }
+  }
+
+  /* Game HUD that fades in on first hex click. Counter (apps / 12),
+     timer (60s) and a row of 12 mini app-hex icons that light orange
+     as the player collects each app. Cobalt-on-white card per the
+     GameModal styling so the HUD reads cleanly over a falling-hex
+     background instead of fighting with white-on-cobalt shadows. */
+  .hex-rain .rain-hud {
+    position: absolute;
+    top: 14px; right: 14px;
+    z-index: 2;
+    pointer-events: none;
+    font-family: var(--conduction-typography-font-family-code);
+    color: var(--c-cobalt-900);
+    background: rgba(255, 255, 255, 0.94);
+    backdrop-filter: blur(4px);
+    border-radius: var(--radius-lg);
+    padding: 12px 14px;
+    box-shadow: 0 4px 16px -4px rgba(11, 32, 73, 0.18);
+    opacity: 0;
+    transform: translateY(-8px);
+    transition: opacity 240ms ease, transform 240ms ease;
+    text-align: right;
+  }
+  .hex-rain .rain-hud.active { opacity: 1; transform: translateY(0); }
+  .hex-rain .rain-hud .hud-top {
+    display: flex; gap: 22px; justify-content: flex-end;
+  }
+  .hex-rain .rain-hud .hud-block { text-align: right; }
+  .hex-rain .rain-hud .hud-num {
+    display: block;
+    font-size: 28px; font-weight: 700;
+    letter-spacing: -0.02em;
+    line-height: 1;
+    font-variant-numeric: tabular-nums;
+    color: var(--c-cobalt-900);
+  }
+  .hex-rain .rain-hud .hud-label {
+    display: block;
+    font-size: 9px;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+    color: var(--c-cobalt-400);
+    margin-top: 4px;
+  }
+  .hex-rain .rain-hud .hud-block.hud-tick   .hud-num { animation: rain-tick 420ms ease; }
+  .hex-rain .rain-hud .hud-block.hud-untick .hud-num { animation: rain-untick 420ms ease; }
+  @keyframes rain-tick   { 0% { transform: scale(1); color: var(--c-cobalt-900); } 35% { transform: scale(1.4);  color: var(--c-orange-knvb); } 100% { transform: scale(1); color: var(--c-cobalt-900); } }
+  @keyframes rain-untick { 0% { transform: scale(1); color: var(--c-cobalt-900); } 35% { transform: scale(0.85); color: #d64633; }            100% { transform: scale(1); color: var(--c-cobalt-900); } }
+  .hex-rain .rain-hud .hud-timer.urgent .hud-num {
+    color: #d64633;
+    animation: rain-pulse 800ms ease infinite;
+  }
+  @keyframes rain-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
+  .hex-rain .rain-hud .hud-icons {
+    display: flex; gap: 3px; margin-top: 12px; justify-content: flex-end;
+  }
+  .hex-rain .rain-hud .hud-icon {
+    width: 22px; height: 26px;
+    clip-path: var(--hex-pointy-top);
+    background: var(--c-cobalt-100);
+    display: inline-flex; align-items: center; justify-content: center;
+    color: var(--c-cobalt-400);
+    transition: background 220ms, color 220ms;
+  }
+  .hex-rain .rain-hud .hud-icon.collected {
+    background: var(--c-orange-knvb);
+    color: var(--c-cobalt-900);
+  }
+  .hex-rain .rain-hud .hud-icon.collected.just { animation: rain-icon-pop 380ms ease; }
+  @keyframes rain-icon-pop {
+    0%   { transform: scale(0.6); }
+    60%  { transform: scale(1.2); }
+    100% { transform: scale(1); }
+  }
+  .hex-rain .rain-hud .hud-icon svg {
+    width: 60%; height: 60%;
+    stroke: currentColor; stroke-width: 1.7; fill: none;
+    stroke-linecap: round; stroke-linejoin: round;
+  }
+