/* ── Glow-map kit (public/assets/js/glow-map.js, GlowMapService) ──
   A static OLA LIGHT tile recoloured by the SVG filters in
   components/glow-map-defs (roads pale blue, water navy, land transparent)
   over the card's own blue gradient, with gold lanes / roads, soft comets,
   white pins and a toy truck on top. Same look as the dashboard greeting
   banner (whose own rules stay in dashboard.css, prefix gm-/gmn-).
   Motion stays CALM: slow comets, pings only on a few points. */

.glm-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: calc(var(--glm-ax, 0.5) * 100%) calc(var(--glm-ay, 0.5) * 100%);
    filter: url(#gmGlowRoads);
    opacity: 0;
    transition: opacity 0.9s ease-out;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}
.glm-img.glm-img--network { filter: url(#gmGlowNetwork); }
.glm-img.is-loaded { opacity: 0.65; }

.glm-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}
.glm-marks { position: absolute; inset: 0; pointer-events: none; }

/* Network lanes (arcs between branches) */
.glm-lane { fill: none; stroke: rgba(253, 230, 138, 0.35); stroke-linecap: round; }
.glm-comet {
    fill: none;
    stroke: rgba(254, 249, 195, 0.85);
    stroke-linecap: round;
    stroke-dasharray: 3 97;                 /* pathLength=100: one soft head */
    animation: glmFlow 10s linear infinite; /* duration/delay set per path */
    filter: drop-shadow(0 0 1.5px rgba(254, 240, 138, 0.75));
}
.glm-comet.glm-comet--long { stroke-dasharray: 6 94; }
@keyframes glmFlow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } }

.glm-dot { fill: #dbeafe; opacity: 0.75; }
.glm-dot.is-hub { fill: #fff; opacity: 1; filter: drop-shadow(0 0 3px rgba(191, 219, 254, 0.95)); }
.glm-ping {
    fill: none;
    stroke: rgba(255, 255, 255, 0.7);
    stroke-width: 1;
    transform-box: fill-box;
    transform-origin: center;
    animation: glmPing 5s ease-out infinite;
}
.glm-ping.glm-ping--amber { stroke: rgba(251, 191, 36, 0.9); stroke-width: 1.4; }
@keyframes glmPing {
    0%   { transform: scale(1); opacity: 0.9; }
    100% { transform: scale(3.5); opacity: 0; }
}
.glm-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    fill: rgba(255, 255, 255, 0.92);
    paint-order: stroke;
    stroke: rgba(15, 23, 42, 0.45);
    stroke-width: 2.5px;
}

/* A single road (journey): soft halo, the part still to go, the part done */
.glm-road-halo { fill: none; stroke: rgba(253, 230, 138, 0.18); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.glm-road { fill: none; stroke: rgba(253, 230, 138, 0.6); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.glm-road-done {
    fill: none;
    stroke: #fde68a;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 3px rgba(253, 224, 71, 0.8));
}
.glm-tail { fill: none; stroke: rgba(255, 255, 255, 0.75); stroke-width: 1.4; stroke-dasharray: 2 4; stroke-linecap: round; }

/* Pins: origin = solid white, destination = white ring round a gold core */
.glm-pin { fill: #fff; filter: drop-shadow(0 0 4px rgba(191, 219, 254, 0.95)); }
.glm-pin-ring { fill: none; stroke: #fff; stroke-width: 1.6; filter: drop-shadow(0 0 3px rgba(191, 219, 254, 0.9)); }
.glm-pin-core { fill: #fbbf24; }
.glm-pin-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    fill: #fff;
    paint-order: stroke;
    stroke: rgba(15, 23, 42, 0.55);
    stroke-width: 3px;
}

/* DOM truck: the wrapper sits on the point, the body carries the heading */
.glm-truck {
    position: absolute;
    width: 30px;
    height: 15px;
    margin: -7.5px 0 0 -15px;
    z-index: 2;
}
.glm-truck::before {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    width: 34px; height: 34px;
    margin: -17px 0 0 -17px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(253, 224, 71, 0.35) 0%, transparent 70%);
    animation: glmBreath 3s ease-in-out infinite;
}
.glm-truck-body { position: relative; width: 100%; height: 100%; filter: drop-shadow(0 1px 3px rgba(15, 23, 42, 0.55)); }
.glm-truck.is-stale .glm-truck-body { filter: grayscale(0.85) opacity(0.75); }
.glm-truck.is-stale::before { display: none; }
@keyframes glmBreath {
    0%, 100% { transform: scale(0.8); opacity: 0.6; }
    50%      { transform: scale(1.15); opacity: 1; }
}

.glm-check {
    position: absolute;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border-radius: 50%;
    background: #22c55e;
    color: #fff;
    font: 700 12px/20px system-ui, sans-serif;
    text-align: center;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.3), 0 0 14px 3px rgba(134, 239, 172, 0.55);
    z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
    .glm-img { transition: none; }
    .glm-comet,
    .glm-ping { display: none; }
    .glm-truck::before { animation: none; }
}