/**
 * Advantage card micro-visuals · v6.1.2
 */

.advantages-card__head {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 16px 18px 10px;
	min-height: 76px;
}

.advantages-viz {
	flex-shrink: 0;
	width: 76px;
	height: 76px;
	opacity: 0.92;
	pointer-events: none;
}

/* ─── Card 01: Radar pulse ─── */
.advantages-viz--radar {
	position: relative;
}

.advantages-viz--radar .advantages-viz__core {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9px;
	height: 9px;
	margin: -4.5px 0 0 -4.5px;
	border-radius: 50%;
	background: #00e5ff;
	box-shadow: 0 0 14px #00e5ff;
	animation: adv-radar-core 1.6s ease-in-out infinite;
}

.advantages-viz--radar .advantages-viz__ring {
	position: absolute;
	inset: 50% auto auto 50%;
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;
	border: 1.5px solid rgba(0, 229, 255, 0.65);
	border-radius: 50%;
	animation: adv-radar-pulse 2.2s ease-out infinite;
}

.advantages-viz--radar .advantages-viz__ring--2 {
	animation-delay: 0.55s;
}

.advantages-viz--radar .advantages-viz__ring--3 {
	animation-delay: 1.1s;
}

.advantages-viz--radar .advantages-viz__sweep {
	position: absolute;
	inset: 6px;
	border-radius: 50%;
	background: conic-gradient(from 0deg, transparent 0deg, rgba(0, 229, 255, 0.32) 48deg, transparent 96deg);
	animation: adv-radar-sweep 2.4s linear infinite;
}

.advantages-card--cyan:hover .advantages-viz--radar .advantages-viz__ring {
	animation-duration: 0.85s;
}

.advantages-card--cyan:hover .advantages-viz--radar .advantages-viz__sweep {
	animation-duration: 1.1s;
}

@keyframes adv-radar-core {
	0%,
	100% {
		transform: scale(1);
		opacity: 1;
	}
	50% {
		transform: scale(1.35);
		opacity: 0.75;
	}
}

@keyframes adv-radar-pulse {
	0% {
		transform: scale(1);
		opacity: 0.85;
	}
	100% {
		transform: scale(5.5);
		opacity: 0;
	}
}

@keyframes adv-radar-sweep {
	to {
		transform: rotate(360deg);
	}
}

/* ─── Card 02: Stable SLA line ─── */
.advantages-viz--continuity,
.advantages-viz--sla {
	width: 92px;
	height: 52px;
}

.advantages-viz--sla svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.advantages-viz__sla-grid {
	fill: none;
	stroke: rgba(245, 158, 11, 0.16);
	stroke-width: 0.6;
	animation: adv-sla-grid-pulse 3s ease-in-out infinite;
}

.advantages-viz__sla-line {
	fill: none;
	stroke: #f59e0b;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.55));
	stroke-dasharray: 120;
	stroke-dashoffset: 120;
	animation: adv-sla-line-draw 2.8s ease-in-out infinite;
}

.advantages-viz__sla-pulse {
	fill: #fef3c7;
	filter: drop-shadow(0 0 8px #f59e0b);
}

.advantages-viz__sla-dot-wrap {
	animation: adv-sla-travel 2s linear infinite;
}

.advantages-viz__sla-dot-wrap--ghost {
	animation: adv-sla-travel 2s linear 1s infinite;
	opacity: 0.45;
}

@keyframes adv-sla-grid-pulse {
	0%,
	100% {
		opacity: 0.5;
	}
	50% {
		opacity: 1;
	}
}

@keyframes adv-sla-line-draw {
	0%,
	100% {
		stroke-dashoffset: 120;
		opacity: 0.7;
	}
	20%,
	80% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

@keyframes adv-sla-travel {
	0% {
		transform: translateX(0);
		opacity: 0.5;
	}
	12% {
		opacity: 1;
	}
	88% {
		opacity: 1;
	}
	100% {
		transform: translateX(112px);
		opacity: 0.45;
	}
}

/* ─── Card 03: Tower waves ─── */
.advantages-viz--tower {
	width: 84px;
	height: 60px;
	opacity: 0.88;
}

.advantages-viz--tower.is-scroll-active {
	opacity: 1;
}

.advantages-viz--tower svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.advantages-viz__tower-mast,
.advantages-viz__tower-base {
	fill: rgba(168, 85, 247, 0.35);
	stroke: #a855f7;
	stroke-width: 1;
}

.advantages-viz__tower-tip {
	fill: #ddd6fe;
	filter: drop-shadow(0 0 6px #a855f7);
	animation: adv-tower-blink 2s ease-in-out infinite;
}

.advantages-viz__wave {
	fill: none;
	stroke: #c4b5fd;
	stroke-width: 1.6;
	stroke-linecap: round;
	opacity: 0.35;
}

.advantages-viz--tower .advantages-viz__wave--1 {
	animation: adv-wave-emit 2.2s ease-out infinite;
}

.advantages-viz--tower .advantages-viz__wave--2 {
	animation: adv-wave-emit 2.2s ease-out 0.45s infinite;
}

.advantages-viz--tower .advantages-viz__wave--3 {
	animation: adv-wave-emit-vertical 2.2s ease-out 0.9s infinite;
}

.advantages-viz__wave--1,
.advantages-viz__wave--2 {
	stroke-dasharray: 48;
	stroke-dashoffset: 48;
}

.advantages-viz__wave--3 {
	stroke-dasharray: 22;
	stroke-dashoffset: 22;
}

@keyframes adv-tower-blink {
	0%,
	100% {
		opacity: 0.65;
	}
	50% {
		opacity: 1;
	}
}

@keyframes adv-wave-emit {
	0% {
		opacity: 0.15;
		stroke-dashoffset: 48;
	}
	40% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		stroke-dashoffset: 0;
	}
}

@keyframes adv-wave-emit-vertical {
	0% {
		opacity: 0.15;
		stroke-dashoffset: 22;
	}
	40% {
		opacity: 0.95;
	}
	100% {
		opacity: 0;
		stroke-dashoffset: 0;
	}
}

/* ─── Card 04: Hub nodes ─── */
.advantages-viz--hub {
	width: 92px;
	height: 60px;
}

.advantages-viz--hub svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.advantages-viz__hub-core {
	fill: rgba(34, 211, 238, 0.25);
	stroke: #22d3ee;
	stroke-width: 1.6;
	filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.65));
	animation: adv-hub-core 2.4s ease-in-out infinite;
}

.advantages-viz__hub-node {
	fill: rgba(15, 23, 42, 0.95);
	stroke: #22d3ee;
	stroke-width: 1.3;
	animation: adv-hub-node 2.4s ease-in-out infinite;
}

.advantages-viz__hub-node--1 {
	animation-delay: 0s;
}

.advantages-viz__hub-node--2 {
	animation-delay: 0.3s;
}

.advantages-viz__hub-node--3 {
	animation-delay: 0.6s;
}

.advantages-viz__hub-node--4 {
	animation-delay: 0.9s;
}

.advantages-viz__hub-link {
	stroke: rgba(34, 211, 238, 0.5);
	stroke-width: 1.4;
	stroke-dasharray: 5 7;
	animation: adv-hub-flow 1.6s linear infinite;
}

.advantages-viz__hub-link--2 {
	animation-delay: 0.25s;
}

.advantages-viz__hub-link--3 {
	animation-delay: 0.5s;
}

.advantages-viz__hub-link--4 {
	animation-delay: 0.75s;
}

.advantages-card--teal:hover .advantages-viz__hub-link {
	stroke: rgba(34, 211, 238, 0.9);
	animation-duration: 0.9s;
}

@keyframes adv-hub-core {
	0%,
	100% {
		transform: scale(1);
		opacity: 0.85;
	}
	50% {
		transform: scale(1.12);
		opacity: 1;
	}
}

@keyframes adv-hub-node {
	0%,
	100% {
		opacity: 0.55;
	}
	50% {
		opacity: 1;
	}
}

@keyframes adv-hub-flow {
	to {
		stroke-dashoffset: -24;
	}
}

@media (prefers-reduced-motion: reduce) {
	.advantages-viz__ring,
	.advantages-viz__sweep,
	.advantages-viz__sla-dot-wrap,
	.advantages-viz__sla-line,
	.advantages-viz__wave,
	.advantages-viz__hub-link,
	.advantages-viz__hub-core,
	.advantages-viz__hub-node,
	.advantages-viz__tower-tip {
		animation: none !important;
	}

	.advantages-viz--tower .advantages-viz__wave {
		opacity: 0.65;
		stroke-dashoffset: 0;
	}
}