/* ==========================================================================
   Animated Map Background
   Usage: Add .animated-map-wrap to any container with position:relative + overflow:hidden.
   Then render partial: <partial name="_AnimatedMap" />
   ========================================================================== */

.animated-map-wrap {
    position: relative;
    overflow: hidden;
}

.animated-map-wrap > *:not(.animated-map-bg) {
    position: relative;
    z-index: 2;
}

.animated-map-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.animated-map-svg {
    width: 100%;
    height: 100%;
}

/* Pulsing location markers (uses r attribute, not transform — SVG transform-origin is unreliable) */
.animated-map-pulse {
    animation: animatedMapPulse 3s ease-in-out infinite;
}

.animated-map-pulse-slow {
    animation: animatedMapPulse 4s ease-in-out infinite;
}

@keyframes animatedMapPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.7; }
}

/* Delivery marker ping (one pulse every 2s) */
.animated-map-delivery-ping {
    animation: animatedMapDeliveryPing 2s ease-out infinite;
}

@keyframes animatedMapDeliveryPing {
    0% { opacity: 0.5; r: 5; }
    40% { opacity: 0; r: 20; }
    100% { opacity: 0; r: 20; }
}

/* Animated route dashes */
.animated-map-route {
    animation: animatedMapDash 4s linear infinite;
}

.animated-map-route-2 { animation-duration: 5s; animation-direction: reverse; }
.animated-map-route-3 { animation-duration: 6s; }

@keyframes animatedMapDash {
    to { stroke-dashoffset: -28; }
}

/* Emergency flash (orange vehicles) */
.animated-map-flash {
    animation: animatedMapFlash 0.8s ease-in-out infinite;
}

.animated-map-flash-glow {
    animation: animatedMapFlashGlow 0.8s ease-in-out infinite;
}

@keyframes animatedMapFlash {
    0%, 100% { fill: #ff6b35; }
    50% { fill: #ffffff; }
}

@keyframes animatedMapFlashGlow {
    0%, 100% { fill: rgba(255,107,53,0.25); r: 15; }
    50% { fill: rgba(255,255,255,0.15); r: 20; }
}