/* Services hub drawings (S15 ServiceCard art): one mechanism per service, decorative, complete under reduced motion. */

.art {
	inline-size: auto;
	max-inline-size: 94%;
	block-size: calc(clamp(220px, 22vw, 310px) - 28px);
	overflow: visible;
}

.scard.wide .art {
	block-size: clamp(212px, 22vw, 292px);
}

.art text {
	font: 500 11px var(--font-mono);
	letter-spacing: 0.1em;
	fill: var(--white);
	text-anchor: middle;
	text-transform: uppercase;
}

.art .dim {
	fill: var(--gray-300);
}

@keyframes svc-in {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
}

@keyframes svc-draw {
	from {
		stroke-dashoffset: 1;
	}
}

[data-r]:not(.in) .art * {
	animation-play-state: paused !important;
}

/* software: the system graph builds itself */
.sg .ed {
	fill: none;
	stroke: var(--pt);
	stroke-width: 1.6;
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
	opacity: 0.8;
	animation: svc-draw 1.4s var(--ease-io) both;
	animation-delay: calc(var(--k) * 180ms + 500ms);
}

.sg .nd {
	animation: svc-in 0.8s var(--ease) both;
	animation-delay: calc(var(--k) * 140ms + 150ms);
}

.sg .nd rect {
	fill: var(--ink-800);
	stroke: var(--pt);
	stroke-width: 1.4;
	transition: fill var(--d-fast), stroke var(--d-fast);
}

.sg .nd.core rect {
	stroke: var(--gold-300);
}

.scard:hover .sg .nd rect {
	fill: var(--pa);
}

.sg .pk {
	fill: var(--gold-300);
}

/* marketing: reach ripples light up the audience dots */
.mkg .ax {
	fill: none;
	stroke: var(--ln-s);
}

.mkg .gl2 {
	fill: none;
	stroke: var(--pt);
	stroke-width: 1.8;
	stroke-dasharray: 1;
	opacity: 0.7;
	animation: svc-draw 2.4s var(--ease-io) both 0.4s;
}

.mkg .rp {
	fill: none;
	stroke: var(--pt);
	stroke-width: 1.4;
	transform-box: fill-box;
	transform-origin: center;
	animation: svc-rip 4s linear infinite both;
}

@keyframes svc-rip {
	from {
		transform: scale(0.25);
		opacity: 0.9;
	}

	to {
		transform: scale(9.5);
		opacity: 0;
	}
}

.mkg .cu {
	fill: var(--gray-300);
	opacity: 0.35;
	transform-box: fill-box;
	transform-origin: center;
	animation: svc-lit 1.333s linear infinite;
	animation-delay: calc(var(--t) * 1s);
}

.mkg .cu.g {
	fill: var(--gold-300);
}

@keyframes svc-lit {
	0% {
		opacity: 1;
		transform: scale(2.4);
		fill: var(--pt);
	}

	35% {
		opacity: 0.9;
		transform: scale(1.3);
	}

	100% {
		opacity: 0.35;
		transform: scale(1);
	}
}

.mkg .src {
	fill: var(--pa);
	stroke: var(--white);
	stroke-width: 1.5;
}

.scard:hover .mkg .rp {
	animation-duration: 2.2s;
}

.scard:hover .mkg .cu {
	animation-duration: 0.74s;
}

/* security: shield, scan band, stamping check */
.scg .sh {
	fill: color-mix(in srgb, var(--pa) 10%, transparent);
	stroke: var(--pt);
	stroke-width: 2.2;
}

.scg .s0,
.scg .s1 {
	stop-color: var(--pt);
}

.scg .s0 {
	stop-opacity: 0;
}

.scg .s1 {
	stop-opacity: 0.4;
}

.scg .rg {
	fill: none;
	stroke: var(--ln-s);
	stroke-dasharray: 3 7;
	transform-box: fill-box;
	transform-origin: center;
	animation: svc-spin 40s linear infinite;
}

.scg .rg.b {
	animation-direction: reverse;
	animation-duration: 60s;
}

@keyframes svc-spin {
	to {
		transform: rotate(360deg);
	}
}

.scg .scan {
	animation: svc-scan 3.6s var(--ease-io) infinite;
}

@keyframes svc-scan {
	0% {
		transform: translateY(-40px);
	}

	60%,
	100% {
		transform: translateY(260px);
	}
}

.scg .sline {
	stroke: var(--pt);
	stroke-width: 1.6;
}

.scg .ck {
	fill: none;
	stroke: var(--gold-300);
	stroke-width: 8;
	stroke-linecap: square;
	stroke-dasharray: 1;
	animation: svc-chk 3.6s var(--ease-io) infinite;
}

@keyframes svc-chk {
	0%,
	50% {
		stroke-dashoffset: 1;
	}

	72%,
	100% {
		stroke-dashoffset: 0;
	}
}

.scg .tk {
	stroke: var(--ln-s);
}

.scard:hover .scg .scan {
	animation-duration: 1.8s;
}

/* reduced motion: drawings complete, no packets, ripples, scan or spin */
.rm .art *,
.rm .art {
	animation: none !important;
}

.rm .pk,
.rm .rp,
.rm .scan {
	display: none;
}

.rm .mkg .cu {
	opacity: 0.6;
}