.network-map {
	--network-map-accent: #d8ff63;
	--network-map-cyan: #67e8f9;
	position: relative;
	overflow: hidden;
	border: 1px solid rgba(103, 232, 249, 0.16);
	background:
		linear-gradient(rgba(103, 232, 249, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(103, 232, 249, 0.04) 1px, transparent 1px),
		#08090d;
	background-size: 48px 48px, 48px 48px, auto;
}

.network-map::after {
	position: absolute;
	inset: 0;
	z-index: 5;
	background: linear-gradient(90deg, rgba(8, 9, 13, 0.72), transparent 16%, transparent 84%, rgba(8, 9, 13, 0.72));
	content: '';
	pointer-events: none;
}

.network-map-canvas {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1174px;
	height: 580px;
	margin: -290px 0 0 -587px;
	isolation: isolate;
}

.network-map-base {
	position: relative;
	z-index: 1;
	display: block;
	width: 1174px;
	height: 580px;
	background: url('../img/map-grey.svg') no-repeat center center;
	background-size: cover;
	opacity: 0.38;
	filter: grayscale(1) brightness(0.88) contrast(1.18) sepia(0.3) hue-rotate(128deg) saturate(1.7);
}

.network-map-routes {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 1174px;
	height: 580px;
	pointer-events: none;
}

.network-map-route {
	fill: none;
	vector-effect: non-scaling-stroke;
}

.network-map-route-base {
	stroke: rgba(103, 232, 249, 0.2);
	stroke-width: 1;
}

.network-map-route-flow {
	stroke: var(--network-map-cyan);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-dasharray: 2 18;
	filter: drop-shadow(0 0 5px rgba(103, 232, 249, 0.8));
	animation: networkMapRoute 4.5s linear infinite;
}

.network-map-route-flow-two {
	stroke: var(--network-map-accent);
	animation-direction: reverse;
	animation-duration: 5.8s;
}

.network-map-route-flow-three {
	animation-delay: -2.4s;
	animation-duration: 6.8s;
}

.network-map-node {
	position: absolute;
	z-index: 3;
	display: block;
	transform: translate(-50%, -50%);
}

.network-map-node > i {
	position: relative;
	display: block;
	width: 10px;
	height: 10px;
	border: 2px solid var(--network-map-accent);
	border-radius: 50%;
	background: #08090d;
	box-shadow: 0 0 18px rgba(216, 255, 99, 0.56);
}

.network-map-node > i::after {
	position: absolute;
	inset: -6px;
	border: 1px solid var(--network-map-accent);
	border-radius: 50%;
	content: '';
	animation: networkMapNode 2.8s ease-out infinite;
}

.network-map-node > b {
	position: absolute;
	top: -3px;
	left: 18px;
	color: rgba(213, 241, 246, 0.72);
	font-family: var(--mono);
	font-size: 9px;
	font-weight: 500;
	white-space: nowrap;
}

.network-map-label-left > b {
	right: 18px;
	left: auto;
}

.network-map-label-above > b {
	top: auto;
	bottom: 18px;
	left: 50%;
	transform: translateX(-50%);
}

.network-map-label-below > b {
	top: 18px;
	left: 50%;
	transform: translateX(-50%);
}

.network-map-scan {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 4;
	height: 1px;
	background: linear-gradient(90deg, transparent 8%, rgba(216, 255, 99, 0.68) 50%, transparent 92%);
	box-shadow: 0 0 16px rgba(216, 255, 99, 0.3);
	animation: networkMapScan 7s linear infinite;
}

@keyframes networkMapRoute {
	to { stroke-dashoffset: -160; }
}

@keyframes networkMapNode {
	from { opacity: 0.72; transform: scale(0.72); }
	to { opacity: 0; transform: scale(2.2); }
}

@keyframes networkMapScan {
	to { transform: translateY(580px); }
}

@media (max-width: 1199.98px) {
	.network-map-canvas { transform: scale(0.9); }
}

@media (max-width: 991.98px) {
	.network-map-canvas { transform: scale(0.68); }
}

@media (max-width: 767.98px) {
	.network-map-canvas { transform: scale(0.5); }
}

@media (max-width: 567.98px) {
	.network-map-canvas { transform: scale(0.28); }

	.network-map-node > b { display: none; }
}

@media (max-width: 360px) {
	.network-map-canvas { transform: scale(0.23); }
}

@media (prefers-reduced-motion: reduce) {
	.network-map-route-flow,
	.network-map-node > i::after,
	.network-map-scan {
		animation: none;
	}
}