main.js

/* Colmez LP — scroll choreography
   One pinned stage. Smoothed progress P (0..1) over the stage's track drives:
     A  0.00–0.22  photo rises from y=460u to y=0, covering the hero copy
     A' 0.02–0.24  logo + CTA morph into the nav; hero words dissolve L→R 0.01–0.16
     B  0.12–0.55  photo dissolves (WebGL goo) — starts while the photo is still rising
     B' 0.14–0.62  vector pattern fades in, line after line
     C  0.30–0.56  waste list words rise one by one; per-word shimmer fill mid-rise
     D  0.53–0.70  lead words follow the same way
   The A–D map lives in Pw (the original 420vh feel inside a shorter 330vh
   track — the dead tail is gone). The exit happens DURING the crisis
   ride-in, driven by its entry progress E: waste words dissolve out
   hero-style from "Solvents" (E 0.02–0.44) together with the pattern
   running its own draw-in backwards (E 0.04–0.48) — both gone by the time
   the crisis edge reaches mid-viewport, where its entry cascade starts:
   section headline, then per box heading → photo shimmer → subhead.
   Accordion choreography (E entry / C pinned) sits further down. The nav is
   position:fixed, so the compact logo+CTA ride the whole page. Wheel
   scrolling is smoothed page-wide (same k as the progress smoothing;
   other inputs stay native).
   The pattern is VECTOR: a 2D canvas restrokes it every frame. Lines morph
   slowly (noise field); the pointer stirs it: a continuous swirl on an eased
   follower plus a trail of slowly-decaying swirls — a long dense-liquid wake.
   Bubbles ride the same field.
   Logo hover: WebGL goo-shader hole around the cursor, glyph-masked in-shader.
   Smooth scroll: native scroll stays, P is exponentially smoothed — no lib. */
(() => {
  'use strict';

  const $ = (id) => document.getElementById(id);
  const stage = $('stage');
  const pin = stage.querySelector('.stage__pin');
  const photoLayer = $('photoLayer');
  const canvas = $('photoCanvas');
  const patCanvas = $('patternCanvas');
  const list = $('wasteList');
  const lead = $('wasteLead');
  const hint = $('scrollHint');
  const logo = $('navLogo');
  const cta = $('navCta');

  const GOLD = [0xae / 255, 0x9a / 255, 0x29 / 255];
  const GOLD_CSS = '#ae9a29';
  const BG_CSS = '#121212';
  const TEX_ASPECT = 1496 / 820;
  const DESIGN_W = 1496, DESIGN_H = 820;
  const REDUCED = matchMedia('(prefers-reduced-motion: reduce)').matches;

  // ---------- mobile (<= 767px) ----------
  // Mobile keeps the desktop's flair (word sweeps, goo asset reveals, the
  // living pattern, the footer pattern) but NONE of its scroll machinery:
  // no wheel smoothing, no pinned stages, everything time-driven and
  // viewport-triggered on the native scroll. The layout comes from the
  // media query in styles.css; bootMobile() at the bottom wires the rest.
  // Crossing the breakpoint reloads so the right build boots.
  const MOBILE_MQ = matchMedia('(max-width: 767px)');
  const MOBILE = MOBILE_MQ.matches;
  // Only a crossing that is still true a moment later, and only if it really differs from the
  // build that booted. A window dragged across the breakpoint fires `change` many times, and a
  // full-page screenshot flips the query and flips it straight back - the bare listener reloaded
  // on every one of those, and during a capture it reloaded about twice a second for as long as
  // the capture ran, so the page never finished loading and nothing could read it.
  let mqTimer = 0;
  const mqReload = () => {
    clearTimeout(mqTimer);
    mqTimer = setTimeout(() => { if (MOBILE_MQ.matches !== MOBILE) location.reload(); }, 400);
  };
  if (MOBILE_MQ.addEventListener) MOBILE_MQ.addEventListener('change', mqReload);
  else if (MOBILE_MQ.addListener) MOBILE_MQ.addListener(mqReload);

  // ---------- helpers ----------
  const clamp01 = (v) => (v < 0 ? 0 : v > 1 ? 1 : v);
  const seg = (p, a, b) => clamp01((p - a) / (b - a));
  const easeInOut = (t) => (t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2);
  const easeOut = (t) => 1 - Math.pow(1 - t, 3);
  const lerp = (a, b, t) => a + (b - a) * t;
  const u = () => pin.clientWidth / 1496;

  // ---------- nav morph ----------
  const LOGO_REST = { x: 40, y: 40, w: 1416, h: 191 };
  const CTA_REST = { x: 1117, y: 271, w: 339, h: 96, fs: 16, pb: 8 }; // h = heading height (2 x 48)
  const NAV = { top: 20, logoH: 24, ctaW: 172, ctaH: 48, ctaFs: 12, pad: 12, ctaPb: 8 }; // CTA flush top-right, text at the bottom edge like the big one
  let lastNavT = -1;

  // Hero -> nav hand-over, scroll-driven and fully reversible:
  //   t 0.00-0.42  big logo + big CTA dissolve in place into goo holes
  //                (the preloader reveal run backwards; CTA text bows out fast)
  //   t 0.17-0.75  compact pair enters ON ITS OWN ELEMENTS while the big pair
  //                is still dissolving: mini logo re-forms top-left out of the
  //                same goo, mini CTA enters top-right preloader-style (2px
  //                line draws, block grows up), flush to both edges
  const logoMini = $('navLogoMini');
  const logoMiniImg = logoMini.querySelector('img');
  const ctaMini = $('navCtaMini');
  const ctaMiniSpans = [...ctaMini.querySelectorAll('span')];
  let navGoo = false; // owns the big-logo canvas while the dissolve runs

  function layoutNav(t) {
    if (t === lastNavT) return;
    lastNavT = t;
    const k = u();
    const vw = pin.clientWidth;
    const gutter = 40 * k;

    const OUT = seg(t, 0, 0.42);
    const IN = seg(t, 0.17, 0.75);

    // big logo: rest + dissolve, always at its rest geometry
    logo.style.left = LOGO_REST.x * k + 'px';
    logo.style.top = LOGO_REST.y * k + 'px';
    logo.style.width = LOGO_REST.w * k + 'px';
    logo.style.height = LOGO_REST.h * k + 'px';
    if (t <= 0) {                    // rest: plain <img> + hover fx
      logo.style.visibility = '';
      logoImgEl.style.opacity = '';
      if (navGoo) { clearLogoCanvas(); navGoo = false; }
    } else if (OUT < 1) {            // dissolving
      logo.style.visibility = '';
      navGoo = true;
      logoImgEl.style.opacity = '0';
      renderLogoGoo(1 - OUT);
    } else {                         // gone (visibility also kills the link)
      logo.style.visibility = 'hidden';
      logoImgEl.style.opacity = '0';
      if (navGoo) { clearLogoCanvas(); navGoo = false; }
    }

    // big CTA: rest + dissolve only
    cta.style.left = CTA_REST.x * k + 'px';
    cta.style.top = CTA_REST.y * k + 'px';
    cta.style.width = CTA_REST.w * k + 'px';
    cta.style.height = CTA_REST.h * k + 'px';
    cta.style.fontSize = CTA_REST.fs * k + 'px';
    cta.style.padding = `0 ${12 * k}px ${CTA_REST.pb * k}px`;
    if (t <= 0) {
      cta.style.visibility = '';
      cta.style.background = '';
      cta.style.opacity = '';
      for (const s of ctaSpans) s.style.opacity = '';
      renderCtaGoo(-1);
    } else if (OUT < 1) {
      cta.style.visibility = '';
      cta.style.background = 'transparent';
      cta.style.opacity = '1';
      const st = (1 - seg(t, 0, 0.10)).toFixed(3);
      for (const s of ctaSpans) s.style.opacity = st;
      renderCtaGoo(1 - OUT);
    } else {
      cta.style.visibility = 'hidden';
      renderCtaGoo(-1);
    }

    // mini logo: re-forms top-left out of the goo
    const lw1 = NAV.logoH * (LOGO_REST.w / LOGO_REST.h);
    logoMini.style.left = gutter + 'px';
    logoMini.style.top = NAV.top + 'px';
    logoMini.style.width = lw1 + 'px';
    logoMini.style.height = NAV.logoH + 'px';
    if (IN <= 0) {
      logoMini.style.visibility = 'hidden';
      logoMiniImg.style.opacity = '0';
      clearMiniCanvas();
    } else if (IN < 1) {
      logoMini.style.visibility = 'visible';
      logoMiniImg.style.opacity = '0';
      renderLogoMiniGoo(IN);
    } else {
      logoMini.style.visibility = 'visible';
      logoMiniImg.style.opacity = '';
      clearMiniCanvas();
    }

    // mini CTA: the 2px line draws, then the block grows up; flush top-right
    if (IN <= 0) {
      ctaMini.style.visibility = 'hidden';
    } else {
      const lw = easeOut(seg(IN, 0, 0.50));
      const lh = easeOut(seg(IN, 0.45, 1));
      const w = NAV.ctaW * lw, h = Math.max(2, NAV.ctaH * lh);
      ctaMini.style.visibility = lw > 0 ? 'visible' : 'hidden';
      ctaMini.style.left = (vw - w) + 'px';        // flush right
      ctaMini.style.top = (NAV.ctaH - h) + 'px';   // grows up, ends flush top
      ctaMini.style.width = w + 'px';
      ctaMini.style.height = h + 'px';
      ctaMini.style.fontSize = NAV.ctaFs + 'px';
      ctaMini.style.padding = `0 ${NAV.pad * lh}px ${NAV.ctaPb * lh}px`;
      const ct = seg(IN, 0.80, 1);
      for (const s of ctaMiniSpans) s.style.opacity = IN >= 1 ? '' : ct.toFixed(3);
    }
  }

  // ---------- pattern data (parsed once from pattern.svg) ----------
  let patLines = [], patFills = [], patDots = [];
  let patReady = false;
  let patSvgText = null;

  function parsePath(d) {
    const nums = d.match(/-?[\d.]+/g);
    const pts = new Float32Array(nums.length);
    for (let i = 0; i < nums.length; i++) pts[i] = +nums[i];
    return pts;
  }

  async function loadPattern() {
    const res = await fetch('assets/img/pattern.svg');
    const text = await res.text();
    patSvgText = text;
    const doc = new DOMParser().parseFromString(text, 'image/svg+xml');

    patLines = [...doc.querySelectorAll('.pattern__lines path')].map((el) => {
      let pts = parsePath(el.getAttribute('d'));
      if (pts.length > 320) { // downsample very dense polylines
        const keep = new Float32Array(2 * (Math.ceil(pts.length / 4) + 1));
        let j = 0;
        for (let i = 0; i < pts.length - 1; i += 4) { keep[j++] = pts[i]; keep[j++] = pts[i + 1]; }
        keep[j++] = pts[pts.length - 2]; keep[j++] = pts[pts.length - 1];
        pts = keep.subarray(0, j);
      }
      let len = 0;
      for (let i = 2; i < pts.length; i += 2) len += Math.hypot(pts[i] - pts[i - 2], pts[i + 1] - pts[i - 1]);
      return { o: +el.dataset.o, sw: +el.getAttribute('stroke-width'), pts, work: new Float32Array(pts.length), len };
    });

    patFills = [...doc.querySelectorAll('.pattern__fills path')].map((el) => {
      const pts = parsePath(el.getAttribute('d'));
      let cx = 0, cy = 0;
      for (let i = 0; i < pts.length; i += 2) { cx += pts[i]; cy += pts[i + 1]; }
      cx /= pts.length / 2; cy /= pts.length / 2;
      return { o: +el.dataset.o, pts, work: new Float32Array(pts.length), cx, cy };
    });

    patDots = [];
    for (const el of doc.querySelectorAll('.pattern__noise path')) {
      const o = +el.dataset.o;
      const re = /M(-?[\d.]+) (-?[\d.]+)h(-?[\d.]+)/g;
      let m;
      while ((m = re.exec(el.getAttribute('d')))) patDots.push({ o, x: +m[1], y: +m[2], s: +m[3] });
    }

    patReady = true;
    makeLogoTexture();
    dirty = true;
  }

  // ---------- noise ----------
  const PERM = new Uint8Array(512);
  {
    let sd = 7;
    const rnd = () => (sd = (sd * 16807) % 2147483647) / 2147483647;
    for (let i = 0; i < 256; i++) PERM[i] = PERM[i + 256] = (rnd() * 256) | 0;
  }
  function vnoise(x, y) {
    const xi = Math.floor(x), yi = Math.floor(y);
    const xf = x - xi, yf = y - yi;
    const uu = xf * xf * (3 - 2 * xf), vv = yf * yf * (3 - 2 * yf);
    const xa = xi & 255, ya = yi & 255;
    const a = PERM[(PERM[xa] + ya) & 255], b = PERM[(PERM[(xa + 1) & 255] + ya) & 255];
    const c = PERM[(PERM[xa] + ya + 1) & 255], d = PERM[(PERM[(xa + 1) & 255] + ya + 1) & 255];
    return ((a + (b - a) * uu + (c - a) * vv + (a - b - c + d) * uu * vv) / 255) * 2 - 1;
  }

  const MORPH_AMP = 10;        // design px — slow, viscous shape change
  const MORPH_FREQ = 1 / 190;  // wavelength ~190 design px
  const STIR_R2 = 85 * 85;     // stir influence radius²
  const STIR_K = 0.26;         // stir gain
  const STIR_CAP = 45;         // max stir displacement, design px
  const STIR_DECAY = 0.20;     // very slow release — the wake lingers like dense liquid
  const STIR_LIFE = 16;        // seconds a swirl stays alive
  const STIR_ATTACK = 0.35;    // seconds a swirl takes to reach full strength

  // pointer stir trail: slowly-decaying swirls (a stick in a bucket of paint).
  // 28 slots so a long, slowly-fading wake never gets snapped away mid-life.
  const NSTIR = 28;
  const stir = []; // {x, y, dx, dy, t0}
  for (let i = 0; i < NSTIR; i++) stir.push({ x: 0, y: 0, dx: 0, dy: 0, t0: -1e9 });
  let stirHead = 0, stirActive = false;
  // continuous primary swirl riding the eased follower — strength follows
  // pointer speed with a slow envelope, so slow moves stay perfectly smooth
  let mStr = 0, mDirX = 0, mDirY = 0;

  // continuous looped "self-stirring": three swirls slowly wandering the
  // pattern on closed orbits — same character as the pointer stir, subtler
  const AUTO_R2 = 170 * 170;
  const AUTO = [
    { cx: 420, cy: 260, rx: 260, ry: 160, w1: 0.10, w2: 0.081, ph: 0.0, dir: 1 },
    { cx: 930, cy: 520, rx: 320, ry: 180, w1: 0.077, w2: 0.093, ph: 2.1, dir: -1 },
    { cx: 1230, cy: 250, rx: 210, ry: 170, w1: 0.088, w2: 0.069, ph: 4.2, dir: 1 },
  ];

  // swirl-only part of the field (pointer stir + auto orbits) — also pushes bubbles
  const S = new Float32Array(2);
  function swirlAt(x, y, t, now) {
    let sx = 0, sy = 0;
    for (let i = 0; i < 3; i++) {
      const a = AUTO[i];
      const ax = a.cx + a.rx * Math.sin(t * a.w1 + a.ph);
      const ay = a.cy + a.ry * Math.cos(t * a.w2 + a.ph);
      const dx = x - ax, dy = y - ay;
      const w = Math.exp(-(dx * dx + dy * dy) / AUTO_R2) * 0.32 * a.dir;
      sx += -dy * w;
      sy += dx * w;
    }
    if (stirActive || mStr > 0.01) {
      mouseAt(x, y, now);
      sx += M[0]; sy += M[1];
    }
    S[0] = sx; S[1] = sy;
  }

  // mouse part of the swirl (primary follower swirl + trail wake) -> M.
  // Shared by the live displacement (swirlAt) and the permanent bake below.
  const M = new Float32Array(2);
  function mouseAt(x, y, now) {
    let px = 0, py = 0;
    if (mStr > 0.01) {
      const dx = x - fwX, dy = y - fwY;
      const w = Math.exp(-(dx * dx + dy * dy) / STIR_R2) * mStr;
      px += (-dy * 1.2 + mDirX * 40) * w;
      py += (dx * 1.2 + mDirY * 40) * w;
    }
    for (let i = 0; i < NSTIR; i++) {
      const b = stir[i];
      const age = (now - b.t0) / 1000;
      if (age > STIR_LIFE) continue;
      const dx = x - b.x, dy = y - b.y;
      const env = Math.min(1, age / STIR_ATTACK); // ease in — no snapping
      const w = Math.exp(-(dx * dx + dy * dy) / STIR_R2) * Math.exp(-age * STIR_DECAY) * env * env * (3 - 2 * env);
      px += (-dy * 1.2 + b.dx * 40) * w;
      py += (dx * 1.2 + b.dy * 40) * w;
    }
    px *= STIR_K; py *= STIR_K;
    const m = Math.hypot(px, py);
    if (m > STIR_CAP) { px *= STIR_CAP / m; py *= STIR_CAP / m; }
    M[0] = px; M[1] = py;
  }

  // Bake the mouse stir into the base geometry so the pattern KEEPS its mixed
  // shape once the wake dies out (paint, not jelly). BAKE = STIR_DECAY makes
  // the bake absorb exactly what the transient wake loses per second — their
  // sum stays put, so nothing visibly springs back. Auto-swirls and the morph
  // noise stay transient on top; the stir interaction itself is unchanged.
  const BAKE = STIR_DECAY;
  let bakeT = 0;

  // apply a displacement field permanently to every base point; sample(x, y)
  // must leave the (already scaled) displacement in M. STEP-lerp as deform().
  function bakeField(sample) {
    const push = (pts) => {
      const n = pts.length;
      sample(pts[0], pts[1]);
      let px = M[0], py = M[1], i0 = 0;
      pts[0] += px; pts[1] += py;
      for (let i = 2; i < n; i += STEP * 2) {
        const j = Math.min(i + STEP * 2 - 2, n - 2);
        sample(pts[j], pts[j + 1]);
        const ndx = M[0], ndy = M[1];
        const span = (j - i0) / 2 || 1;
        for (let q = i; q <= j; q += 2) {
          const f = ((q - i0) / 2) / span;
          pts[q] += px + (ndx - px) * f;
          pts[q + 1] += py + (ndy - py) * f;
        }
        px = ndx; py = ndy; i0 = j;
      }
    };
    for (const l of patLines) push(l.pts);
    for (const f of patFills) { push(f.pts); sample(f.cx, f.cy); f.cx += M[0]; f.cy += M[1]; }
    for (const d of patDots) { sample(d.x, d.y); d.x += M[0]; d.y += M[1]; }
  }

  function bakeStir(now) {
    const dt = Math.min(0.05, (now - bakeT) / 1000);
    bakeT = now;
    if (!stirActive || dt <= 0) return;
    const k = BAKE * dt;
    bakeField((x, y) => { mouseAt(x, y, now); M[0] *= k; M[1] *= k; });
  }

  // Fold ONE slot's remaining hold into the base right before the slot is
  // reused. Without this, the wake region that slot was holding loses its
  // displacement in a single frame — the "distant pattern snaps back" jump.
  // Folding the full residue equals the slot completing its natural decay
  // (continuous bake would have absorbed exactly that), so nothing moves.
  function bakeSlot(b, now) {
    const age = (now - b.t0) / 1000;
    if (age > STIR_LIFE) return;
    const env = Math.min(1, age / STIR_ATTACK);
    const g = Math.exp(-age * STIR_DECAY) * env * env * (3 - 2 * env) * STIR_K;
    if (g < 1e-3) return;
    const CUT = STIR_R2 * 9; // beyond ~3 sigma the hold is negligible
    bakeField((x, y) => {
      const dx = x - b.x, dy = y - b.y;
      const d2 = dx * dx + dy * dy;
      if (d2 > CUT) { M[0] = 0; M[1] = 0; return; }
      const w = Math.exp(-d2 / STIR_R2) * g;
      M[0] = (-dy * 1.2 + b.dx * 40) * w;
      M[1] = (dx * 1.2 + b.dy * 40) * w;
    });
  }

  // combined displacement field (morph + swirls) -> F
  const F = new Float32Array(2);
  function field(x, y, t, now) {
    swirlAt(x, y, t, now);
    F[0] = S[0] + vnoise(x * MORPH_FREQ + t * 0.050, y * MORPH_FREQ) * MORPH_AMP;
    F[1] = S[1] + vnoise(x * MORPH_FREQ - 13.7, y * MORPH_FREQ + t * 0.045) * MORPH_AMP;
  }

  // deform pts -> work: sample the field every STEP-th point, lerp between
  const STEP = 3;
  function deform(pts, work, t, now, amp) {
    const n = pts.length;
    if (amp <= 0) { work.set(pts); return; }
    field(pts[0], pts[1], t, now);
    let px = F[0] * amp, py = F[1] * amp, i0 = 0;
    work[0] = pts[0] + px; work[1] = pts[1] + py;
    for (let i = 2; i < n; i += STEP * 2) {
      const j = Math.min(i + STEP * 2 - 2, n - 2);
      field(pts[j], pts[j + 1], t, now);
      const ndx = F[0] * amp, ndy = F[1] * amp;
      const span = (j - i0) / 2 || 1;
      for (let k = i; k <= j; k += 2) {
        const f = ((k - i0) / 2) / span;
        work[k] = pts[k] + px + (ndx - px) * f;
        work[k + 1] = pts[k + 1] + py + (ndy - py) * f;
      }
      px = ndx; py = ndy; i0 = j;
    }
  }

  // gold dimmed towards the page black — colour change, not opacity
  const GOLD_RGB = [174, 154, 41], BG_RGB = [18, 18, 18];
  function goldAt(dim) {
    const r = Math.round(BG_RGB[0] + (GOLD_RGB[0] - BG_RGB[0]) * dim);
    const g = Math.round(BG_RGB[1] + (GOLD_RGB[1] - BG_RGB[1]) * dim);
    const b = Math.round(BG_RGB[2] + (GOLD_RGB[2] - BG_RGB[2]) * dim);
    return `rgb(${r},${g},${b})`;
  }

  // ---------- pattern rendering (canvas 2D, vector every frame) ----------
  const pctx = patCanvas.getContext('2d', { alpha: false });
  let patScale = 1, patOx = 0, patOy = 0, patDpr = 1;

  function resizePattern() {
    patDpr = Math.min(window.devicePixelRatio || 1, 1.5);
    const w = Math.round(patCanvas.clientWidth * patDpr), h = Math.round(patCanvas.clientHeight * patDpr);
    if (patCanvas.width !== w || patCanvas.height !== h) { patCanvas.width = w; patCanvas.height = h; }
    patScale = Math.max(w / DESIGN_W, h / DESIGN_H);
    patOx = (w - DESIGN_W * patScale) / 2;
    patOy = (h - DESIGN_H * patScale) / 2;
  }

  let lastPatKey = '', patLive = false, bakeTok = -1;
  // the stir bake is global (design space) — once per frame, whichever
  // canvas asks for it first
  function bakeStirOnce(now) { if (bakeTok === now) return; bakeTok = now; bakeStir(now); }

  function renderPattern(pd, now, dim) {
    if (!patReady) return;
    // off-screen the hero pattern is pure cost — the footer runs its own pass
    const pr = patCanvas.getBoundingClientRect();
    if (pr.bottom < -50 || pr.top > window.innerHeight + 50) return;
    const live = !REDUCED && pd > 0;
    patLive = live;
    const key = live ? '' : `${pd.toFixed(4)}|${dim.toFixed(3)}`;
    if (key && key === lastPatKey) return;
    lastPatKey = key;
    paintPattern(pctx, patCanvas.width, patCanvas.height, patScale, patOx, patOy, pd, now, dim, live);
  }

  // one vector pass over any target canvas — the hero stage and the footer
  // share the pattern, the stir field and the bake
  function paintPattern(ctx, cw, ch, sc, ox, oy, pd, now, dim, live) {
    const t = now / 1000;
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    ctx.fillStyle = BG_CSS;
    ctx.fillRect(0, 0, cw, ch);
    if (pd <= 0) return;

    ctx.setTransform(sc, 0, 0, sc, ox, oy);
    const gold = goldAt(dim); // dim = darker gold, not opacity
    ctx.fillStyle = gold;
    ctx.strokeStyle = gold;
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';

    const amp = live ? 1 : 0;
    if (live) bakeStirOnce(now);

    // noise dots — tiny bubbles: slow pulse, rare pops, riding the stir field
    let di = 0;
    for (const d of patDots) {
      di++;
      const a = easeOut(seg(pd, d.o * 0.7, d.o * 0.7 + 0.25));
      if (a <= 0) continue;
      let sc = 1, al = a, ox = 0, oy = 0;
      if (live) {
        const h = ((di * 2654435761) >>> 8 & 1023) / 1023;
        const cyc = (t * 0.016 + h) % 1;
        if (cyc > 0.97) {           // rare, gentle pop
          const pp = (cyc - 0.97) / 0.03;
          sc = 1 + pp * 0.35;
          al = a * (1 - pp * pp);
        } else {
          sc = 1 + 0.04 * Math.sin(t * 0.35 + h * 6.283);
        }
        swirlAt(d.x, d.y, t, now);
        ox = S[0]; oy = S[1];
        sc += Math.min(0.5, Math.hypot(ox, oy) / STIR_CAP * 0.45);
      }
      ctx.globalAlpha = al;
      const g = d.s * (sc - 1) / 2;
      ctx.fillRect(d.x + ox - g, d.y + oy - g, d.s * sc, d.s * sc);
    }

    // yellow blocks (morph along with the lines)
    for (const f of patFills) {
      const tf = easeOut(seg(pd, 0.08 + f.o * 0.6, 0.08 + f.o * 0.6 + 0.22));
      if (tf <= 0) continue;
      deform(f.pts, f.work, t, now, amp * tf);
      const sc = 0.86 + 0.14 * tf;
      ctx.globalAlpha = tf;
      ctx.beginPath();
      const q = f.work;
      ctx.moveTo(f.cx + (q[0] - f.cx) * sc, f.cy + (q[1] - f.cy) * sc);
      for (let i = 2; i < q.length; i += 2) ctx.lineTo(f.cx + (q[i] - f.cx) * sc, f.cy + (q[i + 1] - f.cy) * sc);
      ctx.closePath();
      ctx.fill();
    }

    // contour lines — smooth staggered fade-in
    for (const l of patLines) {
      const tl = easeInOut(seg(pd, l.o * 0.58, l.o * 0.58 + 0.42));
      if (tl <= 0) continue;
      deform(l.pts, l.work, t, now, amp);
      ctx.globalAlpha = tl;
      ctx.lineWidth = l.sw;
      ctx.beginPath();
      const q = l.work;
      ctx.moveTo(q[0], q[1]);
      for (let i = 2; i < q.length; i += 2) ctx.lineTo(q[i], q[i + 1]);
      ctx.stroke();
    }
    ctx.globalAlpha = 1;
  }

  // ---------- pointer -> eased follower -> continuous flow injection ----------
  let ptX = -1e6, ptY = -1e6;      // raw pointer, design space
  let fwX = -1e6, fwY = -1e6;      // eased follower

  function onPointerMove(e) {
    if (REDUCED) return;
    if (fpCanvas && footerExposure() > 0.01) { // the footer owns the stir once it is out
      const fr = fpCanvas.getBoundingClientRect();
      const above = footerEl.previousElementSibling;
      const cover = above ? above.getBoundingClientRect().bottom : -1e9;
      if (e.clientY > cover && e.clientY >= fr.top && e.clientY <= fr.bottom && fpScale > 0) {
        ptX = ((e.clientX - fr.left) * patDpr - fpOx) / fpScale;
        ptY = ((e.clientY - fr.top) * patDpr - fpOy) / fpScale;
        if (fwX < -1e5) { fwX = ptX; fwY = ptY; }
        return;
      }
    }
    const r = patCanvas.getBoundingClientRect();
    if (r.height === 0) return;
    const cx = (e.clientX - r.left) * patDpr, cy = (e.clientY - r.top) * patDpr;
    ptX = (cx - patOx) / patScale;
    ptY = (cy - patOy) / patScale;
    if (fwX < -1e5) { fwX = ptX; fwY = ptY; }
  }

  let lastSlotX = -1e6, lastSlotY = -1e6;

  function updateStir(now, dt) {
    if (ptX > -1e5) {
      const k = 1 - Math.exp(-dt * 4.5);
      const pvx = fwX, pvy = fwY;
      fwX += (ptX - fwX) * k;
      fwY += (ptY - fwY) * k;
      const mvx = fwX - pvx, mvy = fwY - pvy;
      const vel = Math.hypot(mvx, mvy) / dt; // eased-follower speed, design px/s

      // continuous swirl strength: quick to grab, very slow to let go
      const target = Math.min(1, vel / 420);
      const rate = target > mStr ? 7 : 0.55;
      mStr += (target - mStr) * (1 - Math.exp(-dt * rate));
      if (vel > 1) {
        const m = Math.hypot(mvx, mvy) || 1;
        const dk = 1 - Math.exp(-dt * 6);
        mDirX += (mvx / m - mDirX) * dk;
        mDirY += (mvy / m - mDirY) * dk;
      }

      // trail slots keep the wake behind the follower
      const sdx = fwX - lastSlotX, sdy = fwY - lastSlotY;
      if (sdx * sdx + sdy * sdy > 784) {
        const m = Math.hypot(mvx, mvy) || 1;
        const b = stir[stirHead]; stirHead = (stirHead + 1) % NSTIR;
        if (patLive) bakeSlot(b, now); // fold its remaining hold in first — no snap
        b.x = fwX; b.y = fwY;
        b.dx = (mvx / m) * Math.min(1, vel / 900);
        b.dy = (mvy / m) * Math.min(1, vel / 900);
        b.t0 = now;
        lastSlotX = fwX; lastSlotY = fwY;
      }
    }
    stirActive = mStr > 0.01;
    if (!stirActive) for (let i = 0; i < NSTIR; i++) if ((now - stir[i].t0) / 1000 < STIR_LIFE) { stirActive = true; break; }
  }

  // ---------- WebGL goo dissolve (photo) ----------
  const VERT = `
    attribute vec2 aPos;
    varying vec2 vUv;
    void main(){ vUv = vec2(aPos.x, 1.0 - aPos.y); gl_Position = vec4(aPos * 2.0 - 1.0, 0.0, 1.0); }`;

  const GLSL_NOISE = `
    vec3 mod289(vec3 x){ return x - floor(x * (1.0/289.0)) * 289.0; }
    vec2 mod289(vec2 x){ return x - floor(x * (1.0/289.0)) * 289.0; }
    vec3 permute(vec3 x){ return mod289(((x*34.0)+1.0)*x); }
    float snoise(vec2 v){
      const vec4 C = vec4(0.211324865405187, 0.366025403784439, -0.577350269189626, 0.024390243902439);
      vec2 i = floor(v + dot(v, C.yy));
      vec2 x0 = v - i + dot(i, C.xx);
      vec2 i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
      vec4 x12 = x0.xyxy + C.xxzz; x12.xy -= i1;
      i = mod289(i);
      vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0)) + i.x + vec3(0.0, i1.x, 1.0));
      vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);
      m = m*m; m = m*m;
      vec3 x = 2.0 * fract(p * C.www) - 1.0;
      vec3 h = abs(x) - 0.5;
      vec3 ox = floor(x + 0.5);
      vec3 a0 = x - ox;
      m *= 1.79284291400159 - 0.85373472095314 * (a0*a0 + h*h);
      vec3 g; g.x = a0.x * x0.x + h.x * x0.y; g.yz = a0.yz * x12.xz + h.yz * x12.yw;
      return 130.0 * dot(m, g);
    }
    float fbm3(vec2 p){
      float v = 0.5 * snoise(p);
      v += 0.25 * snoise(p * 2.02 + vec2(1.7, 9.2));
      v += 0.125 * snoise(p * 4.08 + vec2(8.3, 2.8));
      return v;
    }`;

  const FRAG_GOO = `
    precision highp float;
    varying vec2 vUv;
    uniform sampler2D uTex;
    uniform vec2 uRes;
    uniform float uTexAspect;
    uniform float uP;
    uniform vec2 uSeeds[5];
    uniform vec3 uGold;
    ${GLSL_NOISE}
    void main(){
      float sa = uRes.x / uRes.y;
      vec2 uv = vUv;
      if (sa > uTexAspect) uv.y = (uv.y - 0.5) * (uTexAspect / sa) + 0.5;
      else                 uv.x = (uv.x - 0.5) * (sa / uTexAspect) + 0.5;

      if (uP <= 0.0) { gl_FragColor = vec4(texture2D(uTex, uv).rgb, 1.0); return; }

      vec2 q = vec2(vUv.x * sa, vUv.y);
      float n1 = fbm3(q * 2.6 + 3.1);
      float n2 = snoise(q * 5.5 + vec2(7.3, 1.9)) * 0.5;

      float field = 10.0;
      for (int i = 0; i < 5; i++) {
        vec2 s = vec2(uSeeds[i].x * sa, uSeeds[i].y);
        float grow = 0.72 + 0.28 * fract(float(i) * 0.618);
        float r = max(uP * 2.3 * grow, 1e-4);
        field = min(field, distance(q, s) / r);
      }
      float e = field + n1 * 0.42 + n2 * 0.12;
      float alpha = smoothstep(0.80, 1.18, e);
      float melt = (1.0 - smoothstep(0.55, 1.75, e)) * smoothstep(0.0, 0.08, uP);

      if (melt < 0.004) { gl_FragColor = vec4(texture2D(uTex, uv).rgb * alpha, alpha); return; }

      float drip = melt * (0.12 + 0.30 * (0.5 + 0.5 * n2)) * (0.35 + 0.65 * uP);
      vec2 w = uv;
      w.y -= drip * (0.6 + 0.4 * snoise(q * 9.0) * 0.6);
      w.x += melt * 0.09 * snoise(q * 6.0 + 11.0) * 0.6;
      w = clamp(w, 0.001, 0.999);
      vec3 col = texture2D(uTex, w).rgb;

      col *= 1.0 - 0.45 * melt;
      float rim = smoothstep(0.74, 1.0, e) * (1.0 - smoothstep(1.0, 1.2, e));
      col = mix(col, uGold, rim * 0.6);

      gl_FragColor = vec4(col * alpha, alpha);
    }`;

  let gl = null, glReady = false, pGoo = null;
  let seedsTex = [[0.5128, 0.7627], [0.1636, 0.59], [0.9079, 0.6166], [0.5235, 0.3725], [0.9105, 0.1369]];

  function initGL() {
    gl = canvas.getContext('webgl', { premultipliedAlpha: true, alpha: true, antialias: false, powerPreference: 'high-performance' });
    if (!gl) return false;
    const sh = (type, src) => {
      const x = gl.createShader(type);
      gl.shaderSource(x, src); gl.compileShader(x);
      if (!gl.getShaderParameter(x, gl.COMPILE_STATUS)) { console.error(gl.getShaderInfoLog(x)); return null; }
      return x;
    };
    const vs = sh(gl.VERTEX_SHADER, VERT), fs = sh(gl.FRAGMENT_SHADER, FRAG_GOO);
    if (!vs || !fs) return false;
    const prog = gl.createProgram();
    gl.attachShader(prog, vs); gl.attachShader(prog, fs);
    gl.bindAttribLocation(prog, 0, 'aPos');
    gl.linkProgram(prog);
    if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) { console.error(gl.getProgramInfoLog(prog)); return false; }
    const uni = {};
    const n = gl.getProgramParameter(prog, gl.ACTIVE_UNIFORMS);
    for (let i = 0; i < n; i++) {
      const info = gl.getActiveUniform(prog, i);
      uni[info.name.replace('[0]', '')] = gl.getUniformLocation(prog, info.name);
    }
    pGoo = { prog, uni };

    const buf = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, buf);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1]), gl.STATIC_DRAW);
    gl.enableVertexAttribArray(0);
    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);

    const tex = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, tex);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

    const img = new Image();
    img.onload = () => {
      gl.bindTexture(gl.TEXTURE_2D, tex);
      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, img);
      glReady = true;
      photoLayer.classList.add('has-gl');
      resizeGL();
      dirty = true;
    };
    img.src = 'assets/img/hero-bg.jpg';
    return true;
  }

  function seedsToScreen() {
    const sa = canvas.clientWidth / canvas.clientHeight;
    const out = new Float32Array(10);
    seedsTex.forEach(([x, y], i) => {
      let sx = x, sy = y;
      if (sa > TEX_ASPECT) sy = (y - 0.5) * (sa / TEX_ASPECT) + 0.5;
      else sx = (x - 0.5) * (TEX_ASPECT / sa) + 0.5;
      out[i * 2] = sx; out[i * 2 + 1] = sy;
    });
    return out;
  }

  function resizeGL() {
    if (!gl || !pGoo) return;
    const dpr = Math.min(window.devicePixelRatio || 1, 1.25);
    const w = Math.round(canvas.clientWidth * dpr), h = Math.round(canvas.clientHeight * dpr);
    if (canvas.width !== w || canvas.height !== h) { canvas.width = w; canvas.height = h; }
    gl.viewport(0, 0, w, h);
    gl.useProgram(pGoo.prog);
    gl.uniform2f(pGoo.uni.uRes, w, h);
    gl.uniform1f(pGoo.uni.uTexAspect, TEX_ASPECT);
    gl.uniform3fv(pGoo.uni.uGold, GOLD);
    gl.uniform2fv(pGoo.uni.uSeeds, seedsToScreen());
    lastGooP = -1;
  }

  let lastGooP = -1, gooBlank = false;
  function renderGoo(d) {
    if (!glReady) return;
    if (d >= 1) {
      if (!gooBlank) { gooBlank = true; gl.clearColor(0, 0, 0, 0); gl.clear(gl.COLOR_BUFFER_BIT); }
      return;
    }
    gooBlank = false;
    if (d === lastGooP) return;
    lastGooP = d;
    gl.useProgram(pGoo.prog);
    gl.uniform1f(pGoo.uni.uP, d);
    gl.clearColor(0, 0, 0, 0);
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.TRIANGLES, 0, 6);
  }

  // ---------- text ----------
  const T_WORDS = 0.30;   // list enters while the photo is still dissolving
  const T_SPREAD = 0.17;
  const T_LEAD = T_WORDS + T_SPREAD + 0.06;
  const LEAD_SPREAD = 0.08;
  const RISE_D = 0.055, FILL_D = 0.075;
  const hash01 = (i) => { const x = Math.sin(i * 127.1 + 311.7) * 43758.5453; return x - Math.floor(x); };

  const listWords = [...list.querySelectorAll('.w')];
  const leadWords = [...lead.querySelectorAll('.w')];
  const wordMeta = [
    ...listWords.map((el, i) => {
      const rs = T_WORDS + (i / listWords.length) * T_SPREAD;
      return { el, sup: el.querySelector('sup'), rs, fs: rs + 0.018 + hash01(i) * 0.035 };
    }),
    ...leadWords.map((el, i) => {
      const rs = T_LEAD + (i / leadWords.length) * LEAD_SPREAD;
      return { el, sup: null, rs, fs: rs + 0.018 + hash01(i + 100) * 0.03 };
    }),
  ];
  let lastTextP = -1;

  // stage exit — driven by the crisis entry progress E (not P), so the waste
  // words dissolve out hero-style, in reading order from "Solvents", WHILE
  // the crisis section rides up over the still-live pattern
  const XT_START = 0.02, XT_SPREAD = 0.26, XT_DUR = 0.13;
  wordMeta.forEach((m, i) => {
    m.xs = XT_START + (i / wordMeta.length) * XT_SPREAD + hash01(i + 500) * 0.03;
    m.out = false;
  });

  function layoutWords() {
    for (const { el, sup } of wordMeta) {
      if (!sup) continue;
      sup.style.backgroundSize = `${el.clientWidth}px 100%`;
      sup.style.backgroundPosition = `${-(sup.offsetLeft - el.offsetLeft)}px 0`;
    }
  }

  const pad3 = (n) => String(n).padStart(3, '0');

  function updateText(Pw, X) {
    const key = Pw * 8 + X;
    if (key === lastTextP) return;
    lastTextP = key;
    const travel = 38 * u();
    for (const m of wordMeta) {
      const st = m.el.style;

      // exit: hero-style sweep leaving transparency (gradient swapped via .wout)
      const xf = seg(X, m.xs, m.xs + XT_DUR);
      if (xf > 0) {
        if (!m.out) {
          m.out = true;
          m.el.classList.add('wout');
          if (m.sup) m.sup.classList.add('wout');
          st.opacity = '1';
          st.transform = '';
        }
        st.setProperty('--fill', lerp(-40, 124, xf).toFixed(1) + '%');
        continue;
      }
      if (m.out) {
        m.out = false;
        m.el.classList.remove('wout');
        if (m.sup) m.sup.classList.remove('wout');
      }

      const tr = easeOut(seg(Pw, m.rs, m.rs + RISE_D));
      st.opacity = tr.toFixed(3);
      st.transform = tr >= 1 ? '' : `translate3d(0, ${((1 - tr) * travel).toFixed(1)}px, 0)`;
      const tf = seg(Pw, m.fs, m.fs + FILL_D);
      st.setProperty('--fill', lerp(-24, 124, tf).toFixed(1) + '%');
      if (m.sup) {
        const v = pad3(Math.round(+m.sup.dataset.n * easeOut(tf)));
        if (m.sup.textContent !== v) m.sup.textContent = v;
      }
    }
  }

  // hero words dissolve left→right (shimmer sweep to transparency) as the photo rises
  const heroWords = [...document.querySelectorAll('#heroCopy .hw')];
  const heroMeta = heroWords.map((el, i) => {
    const st = 0.012 + (i / heroWords.length) * 0.105 + hash01(i + 200) * 0.012;
    return { el, st };
  });
  let lastHeroP = -1;

  function updateHero(P) {
    if (P === lastHeroP) return;
    lastHeroP = P;
    for (const m of heroMeta) {
      const t = seg(P, m.st, m.st + 0.045);
      m.el.style.setProperty('--fill', lerp(-40, 124, t).toFixed(1) + '%');
    }
  }

  // ---------- logo hover fx (big-logo state only) ----------
  // the goo dissolve shader, inverted: a melting hole follows the cursor inside
  // the glyphs (glyph mask sampled in-shader) and reveals the drifting pattern
  const logoFx = $('logoFx');
  let logoHover = false, lhp = 0, logoFxClear = true;
  let lmxRaw = -1e6, lmyRaw = -1e6, lmx = -1e6, lmy = -1e6;
  const LOGO_HOVER_DELAY = 180; // ms before the melt starts (client rev)
  let logoHoverT0 = 0;

  logo.addEventListener('mouseenter', () => { logoHover = true; logoHoverT0 = performance.now(); });
  logo.addEventListener('mouseleave', () => { logoHover = false; });
  logo.addEventListener('mousemove', (e) => {
    const r = logoFx.getBoundingClientRect();
    if (r.width === 0) return;
    lmxRaw = (e.clientX - r.left) / r.width * logoFx.width;
    lmyRaw = (e.clientY - r.top) / r.height * logoFx.height;
    if (lmx < -1e5) { lmx = lmxRaw; lmy = lmyRaw; }
  });

  const FRAG_LOGO = `
    precision mediump float;
    varying vec2 vUv;
    uniform sampler2D uTex;
    uniform sampler2D uMask;
    uniform vec2 uRes;
    uniform float uTexAspect;
    uniform float uP;
    uniform float uTime;
    uniform vec2 uSeed;
    uniform vec3 uGold;
    ${GLSL_NOISE}
    void main(){
      float glyph = texture2D(uMask, vUv).a;
      if (glyph <= 0.003) { gl_FragColor = vec4(0.0); return; }
      float sa = uRes.x / uRes.y;
      vec2 uv = vUv;
      if (sa > uTexAspect) uv.y = (uv.y - 0.5) * (uTexAspect / sa) + 0.5;
      else                 uv.x = (uv.x - 0.5) * (sa / uTexAspect) + 0.5;

      vec2 q = vec2(vUv.x * sa, vUv.y);
      float n1 = fbm3(q * 2.6 + 3.1);
      float n2 = snoise(q * 5.5 + vec2(7.3, 1.9)) * 0.5;

      float r = max(uP * 0.52, 1e-4);
      float e = distance(q, uSeed) / r + n1 * 0.32 + n2 * 0.10;
      float vis = (1.0 - smoothstep(0.86, 1.10, e)) * glyph;
      if (vis <= 0.0) { gl_FragColor = vec4(0.0); return; }
      float melt = (1.0 - smoothstep(0.55, 1.45, e)) * smoothstep(0.0, 0.08, uP);

      // zoom into the pattern so its lines read at logo scale
      uv = 0.5 + (uv - 0.5) / 2.6;

      // gentle drift so the pattern lives like the big one below
      vec2 w = uv + vec2(
        snoise(q * 1.6 + vec2(uTime * 0.05, -uTime * 0.04)),
        snoise(q * 1.6 + vec2(-uTime * 0.045, uTime * 0.05) + 4.7)
      ) * 0.004;

      // goo smear near the melting rim — same recipe as the photo dissolve
      float drip = melt * (0.12 + 0.30 * (0.5 + 0.5 * n2)) * (0.35 + 0.65 * uP);
      w.y -= drip * (0.6 + 0.4 * snoise(q * 9.0) * 0.6) * 0.4;
      w.x += melt * 0.05 * snoise(q * 6.0 + 11.0) * 0.6;
      w = clamp(w, 0.001, 0.999);
      vec3 col = texture2D(uTex, w).rgb * 1.35;

      col *= 1.0 - 0.35 * melt;

      gl_FragColor = vec4(col * vis, vis);
    }`;

  // preloader: the logo forms out of 3 growing goo holes (white glyphs +
  // gold rim at the melt edge), clipped by the same glyph mask
  const FRAG_LOGO_IN = `
    precision mediump float;
    varying vec2 vUv;
    uniform sampler2D uMask;
    uniform vec2 uRes;
    uniform float uP;
    uniform vec3 uGold;
    ${GLSL_NOISE}
    void main(){
      float glyph = texture2D(uMask, vUv).a;
      if (glyph <= 0.003) { gl_FragColor = vec4(0.0); return; }
      float sa = uRes.x / uRes.y;
      vec2 q = vec2(vUv.x * sa, vUv.y);
      float n1 = fbm3(q * 2.2 + 5.7);
      float n2 = snoise(q * 5.0 + vec2(2.3, 8.1)) * 0.5;
      float field = 10.0;
      for (int i = 0; i < 3; i++) {
        vec2 s = vec2(sa * (0.18 + 0.32 * float(i)), 0.5);
        float grow = 0.8 + 0.2 * fract(float(i) * 0.618);
        float r = max(uP * 4.5 * grow, 1e-4);
        field = min(field, distance(q, s) / r);
      }
      float e = field + n1 * 0.38 + n2 * 0.12;
      float vis = (1.0 - smoothstep(0.86, 1.12, e)) * glyph;
      if (vis <= 0.0) { gl_FragColor = vec4(0.0); return; }
      float rim = smoothstep(0.74, 1.0, e) * (1.0 - smoothstep(1.0, 1.2, e));
      vec3 col = mix(vec3(1.0), uGold, rim * 0.7);
      gl_FragColor = vec4(col * vis, vis);
    }`;

  let lgl = null, pLogo = null, pLogoIn = null, logoTexReady = false, logoTex = null, logoMaskTex = null, logoMaskInTex = null, logoMaskReady = false, logoMaskCanvas = null;

  function initLogoGL() {
    lgl = logoFx.getContext('webgl', { premultipliedAlpha: true, alpha: true, antialias: false });
    if (!lgl) return false;
    const sh = (type, src) => {
      const x = lgl.createShader(type);
      lgl.shaderSource(x, src); lgl.compileShader(x);
      if (!lgl.getShaderParameter(x, lgl.COMPILE_STATUS)) { console.error(lgl.getShaderInfoLog(x)); return null; }
      return x;
    };
    const vs = sh(lgl.VERTEX_SHADER, VERT), fs = sh(lgl.FRAGMENT_SHADER, FRAG_LOGO);
    if (!vs || !fs) return false;
    const prog = lgl.createProgram();
    lgl.attachShader(prog, vs); lgl.attachShader(prog, fs);
    lgl.bindAttribLocation(prog, 0, 'aPos');
    lgl.linkProgram(prog);
    if (!lgl.getProgramParameter(prog, lgl.LINK_STATUS)) { console.error(lgl.getProgramInfoLog(prog)); return false; }
    const uni = {};
    const n = lgl.getProgramParameter(prog, lgl.ACTIVE_UNIFORMS);
    for (let i = 0; i < n; i++) {
      const info = lgl.getActiveUniform(prog, i);
      uni[info.name.replace('[0]', '')] = lgl.getUniformLocation(prog, info.name);
    }
    pLogo = { prog, uni };

    // second program on the same context: preloader logo reveal
    const fsIn = sh(lgl.FRAGMENT_SHADER, FRAG_LOGO_IN);
    if (fsIn) {
      const progIn = lgl.createProgram();
      lgl.attachShader(progIn, vs); lgl.attachShader(progIn, fsIn);
      lgl.bindAttribLocation(progIn, 0, 'aPos');
      lgl.linkProgram(progIn);
      if (lgl.getProgramParameter(progIn, lgl.LINK_STATUS)) {
        const uniIn = {};
        const nIn = lgl.getProgramParameter(progIn, lgl.ACTIVE_UNIFORMS);
        for (let i = 0; i < nIn; i++) {
          const info = lgl.getActiveUniform(progIn, i);
          uniIn[info.name.replace('[0]', '')] = lgl.getUniformLocation(progIn, info.name);
        }
        pLogoIn = { prog: progIn, uni: uniIn };
        lgl.useProgram(progIn);
        lgl.uniform1i(uniIn.uMask, 1);
        lgl.uniform3fv(uniIn.uGold, GOLD);
      }
    }

    const buf = lgl.createBuffer();
    lgl.bindBuffer(lgl.ARRAY_BUFFER, buf);
    lgl.bufferData(lgl.ARRAY_BUFFER, new Float32Array([0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1]), lgl.STATIC_DRAW);
    lgl.enableVertexAttribArray(0);
    lgl.vertexAttribPointer(0, 2, lgl.FLOAT, false, 0, 0);
    lgl.useProgram(prog);
    lgl.uniform1f(uni.uTexAspect, TEX_ASPECT);
    lgl.uniform3fv(uni.uGold, GOLD);
    const mkTex = () => {
      const t = lgl.createTexture();
      lgl.bindTexture(lgl.TEXTURE_2D, t);
      lgl.texParameteri(lgl.TEXTURE_2D, lgl.TEXTURE_WRAP_S, lgl.CLAMP_TO_EDGE);
      lgl.texParameteri(lgl.TEXTURE_2D, lgl.TEXTURE_WRAP_T, lgl.CLAMP_TO_EDGE);
      lgl.texParameteri(lgl.TEXTURE_2D, lgl.TEXTURE_MIN_FILTER, lgl.LINEAR);
      lgl.texParameteri(lgl.TEXTURE_2D, lgl.TEXTURE_MAG_FILTER, lgl.LINEAR);
      return t;
    };
    logoTex = mkTex();
    logoMaskTex = mkTex();
    logoMaskInTex = mkTex();
    lgl.uniform1i(uni.uTex, 0);
    lgl.uniform1i(uni.uMask, 1);
    makeLogoMaskTexture();
    return true;
  }

  // glyph alpha mask: logo.svg rasterized once, dilated ~1.5 design px so the
  // pattern tucks under the white logo's antialiased edge (no thin outline)
  function makeLogoMaskTexture() {
    const img = new Image();
    img.onload = () => {
      const W = 2832, H = 382;
      const c = document.createElement('canvas');
      c.width = W; c.height = H;
      const cc = c.getContext('2d');
      const d = 3;
      for (const [ox, oy] of [[0, 0], [d, 0], [-d, 0], [0, d], [0, -d], [d, d], [-d, -d], [d, -d], [-d, d]])
        cc.drawImage(img, ox, oy, W, H);
      lgl.activeTexture(lgl.TEXTURE1);
      lgl.bindTexture(lgl.TEXTURE_2D, logoMaskTex);
      lgl.texImage2D(lgl.TEXTURE_2D, 0, lgl.RGBA, lgl.RGBA, lgl.UNSIGNED_BYTE, c);
      // undilated copy for the preloader reveal — the dilated one renders the
      // glyphs ~1.5px fatter, which popped visibly at the swap to the <img>
      const c2 = document.createElement('canvas');
      c2.width = W; c2.height = H;
      c2.getContext('2d').drawImage(img, 0, 0, W, H);
      lgl.bindTexture(lgl.TEXTURE_2D, logoMaskInTex);
      lgl.texImage2D(lgl.TEXTURE_2D, 0, lgl.RGBA, lgl.RGBA, lgl.UNSIGNED_BYTE, c2);
      lgl.activeTexture(lgl.TEXTURE0);
      logoMaskReady = true;
      logoMaskCanvas = c2; // the mini context uploads the same undilated mask
      if (mgl && miniMaskTex && !miniMaskReady) {
        mgl.activeTexture(mgl.TEXTURE1);
        mgl.bindTexture(mgl.TEXTURE_2D, miniMaskTex);
        mgl.texImage2D(mgl.TEXTURE_2D, 0, mgl.RGBA, mgl.RGBA, mgl.UNSIGNED_BYTE, c2);
        miniMaskReady = true;
      }
      if (fgl && footMaskTex && !footMaskReady) {
        fgl.activeTexture(fgl.TEXTURE1);
        fgl.bindTexture(fgl.TEXTURE_2D, footMaskTex);
        fgl.texImage2D(fgl.TEXTURE_2D, 0, fgl.RGBA, fgl.RGBA, fgl.UNSIGNED_BYTE, c2);
        footMaskReady = true;
      }
    };
    img.src = 'assets/img/logo.svg';
  }

  function makeLogoTexture() {
    if (!lgl || !patSvgText) return;
    const W = 2244, H = 1230;
    const withSize = patSvgText.replace('<svg ', `<svg width="${W}" height="${H}" `);
    const url = URL.createObjectURL(new Blob([withSize], { type: 'image/svg+xml' }));
    const img = new Image();
    img.onload = () => {
      const c = document.createElement('canvas');
      c.width = W; c.height = H;
      c.getContext('2d').drawImage(img, 0, 0, W, H);
      lgl.activeTexture(lgl.TEXTURE0);
      lgl.bindTexture(lgl.TEXTURE_2D, logoTex);
      lgl.texImage2D(lgl.TEXTURE_2D, 0, lgl.RGB, lgl.RGB, lgl.UNSIGNED_BYTE, c);
      URL.revokeObjectURL(url);
      logoTexReady = true;
    };
    img.src = url;
  }

  function resizeLogoFx() {
    const dpr = Math.min(window.devicePixelRatio || 1, 1.5);
    const w = Math.round(LOGO_REST.w * u() * dpr), h = Math.round(LOGO_REST.h * u() * dpr);
    if (logoFx.width !== w || logoFx.height !== h) { logoFx.width = w; logoFx.height = h; }
    if (lgl && pLogo) { lgl.viewport(0, 0, w, h); lgl.useProgram(pLogo.prog); lgl.uniform2f(pLogo.uni.uRes, w, h); }
    if (lgl && pLogoIn) { lgl.useProgram(pLogoIn.prog); lgl.uniform2f(pLogoIn.uni.uRes, w, h); }
  }

  function renderLogoFx(now) {
    if (!lgl || !logoTexReady || !logoMaskReady) return;
    const armed = logoHover && now - logoHoverT0 >= LOGO_HOVER_DELAY;
    const target = armed && lastNavT < 0.05 && !REDUCED && lmxRaw > -1e5 ? 1 : 0;
    lhp += (target - lhp) * (1 - Math.exp(-0.016 * (target > lhp ? 4 : 2.4)));
    if (lhp < 0.004) {
      lhp = 0;
      if (!logoFxClear) { lgl.clearColor(0, 0, 0, 0); lgl.clear(lgl.COLOR_BUFFER_BIT); logoFxClear = true; }
      return;
    }
    logoFxClear = false;
    lmx += (lmxRaw - lmx) * 0.10;
    lmy += (lmyRaw - lmy) * 0.10;
    const sa = logoFx.width / logoFx.height;
    lgl.useProgram(pLogo.prog);
    lgl.activeTexture(lgl.TEXTURE1);
    lgl.bindTexture(lgl.TEXTURE_2D, logoMaskTex);
    lgl.activeTexture(lgl.TEXTURE0);
    lgl.bindTexture(lgl.TEXTURE_2D, logoTex);
    lgl.uniform1f(pLogo.uni.uP, lhp);
    lgl.uniform1f(pLogo.uni.uTime, now / 1000);
    lgl.uniform2f(pLogo.uni.uSeed, (lmx / logoFx.width) * sa, lmy / logoFx.height);
    lgl.clearColor(0, 0, 0, 0);
    lgl.clear(lgl.COLOR_BUFFER_BIT);
    lgl.drawArrays(lgl.TRIANGLES, 0, 6);
  }

  // ---------- footer (underfooter) ----------
  // Same three animations as the rest of the page, re-pointed at the footer:
  // the wordmark forms out of goo like the preloader's, the claim + CTA run
  // the hero's line-draw grammar, and the background is the hero's own
  // vector pattern at FULL colour (dim = 1, i.e. before the stage darkens).
  const footerEl = $('footer');
  const fpCanvas = $('footerPattern');
  const fpctx = fpCanvas ? fpCanvas.getContext('2d', { alpha: false }) : null;
  let fpScale = 1, fpOx = 0, fpOy = 0;
  let fgl = null, pFoot = null, footMaskTex = null, footMaskReady = false;

  function resizeFooterPattern() {
    if (!fpCanvas) return;
    const w = Math.round(fpCanvas.clientWidth * patDpr), h = Math.round(fpCanvas.clientHeight * patDpr);
    if (!w || !h) return;
    if (fpCanvas.width !== w || fpCanvas.height !== h) { fpCanvas.width = w; fpCanvas.height = h; }
    fpScale = Math.max(w / DESIGN_W, h / DESIGN_H);
    fpOx = (w - DESIGN_W * fpScale) / 2;
    fpOy = (h - DESIGN_H * fpScale) / 2;
  }

  // how much of the footer the page has uncovered (0 = fully behind the last
  // section, 1 = the whole band is out)
  function footerExposure() {
    if (!footerEl) return 0;
    const above = footerEl.previousElementSibling;
    const b = above ? above.getBoundingClientRect().bottom : 0;
    return clamp01((window.innerHeight - b) / Math.max(1, footerEl.offsetHeight));
  }

  function initFooterLogoGL() {
    const cv = $('footerLogoFx');
    if (!cv) return false;
    fgl = cv.getContext('webgl', { premultipliedAlpha: true, alpha: true, antialias: false });
    if (!fgl) return false;
    const sh = (type, src) => {
      const x = fgl.createShader(type);
      fgl.shaderSource(x, src); fgl.compileShader(x);
      if (!fgl.getShaderParameter(x, fgl.COMPILE_STATUS)) { console.error(fgl.getShaderInfoLog(x)); return null; }
      return x;
    };
    const vs = sh(fgl.VERTEX_SHADER, VERT), fs = sh(fgl.FRAGMENT_SHADER, FRAG_LOGO_IN);
    if (!vs || !fs) return false;
    const prog = fgl.createProgram();
    fgl.attachShader(prog, vs); fgl.attachShader(prog, fs);
    fgl.bindAttribLocation(prog, 0, 'aPos');
    fgl.linkProgram(prog);
    if (!fgl.getProgramParameter(prog, fgl.LINK_STATUS)) { console.error(fgl.getProgramInfoLog(prog)); return false; }
    const uni = {};
    const n = fgl.getProgramParameter(prog, fgl.ACTIVE_UNIFORMS);
    for (let i = 0; i < n; i++) {
      const info = fgl.getActiveUniform(prog, i);
      uni[info.name.replace('[0]', '')] = fgl.getUniformLocation(prog, info.name);
    }
    pFoot = { prog, uni, cv };
    const buf = fgl.createBuffer();
    fgl.bindBuffer(fgl.ARRAY_BUFFER, buf);
    fgl.bufferData(fgl.ARRAY_BUFFER, new Float32Array([0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1]), fgl.STATIC_DRAW);
    fgl.enableVertexAttribArray(0);
    fgl.vertexAttribPointer(0, 2, fgl.FLOAT, false, 0, 0);
    fgl.useProgram(prog);
    fgl.uniform1i(uni.uMask, 1);
    fgl.uniform3fv(uni.uGold, GOLD);
    footMaskTex = fgl.createTexture();
    fgl.activeTexture(fgl.TEXTURE1);
    fgl.bindTexture(fgl.TEXTURE_2D, footMaskTex);
    fgl.texParameteri(fgl.TEXTURE_2D, fgl.TEXTURE_WRAP_S, fgl.CLAMP_TO_EDGE);
    fgl.texParameteri(fgl.TEXTURE_2D, fgl.TEXTURE_WRAP_T, fgl.CLAMP_TO_EDGE);
    fgl.texParameteri(fgl.TEXTURE_2D, fgl.TEXTURE_MIN_FILTER, fgl.LINEAR);
    fgl.texParameteri(fgl.TEXTURE_2D, fgl.TEXTURE_MAG_FILTER, fgl.LINEAR);
    if (logoMaskCanvas) { fgl.texImage2D(fgl.TEXTURE_2D, 0, fgl.RGBA, fgl.RGBA, fgl.UNSIGNED_BYTE, logoMaskCanvas); footMaskReady = true; }
    return true;
  }

  function resizeFooterLogo() {
    if (!fgl || !pFoot) return;
    const dpr = Math.min(window.devicePixelRatio || 1, 1.5);
    const w = Math.round(pFoot.cv.clientWidth * dpr), h = Math.round(pFoot.cv.clientHeight * dpr);
    if (!w || !h) return;
    if (pFoot.cv.width !== w || pFoot.cv.height !== h) { pFoot.cv.width = w; pFoot.cv.height = h; }
    fgl.viewport(0, 0, w, h);
    fgl.useProgram(pFoot.prog);
    fgl.uniform2f(pFoot.uni.uRes, w, h);
  }

  const footLogoImg = $('footerLogoImg');
  function renderFooterLogoIn(p) {
    p = clamp01(p);
    if (REDUCED || !fgl || !pFoot || !footMaskReady) { // fallback: plain fade
      if (footLogoImg) footLogoImg.style.opacity = easeInOut(p).toFixed(3);
      return;
    }
    if (p >= 1) { // hand over to the crisp <img>
      if (footLogoImg) footLogoImg.style.opacity = '1';
      fgl.clearColor(0, 0, 0, 0);
      fgl.clear(fgl.COLOR_BUFFER_BIT);
      return;
    }
    if (footLogoImg) footLogoImg.style.opacity = '0';
    fgl.useProgram(pFoot.prog);
    fgl.activeTexture(fgl.TEXTURE1);
    fgl.bindTexture(fgl.TEXTURE_2D, footMaskTex);
    fgl.uniform1f(pFoot.uni.uP, easeInOut(p));
    fgl.clearColor(0, 0, 0, 0);
    fgl.clear(fgl.COLOR_BUFFER_BIT);
    fgl.drawArrays(fgl.TRIANGLES, 0, 6);
  }

  // ---------- nav hand-over goo (logo + CTA) ----------
  // scroll-driven variant of the preloader logo reveal: no latch, no <img>
  // management — layoutNav owns the swap and calls this only when t changes
  function renderLogoGoo(p) {
    p = clamp01(p);
    if (REDUCED || !lgl || !pLogoIn || !logoMaskReady) { // fallback: plain fade
      logoImgEl.style.opacity = easeInOut(p).toFixed(3);
      return;
    }
    lgl.useProgram(pLogoIn.prog);
    lgl.activeTexture(lgl.TEXTURE1);
    lgl.bindTexture(lgl.TEXTURE_2D, logoMaskInTex);
    lgl.uniform1f(pLogoIn.uni.uP, easeInOut(p));
    lgl.clearColor(0, 0, 0, 0);
    lgl.clear(lgl.COLOR_BUFFER_BIT);
    lgl.drawArrays(lgl.TRIANGLES, 0, 6);
    logoFxClear = false;
  }

  function clearLogoCanvas() {
    if (!lgl) return;
    lgl.clearColor(0, 0, 0, 0);
    lgl.clear(lgl.COLOR_BUFFER_BIT);
    logoFxClear = true;
  }

  // mini logo goo: own GL context on the compact logo's canvas — the same
  // FRAG_LOGO_IN program and undilated mask, so the compact logo can form
  // while the big one is still dissolving on its own canvas
  const logoMiniFx = $('logoMiniFx');
  let mgl = null, pMini = null, miniMaskTex = null, miniMaskReady = false, miniClear = true;

  function initMiniLogoGL() {
    if (!logoMiniFx) return false;
    mgl = logoMiniFx.getContext('webgl', { premultipliedAlpha: true, alpha: true, antialias: false });
    if (!mgl) return false;
    const sh = (type, src) => {
      const x = mgl.createShader(type);
      mgl.shaderSource(x, src); mgl.compileShader(x);
      if (!mgl.getShaderParameter(x, mgl.COMPILE_STATUS)) { console.error(mgl.getShaderInfoLog(x)); return null; }
      return x;
    };
    const vs = sh(mgl.VERTEX_SHADER, VERT), fs = sh(mgl.FRAGMENT_SHADER, FRAG_LOGO_IN);
    if (!vs || !fs) return false;
    const prog = mgl.createProgram();
    mgl.attachShader(prog, vs); mgl.attachShader(prog, fs);
    mgl.bindAttribLocation(prog, 0, 'aPos');
    mgl.linkProgram(prog);
    if (!mgl.getProgramParameter(prog, mgl.LINK_STATUS)) { console.error(mgl.getProgramInfoLog(prog)); return false; }
    const uni = {};
    const n = mgl.getProgramParameter(prog, mgl.ACTIVE_UNIFORMS);
    for (let i = 0; i < n; i++) {
      const info = mgl.getActiveUniform(prog, i);
      uni[info.name.replace('[0]', '')] = mgl.getUniformLocation(prog, info.name);
    }
    pMini = { prog, uni };
    const buf = mgl.createBuffer();
    mgl.bindBuffer(mgl.ARRAY_BUFFER, buf);
    mgl.bufferData(mgl.ARRAY_BUFFER, new Float32Array([0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1]), mgl.STATIC_DRAW);
    mgl.enableVertexAttribArray(0);
    mgl.vertexAttribPointer(0, 2, mgl.FLOAT, false, 0, 0);
    mgl.useProgram(prog);
    mgl.uniform1i(uni.uMask, 1);
    mgl.uniform3fv(uni.uGold, GOLD);
    miniMaskTex = mgl.createTexture();
    mgl.activeTexture(mgl.TEXTURE1);
    mgl.bindTexture(mgl.TEXTURE_2D, miniMaskTex);
    mgl.texParameteri(mgl.TEXTURE_2D, mgl.TEXTURE_WRAP_S, mgl.CLAMP_TO_EDGE);
    mgl.texParameteri(mgl.TEXTURE_2D, mgl.TEXTURE_WRAP_T, mgl.CLAMP_TO_EDGE);
    mgl.texParameteri(mgl.TEXTURE_2D, mgl.TEXTURE_MIN_FILTER, mgl.LINEAR);
    mgl.texParameteri(mgl.TEXTURE_2D, mgl.TEXTURE_MAG_FILTER, mgl.LINEAR);
    if (logoMaskCanvas) { mgl.texImage2D(mgl.TEXTURE_2D, 0, mgl.RGBA, mgl.RGBA, mgl.UNSIGNED_BYTE, logoMaskCanvas); miniMaskReady = true; }
    return true;
  }

  function resizeMiniFx() {
    if (!mgl || !pMini) return;
    const dpr = Math.min(window.devicePixelRatio || 1, 1.5);
    const w = Math.round(NAV.logoH * (LOGO_REST.w / LOGO_REST.h) * dpr), h = Math.round(NAV.logoH * dpr);
    if (logoMiniFx.width !== w || logoMiniFx.height !== h) { logoMiniFx.width = w; logoMiniFx.height = h; }
    mgl.viewport(0, 0, w, h);
    mgl.useProgram(pMini.prog);
    mgl.uniform2f(pMini.uni.uRes, w, h);
  }

  function renderLogoMiniGoo(p) {
    p = clamp01(p);
    if (REDUCED || !mgl || !pMini || !miniMaskReady) { // fallback: plain fade
      logoMiniImg.style.opacity = easeInOut(p).toFixed(3);
      return;
    }
    mgl.useProgram(pMini.prog);
    mgl.uniform1f(pMini.uni.uP, easeInOut(p));
    mgl.clearColor(0, 0, 0, 0);
    mgl.clear(mgl.COLOR_BUFFER_BIT);
    mgl.drawArrays(mgl.TRIANGLES, 0, 6);
    miniClear = false;
  }

  function clearMiniCanvas() {
    if (!mgl || miniClear) return;
    mgl.clearColor(0, 0, 0, 0);
    mgl.clear(mgl.COLOR_BUFFER_BIT);
    miniClear = true;
  }

  // the gold slab of the big CTA, dissolving into the same goo holes as the
  // logo (own tiny GL context on a canvas inside the button; text is DOM and
  // bows out separately)
  const ctaFx = $('ctaFx');
  const FRAG_CTA = `
    precision mediump float;
    varying vec2 vUv;
    uniform vec2 uRes;
    uniform float uP;
    uniform float uCover;
    uniform vec3 uGold;
    ${GLSL_NOISE}
    void main(){
      float sa = uRes.x / uRes.y;
      vec2 q = vec2(vUv.x * sa, vUv.y);
      float n1 = fbm3(q * 2.2 + 5.7);
      float n2 = snoise(q * 5.0 + vec2(2.3, 8.1)) * 0.5;
      float field = 10.0;
      for (int i = 0; i < 3; i++) {
        vec2 s = vec2(sa * (0.18 + 0.32 * float(i)), 0.5);
        float grow = 0.8 + 0.2 * fract(float(i) * 0.618);
        float r = max(uP * uCover * grow, 1e-4);
        field = min(field, distance(q, s) / r);
      }
      float e = field + n1 * 0.38 + n2 * 0.12;
      float vis = 1.0 - smoothstep(0.86, 1.12, e);
      if (vis <= 0.0) { gl_FragColor = vec4(0.0); return; }
      float rim = smoothstep(0.74, 1.0, e) * (1.0 - smoothstep(1.0, 1.2, e));
      vec3 col = mix(uGold, vec3(0.95), rim * 0.5);
      gl_FragColor = vec4(col * vis, vis);
    }`;

  let cgl = null, pCta = null, ctaGooClear = true;

  function initCtaGL() {
    if (!ctaFx) return false;
    cgl = ctaFx.getContext('webgl', { premultipliedAlpha: true, alpha: true, antialias: false });
    if (!cgl) return false;
    const sh = (type, src) => {
      const x = cgl.createShader(type);
      cgl.shaderSource(x, src); cgl.compileShader(x);
      if (!cgl.getShaderParameter(x, cgl.COMPILE_STATUS)) { console.error(cgl.getShaderInfoLog(x)); return null; }
      return x;
    };
    const vs = sh(cgl.VERTEX_SHADER, VERT), fs = sh(cgl.FRAGMENT_SHADER, FRAG_CTA);
    if (!vs || !fs) return false;
    const prog = cgl.createProgram();
    cgl.attachShader(prog, vs); cgl.attachShader(prog, fs);
    cgl.bindAttribLocation(prog, 0, 'aPos');
    cgl.linkProgram(prog);
    if (!cgl.getProgramParameter(prog, cgl.LINK_STATUS)) { console.error(cgl.getProgramInfoLog(prog)); return false; }
    const uni = {};
    const n = cgl.getProgramParameter(prog, cgl.ACTIVE_UNIFORMS);
    for (let i = 0; i < n; i++) {
      const info = cgl.getActiveUniform(prog, i);
      uni[info.name.replace('[0]', '')] = cgl.getUniformLocation(prog, info.name);
    }
    pCta = { prog, uni };
    const buf = cgl.createBuffer();
    cgl.bindBuffer(cgl.ARRAY_BUFFER, buf);
    cgl.bufferData(cgl.ARRAY_BUFFER, new Float32Array([0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1]), cgl.STATIC_DRAW);
    cgl.enableVertexAttribArray(0);
    cgl.vertexAttribPointer(0, 2, cgl.FLOAT, false, 0, 0);
    cgl.useProgram(prog);
    cgl.uniform3fv(uni.uGold, GOLD);
    return true;
  }

  function resizeCtaFx() {
    if (!cgl || !pCta) return;
    const dpr = Math.min(window.devicePixelRatio || 1, 1.5);
    const w = Math.round(CTA_REST.w * u() * dpr), h = Math.round(CTA_REST.h * u() * dpr);
    if (ctaFx.width !== w || ctaFx.height !== h) { ctaFx.width = w; ctaFx.height = h; }
    cgl.viewport(0, 0, w, h);
    cgl.useProgram(pCta.prog);
    cgl.uniform2f(pCta.uni.uRes, w, h);
    // r at uP=1 covers the farthest corner incl. the noise margin
    const sa = w / h;
    cgl.uniform1f(pCta.uni.uCover, Math.hypot(sa * 0.18, 0.5) / 0.24);
  }

  function renderCtaGoo(p) { // p < 0: clear once (canvas idle)
    if (REDUCED || !cgl || !pCta) {
      if (p >= 0) cta.style.opacity = Math.max(0.001, easeInOut(clamp01(p))).toFixed(3);
      return;
    }
    if (p < 0) {
      if (!ctaGooClear) { cgl.clearColor(0, 0, 0, 0); cgl.clear(cgl.COLOR_BUFFER_BIT); ctaGooClear = true; }
      return;
    }
    cgl.useProgram(pCta.prog);
    cgl.uniform1f(pCta.uni.uP, easeInOut(clamp01(p)));
    cgl.clearColor(0, 0, 0, 0);
    cgl.clear(cgl.COLOR_BUFFER_BIT);
    cgl.drawArrays(cgl.TRIANGLES, 0, 6);
    ctaGooClear = false;
  }

  // ---------- image goo reveal (shared) ----------
  // Client rev: the --ifill shimmer on section photos read as cheap. The
  // crisis / quote / screens images now form out of goo blobs — the
  // preloader logo reveal (FRAG_LOGO_IN's field, seeds, noise and rim)
  // INVERTED into an eroding cover: section-coloured cover outside the
  // blobs, gold rim on the melt edge, image showing through inside. ONE
  // shared offscreen WebGL canvas renders every reveal (contexts are
  // scarce); each media gets a lazy 2D overlay the frame is copied onto.
  // No-WebGL fallback: the old --ifill shimmer CSS still stands.
  const FRAG_IMG_IN = `
    precision mediump float;
    varying vec2 vUv;
    uniform vec2 uRes;
    uniform float uP;
    uniform vec3 uGold;
    uniform vec3 uCover;
    uniform sampler2D uTex;
    uniform float uUseTex;
    ${GLSL_NOISE}
    void main(){
      float sa = uRes.x / uRes.y;
      vec2 q = vec2(vUv.x * sa, vUv.y);
      float n1 = fbm3(q * 2.2 + 5.7);
      float n2 = snoise(q * 5.0 + vec2(2.3, 8.1)) * 0.5;
      float field = 10.0;
      for (int i = 0; i < 3; i++) {
        vec2 s = vec2(sa * (0.18 + 0.32 * float(i)), 0.5);
        float grow = 0.8 + 0.2 * fract(float(i) * 0.618);
        float r = max(uP * 4.5 * grow, 1e-4);
        field = min(field, distance(q, s) / r);
      }
      float e = field + n1 * 0.38 + n2 * 0.12;
      float vis = 1.0 - smoothstep(0.86, 1.12, e);
      float rim = smoothstep(0.74, 1.0, e) * (1.0 - smoothstep(1.0, 1.2, e));
      float a = max(1.0 - vis, rim * 0.85);
      if (a <= 0.002) { gl_FragColor = vec4(0.0); return; }
      vec3 cov = uCover;
      if (uUseTex > 0.5) {
        // washed take on the photo itself: grey, lifted, low contrast — the
        // goo holes then reveal the original underneath (team carousel)
        vec3 tc = texture2D(uTex, vUv).rgb;
        float lu = dot(tc, vec3(0.299, 0.587, 0.114));
        cov = mix(vec3(lu), vec3(0.78), 0.55);
      }
      vec3 col = mix(cov, uGold, clamp(rim * 0.9, 0.0, 1.0));
      gl_FragColor = vec4(col * a, a);
    }`;

  let igl = null, pImg = null, igCv = null, igFail = false;
  function initImgGoo() {
    igCv = document.createElement('canvas');
    igl = igCv.getContext('webgl', { premultipliedAlpha: true, alpha: true, antialias: false });
    if (!igl) { igFail = true; return; }
    const sh = (type, src) => {
      const x = igl.createShader(type);
      igl.shaderSource(x, src); igl.compileShader(x);
      if (!igl.getShaderParameter(x, igl.COMPILE_STATUS)) { console.error(igl.getShaderInfoLog(x)); return null; }
      return x;
    };
    const vs = sh(igl.VERTEX_SHADER, VERT), fs = sh(igl.FRAGMENT_SHADER, FRAG_IMG_IN);
    if (!vs || !fs) { igFail = true; return; }
    const prog = igl.createProgram();
    igl.attachShader(prog, vs); igl.attachShader(prog, fs);
    igl.bindAttribLocation(prog, 0, 'aPos');
    igl.linkProgram(prog);
    if (!igl.getProgramParameter(prog, igl.LINK_STATUS)) { igFail = true; return; }
    const uni = {};
    const n = igl.getProgramParameter(prog, igl.ACTIVE_UNIFORMS);
    for (let i = 0; i < n; i++) {
      const info = igl.getActiveUniform(prog, i);
      uni[info.name.replace('[0]', '')] = igl.getUniformLocation(prog, info.name);
    }
    pImg = { prog, uni };
    const buf = igl.createBuffer();
    igl.bindBuffer(igl.ARRAY_BUFFER, buf);
    igl.bufferData(igl.ARRAY_BUFFER, new Float32Array([0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1]), igl.STATIC_DRAW);
    igl.enableVertexAttribArray(0);
    igl.vertexAttribPointer(0, 2, igl.FLOAT, false, 0, 0);
    igl.useProgram(prog);
    igl.uniform3fv(uni.uGold, GOLD);
    igl.uniform1i(uni.uTex, 0);
    const wt = igl.createTexture();
    igl.bindTexture(igl.TEXTURE_2D, wt);
    igl.texImage2D(igl.TEXTURE_2D, 0, igl.RGB, 1, 1, 0, igl.RGB, igl.UNSIGNED_BYTE, new Uint8Array([255, 255, 255]));
    pImg.white = wt;
  }

  const igMedia = new Map(); // mediaEl -> { cv, g, p }
  function imgGooSet(media, p, coverCss, coverVec) {
    p = clamp01(p);
    if (!igl && !igFail) initImgGoo();
    if (igFail) { // no WebGL: the CSS shimmer takes over, driven as before
      media.style.setProperty('--ifill', lerp(-34, 124, p).toFixed(1) + '%');
      return;
    }
    let st = igMedia.get(media);
    if (!st) {
      const cv = document.createElement('canvas');
      cv.className = 'ggoo';
      cv.setAttribute('aria-hidden', 'true');
      media.appendChild(cv);
      media.classList.add('ggoo-on'); // kills the ::after shimmer
      st = { cv, g: cv.getContext('2d'), p: -1 };
      igMedia.set(media, st);
    }
    if (p === st.p) return;
    st.p = p;
    const w = media.clientWidth, h = media.clientHeight;
    if (!w || !h) { st.p = -1; return; }
    const rw = Math.min(720, Math.round(w)), rh = Math.max(2, Math.round(rw * h / w));
    if (st.cv.width !== rw || st.cv.height !== rh) { st.cv.width = rw; st.cv.height = rh; }
    if (p >= 1) { st.g.clearRect(0, 0, rw, rh); return; }
    if (p <= 0) { st.g.fillStyle = coverCss; st.g.fillRect(0, 0, rw, rh); return; }
    if (igCv.width !== rw || igCv.height !== rh) { igCv.width = rw; igCv.height = rh; }
    igl.viewport(0, 0, rw, rh);
    igl.useProgram(pImg.prog);
    igl.bindTexture(igl.TEXTURE_2D, pImg.white);
    igl.uniform1f(pImg.uni.uUseTex, 0);
    igl.uniform2f(pImg.uni.uRes, rw, rh);
    igl.uniform1f(pImg.uni.uP, easeInOut(p));
    igl.uniform3fv(pImg.uni.uCover, coverVec);
    igl.clearColor(0, 0, 0, 0);
    igl.clear(igl.COLOR_BUFFER_BIT);
    igl.drawArrays(igl.TRIANGLES, 0, 6);
    st.g.clearRect(0, 0, rw, rh);
    st.g.drawImage(igCv, 0, 0);
  }

  // photo-cover variant: the eroding cover is the photo itself, washed grey
  // in-shader; the holes reveal the untouched image underneath. Own overlay
  // (.ggoo--wash) UNDER the entry cover, own texture per media.
  const igMedia2 = new Map();
  function imgGooTexSet(media, img, p) {
    p = clamp01(p);
    if (!igl && !igFail) initImgGoo();
    if (igFail) { // no WebGL: plain CSS wash toggle
      media.style.filter = p >= 0.5 ? '' : 'grayscale(1) contrast(0.6) brightness(1.3)';
      return;
    }
    let st = igMedia2.get(media);
    if (!st) {
      const cv = document.createElement('canvas');
      cv.className = 'ggoo ggoo--wash';
      cv.setAttribute('aria-hidden', 'true');
      media.appendChild(cv);
      st = { cv, g: cv.getContext('2d'), p: -1, tex: null, key: '' };
      igMedia2.set(media, st);
    }
    if (p === st.p) return;
    st.p = p;
    const w = media.clientWidth, h = media.clientHeight;
    if (!w || !h) { st.p = -1; return; }
    const rw = Math.min(720, Math.round(w)), rh = Math.max(2, Math.round(rw * h / w));
    if (st.cv.width !== rw || st.cv.height !== rh) { st.cv.width = rw; st.cv.height = rh; }
    if (p >= 1) { st.g.clearRect(0, 0, rw, rh); return; }
    if (!img.complete || !img.naturalWidth) { st.p = -1; return; }
    const key = rw + 'x' + rh + '|' + (img.currentSrc || img.src);
    if (st.key !== key) { // cover-crop the photo into the texture (centre-top)
      const tc = document.createElement('canvas');
      tc.width = rw; tc.height = rh;
      const sc = Math.max(rw / img.naturalWidth, rh / img.naturalHeight);
      tc.getContext('2d').drawImage(img, (rw - img.naturalWidth * sc) / 2, 0, img.naturalWidth * sc, img.naturalHeight * sc);
      if (!st.tex) st.tex = igl.createTexture();
      igl.bindTexture(igl.TEXTURE_2D, st.tex);
      igl.texParameteri(igl.TEXTURE_2D, igl.TEXTURE_WRAP_S, igl.CLAMP_TO_EDGE);
      igl.texParameteri(igl.TEXTURE_2D, igl.TEXTURE_WRAP_T, igl.CLAMP_TO_EDGE);
      igl.texParameteri(igl.TEXTURE_2D, igl.TEXTURE_MIN_FILTER, igl.LINEAR);
      igl.texParameteri(igl.TEXTURE_2D, igl.TEXTURE_MAG_FILTER, igl.LINEAR);
      igl.texImage2D(igl.TEXTURE_2D, 0, igl.RGB, igl.RGB, igl.UNSIGNED_BYTE, tc);
      st.key = key;
    }
    if (igCv.width !== rw || igCv.height !== rh) { igCv.width = rw; igCv.height = rh; }
    igl.viewport(0, 0, rw, rh);
    igl.useProgram(pImg.prog);
    igl.bindTexture(igl.TEXTURE_2D, st.tex);
    igl.uniform1f(pImg.uni.uUseTex, 1);
    igl.uniform2f(pImg.uni.uRes, rw, rh);
    igl.uniform1f(pImg.uni.uP, easeInOut(p));
    igl.uniform3fv(pImg.uni.uCover, COVER_EB.vec);
    igl.clearColor(0, 0, 0, 0);
    igl.clear(igl.COLOR_BUFFER_BIT);
    igl.drawArrays(igl.TRIANGLES, 0, 6);
    st.g.clearRect(0, 0, rw, rh);
    st.g.drawImage(igCv, 0, 0);
  }
  const COVER_BLACK = { css: '#121212', vec: [0x12 / 255, 0x12 / 255, 0x12 / 255] };
  const COVER_GREY = { css: '#313131', vec: [0x31 / 255, 0x31 / 255, 0x31 / 255] };
  const COVER_WHITE = { css: '#ffffff', vec: [1, 1, 1] };
  const COVER_EB = { css: '#ebebeb', vec: [0xeb / 255, 0xeb / 255, 0xeb / 255] };

  // ---------- asset reveals (client rev) ----------
  // Photos and product shots used to ride their section's scroll progress,
  // which on a fast scroll played the whole goo reveal in a blink. Each media
  // now starts a TIME-driven reveal the first time it enters the viewport.
  const REVEAL_MS = 1800; // one calm goo reveal, start to finish
  const RVL = [];
  const rvlObs = ('IntersectionObserver' in window) ? new IntersectionObserver((ents) => {
    for (const e of ents) {
      if (!e.isIntersecting) continue;
      const st = RVL.find((r) => r.el === e.target);
      rvlObs.unobserve(e.target);
      if (!st || st.t0 >= 0) continue;
      // a group forms as one image: the first member to show starts them all
      for (const r of RVL) if (r === st || (st.group && r.group === st.group)) {
        if (r.t0 < 0) { r.t0 = performance.now() + r.delay; if (r !== st) rvlObs.unobserve(r.el); }
      }
    }
  }, { rootMargin: '0px 0px -12% 0px', threshold: 0.01 }) : null;

  function addReveal(el, cover, dur, delay, group) {
    if (!el) return;
    const st = { el, cover, dur: dur || REVEAL_MS, delay: delay || 0, t0: -1, p: -1, group: group || '' };
    RVL.push(st);
    if (REDUCED || !rvlObs) { st.t0 = 0; return; }
    rvlObs.observe(el);
  }

  function updateReveals(ts) {
    for (const r of RVL) {
      if (r.p >= 1) continue;
      const p = r.t0 < 0 ? 0 : (REDUCED ? 1 : clamp01((ts - r.t0) / r.dur));
      if (p === r.p) continue;
      r.p = p;
      imgGooSet(r.el, p, r.cover.css, r.cover.vec);
    }
  }

  // whole-paragraph reveal — long copy comes in as ONE block (client rev:
  // word-by-word on a big paragraph made too much happen at once)
  const BLK_IN = 0.16;
  function revealBlock(el, p, rs, travel, mul) {
    if (!el) return;
    const tr = easeOut(seg(p, rs, rs + BLK_IN));
    const st = el.style;
    st.opacity = (tr * (mul === undefined ? 1 : mul)).toFixed(3);
    st.transform = tr >= 1 ? '' : `translate3d(0, ${((1 - tr) * travel).toFixed(1)}px, 0)`;
  }

  // ---------- crisis section (pinned accordion) ----------
  // E: entry — section top rides viewport-bottom → pin engage; every word
  //    except subheads 002/003 sweeps in waste-style.
  // C: pinned — phase A hands the active state 001→002 (media 340↔140,
  //    subhead swap), phase B hands it 002→003. Media heights move in sync
  //    so the list height stays constant (no reflow jumps).
  const crisis = $('crisis');
  const crisisPin = crisis.querySelector('.crisis__pin');
  const cItems = [...crisis.querySelectorAll('.crisis-item')];
  const cDescs = cItems.map((it) => it.querySelector('.crisis-item__desc'));
  const cMedias = cItems.map((it) => it.querySelector('.crisis-item__media'));

  const CE_RISE = 0.08, CE_LAG = 0.02, CE_FILL = 0.10; // entry windows, in E

  // entry cascade (in E): the section headline first, around mid-viewport;
  // then each box in order — box heading (number + title), photo, subhead
  const BOX_S = [0.58, 0.68, 0.78];
  const cEntry = [];
  const addWords = (els, start, spread, seed) => els.forEach((el, i) =>
    cEntry.push({ el, rs: start + (i / els.length) * spread + hash01(i + seed) * 0.012 }));
  addWords([...crisis.querySelectorAll('.crisis__head .cw')], 0.44, 0.10, 300);
  cItems.forEach((it, bi) => {
    addWords([...it.querySelectorAll('.crisis-item__num .cw, .crisis-item__title .cw')], BOX_S[bi], 0.03, 320 + bi * 40);
  });
  cMedias.forEach((m) => addReveal(m, COVER_BLACK, 0, 0, 'crisis')); // the three form as one (client rev)

  function sweepWord(m, p, rise, lag, fill, travel) {
    const tr = easeOut(seg(p, m.rs, m.rs + rise));
    const st = m.el.style;
    st.opacity = tr.toFixed(3);
    st.transform = tr >= 1 ? '' : `translate3d(0, ${((1 - tr) * travel).toFixed(1)}px, 0)`;
    st.setProperty('--fill', lerp(-24, 124, seg(p, m.rs + lag, m.rs + lag + fill)).toFixed(1) + '%');
  }

  let lastCrisisKey = '';
  function updateCrisis(E, C) {
    const key = E.toFixed(4) + '|' + C.toFixed(4);
    if (key === lastCrisisKey) return;
    lastCrisisKey = key;
    const travel = 38 * u();

    for (const m of cEntry) sweepWord(m, E, CE_RISE, CE_LAG, CE_FILL, travel);

    // body copy reveals whole; 001 also fades out as the accordion hands over
    revealBlock(cDescs[0], E, BOX_S[0] + 0.10, travel, 1 - seg(C, 0.06, 0.22));
    revealBlock(cDescs[1], C, 0.18, travel, 1 - seg(C, 0.56, 0.72));
    revealBlock(cDescs[2], C, 0.68, travel);

    const a = easeInOut(seg(C, 0.06, 0.44)); // 001 → 002
    const b = easeInOut(seg(C, 0.56, 0.94)); // 002 → 003
    cItems[0].style.setProperty('--mh', lerp(340, 140, a).toFixed(1));
    cItems[1].style.setProperty('--mh', lerp(lerp(140, 340, a), 140, b).toFixed(1));
    cItems[2].style.setProperty('--mh', lerp(140, 340, b).toFixed(1));
    cItems[0].style.setProperty('--chw', lerp(100, 26, a).toFixed(1));
    cItems[1].style.setProperty('--chw', lerp(lerp(26, 100, a), 26, b).toFixed(1));
    cItems[2].style.setProperty('--chw', lerp(26, 100, b).toFixed(1));
  }

  const CR = { E: 0, C: 0 };
  function crisisProgress() {
    const vh = window.innerHeight;
    const top = crisis.getBoundingClientRect().top;
    // rect.top at pin engage — mirrors the sticky top in styles.css
    const k = u();
    const Ts = -200 * k;
    CR.E = clamp01((vh - top) / Math.max(1, vh - Ts));
    CR.C = clamp01((Ts - top) / Math.max(1, crisis.offsetHeight - crisisPin.offsetHeight));
  }

  // ---------- map section (lead sweep + one-shot map start) ----------
  const mapSec = $('map');
  const mapWords = mapSec
    ? [...mapSec.querySelectorAll('.map__lead .cw')].map((el, i, a) =>
        ({ el, rs: 0.30 + (i / a.length) * 0.12 + hash01(i + 600) * 0.012 }))
    : [];
  let lastMapE = -1;

  function mapProgress() {
    if (!mapSec) return 0;
    const vh = window.innerHeight;
    return clamp01((vh - mapSec.getBoundingClientRect().top) / (vh * 0.85));
  }

  const mapStage = mapSec ? mapSec.querySelector('.map__stage') : null;

  function updateMap(E) {
    if (!mapSec || E === lastMapE) return;
    lastMapE = E;
    const travel = 38 * u();
    for (const m of mapWords) sweepWord(m, E, CE_RISE, CE_LAG, CE_FILL, travel);
  }

  // ---------- quote + screens sections (entry choreography) ----------
  // Same grammar as crisis/map: words sweep in, photos shimmer L→R, plain
  // lines (roles, subs, list rows) fade-rise. Each element rides its own
  // section-entry progress (viewport-bottom → 85% of a viewport).
  const wordsIn = (root, sel, start, spread, seed) => [...root.querySelectorAll(sel)]
    .map((el, i, a) => ({ el, rs: start + (i / Math.max(1, a.length)) * spread + hash01(i + seed) * 0.012 }));

  const quoteSec = $('quote');
  const quoteMedia = quoteSec ? quoteSec.querySelector('.quote__media') : null;
  const quoteText = quoteSec ? quoteSec.querySelector('.quote__text') : null;
  const qWords = quoteSec ? wordsIn(quoteSec, '.quote__name .cw', 0.56, 0.03, 730) : [];
  addReveal(quoteMedia, COVER_GREY, 0, 700); // the quote reads first, then Jeff forms
  const qFr = quoteSec
    ? [...quoteSec.querySelectorAll('.fr')].map((el, i) => ({ el, rs: 0.60 + i * 0.04 }))
    : [];

  const screensSec = $('screens');
  const sHeadWords = screensSec ? wordsIn(screensSec, '.screens__head .cw', 0.38, 0.10, 800) : [];
  const sItems = screensSec
    ? [...screensSec.querySelectorAll('.screen-item')].map((it, bi) => ({
        el: it,
        media: it.querySelector('.screen-item__media'),
        words: wordsIn(it, '.cw', 0.30, 0.06, 820 + bi * 40),
        fr: [...it.querySelectorAll('.fr')].map((el, i) => ({ el, rs: 0.40 + i * 0.045 })),
      }))
    : [];
  sItems.forEach((s) => addReveal(s.media, COVER_WHITE));

  function fadeRise(m, p, travel) {
    const tr = easeOut(seg(p, m.rs, m.rs + 0.10));
    const st = m.el.style;
    st.opacity = tr.toFixed(3);
    st.transform = tr >= 1 ? '' : `translate3d(0, ${((1 - tr) * travel).toFixed(1)}px, 0)`;
  }

  function sectionE(el) {
    const vh = window.innerHeight;
    // 1.05 viewports of travel (was 0.85) — fast scroll compressed the whole
    // cascade into a blink (client rev)
    return clamp01((vh - el.getBoundingClientRect().top) / (vh * 1.05));
  }

  // security + team ride the same per-section entry drive
  const securitySec = $('security');
  const secWords = securitySec ? wordsIn(securitySec, '.cw', 0.35, 0.10, 900) : [];
  const secFr = securitySec ? [...securitySec.querySelectorAll('.fr')].map((el, i) => ({ el, rs: 0.52 + i * 0.05 })) : [];
  const teamSec = $('team');
  const teamWords = teamSec
    ? [...wordsIn(teamSec, '.team__head .cw', 0.30, 0.10, 950),
       ...wordsIn(teamSec, '.team__list .is-active .team__name .cw', 0.46, 0.04, 970)]
    : [];
  const teamFr = teamSec ? [...teamSec.querySelectorAll('.fr')].map((el, i) => ({ el, rs: 0.48 + i * 0.04 })) : [];
  const teamPhotos = teamSec ? [...teamSec.querySelectorAll('.team__photo')].map((el) => ({ el })) : [];

  // ---------- team member carousel (pinned) ----------
  // T = pinned progress over --team-track; three eased hand-over windows sum
  // into a continuous active index `act` (0..3). Per member: the portrait
  // grows 285x343.5 <-> 380x458, the strip re-centres the active portrait at
  // 599u, the list entry brightens 0.2 <-> 1, and the bios crossfade (both
  // sides dip to 0 around a hand-over midpoint, so texts never overlap).
  const teamPin = teamSec ? teamSec.querySelector('.team__pin') : null;
  const TEAM = teamSec ? {
    lis: [...teamSec.querySelectorAll('.team__list li')],
    chips: [...teamSec.querySelectorAll('.team__list .team__chip')],
    bios: [...teamSec.querySelectorAll('.team__bio-item')],
    strip: teamSec.querySelector('.team__strip'),
    list: teamSec.querySelector('.team__list'),
    head: teamSec.querySelector('.team__head'),
    imgs: [...teamSec.querySelectorAll('.team__photo img')],
  } : null;
  const TW_WIN = [[0.06, 0.30], [0.38, 0.62], [0.70, 0.94]];

  // click a name -> smooth-scroll the pin to that member's plateau (the
  // native smooth scroll is picked up as an external scroll and resynced)
  const TEAM_T = [0.02, 0.34, 0.66, 0.98];
  if (TEAM) TEAM.lis.forEach((li, i) => li.addEventListener('click', () => {
    const pinH = teamPin.offsetHeight;
    const Ts = teamStickyTop();
    const y = teamSec.offsetTop - Ts + TEAM_T[i] * (teamSec.offsetHeight - pinH);
    window.scrollTo({ top: y, behavior: 'smooth' });
  }));

  function teamT() {
    if (!teamPin) return 0;
    const pinH = teamPin.offsetHeight;
    const top = teamSec.getBoundingClientRect().top;
    return clamp01((teamStickyTop() - top) / Math.max(1, teamSec.offsetHeight - pinH));
  }

  // sticky top of the band — mirrors the CSS: centred in the viewport, but
  // never so high that the heading (150u down) slides under the fixed nav
  function teamStickyTop() {
    if (!teamPin) return 0;
    const k = u();
    return Math.max(64 - 150 * k, (window.innerHeight - teamPin.offsetHeight) / 2);
  }

  const washW = [0, 0, 0, 0]; // photo wash/reveal weights — time-paced, not scrubbed
  function updateTeamCarousel(T, dt) {
    if (!TEAM) return;
    const k = u();

    let act = 0;
    for (const w of TW_WIN) act += easeInOut(seg(T, w[0], w[1]));
    const n = teamPhotos.length;
    // the active photo's reveal runs on its OWN clock: a fast scrub used to
    // play the whole wash->original in a blink (client rev)
    const ai = Math.max(0, Math.min(n - 1, Math.round(act)));
    const kRise = dt ? 1 - Math.exp(-dt * 1.8) : 1;  // reveal: calm
    const kFall = dt ? 1 - Math.exp(-dt * 5.0) : 1;  // wash-out: quick, it must not linger
    const hs = [];
    for (let i = 0; i < n; i++) {
      const wgt = clamp01(1 - Math.abs(act - i));
      const ph = lerp(343.5, 458, wgt) * k;
      const st = teamPhotos[i].el.style;
      st.width = (lerp(285, 380, wgt) * k).toFixed(2) + 'px';
      st.height = ph.toFixed(2) + 'px';
      hs.push(ph);
      if (TEAM.lis[i]) TEAM.lis[i].style.opacity = lerp(0.2, 1, wgt).toFixed(3);
      // active badge takes the CTA gold (grey-200 -> gold-500)
      if (TEAM.chips[i]) TEAM.chips[i].style.background =
        'rgb(' + Math.round(lerp(115, 174, wgt)) + ',' + Math.round(lerp(115, 154, wgt)) + ',' + Math.round(lerp(115, 41, wgt)) + ')';
      // inactive portraits sit under a washed-grey take of themselves; the
      // activation opens goo holes onto the original
      const tgt = i === ai ? 1 : 0;
      washW[i] += (tgt - washW[i]) * (tgt < washW[i] ? kFall : kRise);
      // leaving a plateau the wash never trails the scrub (client: the
      // active->inactive change landed too late and pulled the eye back)
      if (i !== ai) washW[i] = Math.min(washW[i], wgt * 1.15);
      if (Math.abs(washW[i] - tgt) < 0.002) washW[i] = tgt;
      if (TEAM.imgs[i]) imgGooTexSet(teamPhotos[i].el, TEAM.imgs[i], washW[i]);
      if (TEAM.bios[i]) {
        const op = seg(wgt, 0.5, 0.95);
        const bs = TEAM.bios[i].style;
        bs.opacity = op.toFixed(3);
        bs.visibility = op <= 0 ? 'hidden' : 'visible';
      }
    }
    const gap = 20 * k;
    const centers = [];
    let y = 0;
    for (let i = 0; i < n; i++) { centers.push(y + hs[i] / 2); y += hs[i] + gap; }
    const i0 = Math.min(n - 1, Math.floor(act)), i1 = Math.min(n - 1, i0 + 1);
    const cAct = lerp(centers[i0], centers[i1], act - i0);
    TEAM.strip.style.transform = 'translate(-50%, ' + (599 * k - cAct).toFixed(2) + 'px)';
    // the names ride along: the active one stays on the portrait's centre line
    if (TEAM.list) {
      const nc = TEAM.lis.map((li) => li.offsetTop + li.offsetHeight / 2);
      // …but never far enough to climb into the heading (client rev)
      const headBot = TEAM.head ? TEAM.head.offsetTop + TEAM.head.offsetHeight : 0;
      const up = Math.min(lerp(nc[i0], nc[i1], act - i0), Math.max(0, TEAM.list.offsetTop - headBot - 32 * k));
      TEAM.list.style.transform = 'translateY(' + (-up).toFixed(2) + 'px)';
    }
  }

  let qS = null, shS = null, seS = null, teS = null, teTs = null;
  const siS = [null, null, null];
  let lastQSKey = '';
  function updateQuoteScreens(dt, snap) {
    const sm = (cur, raw) => {
      if (cur === null || snap || REDUCED) return raw;
      const n = cur + (raw - cur) * (1 - Math.exp(-dt * 6.5));
      return Math.abs(raw - n) < 0.0004 ? raw : n;
    };
    if (quoteSec) qS = sm(qS, sectionE(quoteSec));
    if (screensSec) {
      shS = sm(shS, sectionE(screensSec));
      sItems.forEach((s, i) => { siS[i] = sm(siS[i], sectionE(s.el)); });
    }
    if (securitySec) seS = sm(seS, sectionE(securitySec));
    if (teamSec) { teS = sm(teS, sectionE(teamSec)); teTs = sm(teTs, teamT()); }
    updateTeamCarousel(teTs, dt); // own clock for the wash — runs past the key gate
    const key = [qS, shS, seS, teS, teTs, ...siS].map((v) => (v === null ? 'x' : v.toFixed(4))).join('|');
    if (key === lastQSKey) return;
    lastQSKey = key;
    const travel = 38 * u();
    if (quoteSec) {
      for (const m of qWords) sweepWord(m, qS, CE_RISE, CE_LAG, CE_FILL, travel);
      for (const m of qFr) fadeRise(m, qS, travel);
      revealBlock(quoteText, qS, 0.30, travel);
    }
    for (const m of sHeadWords) sweepWord(m, shS, CE_RISE, CE_LAG, CE_FILL, travel);
    sItems.forEach((s, i) => {
      const E = siS[i];
      for (const m of s.words) sweepWord(m, E, CE_RISE, CE_LAG, CE_FILL, travel);
      for (const m of s.fr) fadeRise(m, E, travel);
    });
    for (const m of secWords) sweepWord(m, seS, CE_RISE, CE_LAG, CE_FILL, travel);
    for (const m of secFr) fadeRise(m, seS, travel);
    for (const m of teamWords) sweepWord(m, teS, CE_RISE, CE_LAG, CE_FILL, travel);
    for (const m of teamFr) fadeRise(m, teS, travel);
  }

  // ---------- footer choreography ----------
  // One time-driven run, started the moment the underfooter is a third out:
  //   0.00-1.40  wordmark forms out of goo (the preloader's reveal)
  //   1.05       claim words sweep in (hero grammar)
  //   1.35/1.95  CTA draws its 2px line, then grows up; label last
  //   1.90/2.50  link plate draws and grows the same way; links sweep on top
  const fClaimWords = footerEl
    ? [...footerEl.querySelectorAll('.footer__claim .cw')].map((el, i, a) =>
        ({ el, rs: 0.10 + (i / a.length) * 0.20 + hash01(i + 980) * 0.04 }))
    : [];
  const fBarWords = footerEl
    ? [...footerEl.querySelectorAll('.footer__bar .cw')].map((el, i, a) =>
        ({ el, rs: 0.30 + (i / a.length) * 0.18 + hash01(i + 1010) * 0.03 }))
    : [];
  const fBarFr = footerEl ? [...footerEl.querySelectorAll('.footer__bar .fr')].map((el, i) => ({ el, rs: 0.50 + i * 0.04 })) : [];
  const fCta = $('footerCta');
  const fPlate = $('footerPlate');
  const fBar = footerEl ? footerEl.querySelector('.footer__bar') : null;
  const FT = { t0: 0, done: false };
  const FT_END = 1.60;
  const FT_CTA = 0.06, FT_PLATE = 0.12; // everything lands together (client rev)

  function footerFrame(t) {
    const k = u(), travel = 38 * k;
    renderFooterLogoIn(seg(t, 0, 0.95));
    for (const m of fClaimWords) sweepWord(m, t, 0.28, 0.08, 0.30, travel);
    for (const m of fBarWords) sweepWord(m, t, 0.28, 0.08, 0.30, travel);
    for (const m of fBarFr) fadeRise(m, t, travel);
    if (fCta) { // 2px line draws across, then the block grows up from it
      const lw = easeOut(seg(t, FT_CTA, FT_CTA + 0.40));
      const lh = easeOut(seg(t, FT_CTA + 0.40, FT_CTA + 0.85));
      const h = Math.max(2, 100 * k * lh);
      fCta.style.width = (339 * k * lw).toFixed(2) + 'px';
      fCta.style.height = h.toFixed(2) + 'px';
      fCta.style.padding = `0 ${(12 * k * lh).toFixed(2)}px ${(8 * k * lh).toFixed(2)}px`;
      fCta.style.opacity = lw > 0 ? '1' : '0';
      const ct = seg(t, FT_CTA + 0.78, FT_CTA + 1.00);
      for (const sp of fCta.children) sp.style.opacity = ct.toFixed(3);
    }
    if (fPlate && fBar) { // the links' plate arrives the same way as the button
      const pw = easeOut(seg(t, FT_PLATE, FT_PLATE + 0.40));
      const ph = easeOut(seg(t, FT_PLATE + 0.40, FT_PLATE + 0.85));
      fPlate.style.width = (pw * 100).toFixed(2) + '%';
      fPlate.style.height = Math.max(2, fBar.offsetHeight * ph).toFixed(2) + 'px';
    }
  }

  function footerRest() {
    renderFooterLogoIn(1);
    for (const m of [...fClaimWords, ...fBarWords]) sweepWord(m, 99, 0.35, 0.12, 0.45, 0);
    for (const m of fBarFr) fadeRise(m, 99, 0);
    if (fCta) { fCta.style.cssText = ''; for (const sp of fCta.children) sp.style.opacity = '1'; }
    if (fPlate) { fPlate.style.width = '100%'; fPlate.style.height = '100%'; }
  }

  const navBars = [...document.querySelectorAll('.nav')];
  let lastNavHide = -1;
  function hideNavForFooter(ex) {
    // past 60% uncovered the footer carries the logo and the CTA itself
    const h = easeInOut(clamp01((ex - 0.60) / 0.22));
    if (h === lastNavHide) return;
    lastNavHide = h;
    for (const n of navBars) {
      n.style.opacity = (1 - h).toFixed(3);
      n.style.visibility = h >= 1 ? 'hidden' : '';
    }
  }

  function updateFooter(ts) {
    if (!footerEl) return;
    const ex = footerExposure();
    hideNavForFooter(ex);
    if (ex <= 0.002 && !FT.t0) return;
    if (patReady) { // the hero's pattern, full colour, stir and all
      if (!fpCanvas.width) resizeFooterPattern();
      paintPattern(fpctx, fpCanvas.width, fpCanvas.height, fpScale, fpOx, fpOy, 1, ts, 1, !REDUCED);
    }
    if (FT.done) return;
    if (!FT.t0) {
      if (ex < 0.33) return;
      if (REDUCED) { footerRest(); FT.done = true; return; }
      FT.t0 = ts;
    }
    const t = (ts - FT.t0) / 1000;
    footerFrame(t);
    if (t >= FT_END) { footerRest(); FT.done = true; }
  }

  // the map ride itself is scroll-driven (reversible), anchored to the band
  function mapAnimProgress() {
    if (!mapStage) return 0;
    const vh = window.innerHeight;
    const r = mapStage.getBoundingClientRect();
    const endTop = Math.max(vh * 0.05, vh - r.height - 24 * u());
    return clamp01((vh - r.top) / Math.max(1, vh - endTop));
  }

  // ---------- preloader ----------
  // Time-driven intro (skipped under reduced motion):
  //   0.0–1.4  logo forms centre-screen out of 3 goo holes (FRAG_LOGO_IN,
  //            UNdilated mask — the dilated hover mask popped at the swap)
  //   PRE_GO   logo flies up (0.75s, cubic-bezier(.61,0,.2,1)); the photo
  //            goo-reveal starts with it (1.9s, uP 1→0)
  //   PRE_EL   (+0.35s, once the logo cleared their zone) headline + meta
  //            words sweep in; CTA draws its 2px line (0.6s) then grows up
  //            (0.7s), content fades in last
  // Scroll is held at 0 until the end; then everything hands off to the
  // scroll choreography (layoutNav / updateHero / renderGoo resume).
  const PRE = { active: !REDUCED, goo: 0, t0: 0, boot: 0, gooLogo: false };
  const PRE_GO = 1.70;           // the fly-up moment
  const PRE_EL = PRE_GO + 0.35;  // texts + CTA start once the logo has cleared their zone
  const PRE_END = 3.8;

  // cubic-bezier evaluator (same semantics as the CSS function)
  const bezier = (x1, y1, x2, y2) => {
    const cx = 3 * x1, bx = 3 * (x2 - x1) - cx, ax = 1 - cx - bx;
    const cy = 3 * y1, by = 3 * (y2 - y1) - cy, ay = 1 - cy - by;
    const sx = (t) => ((ax * t + bx) * t + cx) * t;
    const sy = (t) => ((ay * t + by) * t + cy) * t;
    const dx = (t) => (3 * ax * t + 2 * bx) * t + cx;
    return (u) => {
      if (u <= 0) return 0;
      if (u >= 1) return 1;
      let t = u;
      for (let i = 0; i < 5; i++) { const d = dx(t); if (d < 1e-6) break; t -= (sx(t) - u) / d; }
      if (!(t >= 0 && t <= 1) || Math.abs(sx(t) - u) > 1e-3) {
        let lo = 0, hi = 1;
        for (let i = 0; i < 24; i++) { t = (lo + hi) / 2; if (sx(t) < u) lo = t; else hi = t; }
      }
      return sy(t);
    };
  };
  const flyEase = bezier(0.61, 0, 0.2, 1);
  const logoImgEl = logo.querySelector('img');
  const photoImg = $('photoImg');
  const ctaSpans = [...cta.querySelectorAll('span')];
  const preHl = [], preMeta = [];
  let logoInDone = false;

  function initPreloader() {
    if (!PRE.active) return;
    history.scrollRestoration = 'manual';
    window.scrollTo(0, 0);
    PRE.goo = 1;
    const mk = (list, arr, start, spread, seed) => list.forEach((el, i) => {
      el.classList.add('win');
      el.style.opacity = '0';
      arr.push({ el, rs: start + (i / list.length) * spread + hash01(i + seed) * 0.06 });
    });
    mk([...document.querySelectorAll('.hero-copy__headline .hw')], preHl, PRE_EL, 0.45, 600);
    mk([...document.querySelectorAll('.hero-copy__meta .hw')], preMeta, PRE_EL, 0.50, 650);
    logoImgEl.style.opacity = '0';
    cta.style.opacity = '0';
    for (const s of ctaSpans) s.style.opacity = '0';
    hint.style.opacity = '0';
    hint.style.pointerEvents = 'none';
    photoImg.style.opacity = '0';
  }

  function renderLogoIn(rev) {
    if (logoInDone) return;
    if (rev >= 1) {
      logoImgEl.style.opacity = '1';
      if (PRE.gooLogo) { lgl.clearColor(0, 0, 0, 0); lgl.clear(lgl.COLOR_BUFFER_BIT); logoFxClear = true; }
      logoInDone = true;
      return;
    }
    if (!PRE.gooLogo) { // no WebGL / mask missing: plain fade
      logoImgEl.style.opacity = easeInOut(rev).toFixed(3);
      return;
    }
    lgl.useProgram(pLogoIn.prog);
    lgl.activeTexture(lgl.TEXTURE1);
    lgl.bindTexture(lgl.TEXTURE_2D, logoMaskInTex);
    lgl.uniform1f(pLogoIn.uni.uP, easeInOut(rev));
    lgl.clearColor(0, 0, 0, 0);
    lgl.clear(lgl.COLOR_BUFFER_BIT);
    lgl.drawArrays(lgl.TRIANGLES, 0, 6);
    logoFxClear = false;
  }

  function finishPreloader() {
    PRE.active = false;
    PRE.goo = 0;
    // hand the hero words back to the scroll dissolve gradient
    for (const m of [...preHl, ...preMeta]) {
      m.el.classList.remove('win');
      m.el.style.opacity = '';
      m.el.style.transform = '';
      m.el.style.setProperty('--fill', '-40%');
    }
    for (const s of ctaSpans) s.style.opacity = '';
    cta.style.opacity = '';
    hint.style.opacity = '';
    hint.style.pointerEvents = '';
    photoImg.style.opacity = '';
    lastNavT = -1; lastHeroP = -1; // force layoutNav/updateHero to rewrite rest state
    dirty = true;
  }

  function updatePreloader(now) {
    if (!PRE.active) return;
    if (!PRE.boot) PRE.boot = now;
    if (!PRE.t0) { // hold black until the glyph mask is in (capped wait)
      if (lgl && pLogoIn && logoMaskReady) { PRE.gooLogo = true; PRE.t0 = now; }
      else if (!lgl || !pLogoIn || now - PRE.boot > 2500) PRE.t0 = now;
      else return;
    }
    if (window.scrollY) window.scrollTo(0, 0); // scroll held during the intro
    const t = (now - PRE.t0) / 1000;
    const k = u(), vh = window.innerHeight;

    // logo: goo reveal centre-screen, then fly up to the hero position
    const fly = flyEase(seg(t, PRE_GO, PRE_GO + 0.75));
    logo.style.left = LOGO_REST.x * k + 'px';
    logo.style.top = lerp((vh - LOGO_REST.h * k) / 2, LOGO_REST.y * k, fly) + 'px';
    logo.style.width = LOGO_REST.w * k + 'px';
    logo.style.height = LOGO_REST.h * k + 'px';
    renderLogoIn(seg(t, 0, 1.40));

    // hero words (subheading + podpis), same sweep grammar as everywhere
    const travel = 38 * u();
    for (const m of preHl) sweepWord(m, t, 0.35, 0.12, 0.45, travel);
    for (const m of preMeta) sweepWord(m, t, 0.35, 0.12, 0.45, travel);

    // CTA: 2px line draws across, then the block grows up from the line
    // (padding scales with the growth — border-box padding would otherwise
    // thicken the 2px line and widen the zero-width start)
    const lw = easeOut(seg(t, PRE_EL, PRE_EL + 0.60));
    const lh = easeOut(seg(t, PRE_EL + 0.60, PRE_EL + 1.30));
    const h = Math.max(2, CTA_REST.h * k * lh);
    cta.style.left = CTA_REST.x * k + 'px';
    cta.style.width = (CTA_REST.w * k * lw) + 'px';
    cta.style.height = h + 'px';
    cta.style.top = ((CTA_REST.y + CTA_REST.h) * k - h) + 'px';
    cta.style.padding = `0 ${12 * k * lh}px ${CTA_REST.pb * k * lh}px`;
    cta.style.opacity = lw > 0 ? '1' : '0';
    const ct = seg(t, PRE_EL + 1.20, PRE_EL + 1.50);
    for (const s of ctaSpans) s.style.opacity = ct.toFixed(3);

    // photo: the goo dissolve run backwards, alongside everything else
    PRE.goo = 1 - easeInOut(seg(t, PRE_GO, PRE_GO + 1.90));
    if (!glReady) photoImg.style.opacity = (1 - PRE.goo).toFixed(3);

    hint.style.opacity = seg(t, PRE_END - 0.40, PRE_END).toFixed(3);

    dirty = true;
    if (t >= PRE_END) finishPreloader();
  }

  // ---------- main update ----------
  let dirty = true, lastP = -1, lastEsSeen = -1;

  function progress() {
    const track = stage.offsetHeight - window.innerHeight;
    return clamp01(-stage.getBoundingClientRect().top / track);
  }

  function update(P, now, dt) {
    updateStir(now, dt);
    // original choreography keeps its 420vh scroll feel regardless of track length
    const track = stage.offsetHeight - window.innerHeight;
    const Pw = Math.min(1, P * track / (4.2 * window.innerHeight));
    // pattern: draws in over Pw, then runs the same animation backwards over
    // the stage's tail — fully gone at P 0.985, BEFORE the crisis edge enters
    // the viewport, so its hard bottom edge never meets the pattern. The waste
    // words then dissolve during the ride (E-driven, in updateText).
    const pd = seg(Pw, 0.14, 0.62) * (1 - seg(P, 0.86, 0.985));
    const live = !REDUCED && patReady && pd > 0;
    if (P === lastP && Es === lastEsSeen && !dirty && !live && !stirActive && lhp === 0 && !logoHover) return;
    const pChanged = P !== lastP || Es !== lastEsSeen || dirty;
    lastP = P; lastEsSeen = Es; dirty = false;

    const dim = 1 - 0.6 * easeOut(seg(Pw, 0.28, 0.42));

    if (pChanged) {
      const st = pin.style;
      st.setProperty('--rise', easeInOut(seg(Pw, 0.0, 0.22)).toFixed(4));
      st.setProperty('--hint', (1 - seg(Pw, 0.0, 0.08)).toFixed(3));
      st.setProperty('--dissolve', seg(Pw, 0.12, 0.55).toFixed(4));

      if (!PRE.active) { // the preloader owns the nav and hero words until it hands off
        layoutNav(seg(Pw, 0.02, 0.24));
        updateHero(Pw);
      }
      updateText(Pw, Es);
    }

    renderPattern(pd, now, dim);
    renderGoo(Math.max(seg(Pw, 0.12, 0.55), PRE.goo)); // preloader reveals the photo (goo run backwards)
    if (!PRE.active && !navGoo) renderLogoFx(now);
  }

  // ---------- page-wide smooth scroll (wheel only; other inputs stay native) ----------
  // The wheel drives a target; the loop eases the real scroll position towards
  // it with the same k the progress smoothing uses — so the stage choreography
  // feels exactly as before, and native movement (crisis ride-in, accordion)
  // inherits the same smoothness.
  let sTarget = 0, sCur = 0, sInit = false;

  window.addEventListener('wheel', (e) => {
    if (MOBILE || REDUCED || e.ctrlKey) return; // mobile scroll stays native; pinch-zoom stays native
    e.preventDefault();
    if (PRE.active) return; // scroll held during the preloader
    if (!sInit) { sTarget = sCur = window.scrollY; sInit = true; }
    const d = e.deltaMode === 1 ? e.deltaY * 33
            : e.deltaMode === 2 ? e.deltaY * window.innerHeight
            : e.deltaY;
    const max = document.documentElement.scrollHeight - window.innerHeight;
    sTarget = Math.max(0, Math.min(max, sTarget + d));
  }, { passive: false });

  function smoothScroll(dt) { // returns true while it is driving the scroll
    if (!sInit) return false;
    const y = window.scrollY;
    if (Math.abs(y - sCur) > 1.5) { sCur = sTarget = y; return false; } // external scroll took over
    if (Math.abs(sTarget - sCur) < 0.4) { sCur = sTarget; return false; }
    sCur += (sTarget - sCur) * (1 - Math.exp(-dt * 6.5));
    window.scrollTo(0, sCur);
    return true;
  }

  // ---------- loop with smoothed progress ----------
  let Ps = null, Es = null, Cs = null, Ms = null, As = null, lastTs = 0;

  function loop(ts) {
    const dt = Math.min(0.05, (ts - lastTs) / 1000 || 0.016);
    lastTs = ts;
    updatePreloader(ts);
    const wheelDriving = smoothScroll(dt);
    const P = progress();
    crisisProgress();
    const Em = mapProgress();
    const Am = mapAnimProgress();
    if (Ps === null || REDUCED) { Ps = P; Es = CR.E; Cs = CR.C; Ms = Em; As = Am; }
    else if (wheelDriving) { Ps = P; Es = CR.E; Cs = CR.C; Ms = Em; As = Am; } // scroll itself is smoothed — no double lag
    else {
      const k = 1 - Math.exp(-dt * 6.5);
      Ps += (P - Ps) * k;
      Es += (CR.E - Es) * k;
      Cs += (CR.C - Cs) * k;
      Ms += (Em - Ms) * k;
      As += (Am - As) * k;
      if (Math.abs(P - Ps) < 0.0004) Ps = P;
      if (Math.abs(CR.E - Es) < 0.0004) Es = CR.E;
      if (Math.abs(CR.C - Cs) < 0.0004) Cs = CR.C;
      if (Math.abs(Em - Ms) < 0.0004) Ms = Em;
      if (Math.abs(Am - As) < 0.0004) As = Am;
    }
    update(Ps, ts, dt);
    updateCrisis(Es, Cs);
    updateMap(Ms);
    updateQuoteScreens(dt, wheelDriving);
    updateReveals(ts);
    updateFooter(ts);
    if (window.colmezMap) window.colmezMap.set(As);
    requestAnimationFrame(loop);
  }

  // ---------- mobile build ----------
  // Keeps the desktop flair without its scroll machinery: word sweeps, block
  // and fade-rise reveals and the CTA line-draw are TIME-driven, fired by an
  // IntersectionObserver on the native scroll; the goo asset reveals reuse
  // addReveal/updateReveals verbatim; the vector pattern lives behind the
  // waste list (moved there at boot) and the footer paints it full colour —
  // both with the morph, the stir and the bake, exactly the desktop field.

  const MDUR = { w: 700, fr: 620, blk: 900, cta: 1100 };
  const mGroups = [];

  function mFinish(it) {
    const st = it.el.style;
    if (it.type === 'cta') {
      st.clipPath = '';
      [...it.el.children].forEach((c) => { c.style.opacity = ''; });
    } else {
      st.opacity = '1';
      st.transform = '';
      if (it.type === 'w') st.setProperty('--fill', '124%');
      if (it.sup) it.sup.textContent = String(it.tgt).padStart(3, '0');
    }
    it.done = true;
  }

  function mInit(it) {
    const st = it.el.style;
    if (REDUCED) { mFinish(it); return; }
    if (it.type === 'cta') {
      st.clipPath = 'inset(calc(100% - 2px) 100% 0 0)';
      [...it.el.children].forEach((c) => { c.style.opacity = '0'; });
    } else {
      st.opacity = '0';
      if (it.type === 'w') st.setProperty('--fill', it.fillFrom + '%');
    }
  }

  // defs: [{ els, type, delay, stag, dur }] — one group fires as a unit
  function mGroup(container, defs) {
    const items = [];
    defs.forEach((d) => {
      [...d.els].forEach((el, i) => {
        const it = {
          el,
          type: d.type,
          delay: (d.delay || 0) + i * (d.stag === undefined ? 60 : d.stag),
          dur: d.dur || MDUR[d.type],
          fillFrom: el.classList.contains('hw') ? -40 : -24,
          sup: null, tgt: 0,
          done: false,
        };
        const sup = d.type === 'w' ? el.querySelector('sup[data-n]') : null;
        if (sup) { it.sup = sup; it.tgt = parseInt(sup.dataset.n, 10) || 0; }
        mInit(it);
        items.push(it);
      });
    });
    const g = { container, items, t0: -1 };
    mGroups.push(g);
    return g;
  }

  const mObs = ('IntersectionObserver' in window) ? new IntersectionObserver((ents) => {
    for (const e of ents) {
      if (!e.isIntersecting) continue;
      mObs.unobserve(e.target);
      for (const g of mGroups) if (g.container === e.target && g.t0 < 0) g.t0 = performance.now();
    }
  }, { rootMargin: '0px 0px -10% 0px', threshold: 0.01 }) : null;

  function runWordAnims(ts) {
    for (const g of mGroups) {
      if (g.t0 < 0) continue;
      for (const it of g.items) {
        if (it.done) continue;
        const p = clamp01((ts - g.t0 - it.delay) / it.dur);
        if (p <= 0) continue;
        if (p >= 1) { mFinish(it); continue; }
        const st = it.el.style;
        if (it.type === 'cta') {
          const lw = seg(p, 0, 0.5), lh = easeOut(seg(p, 0.4, 1));
          st.clipPath = `inset(calc(${((1 - lh) * 100).toFixed(2)}% - 2px) ${((1 - lw) * 100).toFixed(2)}% 0 0)`;
          const lo = seg(p, 0.72, 1);
          [...it.el.children].forEach((c) => { c.style.opacity = lo.toFixed(3); });
        } else {
          const e = easeOut(p);
          st.opacity = e.toFixed(3);
          st.transform = `translate3d(0, ${((1 - e) * (it.type === 'blk' ? 20 : 14)).toFixed(1)}px, 0)`;
          if (it.type === 'w') st.setProperty('--fill', lerp(it.fillFrom, 124, easeInOut(p)).toFixed(1) + '%');
          if (it.sup) it.sup.textContent = String(Math.round(it.tgt * easeOut(p))).padStart(3, '0');
        }
      }
    }
  }

  let mFooterT0 = -1;

  // hero photo -> pattern hand-over, scroll-driven and reversible (native
  // scroll, the photo box is a sticky background): p rides the waste LIST
  // scrolling in over the box — photo dissolves and the pattern draws in
  // before the words arrive, then the pattern dims under them, desktop-style.
  function heroDissolveP() {
    const r = list.getBoundingClientRect();
    if (!r.height) return 0;
    const vh = window.innerHeight;
    return clamp01((vh - r.top) / (vh * 0.85));
  }

  function bootMobile() {
    // the desktop groups its crisis photos to form as ONE image (they sit
    // side by side there) — stacked vertically on mobile, each should form
    // when IT shows, so the module-level registrations lose their group
    for (const r of RVL) r.group = '';

    // the desktop's forced line breaks are meaningless on the narrow column
    // and there is no whitespace around them in the markup — swap each for a
    // real space so the words don't fuse (the breakpoint change reloads, so
    // the desktop never sees this DOM)
    document.querySelectorAll(
      '.mhero__headline br, .waste br, .crisis__head br, .map__lead br, ' +
      '.screens__head br, .screen-item__title br, .team__head br, .footer__claim br'
    ).forEach((br) => br.replaceWith(' '));

    // hero photo -> pattern: the desktop's own dissolve. The photo layer
    // stays in flow (mobile CSS) with the pattern canvas underneath and the
    // WebGL goo on top; mobileLoop drives both from the box's scroll position.
    if (!initGL()) photoLayer.classList.remove('has-gl');

    // compact nav slides in once the photo box reaches the viewport top —
    // i.e. the sticky hero (and its big wordmark) is fully covered; a plain
    // 0.5vh threshold overlapped the blend-difference mini onto the big logo
    const onScr = () => document.body.classList.toggle('mnav', window.scrollY >= photoLayer.offsetTop - 1);
    window.addEventListener('scroll', onScr, { passive: true });
    onScr();

    // team: horizontal swipe carousel built from the desktop pieces
    const teamPinEl = document.querySelector('.team__pin');
    const mcardPhotos = [];
    if (teamPinEl) {
      const lis = [...document.querySelectorAll('.team__list li')];
      const bios = [...document.querySelectorAll('.team__bio .team__bio-item')];
      const photos = [...document.querySelectorAll('.team__photo img')];
      const car = document.createElement('div');
      car.className = 'team__mcar';
      lis.forEach((li, i) => {
        const card = document.createElement('article');
        card.className = 'team__mcard';
        const ph = document.createElement('div');
        ph.className = 'team__mcard-photo';
        if (photos[i]) ph.appendChild(photos[i].cloneNode(true));
        const name = document.createElement('h3');
        name.className = 'team__name';
        const nameEl = li.querySelector('.team__name');
        name.textContent = (nameEl ? nameEl.textContent : '').trim();
        const chip = document.createElement('span');
        chip.className = 'team__chip';
        const chipEl = li.querySelector('.team__chip');
        chip.textContent = (chipEl ? chipEl.textContent : '').trim();
        card.appendChild(ph);
        card.appendChild(name);
        card.appendChild(chip);
        if (bios[i]) {
          const bio = bios[i].cloneNode(true);
          bio.classList.remove('fr');
          // client rev: Numair's desktop-merged logo row is too much for the
          // narrow card — nomura + ares break onto their own line (mobile only)
          const nom = bio.querySelector('.team__logos-row img[src*="nomura"]');
          if (nom && nom.parentElement.children.length > 2) {
            const row = nom.parentElement;
            const r2 = document.createElement('div');
            r2.className = 'team__logos-row';
            r2.appendChild(nom);
            const ares = row.querySelector('img[src*="ares"]');
            if (ares) r2.appendChild(ares);
            row.after(r2);
          }
          card.appendChild(bio);
        }
        car.appendChild(card);
        mcardPhotos.push(ph);
      });
      teamPinEl.appendChild(car);
    }

    // static flat map (map.js loads after main.js — one set(1) is stashed
    // and applied when the topology lands)
    const mapWait = setInterval(() => {
      if (window.colmezMap) { window.colmezMap.set(1); clearInterval(mapWait); }
    }, 80);

    // ---- goo asset reveals (the crisis/quote/screens ones are already
    // registered at module level; add the mobile-only medias) ----
    mcardPhotos.forEach((ph, i) => addReveal(ph, COVER_EB, 0, i * 140, 'mteam'));

    // ---- word / block / fade-rise choreography ----
    const q = (sel, root) => [...(root || document).querySelectorAll(sel)];

    const heroG = mGroup(document.querySelector('.mhero'), [
      { els: q('.mhero__logo'), type: 'fr', delay: 0, dur: 800 },
      { els: q('.mhero .hw'), type: 'w', delay: 250, stag: 90 },
      { els: q('.mhero__cta'), type: 'cta', delay: 650 },
    ]);
    heroG.t0 = performance.now() + 200; // fires at load, not on scroll

    mGroup(document.querySelector('.waste__list'), [
      { els: q('.waste__list .w'), type: 'w', delay: 100, stag: 45 },
    ]);
    mGroup(document.querySelector('.waste__lead'), [
      { els: q('.waste__lead .w'), type: 'w', delay: 100, stag: 55 },
    ]);

    mGroup(document.querySelector('.crisis__head'), [
      { els: q('.crisis__head .cw'), type: 'w', stag: 70 },
    ]);
    q('.crisis-item').forEach((it) => mGroup(it, [
      { els: q('.crisis-item__chip .cw', it), type: 'w' },
      { els: q('.crisis-item__title .cw', it), type: 'w', delay: 90, stag: 70 },
      { els: q('.crisis-item__desc', it), type: 'blk', delay: 300 },
    ]));

    mGroup(document.querySelector('.map__lead'), [
      { els: q('.map__lead .cw'), type: 'w', stag: 40 },
    ]);

    mGroup(document.querySelector('.quote__body'), [
      { els: q('.quote__text'), type: 'blk' },
      { els: q('.quote__name .cw'), type: 'w', delay: 350, stag: 80 },
      { els: q('.quote__role'), type: 'fr', delay: 500, stag: 110 },
    ]);

    mGroup(document.querySelector('.screens__head'), [
      { els: q('.screens__head .cw'), type: 'w', stag: 60 },
    ]);
    q('.screen-item').forEach((it) => mGroup(it, [
      { els: q('.screen-item__chip .cw', it), type: 'w' },
      { els: q('.screen-item__title .cw', it), type: 'w', delay: 90, stag: 60 },
      { els: q('.screen-item__sub', it), type: 'fr', delay: 350 },
      { els: q('.screen-item__rows li', it), type: 'fr', delay: 450, stag: 110 },
    ]));

    mGroup(document.querySelector('.security'), [
      { els: q('.security .screen-item__chip .cw'), type: 'w' },
      { els: q('.security__head .cw'), type: 'w', delay: 90, stag: 45 },
      { els: q('.security__badge'), type: 'fr', delay: 600 },
    ]);

    mGroup(document.querySelector('.team__head'), [
      { els: q('.team__head .cw'), type: 'w', stag: 70 },
    ]);
    q('.team__mcard').forEach((card, ci) => mGroup(card, [
      { els: q('.team__name, .team__chip', card), type: 'fr', delay: 150 + ci * 120, stag: 90 },
      { els: q('.team__desc, .team__logos', card), type: 'fr', delay: 380 + ci * 120, stag: 120 },
    ]));

    // footer group fires on exposure (the sticky underfooter always
    // intersects the viewport, an observer would fire it at load)
    mGroups.footer = mGroup(document.querySelector('.footer__content'), [
      { els: q('.footer__logo img'), type: 'fr', dur: 800 },
      { els: q('.footer__claim .cw'), type: 'w', delay: 150, stag: 60 },
      { els: q('.footer__cta'), type: 'cta', delay: 450 },
      { els: q('.footer__bar .cw'), type: 'w', delay: 650, stag: 45 },
      { els: q('.footer__bar .fr'), type: 'fr', delay: 900 },
    ]);

    if (mObs) {
      for (const g of mGroups) {
        if (g === heroG || g === mGroups.footer || !g.container) continue;
        mObs.observe(g.container);
      }
    } else {
      for (const g of mGroups) g.items.forEach(mFinish);
    }

    // waste sups start at 000
    q('.waste__list sup[data-n]').forEach((sup) => { sup.textContent = '000'; });
  }

  let mLastTs = 0;
  function mobileLoop(ts) {
    const dt = Math.min(0.05, (ts - mLastTs) / 1000 || 0.016);
    mLastTs = ts;
    updateStir(ts, dt);

    // hero: pattern draws in under the photo while the photo dissolves into
    // it (goo); as the words ride onto the pattern it dims under them
    const hp = heroDissolveP();
    const dis = REDUCED ? (hp > 0.4 ? 1 : 0) : easeInOut(seg(hp, 0.04, 0.72));
    renderPattern(easeInOut(seg(hp, 0, 0.6)), ts, 1 - 0.42 * seg(hp, 0.55, 0.95));
    renderGoo(dis);
    photoLayer.style.setProperty('--dissolve', dis.toFixed(3)); // no-WebGL fallback fade

    runWordAnims(ts);
    updateReveals(ts);

    // footer: pattern at full colour + entrance once it is exposed
    const ex = footerExposure();
    if (patReady && ex > 0.002) {
      if (!fpCanvas.width) resizeFooterPattern();
      paintPattern(fpctx, fpCanvas.width, fpCanvas.height, fpScale, fpOx, fpOy, 1, ts, 1, !REDUCED);
    }
    if (mFooterT0 < 0 && ex > 0.3) { mFooterT0 = ts; mGroups.footer.t0 = ts; }

    requestAnimationFrame(mobileLoop);
  }

  let mResizeRaf = 0;
  function onResizeMobile() {
    cancelAnimationFrame(mResizeRaf);
    mResizeRaf = requestAnimationFrame(() => {
      resizeGL();
      resizePattern();
      resizeFooterPattern();
      lastPatKey = '';
    });
  }

  // ---------- boot ----------
  window.addEventListener('pointermove', onPointerMove, { passive: true });

  let resizeRaf = 0;
  function onResize() {
    cancelAnimationFrame(resizeRaf);
    resizeRaf = requestAnimationFrame(() => {
      resizeGL();
      resizePattern();
      resizeLogoFx();
      resizeCtaFx();
      resizeMiniFx();
      resizeFooterPattern();
      resizeFooterLogo();
      layoutWords();
      lastTextP = -1; lastHeroP = -1; lastNavT = -1; lastPatKey = ''; lastCrisisKey = ''; lastQSKey = '';
      dirty = true;
    });
  }

  if (MOBILE) {
    bootMobile();
    loadPattern();
    window.addEventListener('resize', onResizeMobile);
    window.addEventListener('load', onResizeMobile);
    onResizeMobile();
    requestAnimationFrame(mobileLoop);
  } else {
    hint.addEventListener('click', (e) => {
      e.preventDefault();
      // jump to the stage end: list and lead fully filled, crisis at the doorstep
      window.scrollTo({ top: stage.offsetTop + (stage.offsetHeight - window.innerHeight), behavior: 'smooth' });
    });
    if (!initGL()) photoLayer.classList.remove('has-gl');
    initLogoGL();
    initCtaGL();
    initMiniLogoGL();
    initFooterLogoGL();
    initPreloader();
    loadPattern();
    if (document.fonts && document.fonts.ready) document.fonts.ready.then(() => { layoutWords(); dirty = true; });
    window.addEventListener('resize', onResize);
    window.addEventListener('load', onResize);
    onResize();
    requestAnimationFrame(loop);
  }
})();