Section backgrounds: alive surfaces that stay fast

// src/components/fx/backgrounds/scrim.tsx
/**
 * Scrim -- guarantees text contrast over ANY live background. Put it between
 * the background and the content. `full` = flat overlay for text-heavy
 * sections; default = bottom-weighted gradient for a hero where the top
 * stays alive.
 */
export function Scrim({ full = false, className = "" }: { full?: boolean; className?: string }) {
  return <div aria-hidden="true" className={`bg-scrim ${full ? "bg-scrim--full" : ""} ${className}`} />;
}

/* in backgrounds.css, @layer components */
.bg-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    color-mix(in oklch, var(--bg) 55%, transparent) 0%,
    color-mix(in oklch, var(--bg) 82%, transparent) 60%,
    var(--bg) 100%);
  pointer-events: none;
}
.bg-scrim--full { background: color-mix(in oklch, var(--bg) 72%, transparent); }

// src/components/fx/backgrounds/dot-grid.tsx -- T0/T1, zero JS (Server Component)
export function DotGrid({
  variant = "dots", cell = 28, opacity = 0.5, drift = false, className = "",
}: { variant?: "dots" | "lines"; cell?: number; opacity?: number; drift?: boolean; className?: string }) {
  return (
    <div
      aria-hidden="true"
      className={`bg-grid ${variant === "lines" ? "bg-grid--lines" : ""} ${drift ? "bg-grid--drift" : ""} ${className}`}
      style={{ ["--bg-grid-cell" as string]: `${cell}px`, ["--bg-grid-opacity" as string]: opacity }}
    />
  );
}

// src/components/fx/backgrounds/gradient-mesh.tsx -- T1, zero JS (Server Component)
export function GradientMesh({ className = "" }: { className?: string }) {
  return (
    <div aria-hidden="true" className={`bg-mesh ${className}`}>
      <span className="bg-mesh__blob" />
    </div>
  );
}

// src/components/fx/backgrounds/spotlight-follow.tsx -- T1/T2
"use client";
import { useEffect, useRef } from "react";

/** Writes --spot-x/-y via a ref-driven rAF loop, never React state, so
 *  pointermove never causes a re-render. Fine-pointer only; the CSS default
 *  (top-center spot) is the no-JS fallback. */
export function SpotlightFollow({ className = "" }: { className?: string }) {
  const ref = useRef<HTMLDivElement | null>(null);
  useEffect(() => {
    const el = ref.current;
    if (!el || !window.matchMedia("(hover: hover) and (pointer: fine)").matches) return;
    let raf = 0;
    let pending: { x: number; y: number } | null = null;
    const flush = () => {
      raf = 0;
      if (!pending) return;
      el.style.setProperty("--spot-x", `${pending.x}px`);
      el.style.setProperty("--spot-y", `${pending.y}px`);
    };
    const onMove = (e: PointerEvent) => {
      const rect = el.getBoundingClientRect();
      pending = { x: e.clientX - rect.left, y: e.clientY - rect.top };
      if (!raf) raf = requestAnimationFrame(flush);
    };
    el.addEventListener("pointermove", onMove, { passive: true });
    return () => { el.removeEventListener("pointermove", onMove); if (raf) cancelAnimationFrame(raf); };
  }, []);
  return <div ref={ref} aria-hidden="true" className={`bg-spotlight ${className}`} />;
}

/* src/styles/backgrounds.css -- import after the direction file, before fx.css. Tokens only. */
@layer components {
  .bg-grid {
    position: absolute; inset: 0;
    background-image: radial-gradient(circle at 1px 1px, var(--line-strong) 1px, transparent 0);
    background-size: var(--bg-grid-cell, 28px) var(--bg-grid-cell, 28px);
    mask-image: radial-gradient(120% 100% at 50% 0%, black 30%, transparent 85%);
    opacity: var(--bg-grid-opacity, 0.5);
  }
  .bg-grid--lines {
    background-image:
      linear-gradient(to right, var(--line-subtle) 1px, transparent 1px),
      linear-gradient(to bottom, var(--line-subtle) 1px, transparent 1px);
  }
  .bg-grid--drift { animation: bg-grid-drift 40s linear infinite; }
  @keyframes bg-grid-drift { to { transform: translate(var(--bg-grid-cell, 28px), var(--bg-grid-cell, 28px)); } }
  @media (prefers-reduced-motion: reduce) { .bg-grid--drift { animation: none; } }

  /* 3 soft radial blobs, one hue family, translated on the compositor only. */
  .bg-mesh { position: absolute; inset: -10%; overflow: hidden; isolation: isolate; pointer-events: none; }
  .bg-mesh::before, .bg-mesh::after, .bg-mesh > .bg-mesh__blob {
    content: ""; position: absolute; width: 55%; height: 55%; border-radius: 50%;
    filter: blur(60px); will-change: transform;
  }
  .bg-mesh::before {
    top: 5%; left: 8%; background: color-mix(in oklch, var(--brand) 26%, transparent);
    animation: bg-mesh-drift-a 26s var(--ease-in-out) infinite alternate;
  }
  .bg-mesh::after {
    bottom: 0%; right: 5%; background: color-mix(in oklch, var(--brand) 14%, transparent);
    animation: bg-mesh-drift-b 32s var(--ease-in-out) infinite alternate;
  }
  .bg-mesh > .bg-mesh__blob {
    top: 30%; right: 25%; width: 40%; height: 40%;
    background: color-mix(in oklch, var(--surface-raised) 70%, var(--brand) 10%);
    animation: bg-mesh-drift-a 22s var(--ease-in-out) infinite alternate-reverse;
  }
  @keyframes bg-mesh-drift-a { from { transform: translate(0, 0) scale(1); } to { transform: translate(6%, 8%) scale(1.08); } }
  @keyframes bg-mesh-drift-b { from { transform: translate(0, 0) scale(1); } to { transform: translate(-8%, -5%) scale(1.05); } }
  @media (prefers-reduced-motion: reduce) {
    .bg-mesh::before, .bg-mesh::after, .bg-mesh > .bg-mesh__blob { animation: none; }
  }

  .bg-spotlight {
    position: absolute; inset: 0;
    background: radial-gradient(480px circle at var(--spot-x, 50%) var(--spot-y, 15%),
      color-mix(in oklch, var(--brand) 16%, transparent), transparent 70%);
    transition: background-color var(--duration-fast) var(--ease-out);
  }
}

// src/components/fx/backgrounds/use-gl-canvas.ts
"use client";
import { Renderer } from "ogl";
import type { OGLRenderingContext } from "ogl";
import { useEffect, useRef } from "react";

export type GLFrame = { gl: OGLRenderingContext; renderer: Renderer; time: number; width: number; height: number; dpr: number };
export type GLSetup = {
  onFrame: (frame: GLFrame) => void;
  onResize?: (width: number, height: number, dpr: number) => void;
  onDispose?: () => void;
};

const MAX_DPR = 1.5;
const TARGET_FPS = 30;
const FRAME_INTERVAL_MS = 1000 / TARGET_FPS;

export type UseGLCanvasOptions = {
  /** Internal render resolution as a fraction of CSS size (canvas.style stays
   *  full size; fragment cost drops by scale^2). A full-bleed per-pixel
   *  fragment shader is viewport-AREA-bound, not just DPR-bound -- see the
   *  FluidEther measurement in §7. Geometry-bound effects (points, lines)
   *  don't need this; leave at 1. */
  renderScale?: number;
};

/** One OGL WebGL context per call site: DPR<=1.5, fps cap, cancel (never
 *  skip) rAF offscreen/hidden/reduced-motion, ResizeObserver (never
 *  per-frame layout reads), context-loss handling, full dispose on unmount.
 *  To SHARE one context across several sections, mount this once in a host
 *  component and swap which Program renders inside onFrame -- see
 *  BackgroundHost (§6.4) instead of calling this per section. */
export function useGLCanvas(build: (gl: OGLRenderingContext, renderer: Renderer) => GLSetup | null, options: UseGLCanvasOptions = {}) {
  const renderScale = Math.min(1, Math.max(0.3, options.renderScale ?? 1));
  const canvasRef = useRef<HTMLCanvasElement | null>(null);
  const wrapperRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const wrapper = wrapperRef.current;
    if (!canvas || !wrapper) return;

    const reducedMotionQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
    const lowPower = (navigator.hardwareConcurrency || 8) <= 4 || (navigator as Navigator & { connection?: { saveData?: boolean } }).connection?.saveData === true;

    let renderer: Renderer | null = null;
    let setup: GLSetup | null = null;
    let rafId: number | null = null;
    let lastFrameTime = 0;
    let isIntersecting = true;

    function init() {
      renderer = new Renderer({ canvas: canvas!, dpr: Math.min(window.devicePixelRatio || 1, MAX_DPR), alpha: true, antialias: false, powerPreference: "low-power" });
      setup = build(renderer.gl, renderer);
    }
    function resize() {
      if (!renderer || !wrapper || !canvas) return;
      const dpr = Math.min(window.devicePixelRatio || 1, MAX_DPR);
      const { width, height } = wrapper.getBoundingClientRect(); // measured on resize only
      if (width <= 0 || height <= 0) return;
      renderer.dpr = dpr * renderScale;
      renderer.setSize(width, height);
      if (renderScale < 1) { canvas.style.width = `${width}px`; canvas.style.height = `${height}px`; }
      setup?.onResize?.(width, height, dpr); // CSS pixels, independent of render scale
    }
    function renderFrame(now: number) {
      if (!renderer || !setup) return;
      setup.onFrame({ gl: renderer.gl, renderer, time: now / 1000, width: renderer.gl.canvas.width, height: renderer.gl.canvas.height, dpr: renderer.dpr ?? 1 });
    }
    function loop(now: number) {
      rafId = requestAnimationFrame(loop);
      if (now - lastFrameTime < FRAME_INTERVAL_MS) return;
      lastFrameTime = now;
      renderFrame(now);
    }
    function startLoop() { if (rafId === null) rafId = requestAnimationFrame(loop); }
    function stopLoop() { if (rafId !== null) { cancelAnimationFrame(rafId); rafId = null; } } // cancel, never "skip the draw"
    function syncLoop() {
      const shouldRun = isIntersecting && !document.hidden && !reducedMotionQuery.matches && !lowPower;
      shouldRun ? startLoop() : stopLoop();
    }

    if (!reducedMotionQuery.matches && !lowPower) { init(); resize(); renderFrame(performance.now()); }

    const resizeObserver = new ResizeObserver(() => {
      if (!renderer && !reducedMotionQuery.matches && !lowPower) { init(); renderFrame(performance.now()); }
      resize();
    });
    resizeObserver.observe(wrapper);

    const io = new IntersectionObserver(([entry]) => { isIntersecting = entry?.isIntersecting ?? true; syncLoop(); }, { threshold: 0 });
    io.observe(wrapper);

    const onVisibility = () => syncLoop();
    document.addEventListener("visibilitychange", onVisibility);

    const onReducedMotionChange = () => {
      if (reducedMotionQuery.matches) stopLoop();
      else if (!renderer) { init(); resize(); renderFrame(performance.now()); syncLoop(); }
      else syncLoop();
    };
    reducedMotionQuery.addEventListener("change", onReducedMotionChange);

    const onContextLost = (e: Event) => { e.preventDefault(); stopLoop(); };
    const onContextRestored = () => { init(); resize(); syncLoop(); };
    canvas.addEventListener("webglcontextlost", onContextLost, false);
    canvas.addEventListener("webglcontextrestored", onContextRestored, false);

    if (!reducedMotionQuery.matches && !lowPower) syncLoop();

    return () => {
      stopLoop();
      resizeObserver.disconnect();
      io.disconnect();
      document.removeEventListener("visibilitychange", onVisibility);
      reducedMotionQuery.removeEventListener("change", onReducedMotionChange);
      canvas.removeEventListener("webglcontextlost", onContextLost);
      canvas.removeEventListener("webglcontextrestored", onContextRestored);
      setup?.onDispose?.();
      (renderer?.gl.getExtension("WEBGL_lose_context") as WEBGL_lose_context | null | undefined)?.loseContext();
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return { canvasRef, wrapperRef };
}

// src/components/fx/backgrounds/use-token-colors.ts
"use client";
import { useEffect, useRef } from "react";

/** Resolves void CSS custom properties (oklch(), color-mix(), var()) to
 *  [r,g,b] (0..1) for shader uniforms, and re-resolves on direction/theme
 *  change so a background re-tints instead of hardcoding colour. Shaders
 *  can't read oklch()/var() themselves -- this is the one legal place to
 *  touch the DOM for colour, resolved once per change, never per frame. */
export function useTokenColors<T extends Record<string, `--${string}`>>(names: T) {
  const values = useRef<Record<keyof T, [number, number, number]>>(
    Object.fromEntries(Object.keys(names).map((k) => [k, [0.5, 0.5, 0.5]])) as Record<keyof T, [number, number, number]>,
  );
  useEffect(() => {
    const probe = document.createElement("canvas").getContext("2d");
    if (!probe) return;
    function readAll() {
      const style = getComputedStyle(document.documentElement);
      for (const key of Object.keys(names) as (keyof T)[]) {
        const raw = style.getPropertyValue(names[key]).trim();
        if (!raw) continue;
        probe!.clearRect(0, 0, 1, 1);
        probe!.fillStyle = raw; // the browser parses oklch()/color-mix() for us
        probe!.fillRect(0, 0, 1, 1);
        const [r, g, b] = probe!.getImageData(0, 0, 1, 1).data;
        values.current[key] = [r! / 255, g! / 255, b! / 255];
      }
    }
    readAll();
    const mo = new MutationObserver(readAll); // theme toggle flips a class on <html>
    mo.observe(document.documentElement, { attributes: true, attributeFilter: ["class", "style"] });
    const schemeQuery = window.matchMedia("(prefers-color-scheme: dark)");
    schemeQuery.addEventListener("change", readAll);
    return () => { mo.disconnect(); schemeQuery.removeEventListener("change", readAll); };
  }, [names]);
  return values;
}

// src/components/fx/backgrounds/use-lazy-webgl.ts
"use client";
import { useEffect, useRef, useState } from "react";

/** Nothing WebGL imports before idle AND intersection, and never at all
 *  under prefers-reduced-motion, hardwareConcurrency<=4 or saveData (the
 *  poster stays). Call from a small per-effect "use client" wrapper --
 *  passing the loader as a prop across the server/client boundary isn't
 *  serialisable, so each effect owns its own lazy wrapper (see below). */
export function useLazyWebgl() {
  const wrapperRef = useRef<HTMLDivElement | null>(null);
  const [shouldLoad, setShouldLoad] = useState(false);
  useEffect(() => {
    const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    const lowPower = (navigator.hardwareConcurrency || 8) <= 4 || (navigator as Navigator & { connection?: { saveData?: boolean } }).connection?.saveData === true;
    if (reduced || lowPower) return; // poster stays, nothing else loads
    const wrapper = wrapperRef.current;
    if (!wrapper) return;
    let idleId: number | undefined;
    const io = new IntersectionObserver(([entry]) => {
      if (!entry?.isIntersecting) return;
      io.disconnect();
      const request = "requestIdleCallback" in window ? window.requestIdleCallback : (cb: () => void) => setTimeout(cb, 1) as unknown as number;
      idleId = request(() => setShouldLoad(true)) as number;
    }, { rootMargin: "200px" });
    io.observe(wrapper);
    return () => { io.disconnect(); if (idleId !== undefined && "cancelIdleCallback" in window) window.cancelIdleCallback(idleId); };
  }, []);
  return { wrapperRef, shouldLoad };
}

// src/components/fx/backgrounds/fluid-ether-lazy.tsx -- the wiring pattern for every effect below
"use client";
import dynamic from "next/dynamic";
import { useLazyWebgl } from "./use-lazy-webgl";

const FluidEther = dynamic(() => import("./fluid-ether").then((m) => m.FluidEther), { ssr: false });

export function FluidEtherLazy() {
  const { wrapperRef, shouldLoad } = useLazyWebgl();
  return (
    <div ref={wrapperRef} aria-hidden="true" className="pointer-events-none absolute inset-0 -z-10 isolate overflow-hidden bg-bg">
      <div className="absolute inset-0" style={{ background: "radial-gradient(60% 60% at 50% 40%, var(--brand-subtle), var(--bg) 70%)" }} />
      {shouldLoad && <FluidEther />}
    </div>
  );
}
// Same shape for ParticleFieldLazy, PixelDitherLazy, DisplacementGridLazy --
// swap the import and drop the poster gradient div where a flat --bg reads fine.

// src/components/fx/backgrounds/background-host.tsx
"use client";
/**
 * ONE shared WebGL context for an entire page of sections. Build every
 * section's look as its own Program/Mesh once at init (never rebuilt), then
 * each frame render only the Mesh for whichever section is `activeKey`. The
 * parent page owns an IntersectionObserver over its section elements (same
 * shape as the scroll-progress driver in references/3d-scenes.md) and
 * passes the winning section's key down; BackgroundHost never tears down or
 * recreates the GL context when that prop changes.
 *
 * Production note: mount this via next/dynamic(ssr:false) gated by
 * requestIdleCallback in the layout (it's page-level, not per-section, so
 * IntersectionObserver-gating like use-lazy-webgl.ts doesn't apply the same
 * way) -- the measurement in §7 loaded it eagerly for a clean comparison,
 * which is why its jsKb isn't a fair "lazy" number; defer it in production.
 */
import { Color, Mesh, Program, Renderer, Triangle } from "ogl";
import { useEffect, useRef } from "react";
import { useGLCanvas } from "./use-gl-canvas";
import { useTokenColors } from "./use-token-colors";

export type BackgroundKey = "fluid" | "dither" | "none";

// ... build one Program per look (reuse the fragment shaders from §7.1/§7.3,
// trimmed), keep them in a small map, and in onFrame:
//   const key = activeRef.current;
//   if (key === "none") return;          // context stays alive, nothing drawn
//   renderer.render({ scene: meshByKey[key] });
// Full worked file (two looks, fluid + dither): backgrounds-scratch/src/components/fx/backgrounds/background-host.tsx

// usage: one IntersectionObserver over section refs drives activeKey
"use client";
import { useEffect, useRef, useState } from "react";
import { BackgroundHost, type BackgroundKey } from "@/components/fx/backgrounds/background-host";

export function SharedSections() {
  const [active, setActive] = useState<BackgroundKey>("fluid");
  const fluidRef = useRef<HTMLElement | null>(null);
  const ditherRef = useRef<HTMLElement | null>(null);
  useEffect(() => {
    const targets: [HTMLElement, BackgroundKey][] = [];
    if (fluidRef.current) targets.push([fluidRef.current, "fluid"]);
    if (ditherRef.current) targets.push([ditherRef.current, "dither"]);
    const io = new IntersectionObserver((entries) => {
      const top = entries.filter((e) => e.isIntersecting).sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0];
      const match = top && targets.find(([el]) => el === top.target);
      if (match) setActive(match[1]);
    }, { threshold: [0.3, 0.6] });
    for (const [el] of targets) io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <>
      <BackgroundHost activeKey={active} />
      <section ref={fluidRef} className="relative isolate flex min-h-svh items-center">{/* … */}</section>
      <section ref={ditherRef} className="relative isolate flex min-h-svh items-center">{/* … */}</section>
    </>
  );
}

// src/components/fx/backgrounds/fluid-ether.tsx
"use client";
import { Color, Program, Renderer, Triangle, Mesh } from "ogl";
import { useEffect, useRef } from "react";
import { useGLCanvas } from "./use-gl-canvas";
import { useTokenColors } from "./use-token-colors";

const vertex = /* glsl */ `
  attribute vec2 uv; attribute vec2 position; varying vec2 vUv;
  void main() { vUv = uv; gl_Position = vec4(position, 0.0, 1.0); }
`;
const fragment = /* glsl */ `
  precision highp float;
  varying vec2 vUv;
  uniform float uTime; uniform vec2 uResolution; uniform vec2 uPointer; uniform float uPointerStrength;
  uniform vec3 uColorA; uniform vec3 uColorB; uniform vec3 uColorC;

  float hash(vec2 p) { p = fract(p * vec2(123.34, 456.21)); p += dot(p, p + 45.32); return fract(p.x * p.y); }
  float valueNoise(vec2 p) {
    vec2 i = floor(p), f = fract(p);
    float a = hash(i), b = hash(i + vec2(1.0, 0.0)), c = hash(i + vec2(0.0, 1.0)), d = hash(i + vec2(1.0, 1.0));
    vec2 u = f * f * (3.0 - 2.0 * f);
    return mix(mix(a, b, u.x), mix(c, d, u.x), u.y);
  }
  float fbm(vec2 p) {
    // 3 octaves: 4 pushed desktop dropped frames over budget (measured, see table below).
    float sum = 0.0, amp = 0.5;
    for (int i = 0; i < 3; i++) { sum += amp * valueNoise(p); p *= 2.02; amp *= 0.55; }
    return sum;
  }
  void main() {
    float aspect = uResolution.x / uResolution.y;
    vec2 p = (vUv - 0.5) * vec2(aspect, 1.0) * 2.2;
    vec2 pointerOffset = (uPointer - 0.5) * vec2(aspect, 1.0) * 2.2 - p;
    float pointerDist = length(pointerOffset);
    p += pointerOffset * (0.18 * uPointerStrength) / (1.0 + pointerDist * pointerDist * 2.0);

    // Single-level domain warp: 2 fbm() calls for the warp vector + 1 to sample it, 3/pixel.
    float t = uTime * 0.045;
    vec2 warp = vec2(fbm(p + vec2(0.0, t)), fbm(p + vec2(5.2, -t)));
    float field = fbm(p + warp * 1.6);

    vec3 color = mix(uColorA, uColorB, smoothstep(0.25, 0.62, field));
    color = mix(color, uColorC, smoothstep(0.55, 0.92, field) * 0.6);
    color *= 0.55 + 0.45 * smoothstep(1.35, 0.2, length(p));
    gl_FragColor = vec4(color, 1.0);
  }
`;

export function FluidEther({ className = "" }: { className?: string }) {
  const colors = useTokenColors({ a: "--bg", b: "--brand", c: "--surface-raised" });
  const pointerRef = useRef({ x: 0.5, y: 0.5, target: 0 });

  const { canvasRef, wrapperRef } = useGLCanvas((gl) => {
    const geometry = new Triangle(gl);
    const program = new Program(gl, {
      vertex, fragment,
      uniforms: {
        uTime: { value: 0 }, uResolution: { value: [1, 1] }, uPointer: { value: [0.5, 0.5] }, uPointerStrength: { value: 0 },
        uColorA: { value: new Color(...colors.current.a) }, uColorB: { value: new Color(...colors.current.b) }, uColorC: { value: new Color(...colors.current.c) },
      },
    });
    const mesh = new Mesh(gl, { geometry, program });
    return {
      onResize: (w, h) => { program.uniforms.uResolution.value = [w, h]; },
      onFrame: ({ renderer, time }) => {
        program.uniforms.uTime.value = time;
        program.uniforms.uPointer.value = [pointerRef.current.x, pointerRef.current.y];
        pointerRef.current.target *= 0.94; // decays toward 0 when the pointer stops moving
        program.uniforms.uPointerStrength.value = pointerRef.current.target;
        const c = colors.current;
        (program.uniforms.uColorA.value as Color).set(...c.a);
        (program.uniforms.uColorB.value as Color).set(...c.b);
        (program.uniforms.uColorC.value as Color).set(...c.c);
        (renderer as Renderer).render({ scene: mesh });
      },
      onDispose: () => { geometry.remove(); program.remove(); },
    };
  }, { renderScale: 0.6 }); // full-bleed fragment shader: viewport-area-bound, not just DPR-bound

  useEffect(() => {
    const wrapper = wrapperRef.current;
    if (!wrapper) return;
    const onMove = (e: PointerEvent) => {
      const rect = wrapper.getBoundingClientRect();
      pointerRef.current.x = (e.clientX - rect.left) / rect.width;
      pointerRef.current.y = 1 - (e.clientY - rect.top) / rect.height;
      pointerRef.current.target = 1;
    };
    window.addEventListener("pointermove", onMove, { passive: true });
    return () => window.removeEventListener("pointermove", onMove);
  }, [wrapperRef]);

  return (
    <div ref={wrapperRef} aria-hidden="true" className={`pointer-events-none absolute inset-0 -z-10 isolate overflow-hidden bg-bg ${className}`}>
      <div className="absolute inset-0" style={{ background: "radial-gradient(65% 65% at 50% 40%, var(--brand-subtle), var(--bg) 70%)" }} />
      <canvas ref={canvasRef} className="absolute inset-0 h-full w-full" />
    </div>
  );
}

// src/components/fx/backgrounds/particle-field.tsx
"use client";
import { Color, Geometry, Program, Renderer, Mesh } from "ogl";
import { useGLCanvas } from "./use-gl-canvas";
import { useTokenColors } from "./use-token-colors";

const COUNT = 220; // budget: cheap enough for 60fps-capable integrated GPUs at DPR<=1.5

const vertex = /* glsl */ `
  attribute vec3 aSeed; // x: horizontal start, y: fall phase, z: depth (0..1)
  uniform float uTime; uniform float uAspect;
  varying float vDepth;
  void main() {
    float depth = aSeed.z;
    float fallSpeed = 0.05 + depth * 0.10;
    float y = fract(aSeed.y - uTime * fallSpeed) * 2.4 - 1.2; // wraps top-to-bottom, never visibly resets
    float drift = sin(uTime * (0.15 + depth * 0.2) + aSeed.x * 20.0) * (0.05 + depth * 0.10);
    float x = (aSeed.x * 2.0 - 1.0) * uAspect + drift;
    vDepth = depth;
    gl_Position = vec4(x, y, 0.0, 1.0);
    gl_PointSize = (1.4 + depth * 3.2) * 2.0;
  }
`;
const fragment = /* glsl */ `
  precision highp float;
  varying float vDepth;
  uniform vec3 uColorNear; uniform vec3 uColorFar;
  void main() {
    vec2 c = gl_PointCoord - 0.5;
    float d = length(c);
    if (d > 0.5) discard;
    float alpha = smoothstep(0.5, 0.15, d) * (0.35 + vDepth * 0.55);
    gl_FragColor = vec4(mix(uColorFar, uColorNear, vDepth), alpha);
  }
`;

export function ParticleField({ className = "" }: { className?: string }) {
  const colors = useTokenColors({ near: "--brand", far: "--fg-subtle" });
  const { canvasRef, wrapperRef } = useGLCanvas((gl) => {
    const aSeed = new Float32Array(COUNT * 3);
    for (let i = 0; i < COUNT; i++) { aSeed[i * 3] = Math.random(); aSeed[i * 3 + 1] = Math.random(); aSeed[i * 3 + 2] = Math.random(); }
    const geometry = new Geometry(gl, { aSeed: { size: 3, data: aSeed } });
    const program = new Program(gl, {
      vertex, fragment,
      uniforms: { uTime: { value: 0 }, uAspect: { value: 1 }, uColorNear: { value: new Color(...colors.current.near) }, uColorFar: { value: new Color(...colors.current.far) } },
      transparent: true, depthTest: false,
    });
    const mesh = new Mesh(gl, { mode: gl.POINTS, geometry, program });
    return {
      onResize: (w, h) => { program.uniforms.uAspect.value = w / h; },
      onFrame: ({ renderer, time }) => {
        program.uniforms.uTime.value = time;
        const c = colors.current;
        (program.uniforms.uColorNear.value as Color).set(...c.near);
        (program.uniforms.uColorFar.value as Color).set(...c.far);
        (renderer as Renderer).render({ scene: mesh });
      },
      onDispose: () => { geometry.remove(); program.remove(); },
    };
  });
  return (
    <div ref={wrapperRef} aria-hidden="true" className={`pointer-events-none absolute inset-0 -z-10 isolate overflow-hidden bg-bg ${className}`}>
      <canvas ref={canvasRef} className="absolute inset-0 h-full w-full" />
    </div>
  );
}

// src/components/fx/backgrounds/pixel-dither.tsx
"use client";
import { Color, Program, Renderer, Triangle, Mesh } from "ogl";
import { useGLCanvas } from "./use-gl-canvas";
import { useTokenColors } from "./use-token-colors";

const vertex = /* glsl */ `
  attribute vec2 uv; attribute vec2 position; varying vec2 vUv;
  void main() { vUv = uv; gl_Position = vec4(position, 0.0, 1.0); }
`;
const fragment = /* glsl */ `
  precision highp float;
  varying vec2 vUv;
  uniform float uTime; uniform vec2 uResolution; uniform vec3 uColorBg; uniform vec3 uColorFg;
  float hash(vec2 p) { p = fract(p * vec2(153.34, 231.11)); p += dot(p, p + 27.1); return fract(p.x * p.y); }
  float bayer(vec2 cell) {
    int x = int(mod(cell.x, 4.0)); int y = int(mod(cell.y, 4.0)); int index = y * 4 + x;
    float m[16];
    m[0]=0.0; m[1]=8.0; m[2]=2.0; m[3]=10.0; m[4]=12.0; m[5]=4.0; m[6]=14.0; m[7]=6.0;
    m[8]=3.0; m[9]=11.0; m[10]=1.0; m[11]=9.0; m[12]=15.0; m[13]=7.0; m[14]=13.0; m[15]=5.0;
    for (int i = 0; i < 16; i++) { if (i == index) return m[i] / 16.0; }
    return 0.0;
  }
  void main() {
    float cellPx = 10.0;
    vec2 gridRes = floor(uResolution / cellPx);
    vec2 cell = floor(vUv * gridRes);
    float speed = 6.0 + hash(vec2(cell.x, 0.0)) * 10.0;
    float phase = hash(vec2(cell.x, 1.0)) * gridRes.y;
    float fallenRow = mod(phase - uTime * speed, gridRes.y);
    float streak = 1.0 - smoothstep(0.0, 6.0, abs(cell.y - fallenRow));
    float flicker = hash(cell + floor(uTime * 2.0));
    float brightness = streak * (0.55 + 0.45 * flicker);
    float dithered = step(bayer(cell), brightness);
    gl_FragColor = vec4(mix(uColorBg, uColorFg, dithered * brightness), 1.0);
  }
`;

export function PixelDither({ className = "" }: { className?: string }) {
  const colors = useTokenColors({ bg: "--bg", fg: "--brand" });
  const { canvasRef, wrapperRef } = useGLCanvas((gl) => {
    const geometry = new Triangle(gl);
    const program = new Program(gl, {
      vertex, fragment,
      uniforms: { uTime: { value: 0 }, uResolution: { value: [1, 1] }, uColorBg: { value: new Color(...colors.current.bg) }, uColorFg: { value: new Color(...colors.current.fg) } },
    });
    const mesh = new Mesh(gl, { geometry, program });
    return {
      onResize: (w, h) => { program.uniforms.uResolution.value = [w, h]; },
      onFrame: ({ renderer, time }) => {
        program.uniforms.uTime.value = time;
        const c = colors.current;
        (program.uniforms.uColorBg.value as Color).set(...c.bg);
        (program.uniforms.uColorFg.value as Color).set(...c.fg);
        (renderer as Renderer).render({ scene: mesh });
      },
      onDispose: () => { geometry.remove(); program.remove(); },
    };
  });
  return (
    <div ref={wrapperRef} aria-hidden="true" className={`pointer-events-none absolute inset-0 -z-10 isolate overflow-hidden bg-bg ${className}`}>
      <canvas ref={canvasRef} className="absolute inset-0 h-full w-full" />
    </div>
  );
}

// src/components/fx/backgrounds/displacement-grid.tsx
"use client";
import { Color, Geometry, Program, Renderer, Mesh } from "ogl";
import { useEffect, useRef } from "react";
import { useGLCanvas } from "./use-gl-canvas";
import { useTokenColors } from "./use-token-colors";

const COLS = 28, ROWS = 16;

const vertex = /* glsl */ `
  attribute vec2 aBase; // grid position in -1..1
  uniform float uTime; uniform float uAspect; uniform vec2 uPointer; uniform float uPointerStrength;
  void main() {
    vec2 p = aBase;
    float wave = sin(p.x * 3.1 + uTime * 0.4) * cos(p.y * 2.3 - uTime * 0.3) * 0.03;
    p.y += wave;
    p.x += sin(p.y * 4.0 + uTime * 0.25) * 0.02;
    vec2 pAspect = p * vec2(uAspect, 1.0);
    vec2 pointerAspect = uPointer * vec2(uAspect, 1.0);
    vec2 toPoint = pAspect - pointerAspect;
    float d = length(toPoint);
    float falloff = smoothstep(0.55, 0.0, d) * uPointerStrength;
    p += normalize(toPoint + 0.0001) * falloff * 0.12;
    gl_Position = vec4(p, 0.0, 1.0);
  }
`;
const fragment = /* glsl */ `
  precision highp float; uniform vec3 uColor;
  void main() { gl_FragColor = vec4(uColor, 0.5); }
`;

function buildGridLines(): Float32Array {
  const points: number[] = [];
  const stepX = 2 / (COLS - 1), stepY = 2 / (ROWS - 1);
  for (let r = 0; r < ROWS; r++) for (let c = 0; c < COLS - 1; c++) {
    const x0 = -1 + c * stepX, x1 = -1 + (c + 1) * stepX, y = -1 + r * stepY;
    points.push(x0, y, x1, y);
  }
  for (let c = 0; c < COLS; c++) for (let r = 0; r < ROWS - 1; r++) {
    const y0 = -1 + r * stepY, y1 = -1 + (r + 1) * stepY, x = -1 + c * stepX;
    points.push(x, y0, x, y1);
  }
  return new Float32Array(points);
}

export function DisplacementGrid({ className = "" }: { className?: string }) {
  const colors = useTokenColors({ line: "--line-strong" });
  const pointerRef = useRef({ x: 0, y: 0, target: 0 });
  const { canvasRef, wrapperRef } = useGLCanvas((gl) => {
    const geometry = new Geometry(gl, { aBase: { size: 2, data: buildGridLines() } });
    const program = new Program(gl, {
      vertex, fragment,
      uniforms: { uTime: { value: 0 }, uAspect: { value: 1 }, uPointer: { value: [0, 0] }, uPointerStrength: { value: 0 }, uColor: { value: new Color(...colors.current.line) } },
      transparent: true, depthTest: false,
    });
    const mesh = new Mesh(gl, { mode: gl.LINES, geometry, program });
    return {
      onResize: (w, h) => { program.uniforms.uAspect.value = w / h; },
      onFrame: ({ renderer, time }) => {
        program.uniforms.uTime.value = time;
        program.uniforms.uPointer.value = [pointerRef.current.x, pointerRef.current.y];
        pointerRef.current.target *= 0.95;
        program.uniforms.uPointerStrength.value = pointerRef.current.target;
        (program.uniforms.uColor.value as Color).set(...colors.current.line);
        (renderer as Renderer).render({ scene: mesh });
      },
      onDispose: () => { geometry.remove(); program.remove(); },
    };
  });
  useEffect(() => {
    const wrapper = wrapperRef.current;
    if (!wrapper) return;
    const onMove = (e: PointerEvent) => {
      const rect = wrapper.getBoundingClientRect();
      pointerRef.current.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;
      pointerRef.current.y = (1 - (e.clientY - rect.top) / rect.height) * 2 - 1;
      pointerRef.current.target = 1;
    };
    window.addEventListener("pointermove", onMove, { passive: true });
    return () => window.removeEventListener("pointermove", onMove);
  }, [wrapperRef]);
  return (
    <div ref={wrapperRef} aria-hidden="true" className={`pointer-events-none absolute inset-0 -z-10 isolate overflow-hidden bg-bg ${className}`}>
      <canvas ref={canvasRef} className="absolute inset-0 h-full w-full" />
    </div>
  );
}