main.js

/**
 * FMN-GPT Website Interactive Visualizations
 * ==========================================
 * Canvas-based animations and interactive demos
 */

// ========================================
// Configuration
// ========================================

const CONFIG = {
    colors: {
        accent: '#e85d3b',
        accentLight: '#ff8a6b',
        secondary: '#d4a853',
        secondaryLight: '#e8c87a',
        bg: '#faf8f5',
        bgAlt: '#f5f0e8',
        bgDark: '#1a1815',
        text: '#2d2a26',
        textLight: '#6b6560',
        textMuted: '#9a948d',
        border: '#e5e0d8',
        success: '#50c878',
        info: '#4a9eff'
    },
    neuron: {
        count: 112,
        maxLoops: 30,
        layers: 6
    }
};

// ========================================
// Utility Functions
// ========================================

function lerp(a, b, t) {
    return a + (b - a) * t;
}

function clamp(val, min, max) {
    return Math.max(min, Math.min(max, val));
}

function randomRange(min, max) {
    return Math.random() * (max - min) + min;
}

function hexToRgba(hex, alpha) {
    const r = parseInt(hex.slice(1, 3), 16);
    const g = parseInt(hex.slice(3, 5), 16);
    const b = parseInt(hex.slice(5, 7), 16);
    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
}

// ========================================
// Hero Neuron Canvas Animation
// ========================================

class NeuronNetwork {
    constructor(canvas) {
        this.canvas = canvas;
        this.ctx = canvas.getContext('2d');
        this.neurons = [];
        this.connections = [];
        this.particles = [];
        this.mouse = { x: 0, y: 0 };
        this.animationId = null;
        
        this.resize();
        this.init();
        this.bindEvents();
        this.animate();
    }
    
    resize() {
        const rect = this.canvas.parentElement.getBoundingClientRect();
        this.canvas.width = rect.width * window.devicePixelRatio;
        this.canvas.height = rect.height * window.devicePixelRatio;
        this.ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
        this.width = rect.width;
        this.height = rect.height;
    }
    
    init() {
        // Create neurons
        const count = Math.min(50, Math.floor(this.width * this.height / 15000));
        this.neurons = [];
        
        for (let i = 0; i < count; i++) {
            this.neurons.push({
                x: randomRange(50, this.width - 50),
                y: randomRange(50, this.height - 50),
                vx: randomRange(-0.3, 0.3),
                vy: randomRange(-0.3, 0.3),
                radius: randomRange(3, 6),
                pulse: randomRange(0, Math.PI * 2),
                pulseSpeed: randomRange(0.02, 0.05)
            });
        }
        
        // Create initial connections
        this.updateConnections();
    }
    
    updateConnections() {
        this.connections = [];
        const maxDist = 150;
        
        for (let i = 0; i < this.neurons.length; i++) {
            for (let j = i + 1; j < this.neurons.length; j++) {
                const dx = this.neurons[i].x - this.neurons[j].x;
                const dy = this.neurons[i].y - this.neurons[j].y;
                const dist = Math.sqrt(dx * dx + dy * dy);
                
                if (dist < maxDist) {
                    this.connections.push({
                        from: i,
                        to: j,
                        strength: 1 - dist / maxDist
                    });
                }
            }
        }
    }
    
    bindEvents() {
        window.addEventListener('resize', () => {
            this.resize();
            this.init();
        });
        
        this.canvas.addEventListener('mousemove', (e) => {
            const rect = this.canvas.getBoundingClientRect();
            this.mouse.x = e.clientX - rect.left;
            this.mouse.y = e.clientY - rect.top;
        });
    }
    
    animate() {
        this.ctx.clearRect(0, 0, this.width, this.height);
        
        // Update neurons
        for (const neuron of this.neurons) {
            neuron.x += neuron.vx;
            neuron.y += neuron.vy;
            neuron.pulse += neuron.pulseSpeed;
            
            // Bounce off walls
            if (neuron.x < 20 || neuron.x > this.width - 20) neuron.vx *= -1;
            if (neuron.y < 20 || neuron.y > this.height - 20) neuron.vy *= -1;
            
            // Mouse interaction
            const dx = this.mouse.x - neuron.x;
            const dy = this.mouse.y - neuron.y;
            const dist = Math.sqrt(dx * dx + dy * dy);
            if (dist < 100 && dist > 0) {
                neuron.x -= dx * 0.01;
                neuron.y -= dy * 0.01;
            }
        }
        
        // Update connections
        this.updateConnections();
        
        // Draw connections
        for (const conn of this.connections) {
            const from = this.neurons[conn.from];
            const to = this.neurons[conn.to];
            
            this.ctx.beginPath();
            this.ctx.moveTo(from.x, from.y);
            this.ctx.lineTo(to.x, to.y);
            this.ctx.strokeStyle = hexToRgba(CONFIG.colors.accent, conn.strength * 0.3);
            this.ctx.lineWidth = conn.strength * 2;
            this.ctx.stroke();
        }
        
        // Draw neurons
        for (const neuron of this.neurons) {
            const pulseRadius = neuron.radius + Math.sin(neuron.pulse) * 2;
            
            // Glow
            const gradient = this.ctx.createRadialGradient(
                neuron.x, neuron.y, 0,
                neuron.x, neuron.y, pulseRadius * 3
            );
            gradient.addColorStop(0, hexToRgba(CONFIG.colors.accent, 0.3));
            gradient.addColorStop(1, hexToRgba(CONFIG.colors.accent, 0));
            
            this.ctx.beginPath();
            this.ctx.arc(neuron.x, neuron.y, pulseRadius * 3, 0, Math.PI * 2);
            this.ctx.fillStyle = gradient;
            this.ctx.fill();
            
            // Core
            this.ctx.beginPath();
            this.ctx.arc(neuron.x, neuron.y, pulseRadius, 0, Math.PI * 2);
            this.ctx.fillStyle = CONFIG.colors.accent;
            this.ctx.fill();
        }
        
        this.animationId = requestAnimationFrame(() => this.animate());
    }
    
    destroy() {
        if (this.animationId) {
            cancelAnimationFrame(this.animationId);
        }
    }
}

// ========================================
// FMN Visualization
// ========================================

class FMNVisualization {
    constructor(canvas) {
        this.canvas = canvas;
        this.ctx = canvas.getContext('2d');
        this.time = 0;
        this.animationId = null;
        this.dataFlow = [];
        
        this.resize();
        this.initDataFlow();
        this.animate();
    }
    
    resize() {
        const rect = this.canvas.parentElement.getBoundingClientRect();
        const dpr = window.devicePixelRatio || 1;
        this.canvas.width = 400 * dpr;
        this.canvas.height = 300 * dpr;
        this.ctx.scale(dpr, dpr);
        this.width = 400;
        this.height = 300;
    }
    
    initDataFlow() {
        this.dataFlow = [];
        for (let i = 0; i < 8; i++) {
            this.dataFlow.push({
                progress: Math.random(),
                speed: 0.003 + Math.random() * 0.002,
                path: Math.floor(Math.random() * 3)
            });
        }
    }
    
    animate() {
        this.ctx.clearRect(0, 0, this.width, this.height);
        this.time += 0.016;
        
        const centerX = this.width / 2;
        const centerY = this.height / 2;
        
        // Background
        this.ctx.fillStyle = '#faf8f5';
        this.ctx.fillRect(0, 0, this.width, this.height);
        
        const inputY = centerY - 90;
        const w1Y = centerY - 25;
        const w2Y = centerY + 25;
        const outputY = centerY + 90;
        
        // Draw static connection lines first (faded)
        this.ctx.strokeStyle = 'rgba(107, 101, 96, 0.15)';
        this.ctx.lineWidth = 1;
        
        // Input to W1 connections
        for (let i = 0; i < 5; i++) {
            for (let j = 0; j < 3; j++) {
                const x1 = centerX - 80 + i * 40;
                const x2 = centerX - 40 + j * 40;
                this.ctx.beginPath();
                this.ctx.moveTo(x1, inputY + 14);
                this.ctx.lineTo(x2, w1Y - 14);
                this.ctx.stroke();
            }
        }
        
        // W2 to output connections
        for (let i = 0; i < 3; i++) {
            for (let j = 0; j < 5; j++) {
                const x1 = centerX - 40 + i * 40;
                const x2 = centerX - 80 + j * 40;
                this.ctx.beginPath();
                this.ctx.moveTo(x1, w2Y + 14);
                this.ctx.lineTo(x2, outputY - 14);
                this.ctx.stroke();
            }
        }
        
        // Input layer neurons
        for (let i = 0; i < 5; i++) {
            const x = centerX - 80 + i * 40;
            this.drawNeuron(x, inputY, 14, '#4a9eff');
        }
        
        // Projection layer 1
        for (let i = 0; i < 3; i++) {
            const x = centerX - 40 + i * 40;
            this.drawNeuron(x, w1Y, 16, CONFIG.colors.accent);
        }
        
        // Projection layer 2
        for (let i = 0; i < 3; i++) {
            const x = centerX - 40 + i * 40;
            this.drawNeuron(x, w2Y, 16, CONFIG.colors.secondary);
        }
        
        // Output layer neurons
        for (let i = 0; i < 5; i++) {
            const x = centerX - 80 + i * 40;
            this.drawNeuron(x, outputY, 14, '#50c878');
        }
        
        // Operation symbol
        this.ctx.font = 'bold 20px Inter, sans-serif';
        this.ctx.fillStyle = CONFIG.colors.textMuted;
        this.ctx.textAlign = 'center';
        this.ctx.textBaseline = 'middle';
        this.ctx.fillText('?', centerX, centerY);
        
        // Animated data flow particles
        for (const particle of this.dataFlow) {
            particle.progress += particle.speed;
            if (particle.progress > 1) {
                particle.progress = 0;
                particle.path = Math.floor(Math.random() * 3);
            }
            
            const alpha = Math.sin(particle.progress * Math.PI) * 0.8;
            const inputIdx = particle.path;
            const wIdx = particle.path % 3;
            const outIdx = particle.path;
            
            const inputX = centerX - 80 + inputIdx * 40;
            const w1X = centerX - 40 + wIdx * 40;
            const w2X = centerX - 40 + wIdx * 40;
            const outX = centerX - 80 + outIdx * 40;
            
            let px, py;
            if (particle.progress < 0.33) {
                const t = particle.progress / 0.33;
                px = lerp(inputX, w1X, t);
                py = lerp(inputY, w1Y, t);
            } else if (particle.progress < 0.66) {
                const t = (particle.progress - 0.33) / 0.33;
                px = lerp(w1X, w2X, t);
                py = lerp(w1Y, w2Y, t);
            } else {
                const t = (particle.progress - 0.66) / 0.34;
                px = lerp(w2X, outX, t);
                py = lerp(w2Y, outputY, t);
            }
            
            this.ctx.beginPath();
            this.ctx.arc(px, py, 4, 0, Math.PI * 2);
            this.ctx.fillStyle = `rgba(232, 93, 59, ${alpha})`;
            this.ctx.fill();
        }
        
        // Labels
        this.ctx.font = '11px Inter, sans-serif';
        this.ctx.fillStyle = CONFIG.colors.textMuted;
        this.ctx.textAlign = 'center';
        this.ctx.textBaseline = 'top';
        this.ctx.fillText('Input', centerX, inputY - 30);
        this.ctx.fillText('[REDACTED]', centerX - 70, w1Y - 8);
        this.ctx.fillText('[REDACTED]', centerX + 70, w2Y - 8);
        this.ctx.fillText('Output', centerX, outputY + 25);
        
        this.animationId = requestAnimationFrame(() => this.animate());
    }
    
    drawNeuron(x, y, radius, color) {
        // Subtle shadow
        this.ctx.beginPath();
        this.ctx.arc(x, y + 2, radius, 0, Math.PI * 2);
        this.ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
        this.ctx.fill();
        
        // Main circle
        this.ctx.beginPath();
        this.ctx.arc(x, y, radius, 0, Math.PI * 2);
        this.ctx.fillStyle = color;
        this.ctx.fill();
        
        // Highlight
        this.ctx.beginPath();
        this.ctx.arc(x - radius * 0.3, y - radius * 0.3, radius * 0.4, 0, Math.PI * 2);
        this.ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
        this.ctx.fill();
    }
    
    destroy() {
        if (this.animationId) {
            cancelAnimationFrame(this.animationId);
        }
    }
}

// ========================================
// Routing Visualization
// ========================================

class RoutingVisualization {
    constructor(canvas) {
        this.canvas = canvas;
        this.ctx = canvas.getContext('2d');
        this.time = 0;
        this.particles = [];
        this.animationId = null;
        
        this.resize();
        this.initParticles();
        this.animate();
    }
    
    resize() {
        const dpr = window.devicePixelRatio || 1;
        this.canvas.width = 400 * dpr;
        this.canvas.height = 300 * dpr;
        this.ctx.scale(dpr, dpr);
        this.width = 400;
        this.height = 300;
    }
    
    initParticles() {
        this.particles = [];
        const layers = 6;
        const layerSpacing = this.width / (layers + 1);
        
        for (let i = 0; i < 12; i++) {
            const startLayer = Math.floor(Math.random() * layers);
            const startY = randomRange(60, this.height - 60);
            this.particles.push({
                x: (startLayer + 1) * layerSpacing,
                y: startY,
                targetX: 0,
                targetY: 0,
                speed: 0.8 + Math.random() * 0.4,
                color: Math.random() > 0.5 ? CONFIG.colors.accent : CONFIG.colors.secondary,
                trail: []
            });
            this.setNewTarget(this.particles[i]);
        }
    }
    
    setNewTarget(particle) {
        const layers = 6;
        const layerSpacing = this.width / (layers + 1);
        const targetLayer = Math.floor(Math.random() * layers);
        particle.targetX = (targetLayer + 1) * layerSpacing;
        particle.targetY = randomRange(60, this.height - 60);
    }
    
    animate() {
        this.ctx.clearRect(0, 0, this.width, this.height);
        this.time += 0.016;
        
        // Background
        this.ctx.fillStyle = '#faf8f5';
        this.ctx.fillRect(0, 0, this.width, this.height);
        
        const layers = 6;
        const layerSpacing = this.width / (layers + 1);
        
        // Draw layer columns
        for (let i = 1; i <= layers; i++) {
            const x = i * layerSpacing;
            
            // Layer column background
            this.ctx.fillStyle = 'rgba(229, 224, 216, 0.3)';
            this.ctx.fillRect(x - 15, 40, 30, this.height - 70);
            
            // Layer label
            this.ctx.font = '10px Inter, sans-serif';
            this.ctx.fillStyle = CONFIG.colors.textMuted;
            this.ctx.textAlign = 'center';
            this.ctx.fillText(`L${i - 1}`, x, this.height - 15);
        }
        
        // Title
        this.ctx.font = 'bold 13px Inter, sans-serif';
        this.ctx.fillStyle = CONFIG.colors.text;
        this.ctx.textAlign = 'center';
        this.ctx.fillText('Cross-Layer Backward Routing', this.width / 2, 22);
        
        // Update and draw particles with trails
        for (const p of this.particles) {
            const dx = p.targetX - p.x;
            const dy = p.targetY - p.y;
            const dist = Math.sqrt(dx * dx + dy * dy);
            
            if (dist < 3) {
                this.setNewTarget(p);
            } else {
                const moveX = (dx / dist) * p.speed;
                const moveY = (dy / dist) * p.speed;
                p.x += moveX;
                p.y += moveY;
                
                // Add to trail
                p.trail.push({ x: p.x, y: p.y });
                if (p.trail.length > 15) {
                    p.trail.shift();
                }
            }
            
            // Draw trail
            for (let i = 0; i < p.trail.length - 1; i++) {
                const alpha = (i / p.trail.length) * 0.4;
                this.ctx.beginPath();
                this.ctx.moveTo(p.trail[i].x, p.trail[i].y);
                this.ctx.lineTo(p.trail[i + 1].x, p.trail[i + 1].y);
                this.ctx.strokeStyle = `rgba(232, 93, 59, ${alpha})`;
                this.ctx.lineWidth = 2;
                this.ctx.stroke();
            }
            
            // Draw particle
            this.ctx.beginPath();
            this.ctx.arc(p.x, p.y, 5, 0, Math.PI * 2);
            this.ctx.fillStyle = p.color;
            this.ctx.fill();
        }
        
        this.animationId = requestAnimationFrame(() => this.animate());
    }
    
    destroy() {
        if (this.animationId) {
            cancelAnimationFrame(this.animationId);
        }
    }
}

// ========================================
// Recurrent Mixer Visualization
// ========================================

class RecurrentVisualization {
    constructor(canvas) {
        this.canvas = canvas;
        this.ctx = canvas.getContext('2d');
        this.time = 0;
        this.states = [];
        this.animationId = null;
        
        this.resize();
        this.initStates();
        this.animate();
    }
    
    resize() {
        const dpr = window.devicePixelRatio || 1;
        this.canvas.width = 400 * dpr;
        this.canvas.height = 300 * dpr;
        this.ctx.scale(dpr, dpr);
        this.width = 400;
        this.height = 300;
    }
    
    initStates() {
        this.states = [];
        for (let i = 0; i < 8; i++) {
            this.states.push({
                value: randomRange(0.3, 0.7),
                target: randomRange(0.3, 0.7),
                gate: randomRange(0.2, 0.8),
                history: []
            });
        }
    }
    
    animate() {
        this.ctx.clearRect(0, 0, this.width, this.height);
        this.time += 0.016;
        
        // Background
        this.ctx.fillStyle = '#faf8f5';
        this.ctx.fillRect(0, 0, this.width, this.height);
        
        const barWidth = 32;
        const barSpacing = 46;
        const startX = (this.width - (this.states.length * barSpacing)) / 2 + 5;
        const baseY = this.height - 50;
        const maxHeight = 140;
        
        // Title
        this.ctx.font = 'bold 13px Inter, sans-serif';
        this.ctx.fillStyle = CONFIG.colors.text;
        this.ctx.textAlign = 'center';
        this.ctx.fillText('Per-Channel Gated State', this.width / 2, 22);
        
        for (let i = 0; i < this.states.length; i++) {
            const state = this.states[i];
            const x = startX + i * barSpacing;
            
            // Update state smoothly
            state.gate = 0.4 + Math.sin(this.time * 0.8 + i * 0.7) * 0.35;
            state.value = lerp(state.value, state.target, state.gate * 0.08);
            
            // Randomly change target
            if (Math.random() < 0.008) {
                state.target = randomRange(0.2, 0.95);
            }
            
            // Store history
            state.history.push(state.value);
            if (state.history.length > 50) state.history.shift();
            
            // Draw bar background
            this.ctx.fillStyle = 'rgba(229, 224, 216, 0.4)';
            this.ctx.beginPath();
            this.ctx.roundRect(x - barWidth / 2, baseY - maxHeight, barWidth, maxHeight, 4);
            this.ctx.fill();
            
            // Draw current state bar
            const currentHeight = maxHeight * state.value;
            const gradient = this.ctx.createLinearGradient(x, baseY, x, baseY - currentHeight);
            gradient.addColorStop(0, CONFIG.colors.accent);
            gradient.addColorStop(1, CONFIG.colors.accentLight);
            this.ctx.fillStyle = gradient;
            this.ctx.beginPath();
            this.ctx.roundRect(x - barWidth / 2, baseY - currentHeight, barWidth, currentHeight, 4);
            this.ctx.fill();
            
            // Draw gate indicator
            const gateHeight = 8;
            const gateY = baseY - maxHeight - 18;
            const gateFilled = state.gate * barWidth;
            
            this.ctx.fillStyle = 'rgba(229, 224, 216, 0.6)';
            this.ctx.fillRect(x - barWidth / 2, gateY, barWidth, gateHeight);
            
            this.ctx.fillStyle = CONFIG.colors.success;
            this.ctx.fillRect(x - barWidth / 2, gateY, gateFilled, gateHeight);
            
            // Channel label
            this.ctx.font = '10px Inter, sans-serif';
            this.ctx.fillStyle = CONFIG.colors.textMuted;
            this.ctx.textAlign = 'center';
            this.ctx.fillText(`c${i}`, x, baseY + 15);
        }
        
        // Legend
        this.ctx.font = '10px Inter, sans-serif';
        this.ctx.fillStyle = CONFIG.colors.textMuted;
        this.ctx.textAlign = 'left';
        this.ctx.fillText('Gate:', 15, 22);
        this.ctx.fillStyle = CONFIG.colors.success;
        this.ctx.fillRect(45, 14, 25, 8);
        
        this.animationId = requestAnimationFrame(() => this.animate());
    }
    
    destroy() {
        if (this.animationId) {
            cancelAnimationFrame(this.animationId);
        }
    }
}

// ========================================
// Loop Counter Visualization
// ========================================

class LoopVisualization {
    constructor(canvas, slider, indicator, valueDisplay) {
        this.canvas = canvas;
        this.ctx = canvas.getContext('2d');
        this.slider = slider;
        this.indicator = indicator;
        this.valueDisplay = valueDisplay;
        this.maxLoops = 30;
        this.loopCounts = [];
        this.animationId = null;
        
        this.resize();
        this.initLoops();
        this.bindEvents();
        this.animate();
    }
    
    resize() {
        const dpr = window.devicePixelRatio || 1;
        this.canvas.width = 400 * dpr;
        this.canvas.height = 300 * dpr;
        this.ctx.scale(dpr, dpr);
        this.width = 400;
        this.height = 300;
    }
    
    initLoops() {
        this.loopCounts = [];
        for (let i = 0; i < 20; i++) {
            this.loopCounts.push({
                count: Math.floor(randomRange(0, this.maxLoops * 0.6)),
                targetCount: Math.floor(randomRange(5, this.maxLoops)),
                incrementing: Math.random() > 0.2
            });
        }
        this.updateIndicator();
    }
    
    bindEvents() {
        if (this.slider) {
            this.slider.addEventListener('input', (e) => {
                this.maxLoops = parseInt(e.target.value);
                if (this.valueDisplay) {
                    this.valueDisplay.textContent = this.maxLoops;
                }
                this.updateIndicator();
            });
        }
    }
    
    updateIndicator() {
        if (!this.indicator) return;
        
        this.indicator.innerHTML = '';
        for (let i = 0; i < this.maxLoops; i++) {
            const dot = document.createElement('div');
            dot.className = 'loop-dot';
            if (i < this.maxLoops * 0.7) {
                dot.classList.add('active');
            } else if (i < this.maxLoops) {
                dot.classList.add('exhausted');
            }
            this.indicator.appendChild(dot);
        }
    }
    
    animate() {
        this.ctx.clearRect(0, 0, this.width, this.height);
        
        // Background
        this.ctx.fillStyle = '#faf8f5';
        this.ctx.fillRect(0, 0, this.width, this.height);
        
        const cols = 5;
        const rows = 4;
        const cellWidth = this.width / cols;
        const cellHeight = (this.height - 50) / rows;
        
        // Title
        this.ctx.font = 'bold 13px Inter, sans-serif';
        this.ctx.fillStyle = CONFIG.colors.text;
        this.ctx.textAlign = 'center';
        this.ctx.fillText('Neuron Loop Budget', this.width / 2, 22);
        
        for (let i = 0; i < this.loopCounts.length; i++) {
            const state = this.loopCounts[i];
            const col = i % cols;
            const row = Math.floor(i / cols);
            const x = col * cellWidth + cellWidth / 2;
            const y = row * cellHeight + cellHeight / 2 + 35;
            
            // Smoothly increment towards target
            if (state.incrementing) {
                if (state.count < state.targetCount) {
                    state.count += 0.05;
                } else if (Math.random() < 0.02) {
                    state.targetCount = Math.floor(randomRange(state.count, this.maxLoops));
                }
                
                if (state.count >= this.maxLoops) {
                    state.count = this.maxLoops;
                    state.incrementing = false;
                }
            }
            
            const radius = 26;
            const progress = Math.min(state.count / this.maxLoops, 1);
            const exhausted = state.count >= this.maxLoops;
            
            // Background ring
            this.ctx.beginPath();
            this.ctx.arc(x, y, radius, 0, Math.PI * 2);
            this.ctx.strokeStyle = 'rgba(229, 224, 216, 0.6)';
            this.ctx.lineWidth = 5;
            this.ctx.stroke();
            
            // Progress ring
            if (progress > 0) {
                this.ctx.beginPath();
                this.ctx.arc(x, y, radius, -Math.PI / 2, -Math.PI / 2 + progress * Math.PI * 2);
                this.ctx.strokeStyle = exhausted ? CONFIG.colors.textMuted : CONFIG.colors.accent;
                this.ctx.lineWidth = 5;
                this.ctx.lineCap = 'round';
                this.ctx.stroke();
            }
            
            // Center fill
            this.ctx.beginPath();
            this.ctx.arc(x, y, radius - 10, 0, Math.PI * 2);
            this.ctx.fillStyle = exhausted ? 'rgba(154, 148, 141, 0.1)' : 'rgba(232, 93, 59, 0.1)';
            this.ctx.fill();
            
            // Center count
            this.ctx.font = 'bold 13px Inter, sans-serif';
            this.ctx.fillStyle = exhausted ? CONFIG.colors.textMuted : CONFIG.colors.text;
            this.ctx.textAlign = 'center';
            this.ctx.textBaseline = 'middle';
            this.ctx.fillText(Math.floor(state.count).toString(), x, y);
        }
        
        this.animationId = requestAnimationFrame(() => this.animate());
    }
    
    destroy() {
        if (this.animationId) {
            cancelAnimationFrame(this.animationId);
        }
    }
}

// ========================================
// Tab Switching
// ========================================

function initTabs() {
    const tabBtns = document.querySelectorAll('.tab-btn');
    const tabPanes = document.querySelectorAll('.tab-pane');
    
    tabBtns.forEach(btn => {
        btn.addEventListener('click', () => {
            const tabId = btn.dataset.tab;
            
            // Update buttons
            tabBtns.forEach(b => b.classList.remove('active'));
            btn.classList.add('active');
            
            // Update panes
            tabPanes.forEach(pane => {
                pane.classList.remove('active');
                if (pane.id === `${tabId}-pane`) {
                    pane.classList.add('active');
                }
            });
        });
    });
}

// ========================================
// Scroll Animations
// ========================================

function initScrollAnimations() {
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('visible');
            }
        });
    }, {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    });
    
    document.querySelectorAll('.fade-in-up').forEach(el => {
        observer.observe(el);
    });
}

// ========================================
// Initialize Everything
// ========================================

let heroNetwork = null;
let fmnViz = null;
let routingViz = null;
let recurrentViz = null;
let loopViz = null;

document.addEventListener('DOMContentLoaded', () => {
    // Hero animation
    const heroCanvas = document.getElementById('neuron-canvas');
    if (heroCanvas) {
        heroNetwork = new NeuronNetwork(heroCanvas);
    }
    
    // Tab visualizations
    const fmnCanvas = document.getElementById('fmn-canvas');
    if (fmnCanvas) {
        fmnViz = new FMNVisualization(fmnCanvas);
    }
    
    const routingCanvas = document.getElementById('routing-canvas');
    if (routingCanvas) {
        routingViz = new RoutingVisualization(routingCanvas);
    }
    
    const recurrentCanvas = document.getElementById('recurrent-canvas');
    if (recurrentCanvas) {
        recurrentViz = new RecurrentVisualization(recurrentCanvas);
    }
    
    const loopsCanvas = document.getElementById('loops-canvas');
    const loopSlider = document.getElementById('loop-slider');
    const loopIndicator = document.getElementById('loop-indicator');
    const loopValue = document.getElementById('loop-value');
    if (loopsCanvas) {
        loopViz = new LoopVisualization(loopsCanvas, loopSlider, loopIndicator, loopValue);
    }
    
    // Initialize tabs
    initTabs();
    
    // Initialize scroll animations
    initScrollAnimations();
});

// Cleanup on page unload
window.addEventListener('beforeunload', () => {
    if (heroNetwork) heroNetwork.destroy();
    if (fmnViz) fmnViz.destroy();
    if (routingViz) routingViz.destroy();
    if (recurrentViz) recurrentViz.destroy();
    if (loopViz) loopViz.destroy();
});