// ============================================================
// SoulSync — Page Particle System
// Single canvas, per-page particle behaviors
// ============================================================

(function () {
    'use strict';

    // Disable particles on mobile devices for performance
    if (window.innerWidth <= 768 || /Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent)) return;

    const canvas = document.getElementById('page-particles-canvas');
    if (!canvas) return;
    const ctx = canvas.getContext('2d');

    let animFrame = null;
    let frameCount = 0;
    let extras = {}; // temp ref swapped during initExtras calls

    // Transition: converge → burst between presets

    // ── Helpers ──

    let _cachedAccent = '29, 185, 84';
    let _accentCheckFrame = 0;
    function getAccentRGB() {
        // Only re-read CSS variable every 60 frames (~1s) to avoid getComputedStyle overhead
        if (_accentCheckFrame++ % 60 === 0) {
            const s = getComputedStyle(document.documentElement).getPropertyValue('--accent-rgb').trim();
            if (s) _cachedAccent = s;
        }
        return _cachedAccent;
    }

    // Shift an "r, g, b" accent string by a hue offset (degrees), cached per base color
    let _shiftCache = { base: '', shifts: {} };
    function shiftAccent(rgbStr, hueDeg) {
        if (hueDeg === 0) return rgbStr;
        // Check cache
        if (_shiftCache.base !== rgbStr) _shiftCache = { base: rgbStr, shifts: {} };
        const key = Math.round(hueDeg);
        if (key in _shiftCache.shifts) return _shiftCache.shifts[key];

        const [r, g, b] = rgbStr.split(',').map(s => parseInt(s.trim()));
        const rn = r / 255, gn = g / 255, bn = b / 255;
        const max = Math.max(rn, gn, bn), min = Math.min(rn, gn, bn);
        let h = 0, s = 0;
        const l = (max + min) / 2;
        if (max !== min) {
            const d = max - min;
            s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
            if (max === rn) h = ((gn - bn) / d + (gn < bn ? 6 : 0)) / 6;
            else if (max === gn) h = ((bn - rn) / d + 2) / 6;
            else h = ((rn - gn) / d + 4) / 6;
        }
        h = ((h * 360 + hueDeg) % 360 + 360) % 360;
        const c = (1 - Math.abs(2 * l - 1)) * s;
        const x = c * (1 - Math.abs((h / 60) % 2 - 1));
        const m = l - c / 2;
        let r1, g1, b1;
        if (h < 60) { r1 = c; g1 = x; b1 = 0; }
        else if (h < 120) { r1 = x; g1 = c; b1 = 0; }
        else if (h < 180) { r1 = 0; g1 = c; b1 = x; }
        else if (h < 240) { r1 = 0; g1 = x; b1 = c; }
        else if (h < 300) { r1 = x; g1 = 0; b1 = c; }
        else { r1 = c; g1 = 0; b1 = x; }
        const result = `${Math.round((r1 + m) * 255)}, ${Math.round((g1 + m) * 255)}, ${Math.round((b1 + m) * 255)}`;
        _shiftCache.shifts[key] = result;
        return result;
    }

    function resize() {
        const dpr = 1; // keep 1:1 for performance
        canvas.width = canvas.clientWidth * dpr;
        canvas.height = canvas.clientHeight * dpr;
    }

    window.addEventListener('resize', resize);
    resize();

    // ── Preset Definitions ──
    // Each preset: { count, init(p, i), update(p, time, i), draw(p, ctx, accent, time),
    //   optional: initExtras(), drawGlobal(ctx, particles, accent, time, extras) }

    const PRESETS = {

        // ── DASHBOARD — network nodes, connections, data packets, shooting stars ──
        dashboard: {
            count: 50,
            init(p, i) {
                p.x = Math.random() * canvas.width;
                p.y = Math.random() * canvas.height;
                p.vx = (Math.random() - 0.5) * 0.3;
                p.vy = (Math.random() - 0.5) * 0.3;
                p.phase = Math.random() * Math.PI * 2;
                // Hub nodes — ~10% are larger, brighter, attract more connections
                p.isHub = i < 5;
                p.radius = p.isHub ? (3 + Math.random() * 2) : (1.5 + Math.random() * 1.5);
                // Color offset — hue shift ±30° from accent for variety
                p.hueShift = (Math.random() - 0.5) * 60;
            },
            update(p) {
                p.x += p.vx;
                p.y += p.vy;
                if (p.x < 15 || p.x > canvas.width - 15) p.vx *= -1;
                if (p.y < 15 || p.y > canvas.height - 15) p.vy *= -1;
                p.x = Math.max(5, Math.min(canvas.width - 5, p.x));
                p.y = Math.max(5, Math.min(canvas.height - 5, p.y));
            },
            draw(p, ctx, accent, time) {
                const pulse = 0.5 + 0.5 * Math.sin(time * 1.5 + p.phase);
                const col = shiftAccent(accent, p.hueShift);

                // Glow — hubs get bigger, brighter glow
                const glowSize = p.isHub ? p.radius * 6 : p.radius * 4;
                const glowAlpha = p.isHub ? (0.18 + pulse * 0.12) : (0.10 + pulse * 0.07);
                const glow = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, glowSize);
                glow.addColorStop(0, `rgba(${col}, ${glowAlpha})`);
                glow.addColorStop(1, 'rgba(0,0,0,0)');
                ctx.beginPath();
                ctx.arc(p.x, p.y, glowSize, 0, Math.PI * 2);
                ctx.fillStyle = glow;
                ctx.fill();

                // Core
                const coreAlpha = p.isHub ? (0.5 + pulse * 0.3) : (0.3 + pulse * 0.2);
                ctx.beginPath();
                ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
                ctx.fillStyle = `rgba(${col}, ${coreAlpha})`;
                ctx.fill();

                // Hub ring
                if (p.isHub) {
                    ctx.beginPath();
                    ctx.arc(p.x, p.y, p.radius + 2 + pulse * 2, 0, Math.PI * 2);
                    ctx.strokeStyle = `rgba(${col}, ${0.08 + pulse * 0.06})`;
                    ctx.lineWidth = 0.8;
                    ctx.stroke();
                }
            },
            initExtras() {
                extras.packets = [];
                extras.shootingStars = [];
                extras.activeLines = {}; // "i-j" → glow remaining frames
                extras.connectionDist = 180;
            },
            drawGlobal(ctx, parts, accent, time, layerExtras) {
                const ex = layerExtras || extras;
                if (!ex.packets) { ex.packets = []; ex.shootingStars = []; ex.activeLines = {}; ex.connectionDist = 180; }
                const dist = ex.connectionDist;

                // Decay active line glows
                for (const key in ex.activeLines) {
                    ex.activeLines[key] -= 0.02;
                    if (ex.activeLines[key] <= 0) delete ex.activeLines[key];
                }

                // Connections — hubs connect further, active lines glow brighter
                for (let i = 0; i < parts.length; i++) {
                    for (let j = i + 1; j < parts.length; j++) {
                        const maxDist = (parts[i].isHub || parts[j].isHub) ? dist * 1.3 : dist;
                        const dx = parts[j].x - parts[i].x;
                        const dy = parts[j].y - parts[i].y;
                        const d = Math.sqrt(dx * dx + dy * dy);
                        if (d < maxDist) {
                            const key = `${i}-${j}`;
                            const baseAlpha = (1 - d / maxDist) * 0.10;
                            const glowBoost = ex.activeLines[key] || 0;
                            const lineCol = shiftAccent(accent, (parts[i].hueShift + parts[j].hueShift) * 0.5);

                            ctx.beginPath();
                            ctx.moveTo(parts[i].x, parts[i].y);
                            ctx.lineTo(parts[j].x, parts[j].y);
                            ctx.strokeStyle = `rgba(${lineCol}, ${baseAlpha + glowBoost * 0.25})`;
                            ctx.lineWidth = glowBoost > 0 ? 1.2 : 0.7;
                            ctx.stroke();
                        }
                    }
                }

                // Spawn packets — prefer hub connections
                if (frameCount % 60 === 0 && parts.length >= 2) {
                    // Pick a hub if possible, otherwise random
                    const hubs = parts.reduce((arr, p, i) => { if (p.isHub) arr.push(i); return arr; }, []);
                    const a = hubs.length > 0 && Math.random() < 0.6
                        ? hubs[Math.floor(Math.random() * hubs.length)]
                        : Math.floor(Math.random() * parts.length);
                    let b = a, best = dist * 1.5;
                    for (let i = 0; i < parts.length; i++) {
                        if (i === a) continue;
                        const dx = parts[i].x - parts[a].x;
                        const dy = parts[i].y - parts[a].y;
                        const d = Math.sqrt(dx * dx + dy * dy);
                        if (d < best) { best = d; b = i; }
                    }
                    if (b !== a) {
                        ex.packets.push({ from: a, to: b, t: 0, trail: [], hue: parts[a].hueShift });
                        // Light up this connection
                        const key = a < b ? `${a}-${b}` : `${b}-${a}`;
                        ex.activeLines[key] = 1;
                    }
                }

                // Draw packets with comet trail
                for (let i = ex.packets.length - 1; i >= 0; i--) {
                    const pkt = ex.packets[i];
                    pkt.t += 0.02;
                    if (pkt.t >= 1) { ex.packets.splice(i, 1); continue; }
                    const fa = parts[pkt.from], ta = parts[pkt.to];
                    const px = fa.x + (ta.x - fa.x) * pkt.t;
                    const py = fa.y + (ta.y - fa.y) * pkt.t;

                    // Store trail points
                    pkt.trail.push({ x: px, y: py });
                    if (pkt.trail.length > 8) pkt.trail.shift();

                    const col = shiftAccent(accent, pkt.hue);

                    // Draw trail
                    for (let t = 0; t < pkt.trail.length - 1; t++) {
                        const alpha = (t / pkt.trail.length) * 0.3;
                        const width = (t / pkt.trail.length) * 2;
                        ctx.beginPath();
                        ctx.moveTo(pkt.trail[t].x, pkt.trail[t].y);
                        ctx.lineTo(pkt.trail[t + 1].x, pkt.trail[t + 1].y);
                        ctx.strokeStyle = `rgba(${col}, ${alpha})`;
                        ctx.lineWidth = width;
                        ctx.lineCap = 'round';
                        ctx.stroke();
                    }

                    // Head glow
                    const g = ctx.createRadialGradient(px, py, 0, px, py, 8);
                    g.addColorStop(0, `rgba(${col}, 0.6)`);
                    g.addColorStop(0.4, `rgba(${col}, 0.15)`);
                    g.addColorStop(1, 'rgba(0,0,0,0)');
                    ctx.beginPath();
                    ctx.arc(px, py, 8, 0, Math.PI * 2);
                    ctx.fillStyle = g;
                    ctx.fill();

                    // Bright core
                    ctx.beginPath();
                    ctx.arc(px, py, 1.8, 0, Math.PI * 2);
                    ctx.fillStyle = 'rgba(255,255,255,0.9)';
                    ctx.fill();
                }

                // Shooting stars — spawn occasionally
                if (frameCount % 200 === 0 || (frameCount % 120 === 0 && Math.random() < 0.3)) {
                    const edge = Math.random();
                    let sx, sy, angle;
                    if (edge < 0.5) {
                        // From left/right
                        sx = edge < 0.25 ? -10 : canvas.width + 10;
                        sy = Math.random() * canvas.height * 0.6;
                        angle = edge < 0.25 ? (Math.random() * 0.4 + 0.1) : (Math.PI - Math.random() * 0.4 - 0.1);
                    } else {
                        // From top
                        sx = Math.random() * canvas.width;
                        sy = -10;
                        angle = Math.random() * 0.6 + 0.4 + (Math.random() < 0.5 ? 0 : Math.PI * 0.3);
                    }
                    const speed = 3 + Math.random() * 4;
                    ex.shootingStars.push({
                        x: sx, y: sy,
                        vx: Math.cos(angle) * speed,
                        vy: Math.sin(angle) * speed,
                        trail: [],
                        life: 1,
                        hue: (Math.random() - 0.5) * 80
                    });
                }

                // Draw shooting stars
                for (let i = ex.shootingStars.length - 1; i >= 0; i--) {
                    const star = ex.shootingStars[i];
                    star.x += star.vx;
                    star.y += star.vy;
                    star.life -= 0.012;
                    star.trail.push({ x: star.x, y: star.y });
                    if (star.trail.length > 20) star.trail.shift();

                    if (star.life <= 0 || star.x < -50 || star.x > canvas.width + 50 ||
                        star.y < -50 || star.y > canvas.height + 50) {
                        ex.shootingStars.splice(i, 1);
                        continue;
                    }

                    const col = shiftAccent(accent, star.hue);

                    // Trail
                    for (let t = 0; t < star.trail.length - 1; t++) {
                        const frac = t / star.trail.length;
                        const alpha = frac * 0.5 * star.life;
                        ctx.beginPath();
                        ctx.moveTo(star.trail[t].x, star.trail[t].y);
                        ctx.lineTo(star.trail[t + 1].x, star.trail[t + 1].y);
                        ctx.strokeStyle = `rgba(${col}, ${alpha})`;
                        ctx.lineWidth = frac * 2.5;
                        ctx.lineCap = 'round';
                        ctx.stroke();
                    }

                    // Head
                    const sg = ctx.createRadialGradient(star.x, star.y, 0, star.x, star.y, 5);
                    sg.addColorStop(0, `rgba(255, 255, 255, ${0.8 * star.life})`);
                    sg.addColorStop(0.3, `rgba(${col}, ${0.5 * star.life})`);
                    sg.addColorStop(1, 'rgba(0,0,0,0)');
                    ctx.beginPath();
                    ctx.arc(star.x, star.y, 5, 0, Math.PI * 2);
                    ctx.fillStyle = sg;
                    ctx.fill();
                }
            }
        },

        // ── SYNC — orbiting rings with sync arrows ──
        sync: {
            count: 40,
            init(p, i) {
                // Assign each particle to an orbital ring
                const ringCount = 4;
                p.ring = i % ringCount;
                const ringRadii = [0.08, 0.15, 0.23, 0.32]; // fraction of min(w,h)
                p.orbitRadius = ringRadii[p.ring];
                p.angle = (i / Math.ceil(40 / ringCount)) * Math.PI * 2 + Math.random() * 0.3;
                // Alternating directions per ring
                p.speed = (p.ring % 2 === 0 ? 1 : -1) * (0.004 + p.ring * 0.002);
                p.radius = 1.5 + Math.random() * 1.5;
                p.hueShift = (p.ring - 1.5) * 25; // spread hues across rings
                p.phase = Math.random() * Math.PI * 2;
                // Compute initial x/y
                const cx = canvas.width * 0.5, cy = canvas.height * 0.45;
                const r = p.orbitRadius * Math.min(canvas.width, canvas.height);
                p.x = cx + Math.cos(p.angle) * r;
                p.y = cy + Math.sin(p.angle) * r * 0.5; // elliptical
            },
            update(p) {
                p.angle += p.speed;
                const cx = canvas.width * 0.5, cy = canvas.height * 0.45;
                const r = p.orbitRadius * Math.min(canvas.width, canvas.height);
                p.x = cx + Math.cos(p.angle) * r;
                p.y = cy + Math.sin(p.angle) * r * 0.5;
            },
            draw(p, ctx, accent, time) {
                const pulse = 0.5 + 0.5 * Math.sin(time * 2 + p.phase);
                const col = shiftAccent(accent, p.hueShift);
                // Depth — particles "behind" center are dimmer
                const depth = Math.sin(p.angle);
                const depthAlpha = 0.3 + (depth * 0.5 + 0.5) * 0.5;

                const glow = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.radius * 4);
                glow.addColorStop(0, `rgba(${col}, ${(0.12 + pulse * 0.08) * depthAlpha})`);
                glow.addColorStop(1, 'rgba(0,0,0,0)');
                ctx.beginPath();
                ctx.arc(p.x, p.y, p.radius * 4, 0, Math.PI * 2);
                ctx.fillStyle = glow;
                ctx.fill();

                ctx.beginPath();
                ctx.arc(p.x, p.y, p.radius * (0.8 + depth * 0.2), 0, Math.PI * 2);
                ctx.fillStyle = `rgba(${col}, ${(0.3 + pulse * 0.25) * depthAlpha})`;
                ctx.fill();
            },
            initExtras() {
                extras.syncArrowAngle = 0;
                extras.transfers = []; // data pulses jumping between rings
                extras.arcs = []; // energy arcs between particles
                extras.transferTimer = 0;
            },
            drawGlobal(ctx, parts, accent, time, layerExtras) {
                const ex = layerExtras || extras;
                if (ex.syncArrowAngle === undefined) {
                    ex.syncArrowAngle = 0; ex.transfers = []; ex.arcs = []; ex.transferTimer = 0;
                }
                const cx = canvas.width * 0.5, cy = canvas.height * 0.45;
                const minDim = Math.min(canvas.width, canvas.height);
                const ringRadii = [0.08, 0.15, 0.23, 0.32];

                // Draw faint orbital paths — pulsing
                for (let r = 0; r < ringRadii.length; r++) {
                    const rx = ringRadii[r] * minDim;
                    const ry = rx * 0.5;
                    const col = shiftAccent(accent, (r - 1.5) * 25);
                    const ringPulse = 0.03 + 0.025 * Math.sin(time * 1.2 + r * 1.5);
                    ctx.beginPath();
                    ctx.ellipse(cx, cy, rx, ry, 0, 0, Math.PI * 2);
                    ctx.strokeStyle = `rgba(${col}, ${ringPulse})`;
                    ctx.lineWidth = 0.8;
                    ctx.stroke();
                }

                // Spawn data transfers between rings
                ex.transferTimer++;
                if (ex.transferTimer >= 50 + Math.floor(Math.random() * 30)) {
                    ex.transferTimer = 0;
                    // Pick two particles on different rings
                    const ringA = Math.floor(Math.random() * 4);
                    let ringB = ringA;
                    while (ringB === ringA) ringB = Math.floor(Math.random() * 4);
                    const fromParts = parts.filter(p => p.ring === ringA);
                    const toParts = parts.filter(p => p.ring === ringB);
                    if (fromParts.length && toParts.length) {
                        const from = fromParts[Math.floor(Math.random() * fromParts.length)];
                        const to = toParts[Math.floor(Math.random() * toParts.length)];
                        ex.transfers.push({
                            fx: from.x, fy: from.y,
                            tx: to.x, ty: to.y,
                            fromRef: from, toRef: to,
                            t: 0,
                            hue: (from.hueShift + to.hueShift) * 0.5,
                            trail: []
                        });
                    }
                }

                // Draw transfers — arc through center
                for (let i = ex.transfers.length - 1; i >= 0; i--) {
                    const tr = ex.transfers[i];
                    tr.t += 0.025;
                    // Update endpoints to track moving particles
                    tr.fx = tr.fromRef.x; tr.fy = tr.fromRef.y;
                    tr.tx = tr.toRef.x; tr.ty = tr.toRef.y;

                    if (tr.t >= 1) { ex.transfers.splice(i, 1); continue; }

                    // Bezier through center
                    const t = tr.t;
                    const mt = 1 - t;
                    const px = mt * mt * tr.fx + 2 * mt * t * cx + t * t * tr.tx;
                    const py = mt * mt * tr.fy + 2 * mt * t * cy + t * t * tr.ty;

                    tr.trail.push({ x: px, y: py });
                    if (tr.trail.length > 8) tr.trail.shift();

                    const col = shiftAccent(accent, tr.hue);

                    // Trail
                    for (let s = 0; s < tr.trail.length - 1; s++) {
                        const frac = s / tr.trail.length;
                        ctx.beginPath();
                        ctx.moveTo(tr.trail[s].x, tr.trail[s].y);
                        ctx.lineTo(tr.trail[s + 1].x, tr.trail[s + 1].y);
                        ctx.strokeStyle = `rgba(${col}, ${frac * 0.3})`;
                        ctx.lineWidth = frac * 2;
                        ctx.lineCap = 'round';
                        ctx.stroke();
                    }

                    // Head
                    const hg = ctx.createRadialGradient(px, py, 0, px, py, 6);
                    hg.addColorStop(0, `rgba(255,255,255, 0.5)`);
                    hg.addColorStop(0.3, `rgba(${col}, 0.3)`);
                    hg.addColorStop(1, 'rgba(0,0,0,0)');
                    ctx.beginPath();
                    ctx.arc(px, py, 6, 0, Math.PI * 2);
                    ctx.fillStyle = hg;
                    ctx.fill();
                }

                // Energy arcs — brief flickers between close particles on adjacent rings
                if (frameCount % 8 === 0) {
                    // Clean old arcs
                    for (let i = ex.arcs.length - 1; i >= 0; i--) {
                        ex.arcs[i].life -= 0.08;
                        if (ex.arcs[i].life <= 0) ex.arcs.splice(i, 1);
                    }
                    // Maybe spawn new arc
                    if (ex.arcs.length < 3 && Math.random() < 0.3) {
                        const a = Math.floor(Math.random() * parts.length);
                        let bestDist = 120, bestIdx = -1;
                        for (let j = 0; j < parts.length; j++) {
                            if (j === a || parts[j].ring === parts[a].ring) continue;
                            if (Math.abs(parts[j].ring - parts[a].ring) > 1) continue;
                            const dx = parts[j].x - parts[a].x, dy = parts[j].y - parts[a].y;
                            const d = Math.sqrt(dx * dx + dy * dy);
                            if (d < bestDist) { bestDist = d; bestIdx = j; }
                        }
                        if (bestIdx >= 0) {
                            ex.arcs.push({ a, b: bestIdx, life: 1 });
                        }
                    }
                }

                // Draw arcs
                for (const arc of ex.arcs) {
                    const pa = parts[arc.a], pb = parts[arc.b];
                    const col = shiftAccent(accent, (pa.hueShift + pb.hueShift) * 0.5);
                    ctx.beginPath();
                    ctx.moveTo(pa.x, pa.y);
                    const mx = (pa.x + pb.x) * 0.5 + (Math.random() - 0.5) * 6;
                    const my = (pa.y + pb.y) * 0.5 + (Math.random() - 0.5) * 6;
                    ctx.quadraticCurveTo(mx, my, pb.x, pb.y);
                    ctx.strokeStyle = `rgba(${col}, ${arc.life * 0.2})`;
                    ctx.lineWidth = arc.life * 1.5;
                    ctx.lineCap = 'round';
                    ctx.stroke();
                    // Bright core
                    ctx.strokeStyle = `rgba(255,255,255, ${arc.life * 0.08})`;
                    ctx.lineWidth = arc.life * 0.5;
                    ctx.stroke();
                }

                // Center sync arrows — two curved arrows rotating
                ex.syncArrowAngle += 0.008;
                const arrowR = minDim * 0.035;
                ctx.save();
                ctx.translate(cx, cy);
                ctx.rotate(ex.syncArrowAngle);
                for (let a = 0; a < 2; a++) {
                    ctx.save();
                    ctx.rotate(a * Math.PI);
                    ctx.beginPath();
                    ctx.arc(0, 0, arrowR, -0.9, 0.9);
                    ctx.strokeStyle = `rgba(${accent}, 0.15)`;
                    ctx.lineWidth = 1.5;
                    ctx.lineCap = 'round';
                    ctx.stroke();
                    // Arrowhead
                    const tx = arrowR * Math.cos(0.9), ty = arrowR * Math.sin(0.9);
                    ctx.beginPath();
                    ctx.moveTo(tx - 4, ty - 3);
                    ctx.lineTo(tx, ty);
                    ctx.lineTo(tx + 1, ty - 5);
                    ctx.stroke();
                    ctx.restore();
                }
                ctx.restore();

                // Center glow — pulses with transfer activity
                const activity = Math.min(1, ex.transfers.length * 0.3);
                const cg = ctx.createRadialGradient(cx, cy, 0, cx, cy, minDim * 0.06);
                cg.addColorStop(0, `rgba(${accent}, ${0.08 + activity * 0.1})`);
                cg.addColorStop(1, 'rgba(0,0,0,0)');
                ctx.beginPath();
                ctx.arc(cx, cy, minDim * 0.06, 0, Math.PI * 2);
                ctx.fillStyle = cg;
                ctx.fill();
            }
        },

        // ── SEARCH — radar/sonar pulse with scanning particles ──
        search: {
            count: 45,
            init(p, i) {
                // Scatter particles across canvas
                p.x = Math.random() * canvas.width;
                p.y = Math.random() * canvas.height;
                p.baseX = p.x;
                p.baseY = p.y;
                p.radius = 1 + Math.random() * 1.5;
                p.phase = Math.random() * Math.PI * 2;
                p.hueShift = (Math.random() - 0.5) * 50;
                // Slow drift
                p.vx = (Math.random() - 0.5) * 0.15;
                p.vy = (Math.random() - 0.5) * 0.15;
                // Lit state — brightens when radar sweeps over
                p.lit = 0;
                // Some particles are "result" nodes — slightly bigger, brighter
                p.isResult = i < 8;
                if (p.isResult) p.radius = 2 + Math.random() * 1.5;
            },
            update(p) {
                // Gentle drift
                p.x += p.vx;
                p.y += p.vy;
                // Soft bounds — bounce
                if (p.x < 10 || p.x > canvas.width - 10) p.vx *= -1;
                if (p.y < 10 || p.y > canvas.height - 10) p.vy *= -1;
                p.x = Math.max(5, Math.min(canvas.width - 5, p.x));
                p.y = Math.max(5, Math.min(canvas.height - 5, p.y));
                // Decay lit state
                if (p.lit > 0) p.lit = Math.max(0, p.lit - 0.015);
            },
            draw(p, ctx, accent, time) {
                const pulse = 0.5 + 0.5 * Math.sin(time * 1.2 + p.phase);
                const col = shiftAccent(accent, p.hueShift);
                const litBoost = p.lit;

                // Glow — bigger when lit
                const glowSize = p.radius * (3 + litBoost * 5);
                const glowAlpha = (p.isResult ? 0.08 : 0.05) + litBoost * 0.25;
                const glow = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, glowSize);
                glow.addColorStop(0, `rgba(${col}, ${glowAlpha})`);
                glow.addColorStop(1, 'rgba(0,0,0,0)');
                ctx.beginPath();
                ctx.arc(p.x, p.y, glowSize, 0, Math.PI * 2);
                ctx.fillStyle = glow;
                ctx.fill();

                // Core
                const coreAlpha = (p.isResult ? 0.25 : 0.15) + pulse * 0.1 + litBoost * 0.45;
                ctx.beginPath();
                ctx.arc(p.x, p.y, p.radius * (1 + litBoost * 0.3), 0, Math.PI * 2);
                ctx.fillStyle = `rgba(${col}, ${coreAlpha})`;
                ctx.fill();

                // Result ring when lit
                if (p.isResult && litBoost > 0.1) {
                    ctx.beginPath();
                    ctx.arc(p.x, p.y, p.radius + 3 + litBoost * 4, 0, Math.PI * 2);
                    ctx.strokeStyle = `rgba(${col}, ${litBoost * 0.2})`;
                    ctx.lineWidth = 0.6;
                    ctx.stroke();
                }
            },
            initExtras() {
                extras.rings = []; // expanding radar rings
                extras.spawnTimer = 0;
                extras.scanAngle = 0;
            },
            drawGlobal(ctx, parts, accent, time, layerExtras) {
                const ex = layerExtras || extras;
                if (!ex.rings) { ex.rings = []; ex.spawnTimer = 0; ex.scanAngle = 0; }

                const cx = canvas.width * 0.5, cy = canvas.height * 0.45;
                const maxRadius = Math.max(canvas.width, canvas.height) * 0.7;

                // Spawn rings periodically
                ex.spawnTimer++;
                if (ex.spawnTimer >= 120) { // every ~2 seconds
                    ex.rings.push({
                        radius: 0,
                        maxRadius: maxRadius,
                        alpha: 0.35,
                        hue: (Math.random() - 0.5) * 40
                    });
                    ex.spawnTimer = 0;
                }

                // Update and draw rings
                for (let i = ex.rings.length - 1; i >= 0; i--) {
                    const ring = ex.rings[i];
                    ring.radius += 2.5;
                    ring.alpha = 0.35 * (1 - ring.radius / ring.maxRadius);

                    if (ring.alpha <= 0 || ring.radius > ring.maxRadius) {
                        ex.rings.splice(i, 1);
                        continue;
                    }

                    const col = shiftAccent(accent, ring.hue);

                    // Ring stroke
                    ctx.beginPath();
                    ctx.arc(cx, cy, ring.radius, 0, Math.PI * 2);
                    ctx.strokeStyle = `rgba(${col}, ${ring.alpha * 0.5})`;
                    ctx.lineWidth = 1.5;
                    ctx.stroke();

                    // Soft inner glow on ring edge
                    const ringGlow = ctx.createRadialGradient(cx, cy, Math.max(0, ring.radius - 15), cx, cy, ring.radius + 5);
                    ringGlow.addColorStop(0, 'rgba(0,0,0,0)');
                    ringGlow.addColorStop(0.7, `rgba(${col}, ${ring.alpha * 0.08})`);
                    ringGlow.addColorStop(1, 'rgba(0,0,0,0)');
                    ctx.beginPath();
                    ctx.arc(cx, cy, ring.radius + 5, 0, Math.PI * 2);
                    ctx.fillStyle = ringGlow;
                    ctx.fill();

                    // Light up particles near this ring's edge
                    for (const p of parts) {
                        const dx = p.x - cx, dy = p.y - cy;
                        const dist = Math.sqrt(dx * dx + dy * dy);
                        const diff = Math.abs(dist - ring.radius);
                        if (diff < 25) {
                            p.lit = Math.max(p.lit, (1 - diff / 25) * ring.alpha * 2.5);
                        }
                    }
                }

                // Rotating scan line — faint sweep
                ex.scanAngle += 0.012;
                const scanLen = maxRadius * 0.6;
                const sx = cx + Math.cos(ex.scanAngle) * scanLen;
                const sy = cy + Math.sin(ex.scanAngle) * scanLen;
                const scanGrad = ctx.createLinearGradient(cx, cy, sx, sy);
                scanGrad.addColorStop(0, `rgba(${accent}, 0.06)`);
                scanGrad.addColorStop(0.7, `rgba(${accent}, 0.02)`);
                scanGrad.addColorStop(1, 'rgba(0,0,0,0)');
                ctx.beginPath();
                ctx.moveTo(cx, cy);
                ctx.lineTo(sx, sy);
                ctx.strokeStyle = scanGrad;
                ctx.lineWidth = 1;
                ctx.stroke();

                // Scan wedge — faint arc trailing the scan line
                ctx.beginPath();
                ctx.moveTo(cx, cy);
                ctx.arc(cx, cy, scanLen, ex.scanAngle - 0.3, ex.scanAngle, false);
                ctx.closePath();
                const wedgeGrad = ctx.createRadialGradient(cx, cy, 0, cx, cy, scanLen);
                wedgeGrad.addColorStop(0, `rgba(${accent}, 0.03)`);
                wedgeGrad.addColorStop(0.5, `rgba(${accent}, 0.01)`);
                wedgeGrad.addColorStop(1, 'rgba(0,0,0,0)');
                ctx.fillStyle = wedgeGrad;
                ctx.fill();

                // Center dot — radar origin
                const cg = ctx.createRadialGradient(cx, cy, 0, cx, cy, 12);
                cg.addColorStop(0, `rgba(${accent}, 0.15)`);
                cg.addColorStop(0.5, `rgba(${accent}, 0.05)`);
                cg.addColorStop(1, 'rgba(0,0,0,0)');
                ctx.beginPath();
                ctx.arc(cx, cy, 12, 0, Math.PI * 2);
                ctx.fillStyle = cg;
                ctx.fill();

                ctx.beginPath();
                ctx.arc(cx, cy, 2, 0, Math.PI * 2);
                ctx.fillStyle = `rgba(${accent}, 0.3)`;
                ctx.fill();

                // Crosshair lines — very subtle
                ctx.strokeStyle = `rgba(${accent}, 0.04)`;
                ctx.lineWidth = 0.5;
                ctx.beginPath();
                ctx.moveTo(cx - scanLen * 0.4, cy);
                ctx.lineTo(cx + scanLen * 0.4, cy);
                ctx.moveTo(cx, cy - scanLen * 0.4);
                ctx.lineTo(cx, cy + scanLen * 0.4);
                ctx.stroke();

                // Range circles — faint concentric guides
                for (let r = 1; r <= 3; r++) {
                    const guideR = scanLen * r * 0.3;
                    ctx.beginPath();
                    ctx.arc(cx, cy, guideR, 0, Math.PI * 2);
                    ctx.strokeStyle = `rgba(${accent}, 0.025)`;
                    ctx.lineWidth = 0.5;
                    ctx.stroke();
                }
            }
        },

        // ── DISCOVER — drifting constellation starfield ──
        discover: {
            count: 60,
            init(p, i) {
                p.x = Math.random() * canvas.width;
                p.y = Math.random() * canvas.height;
                // Slow parallax drift — different layers move at different speeds
                p.layer = Math.random(); // 0 = far/dim, 1 = near/bright
                p.vx = (0.05 + p.layer * 0.15) * (Math.random() < 0.5 ? 1 : -1);
                p.vy = -0.02 - p.layer * 0.08; // gentle upward drift
                p.radius = 0.5 + p.layer * 2;
                p.phase = Math.random() * Math.PI * 2;
                p.hueShift = (Math.random() - 0.5) * 70;
                // Twinkle speed — far stars twinkle faster
                p.twinkleSpeed = 1.5 + (1 - p.layer) * 2;
                // Some are "constellation" anchor stars — brighter, connected
                p.isAnchor = i < 15;
                if (p.isAnchor) {
                    p.radius = 1.5 + p.layer * 2;
                    p.vx *= 0.4;
                    p.vy *= 0.4;
                }
            },
            update(p) {
                p.x += p.vx;
                p.y += p.vy;
                // Wrap around edges
                if (p.x < -20) p.x = canvas.width + 20;
                if (p.x > canvas.width + 20) p.x = -20;
                if (p.y < -20) p.y = canvas.height + 20;
                if (p.y > canvas.height + 20) p.y = -20;
            },
            draw(p, ctx, accent, time) {
                const twinkle = 0.4 + 0.6 * Math.pow(Math.sin(time * p.twinkleSpeed + p.phase), 2);
                const col = shiftAccent(accent, p.hueShift);
                const brightness = (0.3 + p.layer * 0.7) * twinkle;

                // Soft glow
                const glowR = p.radius * (3 + p.layer * 3);
                const glow = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, glowR);
                glow.addColorStop(0, `rgba(${col}, ${brightness * 0.25})`);
                glow.addColorStop(0.5, `rgba(${col}, ${brightness * 0.06})`);
                glow.addColorStop(1, 'rgba(0,0,0,0)');
                ctx.beginPath();
                ctx.arc(p.x, p.y, glowR, 0, Math.PI * 2);
                ctx.fillStyle = glow;
                ctx.fill();

                // Core star
                ctx.beginPath();
                ctx.arc(p.x, p.y, p.radius * (0.6 + twinkle * 0.4), 0, Math.PI * 2);
                ctx.fillStyle = `rgba(${col}, ${brightness})`;
                ctx.fill();

                // Cross-spike on bright anchor stars
                if (p.isAnchor && twinkle > 0.7) {
                    const spikeLen = p.radius * 4 * twinkle;
                    const spikeAlpha = (twinkle - 0.7) * brightness * 0.5;
                    ctx.strokeStyle = `rgba(${col}, ${spikeAlpha})`;
                    ctx.lineWidth = 0.5;
                    ctx.beginPath();
                    ctx.moveTo(p.x - spikeLen, p.y);
                    ctx.lineTo(p.x + spikeLen, p.y);
                    ctx.moveTo(p.x, p.y - spikeLen);
                    ctx.lineTo(p.x, p.y + spikeLen);
                    ctx.stroke();
                }
            },
            initExtras() {
                extras.constellations = []; // groups of connected anchor indices
                extras.shootingStars = [];
                extras.nebulae = [];
                // Create 3 nebula regions
                for (let i = 0; i < 3; i++) {
                    extras.nebulae.push({
                        x: Math.random() * canvas.width,
                        y: Math.random() * canvas.height,
                        radius: 80 + Math.random() * 120,
                        hue: (Math.random() - 0.5) * 80,
                        drift: (Math.random() - 0.5) * 0.15
                    });
                }
            },
            drawGlobal(ctx, parts, accent, time, layerExtras) {
                const ex = layerExtras || extras;
                if (!ex.nebulae) { ex.nebulae = []; ex.shootingStars = []; ex.constellations = []; }

                // Draw nebula clouds — very subtle colored regions
                for (const neb of ex.nebulae) {
                    neb.x += neb.drift;
                    if (neb.x < -200) neb.x = canvas.width + 200;
                    if (neb.x > canvas.width + 200) neb.x = -200;

                    const col = shiftAccent(accent, neb.hue);
                    const pulse = 0.7 + 0.3 * Math.sin(time * 0.3 + neb.hue);
                    const ng = ctx.createRadialGradient(neb.x, neb.y, 0, neb.x, neb.y, neb.radius);
                    ng.addColorStop(0, `rgba(${col}, ${0.035 * pulse})`);
                    ng.addColorStop(0.5, `rgba(${col}, ${0.015 * pulse})`);
                    ng.addColorStop(1, 'rgba(0,0,0,0)');
                    ctx.beginPath();
                    ctx.arc(neb.x, neb.y, neb.radius, 0, Math.PI * 2);
                    ctx.fillStyle = ng;
                    ctx.fill();
                }

                // Constellation lines — connect nearby anchor stars
                const anchors = parts.filter(p => p.isAnchor);
                const conDist = 180;
                for (let i = 0; i < anchors.length; i++) {
                    for (let j = i + 1; j < anchors.length; j++) {
                        const dx = anchors[j].x - anchors[i].x;
                        const dy = anchors[j].y - anchors[i].y;
                        const d = Math.sqrt(dx * dx + dy * dy);
                        if (d < conDist) {
                            const alpha = (1 - d / conDist) * 0.08;
                            const col = shiftAccent(accent, (anchors[i].hueShift + anchors[j].hueShift) * 0.5);
                            ctx.beginPath();
                            ctx.moveTo(anchors[i].x, anchors[i].y);
                            ctx.lineTo(anchors[j].x, anchors[j].y);
                            ctx.strokeStyle = `rgba(${col}, ${alpha})`;
                            ctx.lineWidth = 0.5;
                            ctx.stroke();
                        }
                    }
                }

                // Shooting stars — occasional streaks
                if (frameCount % 180 === 0 || (frameCount % 100 === 0 && Math.random() < 0.25)) {
                    const sx = Math.random() * canvas.width;
                    const angle = Math.PI * 0.6 + Math.random() * 0.4;
                    ex.shootingStars.push({
                        x: sx, y: -10,
                        vx: Math.cos(angle) * (4 + Math.random() * 3),
                        vy: Math.sin(angle) * (4 + Math.random() * 3),
                        trail: [],
                        life: 1,
                        hue: (Math.random() - 0.5) * 60
                    });
                }

                for (let i = ex.shootingStars.length - 1; i >= 0; i--) {
                    const star = ex.shootingStars[i];
                    star.x += star.vx;
                    star.y += star.vy;
                    star.life -= 0.015;
                    star.trail.push({ x: star.x, y: star.y });
                    if (star.trail.length > 15) star.trail.shift();

                    if (star.life <= 0 || star.x < -50 || star.x > canvas.width + 50 ||
                        star.y > canvas.height + 50) {
                        ex.shootingStars.splice(i, 1);
                        continue;
                    }

                    const col = shiftAccent(accent, star.hue);
                    for (let t = 0; t < star.trail.length - 1; t++) {
                        const frac = t / star.trail.length;
                        ctx.beginPath();
                        ctx.moveTo(star.trail[t].x, star.trail[t].y);
                        ctx.lineTo(star.trail[t + 1].x, star.trail[t + 1].y);
                        ctx.strokeStyle = `rgba(${col}, ${frac * 0.4 * star.life})`;
                        ctx.lineWidth = frac * 2;
                        ctx.lineCap = 'round';
                        ctx.stroke();
                    }

                    const sg = ctx.createRadialGradient(star.x, star.y, 0, star.x, star.y, 4);
                    sg.addColorStop(0, `rgba(255,255,255, ${0.7 * star.life})`);
                    sg.addColorStop(0.4, `rgba(${col}, ${0.4 * star.life})`);
                    sg.addColorStop(1, 'rgba(0,0,0,0)');
                    ctx.beginPath();
                    ctx.arc(star.x, star.y, 4, 0, Math.PI * 2);
                    ctx.fillStyle = sg;
                    ctx.fill();
                }
            }
        },

        // ── ARTISTS — sound ripples / audio wave field ──
        artists: {
            count: 50,
            init(p, i) {
                // Grid-ish scatter with jitter
                const cols = 10, rows = 5;
                const col = i % cols, row = Math.floor(i / cols);
                p.baseX = (col + 0.5) / cols * canvas.width + (Math.random() - 0.5) * 40;
                p.baseY = (row + 0.5) / rows * canvas.height + (Math.random() - 0.5) * 40;
                p.x = p.baseX;
                p.y = p.baseY;
                p.radius = 1.2 + Math.random() * 1.3;
                p.phase = Math.random() * Math.PI * 2;
                p.hueShift = (Math.random() - 0.5) * 50;
                p.displacement = 0; // vertical displacement from ripples
            },
            update(p, time) {
                // Reset displacement each frame, drawGlobal will set it
                p.displacement = 0;
                p.x = p.baseX;
                p.y = p.baseY;
            },
            draw(p, ctx, accent, time) {
                const col = shiftAccent(accent, p.hueShift);
                const energy = Math.min(1, Math.abs(p.displacement));
                const alpha = 0.15 + energy * 0.6;
                const r = p.radius * (1 + energy * 0.5);

                // Glow — stronger when displaced
                const glowR = r * (3 + energy * 4);
                const glow = ctx.createRadialGradient(p.x, p.y + p.displacement * 15, 0, p.x, p.y + p.displacement * 15, glowR);
                glow.addColorStop(0, `rgba(${col}, ${0.06 + energy * 0.2})`);
                glow.addColorStop(1, 'rgba(0,0,0,0)');
                ctx.beginPath();
                ctx.arc(p.x, p.y + p.displacement * 15, glowR, 0, Math.PI * 2);
                ctx.fillStyle = glow;
                ctx.fill();

                // Core — offset by displacement
                ctx.beginPath();
                ctx.arc(p.x, p.y + p.displacement * 15, r, 0, Math.PI * 2);
                ctx.fillStyle = `rgba(${col}, ${alpha})`;
                ctx.fill();
            },
            initExtras() {
                extras.emitters = [];
                // 3–4 ripple emitters at random positions
                const count = 3 + Math.floor(Math.random() * 2);
                for (let i = 0; i < count; i++) {
                    extras.emitters.push({
                        x: 0.15 * canvas.width + Math.random() * 0.7 * canvas.width,
                        y: 0.15 * canvas.height + Math.random() * 0.7 * canvas.height,
                        rings: [],
                        timer: Math.floor(Math.random() * 80),
                        interval: 70 + Math.floor(Math.random() * 40),
                        hue: (i - 1.5) * 35
                    });
                }
                extras.waveLines = [];
            },
            drawGlobal(ctx, parts, accent, time, layerExtras) {
                const ex = layerExtras || extras;
                if (!ex.emitters) { ex.emitters = []; ex.waveLines = []; }
                const maxR = Math.max(canvas.width, canvas.height) * 0.45;

                // Update emitters — spawn rings (cap at 3 per emitter)
                for (const em of ex.emitters) {
                    em.timer++;
                    if (em.timer >= em.interval && em.rings.length < 3) {
                        em.rings.push({ radius: 0, alpha: 0.3 });
                        em.timer = 0;
                    }

                    const col = shiftAccent(accent, em.hue);

                    // Draw emitter center — subtle pulsing dot
                    const pulse = 0.5 + 0.5 * Math.sin(time * 2 + em.hue);
                    const eg = ctx.createRadialGradient(em.x, em.y, 0, em.x, em.y, 15);
                    eg.addColorStop(0, `rgba(${col}, ${0.1 + pulse * 0.08})`);
                    eg.addColorStop(1, 'rgba(0,0,0,0)');
                    ctx.beginPath();
                    ctx.arc(em.x, em.y, 15, 0, Math.PI * 2);
                    ctx.fillStyle = eg;
                    ctx.fill();

                    // Update and draw rings
                    for (let i = em.rings.length - 1; i >= 0; i--) {
                        const ring = em.rings[i];
                        ring.radius += 1.8;
                        ring.alpha = 0.25 * (1 - ring.radius / maxR);

                        if (ring.alpha <= 0 || ring.radius > maxR) {
                            em.rings.splice(i, 1);
                            continue;
                        }

                        // Ring arc
                        ctx.beginPath();
                        ctx.arc(em.x, em.y, ring.radius, 0, Math.PI * 2);
                        ctx.strokeStyle = `rgba(${col}, ${ring.alpha * 0.4})`;
                        ctx.lineWidth = 1.5 * (1 - ring.radius / maxR);
                        ctx.stroke();

                        // Displace particles near ring edge
                        for (const p of parts) {
                            const dx = p.baseX - em.x, dy = p.baseY - em.y;
                            const dist = Math.sqrt(dx * dx + dy * dy);
                            const diff = Math.abs(dist - ring.radius);
                            if (diff < 30) {
                                const wave = Math.cos((diff / 30) * Math.PI * 0.5);
                                p.displacement += wave * ring.alpha * 1.8;
                            }
                        }
                    }
                }

                // Horizontal wave lines — subtle sine waves across canvas
                ctx.lineWidth = 0.4;
                for (let w = 0; w < 3; w++) {
                    const yBase = canvas.height * (0.25 + w * 0.25);
                    const col = shiftAccent(accent, (w - 1) * 30);
                    ctx.beginPath();
                    for (let x = 0; x < canvas.width; x += 4) {
                        const y = yBase + Math.sin(x * 0.008 + time * (0.8 + w * 0.3) + w) * 12;
                        if (x === 0) ctx.moveTo(x, y);
                        else ctx.lineTo(x, y);
                    }
                    ctx.strokeStyle = `rgba(${col}, 0.04)`;
                    ctx.stroke();
                }
            }
        },

        // ── AUTOMATIONS — electric / lightning circuit ──
        automations: {
            count: 40,
            init(p, i) {
                p.x = Math.random() * canvas.width;
                p.y = Math.random() * canvas.height;
                p.vx = (Math.random() - 0.5) * 0.25;
                p.vy = (Math.random() - 0.5) * 0.25;
                p.radius = 1 + Math.random() * 1.5;
                p.phase = Math.random() * Math.PI * 2;
                p.hueShift = (Math.random() - 0.5) * 40;
                p.charge = 0; // lights up when struck by lightning
                // Some are relay nodes — bigger, attract bolts
                p.isRelay = i < 6;
                if (p.isRelay) p.radius = 2.5 + Math.random() * 1.5;
            },
            update(p) {
                p.x += p.vx;
                p.y += p.vy;
                if (p.x < 10 || p.x > canvas.width - 10) p.vx *= -1;
                if (p.y < 10 || p.y > canvas.height - 10) p.vy *= -1;
                p.x = Math.max(5, Math.min(canvas.width - 5, p.x));
                p.y = Math.max(5, Math.min(canvas.height - 5, p.y));
                if (p.charge > 0) p.charge = Math.max(0, p.charge - 0.02);
            },
            draw(p, ctx, accent, time) {
                const pulse = 0.5 + 0.5 * Math.sin(time * 2 + p.phase);
                const col = shiftAccent(accent, p.hueShift);
                const energy = p.charge;

                // Electric glow — bigger when charged
                const glowR = p.radius * (3 + energy * 6);
                const glow = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, glowR);
                glow.addColorStop(0, `rgba(${col}, ${(p.isRelay ? 0.12 : 0.06) + energy * 0.35})`);
                glow.addColorStop(0.6, `rgba(${col}, ${energy * 0.08})`);
                glow.addColorStop(1, 'rgba(0,0,0,0)');
                ctx.beginPath();
                ctx.arc(p.x, p.y, glowR, 0, Math.PI * 2);
                ctx.fillStyle = glow;
                ctx.fill();

                // Core
                const coreAlpha = (p.isRelay ? 0.3 : 0.15) + pulse * 0.1 + energy * 0.5;
                ctx.beginPath();
                ctx.arc(p.x, p.y, p.radius * (1 + energy * 0.3), 0, Math.PI * 2);
                ctx.fillStyle = `rgba(${col}, ${coreAlpha})`;
                ctx.fill();

                // Relay ring
                if (p.isRelay) {
                    ctx.beginPath();
                    ctx.arc(p.x, p.y, p.radius + 3 + pulse * 2, 0, Math.PI * 2);
                    ctx.strokeStyle = `rgba(${col}, ${0.06 + energy * 0.15})`;
                    ctx.lineWidth = 0.6;
                    ctx.stroke();
                }
            },
            initExtras() {
                extras.bolts = [];
                extras.sparks = [];
                extras.boltTimer = 0;
            },
            drawGlobal(ctx, parts, accent, time, layerExtras) {
                const ex = layerExtras || extras;
                if (!ex.bolts) { ex.bolts = []; ex.sparks = []; ex.boltTimer = 0; }

                // Spawn lightning bolts between relay nodes
                ex.boltTimer++;
                if (ex.boltTimer >= 45 + Math.floor(Math.random() * 30)) {
                    ex.boltTimer = 0;
                    const relays = [];
                    const normals = [];
                    parts.forEach((p, i) => { if (p.isRelay) relays.push(i); else normals.push(i); });

                    if (relays.length >= 2 || parts.length >= 2) {
                        let a, b;
                        if (relays.length >= 2 && Math.random() < 0.6) {
                            // Relay to relay
                            a = relays[Math.floor(Math.random() * relays.length)];
                            b = relays[Math.floor(Math.random() * relays.length)];
                            if (a === b) b = relays[(relays.indexOf(a) + 1) % relays.length];
                        } else {
                            // Relay to nearest normal
                            a = relays.length > 0 ? relays[Math.floor(Math.random() * relays.length)] : Math.floor(Math.random() * parts.length);
                            let bestD = Infinity;
                            b = a;
                            for (let i = 0; i < parts.length; i++) {
                                if (i === a) continue;
                                const dx = parts[i].x - parts[a].x, dy = parts[i].y - parts[a].y;
                                const d = dx * dx + dy * dy;
                                if (d < bestD && d < 300 * 300) { bestD = d; b = i; }
                            }
                        }
                        if (a !== b) {
                            // Build jagged bolt path
                            const pa = parts[a], pb = parts[b];
                            const segs = 6 + Math.floor(Math.random() * 4);
                            const path = [{ x: pa.x, y: pa.y }];
                            for (let s = 1; s < segs; s++) {
                                const t = s / segs;
                                const mx = pa.x + (pb.x - pa.x) * t;
                                const my = pa.y + (pb.y - pa.y) * t;
                                const jitter = 25 * (1 - Math.abs(t - 0.5) * 2);
                                path.push({
                                    x: mx + (Math.random() - 0.5) * jitter * 2,
                                    y: my + (Math.random() - 0.5) * jitter * 2
                                });
                            }
                            path.push({ x: pb.x, y: pb.y });
                            ex.bolts.push({
                                path,
                                life: 1,
                                hue: (parts[a].hueShift + parts[b].hueShift) * 0.5,
                                branch: Math.random() < 0.4 // some bolts branch
                            });
                            parts[a].charge = 1;
                            parts[b].charge = 1;

                            // Sparks at endpoints
                            for (let s = 0; s < 4; s++) {
                                ex.sparks.push({
                                    x: pb.x, y: pb.y,
                                    vx: (Math.random() - 0.5) * 3,
                                    vy: (Math.random() - 0.5) * 3,
                                    life: 0.6 + Math.random() * 0.4,
                                    hue: parts[b].hueShift
                                });
                            }
                        }
                    }
                }

                // Draw bolts
                for (let i = ex.bolts.length - 1; i >= 0; i--) {
                    const bolt = ex.bolts[i];
                    bolt.life -= 0.04;
                    if (bolt.life <= 0) { ex.bolts.splice(i, 1); continue; }

                    const col = shiftAccent(accent, bolt.hue);
                    const alpha = bolt.life;

                    // Main bolt
                    ctx.beginPath();
                    ctx.moveTo(bolt.path[0].x, bolt.path[0].y);
                    for (let s = 1; s < bolt.path.length; s++) {
                        ctx.lineTo(bolt.path[s].x, bolt.path[s].y);
                    }
                    ctx.strokeStyle = `rgba(${col}, ${alpha * 0.6})`;
                    ctx.lineWidth = 2 * alpha;
                    ctx.lineCap = 'round';
                    ctx.lineJoin = 'round';
                    ctx.stroke();

                    // Bright core
                    ctx.strokeStyle = `rgba(255,255,255, ${alpha * 0.4})`;
                    ctx.lineWidth = 0.8 * alpha;
                    ctx.stroke();

                    // Glow along bolt
                    ctx.strokeStyle = `rgba(${col}, ${alpha * 0.15})`;
                    ctx.lineWidth = 6 * alpha;
                    ctx.stroke();

                    // Branch bolt
                    if (bolt.branch && bolt.path.length > 3) {
                        const branchIdx = 2 + Math.floor(Math.random() * (bolt.path.length - 3));
                        const bp = bolt.path[branchIdx];
                        ctx.beginPath();
                        ctx.moveTo(bp.x, bp.y);
                        let bx = bp.x, by = bp.y;
                        for (let s = 0; s < 3; s++) {
                            bx += (Math.random() - 0.5) * 30;
                            by += (Math.random() - 0.5) * 30;
                            ctx.lineTo(bx, by);
                        }
                        ctx.strokeStyle = `rgba(${col}, ${alpha * 0.3})`;
                        ctx.lineWidth = 1 * alpha;
                        ctx.stroke();
                        bolt.branch = false; // only draw branch once
                    }
                }

                // Draw sparks
                for (let i = ex.sparks.length - 1; i >= 0; i--) {
                    const sp = ex.sparks[i];
                    sp.x += sp.vx;
                    sp.y += sp.vy;
                    sp.vx *= 0.95;
                    sp.vy *= 0.95;
                    sp.life -= 0.03;
                    if (sp.life <= 0) { ex.sparks.splice(i, 1); continue; }

                    const col = shiftAccent(accent, sp.hue);
                    ctx.beginPath();
                    ctx.arc(sp.x, sp.y, 1.2 * sp.life, 0, Math.PI * 2);
                    ctx.fillStyle = `rgba(${col}, ${sp.life * 0.8})`;
                    ctx.fill();
                }

                // Ambient circuit traces — faint grid lines
                ctx.strokeStyle = `rgba(${accent}, 0.015)`;
                ctx.lineWidth = 0.5;
                const spacing = 80;
                for (let x = spacing; x < canvas.width; x += spacing) {
                    const wobble = Math.sin(x * 0.01 + time * 0.5) * 5;
                    ctx.beginPath();
                    ctx.moveTo(x + wobble, 0);
                    ctx.lineTo(x - wobble, canvas.height);
                    ctx.stroke();
                }
                for (let y = spacing; y < canvas.height; y += spacing) {
                    const wobble = Math.cos(y * 0.01 + time * 0.5) * 5;
                    ctx.beginPath();
                    ctx.moveTo(0, y + wobble);
                    ctx.lineTo(canvas.width, y - wobble);
                    ctx.stroke();
                }
            }
        },

        // ── LIBRARY — vinyl turntable grooves ──
        library: {
            count: 50,
            init(p, i) {
                const cx = canvas.width * 0.5, cy = canvas.height * 0.5;
                const minDim = Math.min(canvas.width, canvas.height);
                // Distribute across grooves — 8 concentric rings
                const grooveCount = 8;
                p.groove = i % grooveCount;
                p.grooveRadius = (0.06 + p.groove * 0.045) * minDim;
                p.angle = (i / Math.ceil(50 / grooveCount)) * Math.PI * 2 + Math.random() * 0.5;
                // All rotate same direction (clockwise), outer grooves slightly slower
                p.speed = 0.003 - p.groove * 0.0002;
                p.radius = 1 + Math.random() * 1.2;
                p.phase = Math.random() * Math.PI * 2;
                p.hueShift = (p.groove - 3.5) * 12;
                p.x = cx + Math.cos(p.angle) * p.grooveRadius;
                p.y = cy + Math.sin(p.angle) * p.grooveRadius;
            },
            update(p) {
                p.angle += p.speed;
                const cx = canvas.width * 0.5, cy = canvas.height * 0.5;
                p.x = cx + Math.cos(p.angle) * p.grooveRadius;
                p.y = cy + Math.sin(p.angle) * p.grooveRadius;
            },
            draw(p, ctx, accent, time) {
                const pulse = 0.5 + 0.5 * Math.sin(time * 1.5 + p.phase);
                const col = shiftAccent(accent, p.hueShift);

                const glowR = p.radius * 4;
                const glow = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, glowR);
                glow.addColorStop(0, `rgba(${col}, ${0.1 + pulse * 0.08})`);
                glow.addColorStop(1, 'rgba(0,0,0,0)');
                ctx.beginPath();
                ctx.arc(p.x, p.y, glowR, 0, Math.PI * 2);
                ctx.fillStyle = glow;
                ctx.fill();

                ctx.beginPath();
                ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
                ctx.fillStyle = `rgba(${col}, ${0.25 + pulse * 0.2})`;
                ctx.fill();
            },
            initExtras() {
                extras.tonearmAngle = -0.4;
                extras.spinHighlight = 0;
                extras.needleRipples = [];
                extras.rippleTimer = 0;
                extras.noteParticles = []; // tiny notes floating off the needle
            },
            drawGlobal(ctx, parts, accent, time, layerExtras) {
                const ex = layerExtras || extras;
                if (ex.tonearmAngle === undefined) {
                    ex.tonearmAngle = -0.4; ex.spinHighlight = 0;
                    ex.needleRipples = []; ex.rippleTimer = 0; ex.noteParticles = [];
                }
                const cx = canvas.width * 0.5, cy = canvas.height * 0.5;
                const minDim = Math.min(canvas.width, canvas.height);

                // Vinyl grooves — concentric rings with subtle wobble
                const grooveCount = 8;
                for (let g = 0; g < grooveCount; g++) {
                    const r = (0.06 + g * 0.045) * minDim;
                    const col = shiftAccent(accent, (g - 3.5) * 12);
                    // Groove brightness pulses slightly
                    const gPulse = 0.03 + 0.015 * Math.sin(time * 0.8 + g * 0.7);
                    ctx.beginPath();
                    ctx.arc(cx, cy, r, 0, Math.PI * 2);
                    ctx.strokeStyle = `rgba(${col}, ${gPulse})`;
                    ctx.lineWidth = 0.8;
                    ctx.stroke();
                }

                // Outer rim
                const outerR = (0.06 + grooveCount * 0.045 + 0.02) * minDim;
                ctx.beginPath();
                ctx.arc(cx, cy, outerR, 0, Math.PI * 2);
                ctx.strokeStyle = `rgba(${accent}, 0.06)`;
                ctx.lineWidth = 1.5;
                ctx.stroke();

                // Center label — warm glow
                const labelR = 0.04 * minDim;
                const lg = ctx.createRadialGradient(cx, cy, 0, cx, cy, labelR);
                lg.addColorStop(0, `rgba(${accent}, 0.15)`);
                lg.addColorStop(0.6, `rgba(${accent}, 0.06)`);
                lg.addColorStop(1, 'rgba(0,0,0,0)');
                ctx.beginPath();
                ctx.arc(cx, cy, labelR, 0, Math.PI * 2);
                ctx.fillStyle = lg;
                ctx.fill();

                // Spindle dot
                ctx.beginPath();
                ctx.arc(cx, cy, 2.5, 0, Math.PI * 2);
                ctx.fillStyle = `rgba(${accent}, 0.3)`;
                ctx.fill();

                // Light reflection — rotating highlight arc
                ex.spinHighlight += 0.006;
                const hlAngle = ex.spinHighlight;
                const hlR = 0.22 * minDim;
                ctx.beginPath();
                ctx.arc(cx, cy, hlR, hlAngle - 0.4, hlAngle + 0.4);
                const hlGrad = ctx.createRadialGradient(
                    cx + Math.cos(hlAngle) * hlR * 0.5,
                    cy + Math.sin(hlAngle) * hlR * 0.5, 0,
                    cx + Math.cos(hlAngle) * hlR * 0.5,
                    cy + Math.sin(hlAngle) * hlR * 0.5, hlR * 0.6
                );
                hlGrad.addColorStop(0, `rgba(255,255,255, 0.03)`);
                hlGrad.addColorStop(1, 'rgba(0,0,0,0)');
                ctx.strokeStyle = hlGrad;
                ctx.lineWidth = hlR * 0.8;
                ctx.stroke();

                // Tonearm — pivot at top-right, needle rests on groove 5
                const armPivotX = cx + outerR * 0.9;
                const armPivotY = cy - outerR * 0.75;
                const needleGroove = 5;
                const needleR = (0.06 + needleGroove * 0.045) * minDim;
                // Needle sits on the groove at a fixed angle from center
                const needleAngle = -0.6 + Math.sin(time * 0.3) * 0.01; // subtle bob
                const armEndX = cx + Math.cos(needleAngle) * needleR;
                const armEndY = cy + Math.sin(needleAngle) * needleR;

                // Arm line — straight from pivot to needle
                ctx.beginPath();
                ctx.moveTo(armPivotX, armPivotY);
                ctx.lineTo(armEndX, armEndY);
                ctx.strokeStyle = `rgba(${accent}, 0.1)`;
                ctx.lineWidth = 1.8;
                ctx.lineCap = 'round';
                ctx.stroke();

                // Headshell — small wider section at the end
                const hsLen = 12;
                const hsDx = (armEndX - armPivotX), hsDy = (armEndY - armPivotY);
                const hsNorm = Math.sqrt(hsDx * hsDx + hsDy * hsDy);
                const hsX = armEndX - (hsDx / hsNorm) * hsLen;
                const hsY = armEndY - (hsDy / hsNorm) * hsLen;
                ctx.beginPath();
                ctx.moveTo(hsX, hsY);
                ctx.lineTo(armEndX, armEndY);
                ctx.strokeStyle = `rgba(${accent}, 0.15)`;
                ctx.lineWidth = 3;
                ctx.stroke();

                // Pivot dot
                ctx.beginPath();
                ctx.arc(armPivotX, armPivotY, 3, 0, Math.PI * 2);
                ctx.fillStyle = `rgba(${accent}, 0.12)`;
                ctx.fill();

                // Needle glow — on the groove
                const ng = ctx.createRadialGradient(armEndX, armEndY, 0, armEndX, armEndY, 8);
                ng.addColorStop(0, `rgba(${accent}, 0.3)`);
                ng.addColorStop(0.5, `rgba(${accent}, 0.1)`);
                ng.addColorStop(1, 'rgba(0,0,0,0)');
                ctx.beginPath();
                ctx.arc(armEndX, armEndY, 8, 0, Math.PI * 2);
                ctx.fillStyle = ng;
                ctx.fill();

                // Sound wave ripples — concentric arcs expanding FROM the needle outward
                ex.rippleTimer++;
                if (ex.rippleTimer >= 30) {
                    ex.rippleTimer = 0;
                    ex.needleRipples.push({
                        radius: 0, alpha: 0.3,
                        hue: (Math.random() - 0.5) * 30
                    });
                }

                const maxRippleR = outerR * 0.7;
                for (let i = ex.needleRipples.length - 1; i >= 0; i--) {
                    const rip = ex.needleRipples[i];
                    rip.radius += 1.8;
                    rip.alpha = 0.25 * (1 - rip.radius / maxRippleR);
                    if (rip.alpha <= 0 || rip.radius > maxRippleR) {
                        ex.needleRipples.splice(i, 1);
                        continue;
                    }
                    const col = shiftAccent(accent, rip.hue);
                    // Full circle ripple centered on needle
                    ctx.beginPath();
                    ctx.arc(armEndX, armEndY, rip.radius, 0, Math.PI * 2);
                    ctx.strokeStyle = `rgba(${col}, ${rip.alpha * 0.35})`;
                    ctx.lineWidth = 1 * (1 - rip.radius / maxRippleR);
                    ctx.stroke();

                    // Brighten groove particles near ripple edge
                    for (const p of parts) {
                        const dx = p.x - armEndX, dy = p.y - armEndY;
                        const dist = Math.sqrt(dx * dx + dy * dy);
                        if (Math.abs(dist - rip.radius) < 15) {
                            p.phase = time * 1.5;
                        }
                    }
                }

                // Floating note particles — tiny shapes drifting from needle area
                if (frameCount % 60 === 0) {
                    ex.noteParticles.push({
                        x: armEndX + (Math.random() - 0.5) * 15,
                        y: armEndY,
                        vx: (Math.random() - 0.5) * 0.8,
                        vy: -0.5 - Math.random() * 0.8,
                        life: 1,
                        size: 3 + Math.random() * 3,
                        hue: (Math.random() - 0.5) * 40,
                        type: Math.floor(Math.random() * 2) // 0 = eighth note, 1 = beam pair
                    });
                }

                for (let i = ex.noteParticles.length - 1; i >= 0; i--) {
                    const n = ex.noteParticles[i];
                    n.x += n.vx;
                    n.y += n.vy;
                    n.vx += (Math.random() - 0.5) * 0.02;
                    n.life -= 0.008;
                    if (n.life <= 0) { ex.noteParticles.splice(i, 1); continue; }

                    const col = shiftAccent(accent, n.hue);
                    const a = n.life * 0.3;
                    const s = n.size;

                    if (n.type === 0) {
                        // Eighth note — circle head + stem + flag
                        ctx.beginPath();
                        ctx.arc(n.x, n.y, s * 0.35, 0, Math.PI * 2);
                        ctx.fillStyle = `rgba(${col}, ${a})`;
                        ctx.fill();
                        ctx.beginPath();
                        ctx.moveTo(n.x + s * 0.35, n.y);
                        ctx.lineTo(n.x + s * 0.35, n.y - s);
                        ctx.strokeStyle = `rgba(${col}, ${a})`;
                        ctx.lineWidth = 0.8;
                        ctx.stroke();
                        // Flag
                        ctx.beginPath();
                        ctx.moveTo(n.x + s * 0.35, n.y - s);
                        ctx.quadraticCurveTo(n.x + s * 0.8, n.y - s * 0.6, n.x + s * 0.35, n.y - s * 0.4);
                        ctx.strokeStyle = `rgba(${col}, ${a * 0.8})`;
                        ctx.stroke();
                    } else {
                        // Beamed pair — two note heads connected
                        ctx.beginPath();
                        ctx.arc(n.x, n.y, s * 0.3, 0, Math.PI * 2);
                        ctx.arc(n.x + s * 0.6, n.y, s * 0.3, 0, Math.PI * 2);
                        ctx.fillStyle = `rgba(${col}, ${a})`;
                        ctx.fill();
                        // Stems
                        ctx.beginPath();
                        ctx.moveTo(n.x + s * 0.3, n.y);
                        ctx.lineTo(n.x + s * 0.3, n.y - s * 0.9);
                        ctx.moveTo(n.x + s * 0.9, n.y);
                        ctx.lineTo(n.x + s * 0.9, n.y - s * 0.9);
                        ctx.strokeStyle = `rgba(${col}, ${a})`;
                        ctx.lineWidth = 0.8;
                        ctx.stroke();
                        // Beam
                        ctx.beginPath();
                        ctx.moveTo(n.x + s * 0.3, n.y - s * 0.9);
                        ctx.lineTo(n.x + s * 0.9, n.y - s * 0.9);
                        ctx.lineWidth = 1.2;
                        ctx.stroke();
                    }
                }
            }
        },

        // ── IMPORT — data stream flowing into a central vortex ──
        import: {
            count: 55,
            init(p, i) {
                const cx = canvas.width * 0.5, cy = canvas.height * 0.45;
                // Spawn from edges, will flow toward center
                p.radius = 0.8 + Math.random() * 1.3;
                p.hueShift = (Math.random() - 0.5) * 50;
                p.phase = Math.random() * Math.PI * 2;
                p.speed = 0.8 + Math.random() * 1.2;
                p.absorbed = false;
                // Stream column — particles fall in vertical streams
                p.stream = i % 7;
                p.streamX = canvas.width * (0.1 + (p.stream / 6) * 0.8);
                // Stagger vertically
                p.x = p.streamX + (Math.random() - 0.5) * 20;
                p.y = -Math.random() * canvas.height;
                // Pull radius — when close to center, spiral in
                p.pullDist = 120 + Math.random() * 60;
                p.spiralAngle = Math.atan2(p.y - cy, p.x - cx);
                p.trail = [];
            },
            update(p) {
                const cx = canvas.width * 0.5, cy = canvas.height * 0.45;
                const dx = cx - p.x, dy = cy - p.y;
                const dist = Math.sqrt(dx * dx + dy * dy);

                if (dist < p.pullDist) {
                    // Spiral inward
                    p.spiralAngle += 0.08;
                    const pullStrength = 1 - dist / p.pullDist;
                    const spiralR = dist * (1 - pullStrength * 0.04);
                    p.x = cx + Math.cos(p.spiralAngle) * spiralR;
                    p.y = cy + Math.sin(p.spiralAngle) * spiralR;

                    if (dist < 8) {
                        // Absorbed — reset from top
                        p.x = p.streamX + (Math.random() - 0.5) * 20;
                        p.y = -10 - Math.random() * 100;
                        p.spiralAngle = Math.atan2(p.y - cy, p.x - cx);
                        p.trail = [];
                    }
                } else {
                    // Fall downward in stream
                    p.x += Math.sin(p.phase + p.y * 0.005) * 0.3;
                    p.y += p.speed;
                    // Update spiral angle as we approach
                    p.spiralAngle = Math.atan2(p.y - cy, p.x - cx);
                }

                // Trail
                p.trail.push({ x: p.x, y: p.y });
                if (p.trail.length > 6) p.trail.shift();

                // Reset if off screen
                if (p.y > canvas.height + 30 && dist > p.pullDist) {
                    p.x = p.streamX + (Math.random() - 0.5) * 20;
                    p.y = -10 - Math.random() * 50;
                    p.trail = [];
                }
            },
            draw(p, ctx, accent, time) {
                const cx = canvas.width * 0.5, cy = canvas.height * 0.45;
                const dist = Math.sqrt((p.x - cx) ** 2 + (p.y - cy) ** 2);
                const nearCenter = Math.max(0, 1 - dist / p.pullDist);
                const col = shiftAccent(accent, p.hueShift);
                const pulse = 0.5 + 0.5 * Math.sin(time * 2 + p.phase);

                // Trail
                for (let t = 0; t < p.trail.length - 1; t++) {
                    const frac = t / p.trail.length;
                    ctx.beginPath();
                    ctx.moveTo(p.trail[t].x, p.trail[t].y);
                    ctx.lineTo(p.trail[t + 1].x, p.trail[t + 1].y);
                    ctx.strokeStyle = `rgba(${col}, ${frac * 0.15 * (1 + nearCenter)})`;
                    ctx.lineWidth = frac * 1.5;
                    ctx.lineCap = 'round';
                    ctx.stroke();
                }

                // Glow — intensifies near center
                const glowR = p.radius * (3 + nearCenter * 4);
                const glow = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, glowR);
                glow.addColorStop(0, `rgba(${col}, ${0.08 + nearCenter * 0.25 + pulse * 0.05})`);
                glow.addColorStop(1, 'rgba(0,0,0,0)');
                ctx.beginPath();
                ctx.arc(p.x, p.y, glowR, 0, Math.PI * 2);
                ctx.fillStyle = glow;
                ctx.fill();

                // Core
                ctx.beginPath();
                ctx.arc(p.x, p.y, p.radius * (1 + nearCenter * 0.5), 0, Math.PI * 2);
                ctx.fillStyle = `rgba(${col}, ${0.2 + nearCenter * 0.5 + pulse * 0.1})`;
                ctx.fill();
            },
            initExtras() {
                extras.portalPulse = 0;
            },
            drawGlobal(ctx, parts, accent, time, layerExtras) {
                const ex = layerExtras || extras;
                if (ex.portalPulse === undefined) ex.portalPulse = 0;
                const cx = canvas.width * 0.5, cy = canvas.height * 0.45;
                const minDim = Math.min(canvas.width, canvas.height);

                // Portal at center — pulsing vortex
                ex.portalPulse += 0.02;

                // Concentric portal rings
                for (let r = 0; r < 4; r++) {
                    const radius = 10 + r * 12;
                    const rot = time * (1.5 - r * 0.3) * (r % 2 === 0 ? 1 : -1);
                    const alpha = 0.08 - r * 0.015;
                    const col = shiftAccent(accent, r * 20 - 30);

                    ctx.beginPath();
                    ctx.arc(cx, cy, radius, rot, rot + Math.PI * 1.5);
                    ctx.strokeStyle = `rgba(${col}, ${alpha})`;
                    ctx.lineWidth = 1.5 - r * 0.2;
                    ctx.lineCap = 'round';
                    ctx.stroke();
                }

                // Center glow — pulses with absorptions
                const gPulse = 0.8 + 0.2 * Math.sin(ex.portalPulse * 3);
                const cg = ctx.createRadialGradient(cx, cy, 0, cx, cy, 40);
                cg.addColorStop(0, `rgba(${accent}, ${0.15 * gPulse})`);
                cg.addColorStop(0.4, `rgba(${accent}, ${0.05 * gPulse})`);
                cg.addColorStop(1, 'rgba(0,0,0,0)');
                ctx.beginPath();
                ctx.arc(cx, cy, 40, 0, Math.PI * 2);
                ctx.fillStyle = cg;
                ctx.fill();

                // Stream guide lines — faint vertical lines showing data streams
                for (let s = 0; s < 7; s++) {
                    const sx = canvas.width * (0.1 + (s / 6) * 0.8);
                    const col = shiftAccent(accent, (s - 3) * 15);

                    // Fade line from top toward center
                    const grad = ctx.createLinearGradient(sx, 0, sx, cy);
                    grad.addColorStop(0, `rgba(${col}, 0.03)`);
                    grad.addColorStop(0.7, `rgba(${col}, 0.015)`);
                    grad.addColorStop(1, 'rgba(0,0,0,0)');
                    ctx.beginPath();
                    ctx.moveTo(sx, 0);
                    // Curve toward center
                    ctx.quadraticCurveTo(sx, cy * 0.7, cx, cy);
                    ctx.strokeStyle = grad;
                    ctx.lineWidth = 0.5;
                    ctx.stroke();
                }

                // Outer absorption ring — faint
                const absR = 120 + Math.sin(time * 0.8) * 10;
                ctx.beginPath();
                ctx.arc(cx, cy, absR, 0, Math.PI * 2);
                ctx.strokeStyle = `rgba(${accent}, 0.025)`;
                ctx.lineWidth = 0.5;
                ctx.setLineDash([4, 8]);
                ctx.stroke();
                ctx.setLineDash([]);
            }
        },

        // ── SETTINGS — interlocking gears / clockwork ──
        settings: {
            count: 45,
            init(p, i) {
                // Assign particles to gears
                const gearDefs = [
                    { cx: 0.35, cy: 0.4, r: 0.16, teeth: 12, dir: 1 },
                    { cx: 0.62, cy: 0.38, r: 0.13, teeth: 10, dir: -1 },
                    { cx: 0.48, cy: 0.65, r: 0.10, teeth: 8, dir: 1 },
                    { cx: 0.25, cy: 0.68, r: 0.08, teeth: 6, dir: -1 },
                    { cx: 0.72, cy: 0.62, r: 0.09, teeth: 7, dir: 1 },
                ];
                p.gear = i % gearDefs.length;
                const g = gearDefs[p.gear];
                const minDim = Math.min(canvas.width, canvas.height);
                p.gearCx = g.cx * canvas.width;
                p.gearCy = g.cy * canvas.height;
                p.gearR = g.r * minDim;
                p.gearTeeth = g.teeth;
                p.gearDir = g.dir;
                // Position along gear rim
                p.angle = (i / Math.ceil(45 / gearDefs.length)) * Math.PI * 2 + Math.random() * 0.3;
                p.speed = g.dir * (0.003 + (1 / g.teeth) * 0.008);
                p.radius = 1 + Math.random() * 1.2;
                p.phase = Math.random() * Math.PI * 2;
                p.hueShift = (p.gear - 2) * 20;
                p.x = p.gearCx + Math.cos(p.angle) * p.gearR;
                p.y = p.gearCy + Math.sin(p.angle) * p.gearR;
            },
            update(p) {
                p.angle += p.speed;
                // Tooth bump — particle radius wobbles with gear teeth
                const toothPhase = (p.angle * p.gearTeeth) % (Math.PI * 2);
                p.toothBump = Math.max(0, Math.sin(toothPhase)) * 0.15;
                const r = p.gearR * (1 + p.toothBump);
                p.x = p.gearCx + Math.cos(p.angle) * r;
                p.y = p.gearCy + Math.sin(p.angle) * r;
            },
            draw(p, ctx, accent, time) {
                const pulse = 0.5 + 0.5 * Math.sin(time * 1.5 + p.phase);
                const col = shiftAccent(accent, p.hueShift);
                const bump = p.toothBump || 0;

                const glowR = p.radius * (3 + bump * 6);
                const glow = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, glowR);
                glow.addColorStop(0, `rgba(${col}, ${0.1 + bump * 0.2 + pulse * 0.05})`);
                glow.addColorStop(1, 'rgba(0,0,0,0)');
                ctx.beginPath();
                ctx.arc(p.x, p.y, glowR, 0, Math.PI * 2);
                ctx.fillStyle = glow;
                ctx.fill();

                ctx.beginPath();
                ctx.arc(p.x, p.y, p.radius * (1 + bump * 0.5), 0, Math.PI * 2);
                ctx.fillStyle = `rgba(${col}, ${0.2 + bump * 0.35 + pulse * 0.1})`;
                ctx.fill();
            },
            initExtras() {
                extras.gearDefs = [
                    { cx: 0.35, cy: 0.4, r: 0.16, teeth: 12, dir: 1 },
                    { cx: 0.62, cy: 0.38, r: 0.13, teeth: 10, dir: -1 },
                    { cx: 0.48, cy: 0.65, r: 0.10, teeth: 8, dir: 1 },
                    { cx: 0.25, cy: 0.68, r: 0.08, teeth: 6, dir: -1 },
                    { cx: 0.72, cy: 0.62, r: 0.09, teeth: 7, dir: 1 },
                ];
                extras.gearAngles = extras.gearDefs.map(() => 0);
            },
            drawGlobal(ctx, parts, accent, time, layerExtras) {
                const ex = layerExtras || extras;
                if (!ex.gearDefs) {
                    ex.gearDefs = [
                        { cx: 0.35, cy: 0.4, r: 0.16, teeth: 12, dir: 1 },
                        { cx: 0.62, cy: 0.38, r: 0.13, teeth: 10, dir: -1 },
                        { cx: 0.48, cy: 0.65, r: 0.10, teeth: 8, dir: 1 },
                        { cx: 0.25, cy: 0.68, r: 0.08, teeth: 6, dir: -1 },
                        { cx: 0.72, cy: 0.62, r: 0.09, teeth: 7, dir: 1 },
                    ];
                    ex.gearAngles = ex.gearDefs.map(() => 0);
                }
                const minDim = Math.min(canvas.width, canvas.height);

                // Draw each gear
                for (let g = 0; g < ex.gearDefs.length; g++) {
                    const gd = ex.gearDefs[g];
                    const gcx = gd.cx * canvas.width;
                    const gcy = gd.cy * canvas.height;
                    const gr = gd.r * minDim;
                    const col = shiftAccent(accent, (g - 2) * 20);

                    // Rotate gear angle
                    ex.gearAngles[g] += gd.dir * (0.003 + (1 / gd.teeth) * 0.008);
                    const rot = ex.gearAngles[g];

                    // Gear teeth outline
                    const toothH = gr * 0.15;
                    const toothW = (Math.PI * 2) / gd.teeth * 0.35;
                    ctx.beginPath();
                    for (let t = 0; t < gd.teeth; t++) {
                        const a = rot + (t / gd.teeth) * Math.PI * 2;
                        // Outer tooth corners
                        const a1 = a - toothW, a2 = a + toothW;
                        const outerR = gr + toothH;
                        // Valley between teeth
                        const va = a + (1 / gd.teeth) * Math.PI;

                        if (t === 0) {
                            ctx.moveTo(gcx + Math.cos(a1) * outerR, gcy + Math.sin(a1) * outerR);
                        }
                        ctx.lineTo(gcx + Math.cos(a2) * outerR, gcy + Math.sin(a2) * outerR);
                        // Down to rim
                        const nextA = rot + ((t + 1) / gd.teeth) * Math.PI * 2 - toothW;
                        ctx.lineTo(gcx + Math.cos(a2) * gr, gcy + Math.sin(a2) * gr);
                        ctx.lineTo(gcx + Math.cos(nextA) * gr, gcy + Math.sin(nextA) * gr);
                        ctx.lineTo(gcx + Math.cos(nextA) * outerR, gcy + Math.sin(nextA) * outerR);
                    }
                    ctx.closePath();
                    ctx.strokeStyle = `rgba(${col}, 0.06)`;
                    ctx.lineWidth = 0.8;
                    ctx.stroke();

                    // Inner ring
                    ctx.beginPath();
                    ctx.arc(gcx, gcy, gr * 0.4, 0, Math.PI * 2);
                    ctx.strokeStyle = `rgba(${col}, 0.05)`;
                    ctx.lineWidth = 0.8;
                    ctx.stroke();

                    // Spokes
                    for (let s = 0; s < 4; s++) {
                        const sa = rot + s * Math.PI * 0.5;
                        ctx.beginPath();
                        ctx.moveTo(gcx + Math.cos(sa) * gr * 0.15, gcy + Math.sin(sa) * gr * 0.15);
                        ctx.lineTo(gcx + Math.cos(sa) * gr * 0.4, gcy + Math.sin(sa) * gr * 0.4);
                        ctx.strokeStyle = `rgba(${col}, 0.04)`;
                        ctx.lineWidth = 1;
                        ctx.stroke();
                    }

                    // Center axle
                    const ag = ctx.createRadialGradient(gcx, gcy, 0, gcx, gcy, gr * 0.12);
                    ag.addColorStop(0, `rgba(${col}, 0.12)`);
                    ag.addColorStop(1, 'rgba(0,0,0,0)');
                    ctx.beginPath();
                    ctx.arc(gcx, gcy, gr * 0.12, 0, Math.PI * 2);
                    ctx.fillStyle = ag;
                    ctx.fill();

                    // Axle dot
                    ctx.beginPath();
                    ctx.arc(gcx, gcy, 2, 0, Math.PI * 2);
                    ctx.fillStyle = `rgba(${col}, 0.25)`;
                    ctx.fill();
                }
            }
        },

        // ── HELP — fireflies / lanterns illuminating the dark ──
        help: {
            count: 30,
            init(p, i) {
                p.x = Math.random() * canvas.width;
                p.y = Math.random() * canvas.height;
                p.vx = (Math.random() - 0.5) * 0.3;
                p.vy = (Math.random() - 0.5) * 0.3;
                p.phase = Math.random() * Math.PI * 2;
                p.hueShift = (Math.random() - 0.5) * 40;
                // Fireflies blink — each has its own rhythm
                p.blinkSpeed = 0.6 + Math.random() * 1.2;
                p.blinkOffset = Math.random() * Math.PI * 2;
                p.radius = 1.5 + Math.random() * 1.5;
                // Lanterns are bigger, steadier, brighter
                p.isLantern = i < 6;
                if (p.isLantern) {
                    p.radius = 3 + Math.random() * 2;
                    p.blinkSpeed = 0.2 + Math.random() * 0.3; // slower pulse
                    p.vx *= 0.4;
                    p.vy *= 0.4;
                }
                // Wander target — fireflies change direction
                p.wanderAngle = Math.random() * Math.PI * 2;
                p.wanderTimer = 0;
            },
            update(p) {
                // Wander — change direction periodically
                p.wanderTimer++;
                if (p.wanderTimer > 80 + Math.random() * 60) {
                    p.wanderTimer = 0;
                    p.wanderAngle += (Math.random() - 0.5) * 2;
                }
                const wander = p.isLantern ? 0.003 : 0.008;
                p.vx += Math.cos(p.wanderAngle) * wander;
                p.vy += Math.sin(p.wanderAngle) * wander;
                // Dampen
                p.vx *= 0.98;
                p.vy *= 0.98;
                p.x += p.vx;
                p.y += p.vy;
                // Soft bounds
                if (p.x < 30) p.wanderAngle = 0;
                if (p.x > canvas.width - 30) p.wanderAngle = Math.PI;
                if (p.y < 30) p.wanderAngle = Math.PI * 0.5;
                if (p.y > canvas.height - 30) p.wanderAngle = -Math.PI * 0.5;
                p.x = Math.max(10, Math.min(canvas.width - 10, p.x));
                p.y = Math.max(10, Math.min(canvas.height - 10, p.y));
            },
            draw(p, ctx, accent, time) {
                const col = shiftAccent(accent, p.hueShift);

                if (p.isLantern) {
                    // Lantern — large steady warm glow
                    const pulse = 0.7 + 0.3 * Math.sin(time * p.blinkSpeed + p.blinkOffset);

                    // Big light pool
                    const poolR = p.radius * 12;
                    const pool = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, poolR);
                    pool.addColorStop(0, `rgba(${col}, ${0.06 * pulse})`);
                    pool.addColorStop(0.3, `rgba(${col}, ${0.03 * pulse})`);
                    pool.addColorStop(1, 'rgba(0,0,0,0)');
                    ctx.beginPath();
                    ctx.arc(p.x, p.y, poolR, 0, Math.PI * 2);
                    ctx.fillStyle = pool;
                    ctx.fill();

                    // Bright core glow
                    const coreR = p.radius * 4;
                    const core = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, coreR);
                    core.addColorStop(0, `rgba(${col}, ${0.3 * pulse})`);
                    core.addColorStop(0.4, `rgba(${col}, ${0.12 * pulse})`);
                    core.addColorStop(1, 'rgba(0,0,0,0)');
                    ctx.beginPath();
                    ctx.arc(p.x, p.y, coreR, 0, Math.PI * 2);
                    ctx.fillStyle = core;
                    ctx.fill();

                    // Center bright point
                    ctx.beginPath();
                    ctx.arc(p.x, p.y, p.radius * 0.6, 0, Math.PI * 2);
                    ctx.fillStyle = `rgba(255, 255, 255, ${0.15 * pulse})`;
                    ctx.fill();

                    ctx.beginPath();
                    ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
                    ctx.fillStyle = `rgba(${col}, ${0.35 * pulse})`;
                    ctx.fill();
                } else {
                    // Firefly — blinks on and off
                    const raw = Math.sin(time * p.blinkSpeed + p.blinkOffset);
                    const blink = Math.pow(Math.max(0, raw), 3); // sharp on, quick off

                    if (blink > 0.01) {
                        // Light pool when lit
                        const poolR = p.radius * 8 * blink;
                        const pool = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, poolR);
                        pool.addColorStop(0, `rgba(${col}, ${0.12 * blink})`);
                        pool.addColorStop(0.5, `rgba(${col}, ${0.04 * blink})`);
                        pool.addColorStop(1, 'rgba(0,0,0,0)');
                        ctx.beginPath();
                        ctx.arc(p.x, p.y, poolR, 0, Math.PI * 2);
                        ctx.fillStyle = pool;
                        ctx.fill();

                        // Bright core
                        ctx.beginPath();
                        ctx.arc(p.x, p.y, p.radius * (0.5 + blink * 0.5), 0, Math.PI * 2);
                        ctx.fillStyle = `rgba(${col}, ${0.2 + blink * 0.5})`;
                        ctx.fill();

                        // White center flash
                        if (blink > 0.5) {
                            ctx.beginPath();
                            ctx.arc(p.x, p.y, p.radius * 0.3, 0, Math.PI * 2);
                            ctx.fillStyle = `rgba(255,255,255, ${(blink - 0.5) * 0.5})`;
                            ctx.fill();
                        }
                    } else {
                        // Barely visible when dark
                        ctx.beginPath();
                        ctx.arc(p.x, p.y, p.radius * 0.5, 0, Math.PI * 2);
                        ctx.fillStyle = `rgba(${col}, 0.04)`;
                        ctx.fill();
                    }
                }
            },
            initExtras() {
                extras.trails = {};
            },
            drawGlobal(ctx, parts, accent, time, layerExtras) {
                const ex = layerExtras || extras;
                if (!ex.trails) ex.trails = {};

                // Faint trails behind fireflies — short luminous paths
                for (let i = 0; i < parts.length; i++) {
                    const p = parts[i];
                    if (p.isLantern) continue;
                    const key = i;
                    if (!ex.trails[key]) ex.trails[key] = [];
                    ex.trails[key].push({ x: p.x, y: p.y });
                    if (ex.trails[key].length > 10) ex.trails[key].shift();

                    const raw = Math.sin(time * p.blinkSpeed + p.blinkOffset);
                    const blink = Math.pow(Math.max(0, raw), 3);
                    if (blink < 0.1) continue;

                    const trail = ex.trails[key];
                    const col = shiftAccent(accent, p.hueShift);
                    for (let t = 0; t < trail.length - 1; t++) {
                        const frac = t / trail.length;
                        ctx.beginPath();
                        ctx.moveTo(trail[t].x, trail[t].y);
                        ctx.lineTo(trail[t + 1].x, trail[t + 1].y);
                        ctx.strokeStyle = `rgba(${col}, ${frac * 0.06 * blink})`;
                        ctx.lineWidth = frac * 1.5;
                        ctx.lineCap = 'round';
                        ctx.stroke();
                    }
                }
            }
        },

        // ── NONE — fallback for pages without a preset ──
        none: {
            count: 0,
            init() {},
            update() {},
            draw() {}
        }
    };

    // ── Transition System ──
    // Phases: 'normal' | 'converge' | 'burst'
    // converge: old particles move toward center, globalDraw fades out
    // burst: new particles move from center to target positions
    // normal: standard preset behavior

    const TRANSITION_SPEED = 0.025; // 0→1 per frame, ~40 frames = ~0.67s

    let currentLayer = null;     // { preset, particles, extras, name }
    let transitionState = null;  // null or { phase, progress, oldParticles, newLayer, cx, cy }

    function initLayer(presetName) {
        const preset = PRESETS[presetName] || PRESETS.none;
        const parts = [];
        const layerExtras = {};
        resize();
        for (let i = 0; i < preset.count; i++) {
            const p = {};
            preset.init(p, i);
            parts.push(p);
        }
        if (preset.initExtras) {
            const saved = extras;
            extras = layerExtras;
            preset.initExtras();
            extras = saved;
        }
        return { preset, particles: parts, extras: layerExtras, name: presetName };
    }

    function loop() {
        animFrame = requestAnimationFrame(loop);

        const w = canvas.width, h = canvas.height;
        if (w === 0 || h === 0) { resize(); return; }

        ctx.clearRect(0, 0, w, h);
        const accent = getAccentRGB();
        const time = Date.now() * 0.001;
        frameCount++;

        const cx = w * 0.5, cy = h * 0.5;

        if (transitionState) {
            const ts = transitionState;
            ts.progress = Math.min(1, ts.progress + TRANSITION_SPEED);

            if (ts.phase === 'converge') {
                // Draw old particles converging to center
                const t = ts.progress;
                const ease = t * t; // ease-in
                const alpha = 1 - t * 0.5; // fade slightly

                ctx.globalAlpha = alpha;
                for (const p of ts.oldParticles) {
                    // Lerp from current position toward center
                    const dx = cx - p.ox;
                    const dy = cy - p.oy;
                    p.x = p.ox + dx * ease;
                    p.y = p.oy + dy * ease;
                }

                // Draw with old preset (no global effects during converge — faded)
                const oldPreset = ts.oldPreset;
                if (oldPreset) {
                    ctx.globalAlpha = alpha * (1 - ease * 0.8);
                    if (oldPreset.drawGlobal && ts.oldExtras) {
                        oldPreset.drawGlobal(ctx, ts.oldParticles, accent, time, ts.oldExtras);
                    }
                    ctx.globalAlpha = alpha;
                    for (const p of ts.oldParticles) {
                        oldPreset.draw(p, ctx, accent, time);
                    }
                }
                ctx.globalAlpha = 1;

                // Center glow builds as particles converge
                const cg = ctx.createRadialGradient(cx, cy, 0, cx, cy, 30 + ease * 20);
                cg.addColorStop(0, `rgba(${accent}, ${ease * 0.4})`);
                cg.addColorStop(0.5, `rgba(${accent}, ${ease * 0.15})`);
                cg.addColorStop(1, 'rgba(0,0,0,0)');
                ctx.beginPath();
                ctx.arc(cx, cy, 30 + ease * 20, 0, Math.PI * 2);
                ctx.fillStyle = cg;
                ctx.fill();

                if (ts.progress >= 1) {
                    // Switch to burst phase
                    ts.phase = 'burst';
                    ts.progress = 0;
                    // Store target positions for new particles
                    currentLayer = ts.newLayer;
                    for (const p of currentLayer.particles) {
                        p.tx = p.x;
                        p.ty = p.y;
                        p.x = cx;
                        p.y = cy;
                    }
                }

            } else if (ts.phase === 'burst') {
                const t = ts.progress;
                const ease = 1 - Math.pow(1 - t, 3); // ease-out

                // Center flash that fades
                const flashAlpha = Math.max(0, (1 - t) * 0.5);
                if (flashAlpha > 0.01) {
                    const fg = ctx.createRadialGradient(cx, cy, 0, cx, cy, 50);
                    fg.addColorStop(0, `rgba(${accent}, ${flashAlpha})`);
                    fg.addColorStop(0.4, `rgba(${accent}, ${flashAlpha * 0.3})`);
                    fg.addColorStop(1, 'rgba(0,0,0,0)');
                    ctx.beginPath();
                    ctx.arc(cx, cy, 50, 0, Math.PI * 2);
                    ctx.fillStyle = fg;
                    ctx.fill();
                }

                // Lerp new particles from center to target
                const layer = currentLayer;
                for (const p of layer.particles) {
                    p.x = cx + (p.tx - cx) * ease;
                    p.y = cy + (p.ty - cy) * ease;
                }

                // Draw new preset (global effects fade in)
                ctx.globalAlpha = ease;
                if (layer.preset.drawGlobal) {
                    layer.preset.drawGlobal(ctx, layer.particles, accent, time, layer.extras);
                }
                ctx.globalAlpha = 0.5 + ease * 0.5; // particles visible earlier
                for (const p of layer.particles) {
                    layer.preset.draw(p, ctx, accent, time);
                }
                ctx.globalAlpha = 1;

                if (ts.progress >= 1) {
                    // Restore true positions and enter normal
                    for (const p of layer.particles) {
                        p.x = p.tx;
                        p.y = p.ty;
                        delete p.tx;
                        delete p.ty;
                    }
                    transitionState = null;
                }
            }

        } else if (currentLayer && currentLayer.preset.count > 0) {
            // Normal rendering
            const layer = currentLayer;
            for (let i = 0; i < layer.particles.length; i++) {
                layer.preset.update(layer.particles[i], time, i);
            }
            if (layer.preset.drawGlobal) {
                layer.preset.drawGlobal(ctx, layer.particles, accent, time, layer.extras);
            }
            for (let i = 0; i < layer.particles.length; i++) {
                layer.preset.draw(layer.particles[i], ctx, accent, time);
            }
        } else {
            // Nothing to draw — stop loop
            cancelAnimationFrame(animFrame);
            animFrame = null;
            ctx.clearRect(0, 0, w, h);
            return;
        }
    }

    // ── Public API ──

    function setPreset(name) {
        // Already showing this preset? Skip.
        if (currentLayer && currentLayer.name === name) return;

        const newLayer = initLayer(name);
        const isNone = (PRESETS[name] || PRESETS.none).count === 0;

        if (currentLayer && currentLayer.preset.count > 0 && !isNone) {
            // Transition: converge old → burst new
            // Snapshot old particle positions
            const oldParticles = currentLayer.particles.map(p => ({ ...p, ox: p.x, oy: p.y }));
            transitionState = {
                phase: 'converge',
                progress: 0,
                oldParticles,
                oldPreset: currentLayer.preset,
                oldExtras: currentLayer.extras,
                newLayer
            };
        } else if (!isNone) {
            // No old layer (first load or from 'none') — burst from center
            currentLayer = newLayer;
            const cx = canvas.width * 0.5, cy = canvas.height * 0.5;
            for (const p of currentLayer.particles) {
                p.tx = p.x;
                p.ty = p.y;
                p.x = cx;
                p.y = cy;
            }
            transitionState = {
                phase: 'burst',
                progress: 0,
                oldParticles: [],
                oldPreset: null,
                oldExtras: null,
                newLayer: currentLayer
            };
        } else {
            // Switching to 'none' — just fade out
            if (currentLayer) {
                // Quick converge to center then stop
                const oldParticles = currentLayer.particles.map(p => ({ ...p, ox: p.x, oy: p.y }));
                transitionState = {
                    phase: 'converge',
                    progress: 0,
                    oldParticles,
                    oldPreset: currentLayer.preset,
                    oldExtras: currentLayer.extras,
                    newLayer: initLayer('none')
                };
            }
            currentLayer = null;
        }

        // Ensure loop is running
        if (!animFrame) loop();
    }

    function stop() {
        if (animFrame) {
            cancelAnimationFrame(animFrame);
            animFrame = null;
        }
        currentLayer = null;
        transitionState = null;
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    }

    // Page ID → preset name mapping
    const PAGE_PRESETS = {
        dashboard: 'dashboard',
        sync: 'sync',
        downloads: 'search',
        discover: 'discover',
        artists: 'artists',
        automations: 'automations',
        library: 'library',
        import: 'import',
        settings: 'settings',
        help: 'help',
    };

    // Listen for page changes from script.js
    window.pageParticles = {
        setPage(pageId) {
            const presetName = PAGE_PRESETS[pageId] || 'none';
            setPreset(presetName);
        },
        stop
    };

    // Auto-start for initial page (respect particles toggle)
    requestAnimationFrame(() => {
        if (window._particlesEnabled === false) return;
        const activePage = document.querySelector('.page.active');
        if (activePage) {
            const pageId = activePage.id.replace('-page', '');
            window.pageParticles.setPage(pageId);
        }
    });

})();