Add animated Alpha Jet marker to flight path

- Jet follows flight path during play mode with proper bearing
- Maintains heading at destination (no abrupt orientation reset)
- Linear animation for consistent speed throughout path

src/styles/main.css

@@ -305,3 +305,13 @@ body {
   stroke: var(--color-white);
   stroke-width: 2;
 }
+
+/* Jet marker */
+.jet-marker {
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
+  z-index: 100;
+}
+
+.jet-marker svg {
+  display: block;
+}

src/webgl/FlightPathLayer.js

@@ -1,3 +1,4 @@
+import mapboxgl from 'mapbox-gl';
 import { COLORS } from '../config.js';
 
 export class FlightPathLayer {
@@ -8,6 +9,7 @@ export class FlightPathLayer {
     this.animationFrame = null;
     this.fullPath = null;
     this.layersAdded = false;
+    this.jetMarker = null;
   }
 
   createArcPath(start, end, numPoints = 50) {
@@ -31,6 +33,81 @@ export class FlightPathLayer {
     return points;
   }
 
+  createJetMarker() {
+    const el = document.createElement('div');
+    el.className = 'jet-marker';
+    // SVG jet pointing UP (north) - rotation 0 = north
+    el.innerHTML = `
+      <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <!-- Fuselage pointing up -->
+        <path d="M16 2 L18 8 L18 22 L20 26 L20 28 L16 26 L12 28 L12 26 L14 22 L14 8 Z" fill="${COLORS.white}" stroke="${COLORS.blue}" stroke-width="0.5"/>
+        <!-- Left wing (blue) -->
+        <path d="M14 12 L4 18 L4 20 L14 17 Z" fill="${COLORS.blue}"/>
+        <!-- Right wing (red) -->
+        <path d="M18 12 L28 18 L28 20 L18 17 Z" fill="${COLORS.red}"/>
+        <!-- Left tail -->
+        <path d="M14 22 L10 26 L10 27 L14 24 Z" fill="${COLORS.blue}"/>
+        <!-- Right tail -->
+        <path d="M18 22 L22 26 L22 27 L18 24 Z" fill="${COLORS.red}"/>
+        <!-- Cockpit -->
+        <ellipse cx="16" cy="7" rx="1.5" ry="2.5" fill="${COLORS.blue}" opacity="0.6"/>
+      </svg>
+    `;
+
+    this.jetMarker = new mapboxgl.Marker({
+      element: el,
+      anchor: 'center',
+      rotationAlignment: 'map'
+    });
+
+    return this.jetMarker;
+  }
+
+  updateJetPosition(coords, nextCoords) {
+    if (!this.jetMarker) return;
+
+    this.jetMarker.setLngLat(coords);
+
+    // Calculate bearing/rotation based on direction of travel
+    // Only update if next coords are different (avoid resetting at destination)
+    if (nextCoords && (nextCoords[0] !== coords[0] || nextCoords[1] !== coords[1])) {
+      const bearing = this.calculateBearing(coords, nextCoords);
+      this.jetMarker.setRotation(bearing);
+    }
+  }
+
+  calculateBearing(start, end) {
+    const startLat = start[1] * Math.PI / 180;
+    const startLng = start[0] * Math.PI / 180;
+    const endLat = end[1] * Math.PI / 180;
+    const endLng = end[0] * Math.PI / 180;
+
+    const dLng = endLng - startLng;
+
+    const x = Math.sin(dLng) * Math.cos(endLat);
+    const y = Math.cos(startLat) * Math.sin(endLat) - Math.sin(startLat) * Math.cos(endLat) * Math.cos(dLng);
+
+    const bearing = Math.atan2(x, y) * 180 / Math.PI;
+    return (bearing + 360) % 360;
+  }
+
+  showJet(initialCoords) {
+    if (!this.jetMarker) {
+      this.createJetMarker();
+    }
+    // Set position before adding to map
+    if (initialCoords) {
+      this.jetMarker.setLngLat(initialCoords);
+    }
+    this.jetMarker.addTo(this.map);
+  }
+
+  hideJet() {
+    if (this.jetMarker) {
+      this.jetMarker.remove();
+    }
+  }
+
   ensureLayers() {
     if (this.layersAdded) return;
 
@@ -117,35 +194,53 @@ export class FlightPathLayer {
   // Show full static path
   showPath(from, to) {
     this.stopAnimation();
+    this.hideJet();
     this.ensureLayers();
 
     this.fullPath = this.createArcPath(from, to);
     this.updatePath(this.fullPath);
   }
 
-  // Animate path being traced progressively
+  // Animate path being traced progressively with jet
   animatePath(from, to, duration, onComplete) {
     this.stopAnimation();
     this.ensureLayers();
 
     this.fullPath = this.createArcPath(from, to);
     const totalPoints = this.fullPath.length;
+
+    // Show jet at start position with initial rotation
+    const initialCoords = this.fullPath[0];
+    const nextCoords = this.fullPath[1];
+    this.showJet(initialCoords);
+
+    // Set initial bearing
+    const initialBearing = this.calculateBearing(initialCoords, nextCoords);
+    this.jetMarker.setRotation(initialBearing);
+
     const startTime = performance.now();
 
     const animate = (currentTime) => {
       const elapsed = currentTime - startTime;
       const progress = Math.min(elapsed / duration, 1);
 
-      // Ease out cubic for smooth deceleration
-      const eased = 1 - Math.pow(1 - progress, 3);
-      const pointCount = Math.max(2, Math.floor(eased * totalPoints));
+      // Linear progression for consistent speed
+      const pointIndex = Math.max(0, Math.min(Math.floor(progress * totalPoints), totalPoints - 1));
+
+      // Update path
+      this.updatePath(this.fullPath.slice(0, pointIndex + 1));
 
-      this.updatePath(this.fullPath.slice(0, pointCount));
+      // Update jet position and rotation
+      const currentCoords = this.fullPath[pointIndex];
+      const lookAheadIndex = Math.min(pointIndex + 1, totalPoints - 1);
+      const lookAheadCoords = this.fullPath[lookAheadIndex];
+      this.updateJetPosition(currentCoords, lookAheadCoords);
 
       if (progress < 1) {
         this.animationFrame = requestAnimationFrame(animate);
       } else {
         this.animationFrame = null;
+        this.hideJet();
         if (onComplete) onComplete();
       }
     };
@@ -158,6 +253,7 @@ export class FlightPathLayer {
       cancelAnimationFrame(this.animationFrame);
       this.animationFrame = null;
     }
+    this.hideJet();
   }
 
   hide() {
@@ -168,6 +264,7 @@ export class FlightPathLayer {
 
   remove() {
     this.hide();
+    this.hideJet();
 
     ['glow', 'main', 'blue', 'red'].forEach(suffix => {
       if (this.map.getLayer(`${this.id}-${suffix}`)) {