/* ==========================================================================
   IT Solutions 页专用样式：首屏的网络拓扑图
   ========================================================================== */

.rx-topo {
	position: relative;
	width: 100%;
	max-width: 480px;
	aspect-ratio: 400 / 420;
	margin-left: auto;
}

.rx-topo__lines {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	fill: none;
	overflow: visible;
}

.rx-topo__lines path {
	stroke: rgba(160, 200, 255, 0.2);
	stroke-width: 1.5;
	vector-effect: non-scaling-stroke;
}

/* 线上一直往下流的光点 */
.rx-topo__lines .rx-topo__flow {
	stroke: var(--rx-cyan);
	stroke-width: 2.5;
	stroke-dasharray: 6 46;
	stroke-linecap: round;
	filter: drop-shadow(0 0 4px var(--rx-cyan));
	animation: rx-topo-flow 1.6s linear infinite;
}

@keyframes rx-topo-flow {
	to { stroke-dashoffset: -52; }
}

.rx-topo__node {
	position: absolute;
	left: var(--x);
	top: var(--y);
	display: grid;
	justify-items: center;
	gap: 6px;
	min-width: 104px;
	padding: 12px 14px;
	border: 1px solid var(--rx-line-strong);
	background: rgba(4, 8, 14, 0.9);
	font-family: var(--rx-display);
	font-size: 14px;
	font-weight: 600;
	transform: translate(-50%, -50%);
	clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

.rx-topo__node .rx-icon {
	width: 26px;
	height: 26px;
	color: var(--rx-cyan);
}

/* 防火墙那一格有会扩散的防护圈 */
.rx-topo__node--guard {
	border-color: rgba(34, 230, 220, 0.6);
	box-shadow: inset 0 0 24px rgba(34, 230, 220, 0.2);
}

.rx-topo__node--guard .rx-icon {
	animation: rx-blink 2.2s steps(2, jump-none) infinite;
}

@media (max-width: 1020px) {
	.rx-topo {
		margin: 0 auto;
	}
}