/* ============================================
   VETUU — Traffic System Styles
   Vehicles, headlights, and road effects
   
   Simple solid-color vehicles with:
   - Random unique colors (set via JS)
   - Same stroke outline as characters
   - Prominent shadow matching character style
   - Headlights at night with signal blinking
   - (Hover bob removed - to be rebuilt later)
   - Dust trails (daytime only)
   
   PERFORMANCE NOTE (Patch I):
   Keep fixed overlays outside world transforms.
   Moving composited canvases can cause micro-stutter on Safari.
   ============================================ */

/* NOTE: @property registrations and transitions removed for performance.
   Transitioning inherited custom properties causes style recalc on ALL
   elements every frame. Shadow values update discretely every 90s —
   the subtle values (±3.6° skew, 3-12px offset) make jumps imperceptible. */

/* ---------- Base Vehicle ---------- */
/* NOTE: Vehicles are NOT actors - they have their own complete styling.
   This avoids inheriting character-specific transitions/animations. */
.vehicle {
  position: absolute;
  z-index: 12; /* Below actors (15) but above ground objects */
  
  /* Create local stacking context - child z-indexes don't leak globally */
  isolation: isolate;
  
  /* PERF: contain helps limit style recalc scope */
  contain: layout style;
  
  /* GPU compositing */
  backface-visibility: hidden;
  transform-style: preserve-3d;
  
  pointer-events: auto; /* Enable clicking for targeting */
  cursor: pointer;
  
  /* CRITICAL: Pivot around rear axle (25% from left for East-facing base)
     Real cars rotate around their rear wheels, not their center.
     This makes turns look natural - rear stays stable, front swings around */
  transform-origin: 25% 50%;
  
  /* Position set directly via JS style.transform for performance
     Direct assignment is more efficient than CSS custom properties for per-frame updates */
  transform: translate3d(0, 0, 0);
  
  /* Spawn fade-in transition */
  opacity: 1;
  transition: opacity var(--fade-quick) ease-out;
}

/* Spawning state - start invisible, fade in when class is removed */
.vehicle.spawning {
  opacity: 0;
}

/* Vehicle sprite - the main body */
.vehicle > .sprite {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Solid color - set via --vehicle-color custom property from JS */
  background: var(--vehicle-color, oklch(0.52 0.040 55));
  /* No rounded edges */
  /* PERF: box-shadow for outline (cheaper than drop-shadow filter) */
  box-shadow: 
    1px 0 0 var(--sprite-outline-60),
    -1px 0 0 var(--sprite-outline-60),
    0 1px 0 var(--sprite-outline-60),
    0 -1px 0 var(--sprite-outline-60);
  /* Animation handles transform - don't override */
  transition: none;
  filter: none; /* Using box-shadow for outline instead */
  background-image: none;
  /* GPU compositing for smooth animation */
  will-change: transform;
  /* PERF: contain strict isolates layout/paint/style calculations */
  contain: strict;
}

/* Vehicle shadow - world-space sun-aware shadow
   
   Shadow is the full width × height of the vehicle sprite.
   Scales uniformly from center based on sun height:
   - Noon (high sun, shadow-scale-y ~0.3): scale ~1.0 (hidden beneath vehicle)
   - Dawn/dusk (low sun, shadow-scale-y ~0.7): scale ~1.15 (slightly extends)
   
   KEY: Shadow skew and offset are in WORLD SPACE (based on sun position)
   but the shadow element rotates with its parent vehicle. We use CSS trig
   functions to counter-rotate and apply correct world-space transforms.
   
   Also reacts to:
   - Turn signals (subtle skew in turn direction) */
.vehicle > .shadow {
  position: absolute;
  z-index: 0;
  /* Match vehicle sprite dimensions exactly */
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  /* Solid black rectangle - same shape as vehicle sprite */
  background: var(--bg-void);
  /* Scale from center - subtle extension at low sun angles */
  transform-origin: center center;
  
  /* === Shadow parameters === */
  /* Base scale from sun position: ~1.02 at noon, ~1.08 at dawn/dusk (reduced max) */
  --shadow-base-scale: calc(1.02 + var(--shadow-scale-y, 0.4) * 0.15);
  
  /* Sun-based offset (no skew - simpler/cleaner look for vehicles) */
  transform: 
    translate3d(var(--shadow-offset-x, 0px), var(--shadow-offset-y, 3px), 0)
    scale3d(var(--shadow-base-scale), var(--shadow-base-scale), 1);
  
  /* Smooth transition for sun position updates (every 90s).
     30s duration makes shadow shifts barely perceptible. */
  transition: transform 30s ease-out;
  
  /* GPU layer */
  will-change: transform, opacity;
  
  /* Very subtle shadow opacity */
  opacity: 0.08;
  pointer-events: none;
  contain: strict;
}


/* Turn maneuver classes - skew removed for cleaner look.
   Classes kept for potential future use but shadows no longer skew. */

/* ---------- Light Strips (Front & Back) ---------- */
/* Pixel strips for brake lights and turn signals */

/* Back light strip - full width at rear */
.vehicle .sprite > .light-strip-back {
  position: absolute;
  z-index: 2;
  left: 0;
  /* Center vertically */
  top: 15%;
  width: 2px;
  height: 70%;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Stay in parent's 3D space */
  transform-style: preserve-3d;
}

/* Front light strip - signal lights only (smaller, matches back width) */
.vehicle .sprite > .light-strip-front {
  position: absolute;
  z-index: 2;
  right: 0;
  /* Center vertically */
  top: 15%;
  width: 2px;
  height: 70%;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Stay in parent's 3D space */
  transform-style: preserve-3d;
}

/* Individual light segments - back strip */
.light-strip-back .light-segment {
  width: 100%;
  height: 20%;
  background: oklch(0.38 0.025 55 / 0.8);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

/* Front strip - signals match back strip size */
.light-strip-front .light-segment {
  width: 100%;
  height: 20%;
  background: oklch(0.38 0.025 55 / 0.8);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

/* Brake light (center segment of back strip) - RED */
/* Takes up remaining space between signals (60% since signals are 20% each) */
.light-strip-back .light-brake {
  height: 60%;
  background: oklch(0.38 0.025 55 / 0.8);
}

.vehicle.braking .sprite .light-strip-back .light-brake {
  background: oklch(0.62 0.200 25);
  box-shadow: 
    0 0 4px 1px oklch(0.62 0.200 25 / 0.8),
    0 0 8px 2px oklch(0.62 0.200 25 / 0.4),
    inset 0 0 2px oklch(0.85 0.080 25 / 0.5);
}

/* Turn signal lights - YELLOW/AMBER */
/* Left signal (top segment) */
.light-strip-back .light-signal-left,
.light-strip-front .light-signal-left {
  background: oklch(0.38 0.025 55 / 0.8);
}

/* Right signal (bottom segment) */
.light-strip-back .light-signal-right,
.light-strip-front .light-signal-right {
  background: oklch(0.38 0.025 55 / 0.8);
}

/* Active left turn signal */
.vehicle.signal-left .light-signal-left {
  animation: signal-blink 0.5s ease-in-out infinite;
}

/* Active right turn signal */
.vehicle.signal-right .light-signal-right {
  animation: signal-blink 0.5s ease-in-out infinite;
}

/* Signal blink animation */
@keyframes signal-blink {
  0%, 100% {
    background: oklch(0.38 0.025 55 / 0.8);
    box-shadow: none;
  }
  50% {
    background: oklch(0.78 0.140 70);
    box-shadow: 
      0 0 4px 1px oklch(0.78 0.140 70 / 0.8),
      0 0 8px 2px oklch(0.78 0.140 70 / 0.4),
      inset 0 0 2px oklch(0.90 0.080 70 / 0.5);
  }
}

/* Hazard mode - both signals blink in unison */
/* Animation-delay is set dynamically by JS to sync all vehicles to global beat */
.vehicle.signal-hazard .light-signal-left,
.vehicle.signal-hazard .light-signal-right {
  animation: signal-blink 0.35s ease-in-out infinite;
  /* Delay is set inline by applyHazardSync() - defaults to 0 if not set */
}

/* Parked vehicle state */
.vehicle.parked {
  /* Slightly reduced shadow opacity when stationary */
}
.vehicle.parked > .sprite {
  /* Disable hover animation when parked - vehicle is stationary */
  animation: none !important;
}
.vehicle.parked > .shadow {
  /* Static shadow when parked */
  animation: none !important;
  opacity: 0.1;
}

/* ---------- Vehicle States ---------- */
/* Stopped/slowing states - no brightness changes to avoid jarring transitions */

/* ---------- Graceful Despawn ---------- */
/* Fade-out animation for vehicles leaving map or recovering from stuck state */

/* Stuck vehicle recovery (timeout) */
.vehicle.teleport-fade-out {
  opacity: 0;
  transition: opacity var(--fade-dramatic) ease-out;
}

.vehicle.teleport-fade-out > .sprite,
.vehicle.teleport-fade-out > .shadow {
  /* Disable hover animation during fade */
  animation: none !important;
}

/* Edge despawn (leaving map) */
.vehicle.despawn-fade-out {
  opacity: 0;
  transition: opacity var(--fade-dramatic) ease-out;
}

.vehicle.despawn-fade-out > .sprite,
.vehicle.despawn-fade-out > .shadow {
  /* Disable hover animation during fade */
  animation: none !important;
}

/* Targeted state - yellow/orange glow
   PERF: Use box-shadow instead of drop-shadow filter (much cheaper) */
.vehicle.targeted > .sprite {
  box-shadow: 
    0 0 2px var(--warning),
    0 0 4px var(--warning),
    inset 0 0 1px var(--warning);
}

/* ---------- Headlights ---------- */
.vehicle-headlight {
  position: absolute;
  z-index: 2;
  width: 0;
  height: 0;
  /* Hidden by default */
  opacity: 0;
  transition: opacity var(--fade-standard) ease;
  pointer-events: none;
}

/* Headlights visible at night */
.vehicle.headlights-on .vehicle-headlight {
  opacity: 1;
}

/* Headlight cone shape using radial gradient */
.vehicle-headlight::before {
  content: '';
  position: absolute;
  /* Small cone from headlight source */
  width: 48px;
  height: 24px;
  /* Extra color stops reduce gradient banding */
  background: radial-gradient(
    ellipse 100% 80% at 0% 50%,
    oklch(0.98 0.015 85 / 0.35) 0%,
    oklch(0.98 0.015 85 / 0.28) 15%,
    oklch(0.98 0.015 85 / 0.2) 30%,
    oklch(0.98 0.015 85 / 0.14) 40%,
    oklch(0.98 0.015 85 / 0.08) 50%,
    oklch(0.98 0.015 85 / 0.04) 60%,
    oklch(0.98 0.015 85 / 0.015) 70%,
    transparent 80%
  );
}

/* Position headlights - ALL vehicles use East-facing base, rotation handles orientation */
/* Headlights on the "front" (right side of East-facing base) */
.vehicle .vehicle-headlight {
  right: 0;
}
.vehicle .vehicle-headlight.left {
  top: 20%;
}
.vehicle .vehicle-headlight.right {
  top: 60%;
}
.vehicle .vehicle-headlight::before {
  left: 4px;
  transform-origin: left center;
}

/* ---------- Antigrav Hover Effect ---------- */
/* Subtle figure-8 movement + scale pulse mimics magnetic repulsion hover.
   X = sin(t), Y = sin(2t) traces a Lissajous figure-8 pattern.
   Scale increases at apex points (when Y = ±max) to simulate rising toward camera.
   
   PERFORMANCE: Only animates transform (GPU-accelerated).
   No @property, no custom property transitions, no filters. */

/* Base animation - moderate hover for standard vehicles
   Smooth figure-8 with 16 keyframes for fluid motion.
   X = sin(t), Y = sin(2t) - Lissajous curve
   Scale very subtle - just hints at depth, not breathing */
@keyframes antigrav-hover {
  0% { transform: translate3d(0, 0, 0) scale3d(1, 1, 1); }
  6.25% { transform: translate3d(0.38px, 0.35px, 0) scale3d(1.002, 1.003, 1); }
  12.5% { transform: translate3d(0.71px, 0.5px, 0) scale3d(1.003, 1.004, 1); }
  18.75% { transform: translate3d(0.92px, 0.35px, 0) scale3d(1.002, 1.003, 1); }
  25% { transform: translate3d(1px, 0, 0) scale3d(1, 1, 1); }
  31.25% { transform: translate3d(0.92px, -0.35px, 0) scale3d(1.002, 1.003, 1); }
  37.5% { transform: translate3d(0.71px, -0.5px, 0) scale3d(1.003, 1.004, 1); }
  43.75% { transform: translate3d(0.38px, -0.35px, 0) scale3d(1.002, 1.003, 1); }
  50% { transform: translate3d(0, 0, 0) scale3d(1, 1, 1); }
  56.25% { transform: translate3d(-0.38px, 0.35px, 0) scale3d(1.002, 1.003, 1); }
  62.5% { transform: translate3d(-0.71px, 0.5px, 0) scale3d(1.003, 1.004, 1); }
  68.75% { transform: translate3d(-0.92px, 0.35px, 0) scale3d(1.002, 1.003, 1); }
  75% { transform: translate3d(-1px, 0, 0) scale3d(1, 1, 1); }
  81.25% { transform: translate3d(-0.92px, -0.35px, 0) scale3d(1.002, 1.003, 1); }
  87.5% { transform: translate3d(-0.71px, -0.5px, 0) scale3d(1.003, 1.004, 1); }
  93.75% { transform: translate3d(-0.38px, -0.35px, 0) scale3d(1.002, 1.003, 1); }
  100% { transform: translate3d(0, 0, 0) scale3d(1, 1, 1); }
}

/* Shadow responds to hover - subtle scale/opacity pulse */
@keyframes antigrav-shadow {
  0%, 50%, 100% {
    opacity: 0.1;
  }
  12.5%, 37.5%, 62.5%, 87.5% {
    /* Shadow slightly lighter when vehicle "rises" */
    opacity: 0.09;
  }
  25%, 75% {
    opacity: 0.1;
  }
}

/* Apply hover to all vehicle sprites */
.vehicle > .sprite {
  animation: antigrav-hover 4s linear infinite;
}

/* Shadow responds to hover cycle */
.vehicle > .shadow {
  animation: antigrav-shadow 4s linear infinite;
}

/* ===== ARCHETYPE VARIATIONS ===== */

/* --- FAST & NIMBLE: Tighter, quicker hover (more stable repulsors) --- */
@keyframes antigrav-hover-nimble {
  0% { transform: translate3d(0, 0, 0) scale3d(1, 1, 1); }
  6.25% { transform: translate3d(0.19px, 0.18px, 0) scale3d(1.001, 1.0015, 1); }
  12.5% { transform: translate3d(0.35px, 0.25px, 0) scale3d(1.0015, 1.002, 1); }
  18.75% { transform: translate3d(0.46px, 0.18px, 0) scale3d(1.001, 1.0015, 1); }
  25% { transform: translate3d(0.5px, 0, 0) scale3d(1, 1, 1); }
  31.25% { transform: translate3d(0.46px, -0.18px, 0) scale3d(1.001, 1.0015, 1); }
  37.5% { transform: translate3d(0.35px, -0.25px, 0) scale3d(1.0015, 1.002, 1); }
  43.75% { transform: translate3d(0.19px, -0.18px, 0) scale3d(1.001, 1.0015, 1); }
  50% { transform: translate3d(0, 0, 0) scale3d(1, 1, 1); }
  56.25% { transform: translate3d(-0.19px, 0.18px, 0) scale3d(1.001, 1.0015, 1); }
  62.5% { transform: translate3d(-0.35px, 0.25px, 0) scale3d(1.0015, 1.002, 1); }
  68.75% { transform: translate3d(-0.46px, 0.18px, 0) scale3d(1.001, 1.0015, 1); }
  75% { transform: translate3d(-0.5px, 0, 0) scale3d(1, 1, 1); }
  81.25% { transform: translate3d(-0.46px, -0.18px, 0) scale3d(1.001, 1.0015, 1); }
  87.5% { transform: translate3d(-0.35px, -0.25px, 0) scale3d(1.0015, 1.002, 1); }
  93.75% { transform: translate3d(-0.19px, -0.18px, 0) scale3d(1.001, 1.0015, 1); }
  100% { transform: translate3d(0, 0, 0) scale3d(1, 1, 1); }
}

/* Speeder - fast, tight hover */
.vehicle.vehicle-speeder > .sprite {
  animation: antigrav-hover-nimble 2.5s linear infinite;
}
.vehicle.vehicle-speeder > .shadow {
  animation: antigrav-shadow 2.5s linear infinite;
}

/* Compact - zippy, responsive */
.vehicle.vehicle-compact > .sprite {
  animation: antigrav-hover-nimble 3s linear infinite;
}
.vehicle.vehicle-compact > .shadow {
  animation: antigrav-shadow 3s linear infinite;
}

/* --- HEAVY & INDUSTRIAL: Slower, larger sway (more mass, more momentum) --- */
@keyframes antigrav-hover-heavy {
  0% { transform: translate3d(0, 0, 0) scale3d(1, 1, 1); }
  6.25% { transform: translate3d(0.57px, 0.53px, 0) scale3d(1.003, 1.004, 1); }
  12.5% { transform: translate3d(1.06px, 0.75px, 0) scale3d(1.004, 1.006, 1); }
  18.75% { transform: translate3d(1.38px, 0.53px, 0) scale3d(1.003, 1.004, 1); }
  25% { transform: translate3d(1.5px, 0, 0) scale3d(1, 1, 1); }
  31.25% { transform: translate3d(1.38px, -0.53px, 0) scale3d(1.003, 1.004, 1); }
  37.5% { transform: translate3d(1.06px, -0.75px, 0) scale3d(1.004, 1.006, 1); }
  43.75% { transform: translate3d(0.57px, -0.53px, 0) scale3d(1.003, 1.004, 1); }
  50% { transform: translate3d(0, 0, 0) scale3d(1, 1, 1); }
  56.25% { transform: translate3d(-0.57px, 0.53px, 0) scale3d(1.003, 1.004, 1); }
  62.5% { transform: translate3d(-1.06px, 0.75px, 0) scale3d(1.004, 1.006, 1); }
  68.75% { transform: translate3d(-1.38px, 0.53px, 0) scale3d(1.003, 1.004, 1); }
  75% { transform: translate3d(-1.5px, 0, 0) scale3d(1, 1, 1); }
  81.25% { transform: translate3d(-1.38px, -0.53px, 0) scale3d(1.003, 1.004, 1); }
  87.5% { transform: translate3d(-1.06px, -0.75px, 0) scale3d(1.004, 1.006, 1); }
  93.75% { transform: translate3d(-0.57px, -0.53px, 0) scale3d(1.003, 1.004, 1); }
  100% { transform: translate3d(0, 0, 0) scale3d(1, 1, 1); }
}

/* Tanker - heavy liquid sloshing effect */
.vehicle.vehicle-tanker > .sprite {
  animation: antigrav-hover-heavy 6s linear infinite;
}
.vehicle.vehicle-tanker > .shadow {
  animation: antigrav-shadow 6s linear infinite;
}

/* Skiff - industrial cargo, lumbering */
.vehicle.vehicle-skiff > .sprite {
  animation: antigrav-hover-heavy 5.5s linear infinite;
}
.vehicle.vehicle-skiff > .shadow {
  animation: antigrav-shadow 5.5s linear infinite;
}

/* APC - armored, heavy but controlled */
.vehicle.vehicle-apc > .sprite {
  animation: antigrav-hover-heavy 5s linear infinite;
}
.vehicle.vehicle-apc > .shadow {
  animation: antigrav-shadow 5s linear infinite;
}

/* --- LUXURY & COMFORT: Smooth, gentle float --- */
@keyframes antigrav-hover-smooth {
  0% { transform: translate3d(0, 0, 0) scale3d(1, 1, 1); }
  6.25% { transform: translate3d(0.3px, 0.28px, 0) scale3d(1.0015, 1.002, 1); }
  12.5% { transform: translate3d(0.57px, 0.4px, 0) scale3d(1.002, 1.003, 1); }
  18.75% { transform: translate3d(0.74px, 0.28px, 0) scale3d(1.0015, 1.002, 1); }
  25% { transform: translate3d(0.8px, 0, 0) scale3d(1, 1, 1); }
  31.25% { transform: translate3d(0.74px, -0.28px, 0) scale3d(1.0015, 1.002, 1); }
  37.5% { transform: translate3d(0.57px, -0.4px, 0) scale3d(1.002, 1.003, 1); }
  43.75% { transform: translate3d(0.3px, -0.28px, 0) scale3d(1.0015, 1.002, 1); }
  50% { transform: translate3d(0, 0, 0) scale3d(1, 1, 1); }
  56.25% { transform: translate3d(-0.3px, 0.28px, 0) scale3d(1.0015, 1.002, 1); }
  62.5% { transform: translate3d(-0.57px, 0.4px, 0) scale3d(1.002, 1.003, 1); }
  68.75% { transform: translate3d(-0.74px, 0.28px, 0) scale3d(1.0015, 1.002, 1); }
  75% { transform: translate3d(-0.8px, 0, 0) scale3d(1, 1, 1); }
  81.25% { transform: translate3d(-0.74px, -0.28px, 0) scale3d(1.0015, 1.002, 1); }
  87.5% { transform: translate3d(-0.57px, -0.4px, 0) scale3d(1.002, 1.003, 1); }
  93.75% { transform: translate3d(-0.3px, -0.28px, 0) scale3d(1.0015, 1.002, 1); }
  100% { transform: translate3d(0, 0, 0) scale3d(1, 1, 1); }
}

/* Luxury - premium stabilization */
.vehicle.vehicle-luxury > .sprite {
  animation: antigrav-hover-smooth 5s linear infinite;
}
.vehicle.vehicle-luxury > .shadow {
  animation: antigrav-shadow 5s linear infinite;
}

/* Cruiser - family comfort */
.vehicle.vehicle-cruiser > .sprite {
  animation: antigrav-hover-smooth 4.5s linear infinite;
}
.vehicle.vehicle-cruiser > .shadow {
  animation: antigrav-shadow 4.5s linear infinite;
}

/* --- UTILITY: Standard but slightly rougher --- */
/* Guard - standard patrol */
.vehicle.vehicle-guard > .sprite {
  animation: antigrav-hover 3.5s linear infinite;
}
.vehicle.vehicle-guard > .shadow {
  animation: antigrav-shadow 3.5s linear infinite;
}

/* Ute - work vehicle, slightly rougher */
.vehicle.vehicle-ute > .sprite {
  animation: antigrav-hover 3.8s linear infinite;
}
.vehicle.vehicle-ute > .shadow {
  animation: antigrav-shadow 3.8s linear infinite;
}

/* --- BROKEN: No hover animation (handled in archetype section below) --- */

/* ---------- Dust Particles (Feature 4 - Rewritten) ---------- */
/* Simple sand-colored squares with subtle outline.
   Animation handled by CSS @keyframes (generated dynamically in JS). */

.dust-particle {
  position: absolute;
  z-index: 11; /* Below vehicles (12) but above ground */
  pointer-events: none;
  
  /* Base particle: simple sand-colored square */
  width: 4px;
  height: 4px;
  background: oklch(0.78 0.065 65);
  
  /* Subtle outline - 0.25px border (no box-shadow for performance) */
  border: 0.25px solid var(--sprite-outline);
  
  /* Hidden by default - animation reveals and fades */
  opacity: 0;
  
  /* PERF: will-change for compositor thread animation */
  will-change: transform, opacity;
}

/* Color variants - full sand palette including rare accents */
.dust-particle[data-variant="0"] { background: oklch(0.76 0.055 65); }  /* Pale sand */
.dust-particle[data-variant="1"] { background: oklch(0.68 0.070 62); }  /* Warm tan */
.dust-particle[data-variant="2"] { background: oklch(0.60 0.075 58); }  /* Ochre */
.dust-particle[data-variant="3"] { background: oklch(0.52 0.070 55); }  /* Brown-tan */
.dust-particle[data-variant="4"] { background: oklch(0.45 0.060 52); }  /* Brown */
.dust-particle[data-variant="5"] { background: oklch(0.68 0.200 40); }  /* Coral accent (rare) */
.dust-particle[data-variant="6"] { background: oklch(0.82 0.180 90); }  /* Gold accent (rare) */


/* ---------- Headlight Signal Blink (Feature 1) ---------- */
/* Signal states NO LONGER pulse the sprite - we use the actual signal light strips */
/* The signal-blink/signal-hazard classes are only used for light strip animations */

/* REMOVED: signal-pulse animation on sprites - it caused unwanted flashing */

/* ---------- Special Vehicle Archetypes (Feature 7) ---------- */
/* Note: Shadows now use sharp dynamic system with --shadow-height-mult */

/* Guard patrol - sharper outline */
/* PERF: Using box-shadow instead of drop-shadow filter */
.vehicle.vehicle-guard > .sprite {
  box-shadow: 
    1px 0 0 oklch(0.28 0.035 230 / 0.8),
    -1px 0 0 oklch(0.28 0.035 230 / 0.8),
    0 1px 0 oklch(0.28 0.035 230 / 0.8),
    0 -1px 0 oklch(0.28 0.035 230 / 0.8);
}

/* Broken hover cart - stuttery animation, hazard-like appearance */
/* ---------- New Vehicle Archetypes (Phase 1) ---------- */
/* Shadow sizes now controlled by --shadow-height-mult set per-vehicle in JS */
/* These styles add visual distinction via outlines */

/* Industrial: Cargo Skiff - functional, utilitarian look */
.vehicle.vehicle-skiff > .sprite {
  box-shadow: 
    1px 0 0 oklch(0.40 0.020 55 / 0.7),
    -1px 0 0 oklch(0.40 0.020 55 / 0.7),
    0 1px 0 oklch(0.40 0.020 55 / 0.7),
    0 -1px 0 oklch(0.40 0.020 55 / 0.7);
}

/* Industrial: Tanker - hazardous cargo indicator with amber edge glow */
.vehicle.vehicle-tanker > .sprite {
  box-shadow: 
    1px 0 0 oklch(0.38 0.025 145 / 0.8),
    -1px 0 0 oklch(0.38 0.025 145 / 0.8),
    0 1px 0 oklch(0.38 0.025 145 / 0.8),
    0 -1px 0 oklch(0.38 0.025 145 / 0.8),
    0 0 3px oklch(0.70 0.100 70 / 0.25);
}

/* Military: Speeder Recon - sleek, nimble */
.vehicle.vehicle-speeder > .sprite {
  box-shadow: 
    1px 0 0 oklch(0.38 0.030 230 / 0.6),
    -1px 0 0 oklch(0.38 0.030 230 / 0.6),
    0 1px 0 oklch(0.38 0.030 230 / 0.6),
    0 -1px 0 oklch(0.38 0.030 230 / 0.6);
}

/* Military: APC Heavy - thick armor outline */
.vehicle.vehicle-apc > .sprite {
  box-shadow: 
    2px 0 0 oklch(0.18 0.010 55 / 0.9),
    -2px 0 0 oklch(0.18 0.010 55 / 0.9),
    0 2px 0 oklch(0.18 0.010 55 / 0.9),
    0 -2px 0 oklch(0.18 0.010 55 / 0.9);
}

/* Private: Hover Compact - small and zippy */
.vehicle.vehicle-compact > .sprite {
  box-shadow: 
    1px 0 0 var(--sprite-outline-50),
    -1px 0 0 var(--sprite-outline-50),
    0 1px 0 var(--sprite-outline-50),
    0 -1px 0 var(--sprite-outline-50);
}

/* Private: Family Cruiser - comfortable, stable look */
.vehicle.vehicle-cruiser > .sprite {
  box-shadow: 
    1px 0 0 oklch(0.40 0.025 230 / 0.6),
    -1px 0 0 oklch(0.40 0.025 230 / 0.6),
    0 1px 0 oklch(0.40 0.025 230 / 0.6),
    0 -1px 0 oklch(0.40 0.025 230 / 0.6);
}

/* Private: Luxury Liner - premium look with subtle glow */
.vehicle.vehicle-luxury > .sprite {
  box-shadow: 
    1px 0 0 oklch(0.15 0.015 55 / 0.8),
    -1px 0 0 oklch(0.15 0.015 55 / 0.8),
    0 1px 0 oklch(0.15 0.015 55 / 0.8),
    0 -1px 0 oklch(0.15 0.015 55 / 0.8),
    0 0 4px oklch(0.75 0.060 70 / 0.15);
}

/* Private: Work Ute - rugged, practical */
.vehicle.vehicle-ute > .sprite {
  box-shadow: 
    1px 0 0 oklch(0.42 0.035 55 / 0.7),
    -1px 0 0 oklch(0.42 0.035 55 / 0.7),
    0 1px 0 oklch(0.42 0.035 55 / 0.7),
    0 -1px 0 oklch(0.42 0.035 55 / 0.7);
}

/* ---------- Debug Overlay (optional) ---------- */
.vehicle.debug::after {
  content: attr(data-dir) ' L' attr(data-lane);
  position: absolute;
  top: -12px;
  left: 0;
  font-size: 8px;
  font-family: monospace;
  color: var(--color-cream);
  background: var(--alpha-black-60);
  padding: 1px 3px;
  white-space: nowrap;
}