.dc-map picture {
    position: relative;
    z-index: 0;
}

.dc-map::after {
    z-index: 3;
}

.dc-connections {
    position: absolute;
    z-index: 2;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.dc-routes path {
    fill: none;
    stroke: rgba(255, 31, 45, .76);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-dasharray: 7 13;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 5px rgba(255, 31, 45, .75));
    animation: dc-route-flow 2.8s linear infinite;
}

.dc-routes path:nth-child(2) {
    animation-duration: 2.2s;
    animation-direction: reverse;
}

.dc-routes path:nth-child(3) {
    animation-duration: 3.4s;
}

.dc-particles circle {
    fill: #fff;
    stroke: #ff1f2d;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.dc-nodes circle {
    fill: #ff1f2d;
    stroke: rgba(255, 255, 255, .9);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    transform-box: fill-box;
    transform-origin: center;
    animation: dc-node-pulse 2.2s ease-in-out infinite;
}

.dc-nodes circle:nth-child(2) { animation-delay: -.7s; }
.dc-nodes circle:nth-child(3) { animation-delay: -1.4s; }

.dc-map-label {
    z-index: 4;
}

@keyframes dc-route-flow {
    to { stroke-dashoffset: -40; }
}

@keyframes dc-node-pulse {
    0%, 100% { opacity: .85; transform: scale(.85); }
    50% { opacity: 1; transform: scale(1.55); }
}

@media (max-width: 700px) {
    .dc-routes path { stroke-width: 1.25; }
    .dc-particles circle { stroke-width: 1.5; }
}

@media (prefers-reduced-motion: reduce) {
    .dc-routes path,
    .dc-nodes circle {
        animation: none !important;
    }
    .dc-particles { display: none; }
}