/* Base tokens and enhancements for Tailwind CDN setup */
:root {
  --color-navy: #0A1220;
  --color-asphalt: #1B1F2A;
  --color-accent: #22D3EE;
}

html, body {
  scroll-behavior: smooth;
  background-color: var(--color-navy);
}

/* Smooth scrolling fallback (if Lenis disabled) */
@media (prefers-reduced-motion: reduce) {
  html, body { scroll-behavior: auto; }
}

/* Utility: subtle border for dark surfaces */
.surface {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(27,31,42,0.6);
}

/* Hero tweaks */
#hero img { filter: saturate(1.05) contrast(1.05); }

/* Scroll snap for Fleet */
#fleet .snap-x { scroll-snap-type: x mandatory; }
#fleet .snap-center { scroll-snap-align: center; }

/* Focus visibility */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Selection */
::selection {
  background: rgba(34, 211, 238, 0.25);
  color: #fff;
}

/* Route glow example (for inline SVG if used) */
.route-glow {
  filter: drop-shadow(0 0 6px rgba(34,211,238,0.8)) drop-shadow(0 0 12px rgba(34,211,238,0.5));
}

/* Coverage overlay styling */
svg .route {
  stroke: rgba(34,211,238,0.9);
  stroke-width: 1.2;
  fill: none;
  stroke-linecap: round;
}

svg .route-node {
  fill: rgba(34,211,238,0.95);
  filter: drop-shadow(0 0 6px rgba(34,211,238,0.8)) drop-shadow(0 0 10px rgba(34,211,238,0.5));
}

@keyframes dashFlow {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -40; }
}

/* Animated dashes applied via JS for performance */
.route.animated {
  stroke-dasharray: 6 8;
  animation: dashFlow 1.8s linear infinite;
}