/**
 * Neural Network Background Animation
 * Modern, darker, mystical theme using WebGL
 * Subtle flowing network aesthetic
 */

class NeuralNetworkBackground {
  constructor() {
    // Canvas setup
    this.canvas = document.createElement('canvas');
    this.canvas.id = 'neural-network-background';
    this.canvas.style.position = 'fixed';
    this.canvas.style.top = '0';
    this.canvas.style.left = '0';
    this.canvas.style.width = '100%';
    this.canvas.style.height = '100%';
    this.canvas.style.zIndex = '-10'; // Ensure it's behind content but visible
    this.canvas.style.pointerEvents = 'none';
    this.canvas.style.opacity = '1'; // Force visibility
    
    // If canvas already exists, remove it first
    const existingCanvas = document.getElementById('neural-network-background');
    if (existingCanvas) {
      existingCanvas.remove();
    }
    
    // Append to body as first child to ensure it's behind everything
    if (document.body.firstChild) {
      document.body.insertBefore(this.canvas, document.body.firstChild);
    } else {
      document.body.appendChild(this.canvas);
    }
    
    // WebGL context
    this.gl = this.canvas.getContext('webgl') || this.canvas.getContext('experimental-webgl');
    if (!this.gl) {
      console.warn('WebGL not supported, falling back to canvas rendering');
      this.gl = null;
      this.ctx = this.canvas.getContext('2d');
      this.useWebGL = false;
    } else {
      this.useWebGL = true;
    }
    
    // Animation properties
    this.nodes = [];
    this.connections = [];
    this.flows = []; // Flow animations along connections
    this.animationFrameId = null;
    this.isDarkMode = true; // Always use dark mode for the background
    
    // Colors - Subtilere Farben mit weniger Intensität
    this.darkModeColors = {
      background: '#030610', // Dunkler Hintergrund beibehalten
      nodeColor: '#5a75b0',  // Gedämpftere Knotenfarbe
      nodePulse: '#94a7d0',  // Weniger intensives Pulsieren
      connectionColor: '#485880', // Subtilere Verbindungen
      flowColor: '#a0c7e0'   // Sanfteres Blitz-Blau
    };
    
    // Farben für Light Mode dezenter und harmonischer gestalten
    this.lightModeColors = {
      background: '#f5f7fa',      // Hellerer Hintergrund für subtileren Kontrast
      nodeColor: '#5570b0',       // Gedämpfteres Blau
      nodePulse: '#7aa8d0',       // Sanfteres Türkis für Glow
      connectionColor: '#8a8fc0',  // Dezenteres Lila
      flowColor: '#6d97d0'        // Sanfteres Blau für Blitze
    };
    
    // Konfigurationsobjekt für subtilere, sanftere Neuronen
    this.config = {
      nodeCount: 35,              // Reduziert für bessere Leistung und subtileres Aussehen
      nodeSize: 3.5,              // Größere Knoten für bessere Sichtbarkeit
      nodeVariation: 0.5,         // Weniger Varianz für gleichmäßigeres Erscheinungsbild
      connectionDistance: 250,    // Größere Verbindungsdistanz
      connectionOpacity: 0.18,    // Schwächere Verbindungen für subtileren Effekt
      animationSpeed: 0.015,      // Langsamere Animation für sanftere Bewegung
      pulseSpeed: 0.0015,         // Langsameres Pulsieren für subtilere Animation
      flowSpeed: 0.45,            // Langsamer für bessere Sichtbarkeit
      flowDensity: 0.003,         // Weniger Blitze gleichzeitig erzeugen
      flowLength: 0.1,            // Kürzere Blitze für dezentere Effekte
      maxConnections: 3,          // Weniger Verbindungen pro Neuron
      clusteringFactor: 0.45,     // Stärkeres Clustering
      linesFadeDuration: 4000,    // Längere Dauer für sanfteres Ein-/Ausblenden von Linien (ms)
      linesWidth: 0.7,            // Dünnere unterliegende Linien für subtileren Eindruck
      linesOpacity: 0.3,          // Geringere Opazität für Linien
      maxFlowCount: 8             // Begrenzte Anzahl gleichzeitiger Flüsse
    };
    
    // Initialize
    this.init();
    
    // Event listeners
    window.addEventListener('resize', this.resizeCanvas.bind(this));
    document.addEventListener('darkModeToggled', (event) => {
      this.isDarkMode = event.detail.isDark;
    });
    
    // Log that the background is initialized
    console.log('Neural Network Background initialized');
  }
  
  init() {
    this.resizeCanvas();
    
    if (this.useWebGL) {
      this.initWebGL();
    }
    
    this.createNodes();
    this.createConnections();
    this.startAnimation();
  }
  
  resizeCanvas() {
    const pixelRatio = window.devicePixelRatio || 1;
    const width = window.innerWidth;
    const height = window.innerHeight;
    
    this.canvas.style.width = width + 'px';
    this.canvas.style.height = height + 'px';
    this.canvas.width = width * pixelRatio;
    this.canvas.height = height * pixelRatio;
    
    if (this.useWebGL) {
      this.gl.viewport(0, 0, this.canvas.width, this.canvas.height);
    } else if (this.ctx) {
      this.ctx.scale(pixelRatio, pixelRatio);
    }
    
    // Recalculate node positions after resize
    if (this.nodes.length) {
      this.createNodes();
      this.createConnections();
    }
  }
  
  initWebGL() {
    // Vertex shader
    const vsSource = `
      attribute vec2 aVertexPosition;
      attribute float aPointSize;
      uniform vec2 uResolution;
      
      void main() {
        // Convert from pixel to clip space
        vec2 position = (aVertexPosition / uResolution) * 2.0 - 1.0;
        // Flip Y coordinate
        position.y = -position.y;
        
        gl_Position = vec4(position, 0, 1);
        gl_PointSize = aPointSize;
      }
    `;
    
    // Fragment shader - Softer glow effect
    const fsSource = `
      precision mediump float;
      uniform vec4 uColor;
      
      void main() {
        float distance = length(gl_PointCoord - vec2(0.5, 0.5));
        
        // Softer glow with smoother falloff
        float alpha = 1.0 - smoothstep(0.1, 0.5, distance);
        alpha = pow(alpha, 1.5); // Make the glow even softer
        
        gl_FragColor = vec4(uColor.rgb, uColor.a * alpha);
      }
    `;
    
    // Initialize shaders
    const vertexShader = this.loadShader(this.gl.VERTEX_SHADER, vsSource);
    const fragmentShader = this.loadShader(this.gl.FRAGMENT_SHADER, fsSource);
    
    // Create shader program
    this.shaderProgram = this.gl.createProgram();
    this.gl.attachShader(this.shaderProgram, vertexShader);
    this.gl.attachShader(this.shaderProgram, fragmentShader);
    this.gl.linkProgram(this.shaderProgram);
    
    if (!this.gl.getProgramParameter(this.shaderProgram, this.gl.LINK_STATUS)) {
      console.error('Unable to initialize the shader program: ' + 
                   this.gl.getProgramInfoLog(this.shaderProgram));
      return;
    }
    
    // Get attribute and uniform locations
    this.programInfo = {
      program: this.shaderProgram,
      attribLocations: {
        vertexPosition: this.gl.getAttribLocation(this.shaderProgram, 'aVertexPosition'),
        pointSize: this.gl.getAttribLocation(this.shaderProgram, 'aPointSize')
      },
      uniformLocations: {
        resolution: this.gl.getUniformLocation(this.shaderProgram, 'uResolution'),
        color: this.gl.getUniformLocation(this.shaderProgram, 'uColor')
      }
    };
    
    // Create buffers
    this.positionBuffer = this.gl.createBuffer();
    this.sizeBuffer = this.gl.createBuffer();
    
    // Set clear color for WebGL context
    const bgColor = this.hexToRgb(this.darkModeColors.background);
    
    this.gl.clearColor(bgColor.r/255, bgColor.g/255, bgColor.b/255, 1.0);
  }
  
  loadShader(type, source) {
    const shader = this.gl.createShader(type);
    this.gl.shaderSource(shader, source);
    this.gl.compileShader(shader);
    
    if (!this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS)) {
      console.error('An error occurred compiling the shaders: ' + 
                  this.gl.getShaderInfoLog(shader));
      this.gl.deleteShader(shader);
      return null;
    }
    
    return shader;
  }
  
  createNodes() {
    this.nodes = [];
    const width = this.canvas.width / (window.devicePixelRatio || 1);
    const height = this.canvas.height / (window.devicePixelRatio || 1);
    
    // Erstelle Cluster-Zentren für neuronale Netzwerkmuster
    const clusterCount = Math.floor(5 + Math.random() * 4); // 5-8 Cluster
    const clusters = [];
    
    for (let i = 0; i < clusterCount; i++) {
      clusters.push({
        x: Math.random() * width,
        y: Math.random() * height,
        radius: 100 + Math.random() * 150
      });
    }
    
    // Create nodes with random positions and properties
    for (let i = 0; i < this.config.nodeCount; i++) {
      // Entscheide, ob dieser Knoten zu einem Cluster gehört oder nicht
      const useCluster = Math.random() < this.config.clusteringFactor;
      let x, y;
      
      if (useCluster && clusters.length > 0) {
        // Wähle ein zufälliges Cluster
        const cluster = clusters[Math.floor(Math.random() * clusters.length)];
        const angle = Math.random() * Math.PI * 2;
        const distance = Math.random() * cluster.radius;
        
        // Platziere in der Nähe des Clusters mit einiger Streuung
        x = cluster.x + Math.cos(angle) * distance;
        y = cluster.y + Math.sin(angle) * distance;
        
        // Stelle sicher, dass es innerhalb des Bildschirms bleibt
        x = Math.max(0, Math.min(width, x));
        y = Math.max(0, Math.min(height, y));
      } else {
        // Zufällige Position außerhalb von Clustern
        x = Math.random() * width;
        y = Math.random() * height;
      }
      
      // Bestimme die Knotengröße - wichtigere Knoten (in Clustern) sind größer
      const nodeImportance = useCluster ? 1.2 : 0.8;
      const size = this.config.nodeSize * nodeImportance + Math.random() * this.config.nodeVariation;
      
      const node = {
        x: x,
        y: y,
        size: size,
        speed: {
          x: (Math.random() - 0.5) * this.config.animationSpeed,
          y: (Math.random() - 0.5) * this.config.animationSpeed
        },
        pulsePhase: Math.random() * Math.PI * 2, // Random starting phase
        connections: [],
        isActive: Math.random() < 0.3, // Some nodes start active for neural firing effect
        lastFired: 0,                  // For neural firing animation
        firingRate: 1000 + Math.random() * 4000 // Random firing rate in ms
      };
      
      this.nodes.push(node);
    }
  }
  
  createConnections() {
    this.connections = [];
    this.flows = []; // Reset flows
    
    // Create connections between nearby nodes
    for (let i = 0; i < this.nodes.length; i++) {
      const nodeA = this.nodes[i];
      nodeA.connections = [];
      
      // Sortiere andere Knoten nach Entfernung für bevorzugte nahe Verbindungen
      const potentialConnections = [];
      
      for (let j = 0; j < this.nodes.length; j++) {
        if (i === j) continue;
        
        const nodeB = this.nodes[j];
        const dx = nodeB.x - nodeA.x;
        const dy = nodeB.y - nodeA.y;
        const distance = Math.sqrt(dx * dx + dy * dy);
        
        if (distance < this.config.connectionDistance) {
          potentialConnections.push({
            index: j,
            distance: distance
          });
        }
      }
      
      // Sortiere nach Entfernung
      potentialConnections.sort((a, b) => a.distance - b.distance);
      
      // Wähle die nächsten N Verbindungen, maximal maxConnections
      const maxConn = Math.min(
        this.config.maxConnections, 
        potentialConnections.length, 
        1 + Math.floor(Math.random() * this.config.maxConnections)
      );
      
      for (let c = 0; c < maxConn; c++) {
        const connection = potentialConnections[c];
        const j = connection.index;
        const nodeB = this.nodes[j];
        const distance = connection.distance;
        
        // Create weighted connection (closer = stronger)
        const connectionStrength = Math.max(0, 1 - distance / this.config.connectionDistance);
        const connOpacity = connectionStrength * this.config.connectionOpacity;
        
        // Check if connection already exists
        if (!this.connections.some(conn => 
          (conn.from === i && conn.to === j) || (conn.from === j && conn.to === i)
        )) {
          // Neue Verbindung mit Ein-/Ausblend-Status
          this.connections.push({
            from: i,
            to: j,
            distance: distance,
            opacity: connOpacity,
            strength: connectionStrength,
            hasFlow: false,
            lastActivated: 0,
            progress: 0, // Verbindung beginnt unsichtbar und baut sich auf
            fadeState: 'in', // Status: 'in' = einblenden, 'visible' = sichtbar, 'out' = ausblenden
            fadeStartTime: Date.now(), // Wann der Fade-Vorgang gestartet wurde
            fadeTotalDuration: this.config.linesFadeDuration + Math.random() * 1000, // Zufällige Dauer
            visibleDuration: 10000 + Math.random() * 15000, // Wie lange die Linie sichtbar bleibt
            fadeProgress: 0, // Aktueller Fortschritt des Fade-Vorgangs (0-1)
            buildSpeed: 0 // Geschwindigkeit, mit der die Verbindung aufgebaut wird
          });
          nodeA.connections.push(j);
          nodeB.connections.push(i);
        }
      }
    }
  }
  
  startAnimation() {
    this.animationFrameId = requestAnimationFrame(this.animate.bind(this));
  }
  
  animate() {
    // Update nodes
    const width = this.canvas.width / (window.devicePixelRatio || 1);
    const height = this.canvas.height / (window.devicePixelRatio || 1);
    const now = Date.now();
    
    // Setze zunächst alle Neuronen auf inaktiv
    for (let i = 0; i < this.nodes.length; i++) {
      // Update pulse phase for smoother animation
      const node = this.nodes[i];
      node.pulsePhase += this.config.pulseSpeed * (1 + (node.connections.length * 0.04));
      
      // Animate node position with gentler movement
      node.x += node.speed.x * (Math.sin(now * 0.0003) * 0.4 + 0.4);
      node.y += node.speed.y * (Math.cos(now * 0.0002) * 0.4 + 0.4);
      
      // Keep nodes within bounds
      if (node.x < 0 || node.x > width) {
        node.speed.x *= -1;
        node.x = Math.max(0, Math.min(width, node.x));
      }
      if (node.y < 0 || node.y > height) {
        node.speed.y *= -1;
        node.y = Math.max(0, Math.min(height, node.y));
      }
      
      // Setze alle Knoten standardmäßig auf inaktiv
      node.isActive = false;
    }
    
    // Aktiviere Neuronen basierend auf aktiven Flows
    for (const flow of this.flows) {
      // Aktiviere den Quellknoten (der Flow geht von ihm aus)
      if (flow.sourceNodeIdx !== undefined) {
        this.nodes[flow.sourceNodeIdx].isActive = true;
        this.nodes[flow.sourceNodeIdx].lastFired = now;
      }
      
      // Aktiviere den Zielknoten nur, wenn der Flow weit genug fortgeschritten ist
      if (flow.targetNodeIdx !== undefined && flow.progress > 0.9) {
        this.nodes[flow.targetNodeIdx].isActive = true;
        this.nodes[flow.targetNodeIdx].lastFired = now;
      }
    }
    
    // Zufällig neue Flows zwischen Knoten initiieren
    if (Math.random() < 0.015) { // Reduzierte Chance in jedem Frame (1.5% statt 2%)
      const randomNodeIdx = Math.floor(Math.random() * this.nodes.length);
      const node = this.nodes[randomNodeIdx];
      
      // Nur aktivieren, wenn Knoten Verbindungen hat
      if (node.connections.length > 0) {
        node.isActive = true;
        node.lastFired = now;
        
        // Wähle eine zufällige Verbindung dieses Knotens
        const randomConnIdx = Math.floor(Math.random() * node.connections.length);
        const connectedNodeIdx = node.connections[randomConnIdx];
        
        // Finde die entsprechende Verbindung
        const conn = this.connections.find(c => 
          (c.from === randomNodeIdx && c.to === connectedNodeIdx) || 
          (c.from === connectedNodeIdx && c.to === randomNodeIdx)
        );
        
        if (conn) {
          // Markiere die Verbindung als kürzlich aktiviert
          conn.lastActivated = now;
          
          // Stelle sicher, dass die Verbindung sichtbar bleibt
          if (conn.fadeState === 'out') {
            conn.fadeState = 'visible';
            conn.fadeStartTime = now;
          }
          
          // Verbindung soll schneller aufgebaut werden
          if (conn.progress < 1) {
            conn.buildSpeed = 0.015 + Math.random() * 0.01;
          }
          
          // Erstelle einen neuen Flow, wenn nicht zu viele existieren
          if (this.flows.length < this.config.maxFlowCount) {
            // Bestimme die Richtung (vom aktivierten Knoten weg)
            const direction = conn.from === randomNodeIdx;
            
            this.flows.push({
              connection: conn,
              progress: 0,
              direction: direction,
              length: this.config.flowLength + Math.random() * 0.05,
              creationTime: now,
              totalDuration: 1000 + Math.random() * 600,
              sourceNodeIdx: direction ? conn.from : conn.to,
              targetNodeIdx: direction ? conn.to : conn.from
            });
          }
        }
      }
    }
    
    // Aktualisiere die Ein-/Ausblendung von Verbindungen
    for (const connection of this.connections) {
      const elapsedTime = now - connection.fadeStartTime;
      
      // Update connection fade status
      if (connection.fadeState === 'in') {
        // Einblenden
        connection.fadeProgress = Math.min(1.0, elapsedTime / connection.fadeTotalDuration);
        if (connection.fadeProgress >= 1.0) {
          connection.fadeState = 'visible';
          connection.fadeStartTime = now;
        }
      } else if (connection.fadeState === 'visible') {
        // Verbindung ist vollständig sichtbar
        if (elapsedTime > connection.visibleDuration) {
          connection.fadeState = 'out';
          connection.fadeStartTime = now;
          connection.fadeProgress = 1.0;
        }
      } else if (connection.fadeState === 'out') {
        // Ausblenden, aber nie komplett verschwinden
        connection.fadeProgress = Math.max(0.1, 1.0 - (elapsedTime / connection.fadeTotalDuration));
        
        // Verbindungen bleiben immer minimal sichtbar (nie komplett unsichtbar)
        if (connection.fadeProgress <= 0.1) {
          // Statt Verbindung komplett zu verstecken, setzen wir sie zurück auf "in"
          connection.fadeState = 'in';
          connection.fadeStartTime = now;
          connection.fadeProgress = 0.1; // Minimal sichtbar bleiben
          connection.visibleDuration = 15000 + Math.random() * 20000; // Längere Sichtbarkeit
        }
      } else if (connection.fadeState === 'hidden') {
        // Keine Verbindungen mehr verstecken, stattdessen immer wieder einblenden
        connection.fadeState = 'in';
        connection.fadeStartTime = now;
        connection.fadeProgress = 0.1;
      }
      
      // Verbindungen immer vollständig aufbauen und nicht zurücksetzen
      if (connection.progress < 1) {
        // Konstante Aufbaugeschwindigkeit, unabhängig vom Status
        const baseBuildSpeed = 0.003;
        let buildSpeed = connection.buildSpeed || baseBuildSpeed;
        
        // Wenn kürzlich aktiviert, schneller aufbauen
        if (now - connection.lastActivated < 2000) {
          buildSpeed = Math.max(buildSpeed, 0.006);
        }
        
        connection.progress += buildSpeed;
        
        if (connection.progress > 1) {
          connection.progress = 1;
          // Zurücksetzen der Aufbaugeschwindigkeit
          connection.buildSpeed = 0;
        }
      }
    }
    
    // Update flows with proper fading
    this.updateFlows(now);
    
    // Seltener neue Flows erstellen
    if (Math.random() < this.config.flowDensity && this.flows.length < this.config.maxFlowCount) {
      this.createNewFlow(now);
    }
    
    // Recalculate connections occasionally for a living network
    if (Math.random() < 0.005) { // Only recalculate 0.5% of the time for performance
      this.createConnections();
    }
    
    // Render
    if (this.useWebGL) {
      this.renderWebGL(now);
    } else {
      this.renderCanvas(now);
    }
    
    // Continue animation
    this.animationFrameId = requestAnimationFrame(this.animate.bind(this));
  }
  
  // Updated method to update flow animations with proper fading
  updateFlows(now) {
    // Update existing flows
    for (let i = this.flows.length - 1; i >= 0; i--) {
      const flow = this.flows[i];
      
      // Calculate flow age for fading effects
      const flowAge = now - flow.creationTime;
      const flowProgress = flowAge / flow.totalDuration;
      
      // Update flow progress
      flow.progress += this.config.flowSpeed / flow.connection.distance;
      
      // Aktiviere Quell- und Zielknoten basierend auf Flow-Fortschritt
      if (flow.sourceNodeIdx !== undefined) {
        // Quellknoten immer aktivieren, solange der Flow aktiv ist
        this.nodes[flow.sourceNodeIdx].isActive = true;
        this.nodes[flow.sourceNodeIdx].lastFired = now;
      }
      
      // Zielknoten erst aktivieren, wenn der Flow ihn erreicht hat
      if (flow.targetNodeIdx !== undefined && flow.progress > 0.9) {
        this.nodes[flow.targetNodeIdx].isActive = true;
        this.nodes[flow.targetNodeIdx].lastFired = now;
      }
      
      // Stellen Sie sicher, dass die Verbindung aktiv bleibt
      flow.connection.lastActivated = now;
      
      // Remove completed or expired flows
      if (flow.progress > 1.0 || flowProgress >= 1.0) {
        this.flows.splice(i, 1);
      }
    }
  }
  
  // Updated method to create flow animations with timing info
  createNewFlow(now) {
    if (this.connections.length === 0 || this.flows.length >= 6) return;
    
    // Select a random connection with preference for more connected nodes
    let connectionIdx = Math.floor(Math.random() * this.connections.length);
    let attempts = 0;
    
    // Try to find a connection with more connected nodes
    while (attempts < 5) {
      const testIdx = Math.floor(Math.random() * this.connections.length);
      const testConn = this.connections[testIdx];
      const fromNode = this.nodes[testConn.from];
      
      if (fromNode.connections.length > 2) {
        connectionIdx = testIdx;
        break;
      }
      attempts++;
    }
    
    const connection = this.connections[connectionIdx];
    
    // Verbindung als "im Aufbau" markieren, wenn sie noch nicht vollständig ist
    if (connection.progress < 1) {
      connection.buildSpeed = 0.015 + Math.random() * 0.01; // Schnellerer Aufbau während eines Blitzes
    }
    
    // Create a new flow along this connection
    this.flows.push({
      connection: connection,
      progress: 0,
      direction: Math.random() > 0.5, // Randomly decide direction
      length: this.config.flowLength + Math.random() * 0.1, // Slightly vary lengths
      creationTime: now,
      totalDuration: 800 + Math.random() * 500 // Zufällige Gesamtdauer (800-1300ms)
    });
  }
  
  renderWebGL(now) {
    this.gl.clear(this.gl.COLOR_BUFFER_BIT);
    
    const width = this.canvas.width / (window.devicePixelRatio || 1);
    const height = this.canvas.height / (window.devicePixelRatio || 1);
    
    // Select shader program
    this.gl.useProgram(this.programInfo.program);
    
    // Set resolution uniform
    this.gl.uniform2f(this.programInfo.uniformLocations.resolution, width, height);
    
    // Draw connections first (behind nodes)
    this.renderConnectionsWebGL(now);
    
    // Draw flows on top of connections
    this.renderFlowsWebGL(now);
    
    // Draw nodes
    this.renderNodesWebGL(now);
  }
  
  renderNodesWebGL(now) {
    // Prepare node positions for WebGL
    const positions = new Float32Array(this.nodes.length * 2);
    const sizes = new Float32Array(this.nodes.length);
    
    for (let i = 0; i < this.nodes.length; i++) {
      const node = this.nodes[i];
      positions[i * 2] = node.x;
      positions[i * 2 + 1] = node.y;
      
      // Sanftere Pulsation mit moderaterem Aktivierungsboost
      const activationBoost = node.isActive ? 1.3 : 1.0;
      let pulse = (Math.sin(node.pulsePhase) * 0.25 + 1.2) * activationBoost;
      
      // Größe basierend auf Konnektivität und Wichtigkeit, aber subtiler
      const connectivityFactor = 1 + (node.connections.length / this.config.maxConnections) * 1.1;
      sizes[i] = node.size * pulse * connectivityFactor;
    }
    
    // Bind position buffer
    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.positionBuffer);
    this.gl.bufferData(this.gl.ARRAY_BUFFER, positions, this.gl.STATIC_DRAW);
    this.gl.vertexAttribPointer(
      this.programInfo.attribLocations.vertexPosition,
      2,              // components per vertex
      this.gl.FLOAT,  // data type
      false,          // normalize
      0,              // stride
      0               // offset
    );
    this.gl.enableVertexAttribArray(this.programInfo.attribLocations.vertexPosition);
    
    // Bind size buffer
    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.sizeBuffer);
    this.gl.bufferData(this.gl.ARRAY_BUFFER, sizes, this.gl.STATIC_DRAW);
    this.gl.vertexAttribPointer(
      this.programInfo.attribLocations.pointSize,
      1,              // components per vertex
      this.gl.FLOAT,  // data type
      false,          // normalize
      0,              // stride
      0               // offset
    );
    this.gl.enableVertexAttribArray(this.programInfo.attribLocations.pointSize);
    
    // Enable blending for all nodes
    this.gl.enable(this.gl.BLEND);
    this.gl.blendFunc(this.gl.SRC_ALPHA, this.gl.ONE);  // Additive blending for glow
    
    // Draw each node individually with its own color
    for (let i = 0; i < this.nodes.length; i++) {
      const node = this.nodes[i];
      
      // Set node color - sanftere Hervorhebung von aktiven Knoten
      const colorObj = this.isDarkMode ? this.darkModeColors : this.lightModeColors;
      const nodeColor = this.hexToRgb(colorObj.nodeColor);
      const nodePulseColor = this.hexToRgb(colorObj.nodePulse);
      
      // Use pulse color for active nodes
      let r = nodeColor.r / 255;
      let g = nodeColor.g / 255;
      let b = nodeColor.b / 255;
      
      // Active nodes get slightly brighter color - subtiler
      if (node.isActive) {
        r = (r * 0.7 + nodePulseColor.r / 255 * 0.3);
        g = (g * 0.7 + nodePulseColor.g / 255 * 0.3);
        b = (b * 0.7 + nodePulseColor.b / 255 * 0.3);
      }
      
      // Subtilere Knoten mit reduzierter Opazität
      this.gl.uniform4f(
        this.programInfo.uniformLocations.color,
        r, g, b,
        node.isActive ? 0.75 : 0.65 // Geringere Sichtbarkeit für subtileres Erscheinungsbild
      );
      
      // Draw each node individually for better control
      this.gl.drawArrays(this.gl.POINTS, i, 1);
    }
  }
  
  renderConnectionsWebGL(now) {
    for (const connection of this.connections) {
      // Überspringe Verbindungen, die komplett unsichtbar sind
      if (connection.fadeState === 'hidden' || connection.fadeProgress <= 0) continue;
      
      const fromNode = this.nodes[connection.from];
      const toNode = this.nodes[connection.to];
      const progress = connection.progress || 1;
      const x1 = fromNode.x;
      const y1 = fromNode.y;
      const x2 = fromNode.x + (toNode.x - fromNode.x) * progress;
      const y2 = fromNode.y + (toNode.y - fromNode.y) * progress;
      
      // Calculate opacity based on fade state
      let opacity = connection.opacity * connection.fadeProgress * 0.85; // Reduzierte Gesamtopazität
      
      // Erhöhe kurzzeitig die Opazität bei kürzlich aktivierten Verbindungen
      if (connection.lastActivated && now - connection.lastActivated < 800) {
        const timeFactor = 1 - ((now - connection.lastActivated) / 800);
        opacity = Math.max(opacity, timeFactor * 0.3);
      }
      
      const positions = new Float32Array([
        x1, y1,
        x2, y2
      ]);
      
      this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.positionBuffer);
      this.gl.bufferData(this.gl.ARRAY_BUFFER, positions, this.gl.STATIC_DRAW);
      this.gl.vertexAttribPointer(
        this.programInfo.attribLocations.vertexPosition,
        2,
        this.gl.FLOAT,
        false,
        0,
        0
      );
      this.gl.enableVertexAttribArray(this.programInfo.attribLocations.vertexPosition);
      this.gl.disableVertexAttribArray(this.programInfo.attribLocations.pointSize);
      
      // Set color with calculated opacity
      const colorObj = this.isDarkMode ? this.darkModeColors : this.lightModeColors;
      const connColor = this.hexToRgb(colorObj.connectionColor);
      this.gl.uniform4f(
        this.programInfo.uniformLocations.color,
        connColor.r / 255,
        connColor.g / 255,
        connColor.b / 255,
        opacity
      );
      
      this.gl.enable(this.gl.BLEND);
      this.gl.blendFunc(this.gl.SRC_ALPHA, this.gl.ONE);
      this.gl.lineWidth(this.config.linesWidth);
      this.gl.drawArrays(this.gl.LINES, 0, 2);
    }
  }
  
  // New method to render the flowing animations
  renderFlowsWebGL(now) {
    // Für jeden Flow einen dezenten, echten Blitz als Zickzack zeichnen und Funken erzeugen
    for (const flow of this.flows) {
      const connection = flow.connection;
      const fromNode = this.nodes[connection.from];
      const toNode = this.nodes[connection.to];
      const startProgress = flow.progress;
      const endProgress = Math.min(1, startProgress + flow.length);
      if (startProgress >= 1 || endProgress <= 0) continue;
      const direction = flow.direction ? 1 : -1;
      let p1, p2;
      if (direction > 0) {
        p1 = {
          x: fromNode.x + (toNode.x - fromNode.x) * startProgress,
          y: fromNode.y + (toNode.y - fromNode.y) * startProgress
        };
        p2 = {
          x: fromNode.x + (toNode.x - fromNode.x) * endProgress,
          y: fromNode.y + (toNode.y - fromNode.y) * endProgress
        };
      } else {
        p1 = {
          x: toNode.x + (fromNode.x - toNode.x) * startProgress,
          y: toNode.y + (fromNode.y - toNode.y) * startProgress
        };
        p2 = {
          x: toNode.x + (fromNode.x - toNode.x) * endProgress,
          y: toNode.y + (fromNode.y - toNode.y) * endProgress
        };
      }
      // Zickzack-Blitz generieren
      const zigzag = this.generateZigZagPoints(p1, p2, 8, 10);
      for (let i = 0; i < zigzag.length - 1; i++) {
        const positions = new Float32Array([
          zigzag[i].x, zigzag[i].y,
          zigzag[i + 1].x, zigzag[i + 1].y
        ]);
        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.positionBuffer);
        this.gl.bufferData(this.gl.ARRAY_BUFFER, positions, this.gl.STATIC_DRAW);
        this.gl.vertexAttribPointer(
          this.programInfo.attribLocations.vertexPosition,
          2,
          this.gl.FLOAT,
          false,
          0,
          0
        );
        this.gl.enableVertexAttribArray(this.programInfo.attribLocations.vertexPosition);
        this.gl.disableVertexAttribArray(this.programInfo.attribLocations.pointSize);
        // Dezenter, leuchtender Blitz
        const colorObj = this.isDarkMode ? this.darkModeColors : this.lightModeColors;
        const flowColor = this.hexToRgb(colorObj.flowColor);
        this.gl.uniform4f(
          this.programInfo.uniformLocations.color,
          flowColor.r / 255,
          flowColor.g / 255,
          flowColor.b / 255,
          0.7 * fadeFactor  // Reduced from higher values
        );
        this.gl.enable(this.gl.BLEND);
        this.gl.blendFunc(this.gl.SRC_ALPHA, this.gl.ONE);
        this.gl.lineWidth(1.3); // Schmaler Blitz
        this.gl.drawArrays(this.gl.LINES, 0, 2);
      }
      // Funken erzeugen - echte elektrische Funken
      const sparks = this.generateSparkPoints(zigzag, 7 + Math.floor(Math.random() * 3));
      for (const spark of sparks) {
        // Helles Weiß-Blau für elektrische Funken
        this.gl.uniform4f(
          this.programInfo.uniformLocations.color,
          0.88, 0.95, 1.0, 0.65 // Elektrisches Blau-Weiß
        );
        
        // Position für den Funken setzen
        const sparkPos = new Float32Array([spark.x, spark.y]);
        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.positionBuffer);
        this.gl.bufferData(this.gl.ARRAY_BUFFER, sparkPos, this.gl.STATIC_DRAW);
        
        // Punktgröße setzen
        const sizes = new Float32Array([spark.size * 3.0]);
        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.sizeBuffer);
        this.gl.bufferData(this.gl.ARRAY_BUFFER, sizes, this.gl.STATIC_DRAW);
        
        this.gl.vertexAttribPointer(
          this.programInfo.attribLocations.vertexPosition,
          2,
          this.gl.FLOAT,
          false,
          0,
          0
        );
        this.gl.enableVertexAttribArray(this.programInfo.attribLocations.vertexPosition);
        
        this.gl.vertexAttribPointer(
          this.programInfo.attribLocations.pointSize,
          1,
          this.gl.FLOAT,
          false,
          0,
          0
        );
        this.gl.enableVertexAttribArray(this.programInfo.attribLocations.pointSize);
        
        this.gl.drawArrays(this.gl.POINTS, 0, 1);
      }
    }
  }
  
  renderCanvas(now) {
    // Clear canvas
    const width = this.canvas.width / (window.devicePixelRatio || 1);
    const height = this.canvas.height / (window.devicePixelRatio || 1);
    
    this.ctx.clearRect(0, 0, width, height);
    
    // Set background
    const backgroundColor = this.isDarkMode 
      ? this.darkModeColors.background 
      : this.lightModeColors.background;
      
    this.ctx.fillStyle = backgroundColor;
    this.ctx.fillRect(0, 0, width, height);
    
    // Draw connections with fade effects
    const connectionColor = this.isDarkMode 
      ? this.darkModeColors.connectionColor 
      : this.lightModeColors.connectionColor;
      
    for (const connection of this.connections) {
      // Überspringe Verbindungen, die komplett unsichtbar sind
      if (connection.fadeState === 'hidden' || connection.fadeProgress <= 0) continue;
      
      const fromNode = this.nodes[connection.from];
      const toNode = this.nodes[connection.to];
      
      // Zeichne nur den Teil der Verbindung, der schon aufgebaut wurde
      const progress = connection.progress || 0;
      if (progress <= 0) continue; // Skip if no progress yet
      
      const x1 = fromNode.x;
      const y1 = fromNode.y;
      
      // Endpunkt basiert auf dem aktuellen Fortschritt
      const x2 = x1 + (toNode.x - x1) * progress;
      const y2 = y1 + (toNode.y - y1) * progress;
      
      // Zeichne die unterliegende Linie mit Ein-/Ausblendung
      this.ctx.beginPath();
      this.ctx.moveTo(x1, y1);
      this.ctx.lineTo(x2, y2);
      
      const rgbColor = this.hexToRgb(connectionColor);
      
      // Calculate opacity based on fade state
      let opacity = connection.opacity * connection.fadeProgress;
      
      // Erhöhe kurzzeitig die Opazität bei kürzlich aktivierten Verbindungen
      if (connection.lastActivated && now - connection.lastActivated < 800) {
        const timeFactor = 1 - ((now - connection.lastActivated) / 800);
        opacity = Math.max(opacity, timeFactor * this.config.linesOpacity);
      }
      
      this.ctx.strokeStyle = `rgba(${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}, ${opacity})`;
      this.ctx.lineWidth = this.config.linesWidth;
      
      // Leichter Glow-Effekt für die Linien
      if (opacity > 0.1) {
        this.ctx.shadowColor = `rgba(${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}, 0.15)`;
        this.ctx.shadowBlur = 3;
      } else {
        this.ctx.shadowBlur = 0;
      }
      
      this.ctx.stroke();
      
      // Zeichne einen Fortschrittspunkt am Ende der sich aufbauenden Verbindung
      if (progress < 0.95 && connection.fadeProgress > 0.5) {
        this.ctx.beginPath();
        this.ctx.arc(x2, y2, 1.5, 0, Math.PI * 2);
        this.ctx.fillStyle = `rgba(${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}, ${opacity * 1.3})`;
        this.ctx.fill();
      }
      
      this.ctx.shadowBlur = 0; // Reset shadow for other elements
    }
    
    // Draw flows with fading effect
    this.renderFlowsCanvas(now);
    
    // Draw nodes with enhanced animations
    const nodeColor = this.isDarkMode 
      ? this.darkModeColors.nodeColor 
      : this.lightModeColors.nodeColor;
      
    const nodePulse = this.isDarkMode 
      ? this.darkModeColors.nodePulse 
      : this.lightModeColors.nodePulse;
      
    for (const node of this.nodes) {
      // Verbesserte Pulsation mit Aktivierungsboost
      const activationBoost = node.isActive ? 1.7 : 1.0;
      const pulse = (Math.sin(node.pulsePhase) * 0.45 + 1.4) * activationBoost;
      
      // Größe basierend auf Konnektivität und Wichtigkeit
      const connectivityFactor = 1 + (node.connections.length / this.config.maxConnections) * 1.4;
      const nodeSize = node.size * pulse * connectivityFactor;
      
      // Verbesserte Leuchtkraft und Glow-Effekt
      const rgbNodeColor = this.hexToRgb(nodeColor);
      const rgbPulseColor = this.hexToRgb(nodePulse);
      
      // Mische Farben basierend auf Aktivierung
      let r, g, b;
      if (node.isActive) {
        r = (rgbNodeColor.r * 0.3 + rgbPulseColor.r * 0.7);
        g = (rgbNodeColor.g * 0.3 + rgbPulseColor.g * 0.7);
        b = (rgbNodeColor.b * 0.3 + rgbPulseColor.b * 0.7);
      } else {
        r = rgbNodeColor.r;
        g = rgbNodeColor.g;
        b = rgbNodeColor.b;
      }
      
      // Äußerer Glow
      const glow = this.ctx.createRadialGradient(
        node.x, node.y, 0,
        node.x, node.y, nodeSize * 4.5
      );
      
      // Intensiveres Zentrum und weicherer Übergang
      glow.addColorStop(0, `rgba(${r}, ${g}, ${b}, ${node.isActive ? 0.95 : 0.8})`);
      glow.addColorStop(0.4, `rgba(${r}, ${g}, ${b}, 0.45)`);
      glow.addColorStop(1, `rgba(${r}, ${g}, ${b}, 0)`);
      
      this.ctx.beginPath();
      this.ctx.arc(node.x, node.y, nodeSize, 0, Math.PI * 2);
      this.ctx.fillStyle = glow;
      this.ctx.globalAlpha = node.isActive ? 1.0 : 0.92;
      this.ctx.fill();
      
      // Innerer Kern für stärkeren Leuchteffekt
      if (node.isActive) {
        this.ctx.beginPath();
        this.ctx.arc(node.x, node.y, nodeSize * 0.4, 0, Math.PI * 2);
        this.ctx.fillStyle = `rgba(${rgbPulseColor.r}, ${rgbPulseColor.g}, ${rgbPulseColor.b}, 0.9)`;
        this.ctx.fill();
      }
      
      this.ctx.globalAlpha = 1.0;
    }
  }
  
  // New method to render flows in Canvas mode with fading
  renderFlowsCanvas(now) {
    if (!this.flows.length) return;
    
    // Für jeden Flow in der Blitzanimation
    for (const flow of this.flows) {
      const connection = flow.connection;
      const fromNode = this.nodes[connection.from];
      const toNode = this.nodes[connection.to];
      
      // Berechne den Fortschritt der Connection und des Flows
      const connProgress = connection.progress || 1;
      
      // Flussrichtung bestimmen
      const [startNode, endNode] = flow.direction ? [fromNode, toNode] : [toNode, fromNode];
      
      // Berücksichtige den Verbindungs-Fortschritt
      const maxDistance = Math.min(connProgress, 1) * Math.sqrt(
        Math.pow(endNode.x - startNode.x, 2) + 
        Math.pow(endNode.y - startNode.y, 2)
      );
      
      // Berechne den aktuellen Fortschritt mit Ein- und Ausblendung
      const flowAge = now - flow.creationTime;
      const flowLifetime = flow.totalDuration;
      let fadeFactor = 1.0;
      
      // Sanftere Ein- und Ausblendung für Blitzeffekte
      if (flowAge < flowLifetime * 0.3) {
        // Einblenden - sanfter und länger
        fadeFactor = flowAge / (flowLifetime * 0.3);
      } else if (flowAge > flowLifetime * 0.7) {
        // Ausblenden - sanfter und länger
        fadeFactor = 1.0 - ((flowAge - flowLifetime * 0.7) / (flowLifetime * 0.3));
      }
      
      // Flow-Fortschritt
      const startProgress = Math.max(0.0, flow.progress - flow.length);
      const endProgress = Math.min(flow.progress, connProgress);
      
      // Start- und Endpunkte basierend auf dem Fortschritt
      const p1 = {
        x: startNode.x + (endNode.x - startNode.x) * startProgress,
        y: startNode.y + (endNode.y - startNode.y) * startProgress
      };
      
      const p2 = {
        x: startNode.x + (endNode.x - startNode.x) * endProgress,
        y: startNode.y + (endNode.y - startNode.y) * endProgress
      };
      
      // Prüfe, ob der Fluss den aktuellen Verbindungsfortschritt überschritten hat
      if (endProgress > connProgress) continue;
      
      // Farbe des Flusses basierend auf dem aktuellen Modus
      const flowColor = this.isDarkMode ? this.darkModeColors.flowColor : this.lightModeColors.flowColor;
      const rgbFlowColor = this.hexToRgb(flowColor);
      
      const baseAngle = Math.atan2(p2.y - p1.y, p2.x - p1.x);
      
      this.ctx.save();
      
      // Subtilere Untergrundspur für den Blitz
      this.ctx.beginPath();
      this.ctx.moveTo(p1.x, p1.y);
      this.ctx.lineTo(p2.x, p2.y);
      this.ctx.strokeStyle = `rgba(${rgbFlowColor.r}, ${rgbFlowColor.g}, ${rgbFlowColor.b}, ${0.12 * fadeFactor})`; // Reduziert von 0.15
      this.ctx.lineWidth = 2.5; // Reduziert von 3
      this.ctx.shadowColor = `rgba(${rgbFlowColor.r}, ${rgbFlowColor.g}, ${rgbFlowColor.b}, ${0.08 * fadeFactor})`; // Reduziert von 0.1
      this.ctx.shadowBlur = 6; // Reduziert von 7
      this.ctx.stroke();
      
      // Zickzack-Blitz mit geringerer Vibration generieren
      const zigzag = this.generateZigZagPoints(p1, p2, 6, 7);
      
      // Hauptblitz mit dezenterem Ein-/Ausblendeffekt
      this.ctx.strokeStyle = `rgba(${rgbFlowColor.r}, ${rgbFlowColor.g}, ${rgbFlowColor.b}, ${0.4 * fadeFactor})`; // Reduziert von 0.5
      this.ctx.lineWidth = 1.0; // Reduziert von 1.2
      this.ctx.shadowColor = `rgba(${rgbFlowColor.r}, ${rgbFlowColor.g}, ${rgbFlowColor.b}, ${0.2 * fadeFactor})`; // Reduziert von 0.25
      this.ctx.shadowBlur = 5; // Reduziert von 6
      this.ctx.beginPath();
      this.ctx.moveTo(zigzag[0].x, zigzag[0].y);
      for (let i = 1; i < zigzag.length; i++) {
        this.ctx.lineTo(zigzag[i].x, zigzag[i].y);
      }
      this.ctx.stroke();
      
      // Intensivere und mehr Funken
      const sparks = this.generateSparkPoints(zigzag, 8 + Math.floor(Math.random() * 5));
      
      // Intensiveres Funkenlicht mit dynamischem Ein-/Ausblendeffekt
      const sparkBaseOpacity = this.isDarkMode ? 0.85 : 0.75;
      const sparkBaseColor = this.isDarkMode 
        ? `rgba(230, 240, 250, ${sparkBaseOpacity * fadeFactor})` 
        : `rgba(190, 230, 250, ${sparkBaseOpacity * fadeFactor})`;
      
      for (const spark of sparks) {
        this.ctx.beginPath();
        
        // Dynamischere Stern/Funken-Form
        const points = 4 + Math.floor(Math.random() * 4); // 4-7 Spitzen
        const outerRadius = spark.size * 2.0;
        const innerRadius = spark.size * 0.35;
        
        for (let i = 0; i < points * 2; i++) {
          const radius = i % 2 === 0 ? outerRadius : innerRadius;
          const angle = (i * Math.PI) / points;
          const x = spark.x + Math.cos(angle) * radius;
          const y = spark.y + Math.sin(angle) * radius;
          
          if (i === 0) {
            this.ctx.moveTo(x, y);
          } else {
            this.ctx.lineTo(x, y);
          }
        }
        
        this.ctx.closePath();
        
        // Intensiveres Glühen
        this.ctx.shadowColor = this.isDarkMode 
          ? `rgba(200, 225, 255, ${0.6 * fadeFactor})`
          : `rgba(160, 220, 255, ${0.5 * fadeFactor})`;
        this.ctx.shadowBlur = 12;
        this.ctx.fillStyle = sparkBaseColor;
        this.ctx.fill();
        
        // Zusätzlicher innerer Glüheffekt für ausgewählte Funken
        if (spark.size > 4 && Math.random() > 0.5) {
          this.ctx.beginPath();
          this.ctx.arc(spark.x, spark.y, spark.size * 0.6, 0, Math.PI * 2);
          this.ctx.fillStyle = this.isDarkMode 
            ? `rgba(240, 250, 255, ${0.7 * fadeFactor})`
            : `rgba(220, 240, 255, ${0.6 * fadeFactor})`;
          this.ctx.fill();
        }
      }
      
      // Deutlicherer und länger anhaltender Fortschrittseffekt an der Spitze des Blitzes
      if (endProgress >= connProgress - 0.1 && connProgress < 0.98) {
        const tipGlow = this.ctx.createRadialGradient(
          p2.x, p2.y, 0,
          p2.x, p2.y, 10
        );
        tipGlow.addColorStop(0, `rgba(${rgbFlowColor.r}, ${rgbFlowColor.g}, ${rgbFlowColor.b}, ${0.85 * fadeFactor})`);
        tipGlow.addColorStop(0.5, `rgba(${rgbFlowColor.r}, ${rgbFlowColor.g}, ${rgbFlowColor.b}, ${0.4 * fadeFactor})`);
        tipGlow.addColorStop(1, `rgba(${rgbFlowColor.r}, ${rgbFlowColor.g}, ${rgbFlowColor.b}, 0)`);
        
        this.ctx.fillStyle = tipGlow;
        this.ctx.beginPath();
        this.ctx.arc(p2.x, p2.y, 10, 0, Math.PI * 2);
        this.ctx.fill();
      }
      
      this.ctx.restore();
    }
  }
  
  // Helper method to convert hex to RGB
  hexToRgb(hex) {
    // Remove # if present
    hex = hex.replace(/^#/, '');
    
    // Handle rgba hex format
    let alpha = 1;
    if (hex.length === 8) {
      alpha = parseInt(hex.slice(6, 8), 16) / 255;
      hex = hex.slice(0, 6);
    }
    
    // Parse hex values
    const bigint = parseInt(hex, 16);
    const r = (bigint >> 16) & 255;
    const g = (bigint >> 8) & 255;
    const b = bigint & 255;
    
    return { r, g, b, a: alpha };
  }
  
  // Cleanup method
  destroy() {
    if (this.animationFrameId) {
      cancelAnimationFrame(this.animationFrameId);
    }
    
    window.removeEventListener('resize', this.resizeCanvas.bind(this));
    
    if (this.canvas && this.canvas.parentNode) {
      this.canvas.parentNode.removeChild(this.canvas);
    }
    
    if (this.gl) {
      // Clean up WebGL resources
      this.gl.deleteBuffer(this.positionBuffer);
      this.gl.deleteBuffer(this.sizeBuffer);
      this.gl.deleteProgram(this.shaderProgram);
    }
  }
  
  // Hilfsfunktion: Erzeuge Zickzack-Punkte für einen Blitz mit geringerer Vibration
  generateZigZagPoints(start, end, segments = 5, amplitude = 8) {
    const points = [start];
    const mainAngle = Math.atan2(end.y - start.y, end.x - start.x);
    
    // Berechne die Gesamtlänge des Blitzes
    const totalDistance = Math.sqrt(
      Math.pow(end.x - start.x, 2) + 
      Math.pow(end.y - start.y, 2)
    );
    
    // Geringere Amplitude für subtilere Zickzack-Muster
    const baseAmplitude = totalDistance * 0.12; // Reduziert für sanfteres Erscheinungsbild
    
    for (let i = 1; i < segments; i++) {
      const t = i / segments;
      const x = start.x + (end.x - start.x) * t;
      const y = start.y + (end.y - start.y) * t;
      
      // Geringere Vibration durch kleinere Zufallsvariationen
      const perpendicularAngle = mainAngle + Math.PI/2;
      const variation = (Math.random() * 0.8 - 0.4); // Kleinere Variation für sanftere Muster
      
      // Mal Links, mal Rechts für sanften Blitz
      const directionFactor = (i % 2 === 0) ? 1 : -1;
      const offset = baseAmplitude * (Math.sin(i * Math.PI) + variation) * directionFactor;
      
      points.push({
        x: x + Math.cos(perpendicularAngle) * offset,
        y: y + Math.sin(perpendicularAngle) * offset
      });
    }
    points.push(end);
    return points;
  }
  
  // Hilfsfunktion: Erzeuge intensivere Funkenpunkte mit dynamischer Verteilung
  generateSparkPoints(zigzag, sparkCount = 15) {
    const sparks = [];
    // Mehr Funken für intensiveren Effekt
    const actualSparkCount = Math.min(sparkCount, zigzag.length * 2);
    
    // Funken an zufälligen Stellen entlang des Blitzes
    for (let i = 0; i < actualSparkCount; i++) {
      // Zufälliges Segment des Zickzacks auswählen
      const segIndex = Math.floor(Math.random() * (zigzag.length - 1));
      
      // Bestimme Richtung des Segments
      const dx = zigzag[segIndex + 1].x - zigzag[segIndex].x;
      const dy = zigzag[segIndex + 1].y - zigzag[segIndex].y;
      const segmentAngle = Math.atan2(dy, dx);
      
      // Zufällige Position entlang des Segments
      const t = Math.random();
      const x = zigzag[segIndex].x + dx * t;
      const y = zigzag[segIndex].y + dy * t;
      
      // Dynamischer Versatz für intensivere Funken
      const offsetAngle = segmentAngle + (Math.random() * Math.PI - Math.PI/2);
      const offsetDistance = Math.random() * 8 - 4; // Größerer Offset für dramatischere Funken
      
      // Zufällige Größe für variierende Intensität
      const baseSize = 3.5 + Math.random() * 3.5;
      const sizeVariation = Math.random() * 2.5;
      
      sparks.push({
        x: x + Math.cos(offsetAngle) * offsetDistance,
        y: y + Math.sin(offsetAngle) * offsetDistance,
        size: baseSize + sizeVariation // Größere und variablere Funkengröße
      });
      
      // Zusätzliche kleinere Funken in der Nähe für einen intensiveren Effekt
      if (Math.random() < 0.4) { // 40% Chance für zusätzliche Funken
        const subSparkAngle = offsetAngle + (Math.random() * Math.PI/2 - Math.PI/4);
        const subDistance = offsetDistance * (0.4 + Math.random() * 0.6);
        
        sparks.push({
          x: x + Math.cos(subSparkAngle) * subDistance,
          y: y + Math.sin(subSparkAngle) * subDistance,
          size: (baseSize + sizeVariation) * 0.6 // Kleinere Größe für sekundäre Funken
        });
      }
    }
    
    return sparks;
  }
}

// Initialize when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
  // Short delay to ensure DOM is fully loaded
  setTimeout(() => {
    if (!window.neuralNetworkBackground) {
      console.log('Creating Neural Network Background');
      window.neuralNetworkBackground = new NeuralNetworkBackground();
    }
  }, 100);
});

// Re-initialize when page is fully loaded (for safety)
window.addEventListener('load', () => {
  if (!window.neuralNetworkBackground) {
    console.log('Re-initializing Neural Network Background on full load');
    window.neuralNetworkBackground = new NeuralNetworkBackground();
  }
});

// Event listener to clean up when the window is closed
window.addEventListener('beforeunload', function() {
    if (window.neuralNetworkBackground) {
        window.neuralNetworkBackground.destroy();
    }
});