Add fading contrail effect to flight paths

Each completed flight path creates an independent trail layer
that fades out over 5 seconds. Multiple trails can coexist
and fade simultaneously.

src/webgl/FlightPathLayer.js

@@ -10,6 +10,9 @@ export class FlightPathLayer {
     this.fullPath = null;
     this.layersAdded = false;
     this.jetMarker = null;
+    // Trail system with multiple independent fading trails
+    this.trails = [];
+    this.trailCounter = 0;
   }
 
   createArcPath(start, end, numPoints = 50) {
@@ -190,6 +193,77 @@ export class FlightPathLayer {
     }
   }
 
+  createTrail(coords) {
+    const trailId = `trail-${this.trailCounter++}`;
+    const sourceId = `${this.id}-${trailId}-source`;
+    const layerId = `${this.id}-${trailId}`;
+
+    // Add source
+    this.map.addSource(sourceId, {
+      type: 'geojson',
+      data: {
+        type: 'Feature',
+        geometry: { type: 'LineString', coordinates: coords }
+      }
+    });
+
+    // Add layer
+    this.map.addLayer({
+      id: layerId,
+      type: 'line',
+      source: sourceId,
+      paint: {
+        'line-color': COLORS.white,
+        'line-width': 1.5,
+        'line-opacity': 0.5
+      }
+    }, `${this.id}-glow`); // Insert below the main path layers
+
+    // Start fade animation
+    const fadeDuration = 5000;
+    const startTime = performance.now();
+
+    const trail = { sourceId, layerId, fadeFrame: null };
+
+    const fade = (currentTime) => {
+      const elapsed = currentTime - startTime;
+      const progress = Math.min(elapsed / fadeDuration, 1);
+      const opacity = 0.5 * (1 - progress);
+
+      if (this.map.getLayer(layerId)) {
+        this.map.setPaintProperty(layerId, 'line-opacity', opacity);
+      }
+
+      if (progress < 1) {
+        trail.fadeFrame = requestAnimationFrame(fade);
+      } else {
+        // Clean up when fully faded
+        this.removeTrail(trail);
+      }
+    };
+
+    trail.fadeFrame = requestAnimationFrame(fade);
+    this.trails.push(trail);
+  }
+
+  removeTrail(trail) {
+    if (trail.fadeFrame) {
+      cancelAnimationFrame(trail.fadeFrame);
+    }
+    if (this.map.getLayer(trail.layerId)) {
+      this.map.removeLayer(trail.layerId);
+    }
+    if (this.map.getSource(trail.sourceId)) {
+      this.map.removeSource(trail.sourceId);
+    }
+    this.trails = this.trails.filter(t => t !== trail);
+  }
+
+  clearAllTrails() {
+    this.trails.forEach(trail => this.removeTrail(trail));
+    this.trails = [];
+  }
+
   // Show full static path
   showPath(from, to) {
     this.stopAnimation();
@@ -240,6 +314,9 @@ export class FlightPathLayer {
       } else {
         this.animationFrame = null;
         this.hideJet();
+        // Create fading trail from completed path
+        this.createTrail(this.fullPath);
+        this.updatePath([]);
         if (onComplete) onComplete();
       }
     };
@@ -257,6 +334,7 @@ export class FlightPathLayer {
 
   hide() {
     this.stopAnimation();
+    this.clearAllTrails();
     this.updatePath([]);
     this.fullPath = null;
   }