:root {
  --ss-navy: #0A1B3D;
  --ss-blue: #0D6DFF;
  --ss-green: #22C55E;
  --ss-amber: #F4B740;
  --ss-route-base: rgba(120, 132, 155, 0.20);
  --ss-route-base-dark: rgba(170, 188, 224, 0.20);
  --ss-route-highlight: rgba(244, 183, 64, 0.82);
  --ss-route-highlight-green: rgba(34, 197, 94, 0.74);
}

.ss-route-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.ss-route-cluster-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  opacity: 0.96;
}

.ss-route-section > :not(.ss-route-cluster-layer) {
  position: relative;
  z-index: 2;
}

.ss-route-cluster-layer svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ss-route-cluster-layer .ss-route-base {
  fill: none;
  stroke: var(--ss-route-base);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-dasharray: 6 10;
}

.ss-route-cluster-layer .ss-route-trail {
  fill: none;
  stroke: var(--ss-route-highlight);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 14 86;
  opacity: 0.85;
  filter: drop-shadow(0 0 8px rgba(244, 183, 64, 0.26));
}

.ss-route-cluster-layer .ss-route-trail.confirmed {
  stroke: var(--ss-route-highlight-green);
  opacity: 0.62;
  filter: drop-shadow(0 0 8px rgba(34, 197, 94, 0.22));
}

.ss-route-node {
  opacity: 0.8;
}

.ss-route-node .ring {
  fill: none;
  stroke: rgba(13, 109, 255, 0.14);
  stroke-width: 1.4;
}

.ss-route-node .dot {
  fill: rgba(13, 109, 255, 0.56);
}

.ss-destination-pin {
  filter: drop-shadow(0 16px 28px rgba(13, 109, 255, 0.22));
}

.ss-pin-body { fill: var(--ss-blue); }
.ss-pin-face {
  fill: rgba(255,255,255,0.18);
  stroke: rgba(255,255,255,0.96);
  stroke-width: 4.2;
}

.ss-pin-hand {
  stroke: #ffffff;
  stroke-width: 4;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: center;
}

.ss-pin-hand.hour { animation: ssPinHour 16s ease-in-out infinite; }
.ss-pin-hand.minute { animation: ssPinMinute 16s ease-in-out infinite; }
.ss-pin-center { fill: #ffffff; }

.ss-pin-ripple {
  fill: none;
  stroke: rgba(34, 197, 94, 0.28);
  stroke-width: 1.5;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: ssPinRipple 16s ease-in-out infinite;
}
.ss-pin-ripple.r2 { animation-delay: 0.12s; }
.ss-pin-ripple.r3 { animation-delay: 0.24s; }

.ss-moving-dot { opacity: 0.96; }
.ss-moving-dot .core {
  fill: var(--ss-amber);
  filter: drop-shadow(0 0 8px rgba(244, 183, 64, 0.38));
}
.ss-moving-dot .echo {
  fill: none;
  stroke: rgba(244, 183, 64, 0.42);
  stroke-width: 1.8;
  opacity: 0;
}
.ss-moving-dot .trail-ghost { fill: rgba(244, 183, 64, 0.18); }

.ss-route-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 80% 28%, rgba(13, 109, 255, 0.055), transparent 24rem),
    radial-gradient(circle at 22% 82%, rgba(34, 197, 94, 0.035), transparent 22rem);
}

.ss-route-section.route-pin-left::before {
  background:
    radial-gradient(circle at 18% 28%, rgba(13, 109, 255, 0.055), transparent 24rem),
    radial-gradient(circle at 78% 82%, rgba(34, 197, 94, 0.035), transparent 22rem);
}

@keyframes ssPinMinute {
  0%   { transform: rotate(0deg); }
  32%  { transform: rotate(38deg); }
  64%  { transform: rotate(82deg); }
  84%  { transform: rotate(96deg); }
  100% { transform: rotate(96deg); }
}

@keyframes ssPinHour {
  0%   { transform: rotate(0deg); }
  32%  { transform: rotate(8deg); }
  64%  { transform: rotate(16deg); }
  84%  { transform: rotate(18deg); }
  100% { transform: rotate(18deg); }
}

@keyframes ssPinRipple {
  0%, 77% {
    opacity: 0;
    transform: scale(0.86);
  }
  83% {
    opacity: 0.78;
    transform: scale(1);
  }
  94% {
    opacity: 0;
    transform: scale(1.58);
  }
  100% {
    opacity: 0;
    transform: scale(1.58);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ss-route-trail,
  .ss-pin-hand,
  .ss-pin-ripple,
  .ss-moving-dot .echo {
    animation: none !important;
  }
}

/* Site integration: keep clusters visible while preserving dense copy areas. */
.map-hero.ss-route-section .ss-route-cluster-layer {
  opacity: 0.82;
}

.map-soft.ss-route-section[data-pin-side="left"] .ss-route-cluster-layer {
  opacity: 0.58;
  transform: translate(-14%, 36%) scale(0.82);
  transform-origin: left center;
}

.route-section.ss-route-section .ss-route-cluster-layer {
  opacity: 0.8;
  transform: translate(4%, 2%) scale(0.94);
  transform-origin: right center;
}

.section.white.ss-route-section[data-pin-side="left"]:not(.map-soft) .ss-route-cluster-layer {
  opacity: 0.74;
  transform: translate(-10%, 8%) scale(0.9);
  transform-origin: left center;
}

@media (max-width: 920px) {
  .map-hero.ss-route-section .ss-route-cluster-layer {
    opacity: 0.72;
    transform: translateY(220px) scale(0.9);
    transform-origin: center top;
  }

  .map-soft.ss-route-section[data-pin-side="left"] .ss-route-cluster-layer,
  .section.white.ss-route-section[data-pin-side="left"]:not(.map-soft) .ss-route-cluster-layer {
    opacity: 0.5;
    transform: translate(-22%, 36%) scale(0.76);
  }

  .route-section.ss-route-section .ss-route-cluster-layer {
    opacity: 0.62;
    transform: translate(16%, 18%) scale(0.82);
  }
}