/* Homepage hero illustration: flowing data streams (§5.2).
   Everything here is drawn fresh in SVG/CSS — see inc/hero-illustration-streams.php
   for why (no source image, so nothing to misalign when animated). */

.hero-streams {
	position: absolute;
	inset: 0;
}

.hero-streams__glow {
	position: absolute;
	inset: 10%;
	border-radius: 50%;
	background: radial-gradient(circle, var(--cyan-tint) 0%, rgba(224, 244, 253, 0) 70%);
	filter: blur(2px);
}

.hero-streams__lines {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.hero-streams__halo {
	fill: none;
	stroke: var(--line);
	stroke-width: 0.5;
	stroke-dasharray: 1 3;
	transform-box: fill-box;
	transform-origin: center;
}

.hero-streams__path {
	fill: none;
	stroke-linecap: round;
}

.hero-streams__path--tint {
	stroke: var(--cyan-tint);
	stroke-width: 3.5;
}

.hero-streams__path--navy {
	stroke: var(--navy);
	stroke-width: 1.6;
	stroke-dasharray: 0.5 3.5;
	opacity: 0.55;
}

.hero-streams__path--cyan {
	stroke: var(--cyan);
	stroke-width: 2.2;
	stroke-dasharray: 0.5 4;
}

.hero-streams__packet {
	position: absolute;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--cyan);
	box-shadow: 0 0 8px 2px rgba(0, 159, 226, 0.5);
	top: 78%;
	left: 0%;
}

.hero-streams__packet--b {
	background: var(--navy);
	box-shadow: 0 0 6px 1px rgba(1, 36, 126, 0.4);
	width: 6px;
	height: 6px;
	top: 93%;
	left: 0%;
}

.hero-streams__card {
	position: absolute;
	background: var(--paper);
	border-radius: 14px;
	box-shadow: 0 16px 32px rgba(1, 36, 126, 0.12);
	padding: 16px 18px;
}

.hero-streams__card--chip {
	top: 4%;
	left: 56%;
	width: 40%;
}

.hero-streams__card-label {
	margin: 0 0 12px;
	font-family: var(--font-heading);
	font-weight: 500;
	font-size: 0.9375rem;
	color: var(--navy);
}

.hero-streams__bars {
	display: flex;
	align-items: flex-end;
	gap: 8%;
	height: 44px;
}

.hero-streams__bar {
	flex: 1;
	height: var(--bar-h, 40%);
	border-radius: 2px 2px 0 0;
	transform-origin: 50% 100%;
}

.hero-streams__bar--navy {
	background: var(--navy);
}

.hero-streams__bar--cyan {
	background: var(--cyan);
}

.hero-streams__card--status {
	display: flex;
	align-items: center;
	gap: 10px;
	top: 66%;
	left: 4%;
	width: auto;
	padding: 10px 16px 10px 10px;
}

.hero-streams__status-icon {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	color: var(--cyan);
}

.hero-streams__status-text {
	display: block;
	font-size: 0.8125rem;
	color: var(--slate);
	line-height: 1.4;
}

.hero-streams__status-text strong {
	display: block;
	font-family: var(--font-heading);
	font-weight: 500;
	font-size: 0.9375rem;
	color: var(--ink);
}

/* ---- Idle motion (§5.2) — gated on prefers-reduced-motion, same as every
   other hero illustration on the site. ---- */
@media (prefers-reduced-motion: no-preference) {
	.hero-streams__halo {
		animation: unlock-streams-spin 140s linear infinite;
	}

	.hero-streams__path--cyan {
		animation: unlock-streams-flow 3.5s linear infinite;
	}

	.hero-streams__path--navy {
		animation: unlock-streams-flow 4.5s linear infinite reverse;
	}

	.hero-streams__packet--a {
		animation: unlock-packet-a 6s ease-in-out infinite;
	}

	.hero-streams__packet--b {
		animation: unlock-packet-b 7.5s ease-in-out infinite;
	}

	.hero-streams__card--chip {
		animation: unlock-chip-float 3s ease-in-out infinite alternate;
	}

	.hero-streams__card--status {
		animation: unlock-chip-float 3.6s ease-in-out infinite alternate-reverse;
	}

	.hero-streams__bar {
		animation: unlock-bar-grow 2.4s ease-in-out infinite alternate;
	}
}

@keyframes unlock-streams-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

@keyframes unlock-streams-flow {
	from { stroke-dashoffset: 0; }
	to   { stroke-dashoffset: -20; }
}

/* Waypoints eyeballed off the visual curve of .hero-streams__path--cyan —
   percentage-based (not offset-path, which uses fixed px and won't track a
   responsive container's actual size). */
@keyframes unlock-packet-a {
	0%   { top: 78%; left: 0%; opacity: 0; }
	10%  { opacity: 1; }
	50%  { top: 50%; left: 47%; }
	90%  { opacity: 1; }
	100% { top: 17%; left: 96%; opacity: 0; }
}

@keyframes unlock-packet-b {
	0%   { top: 93%; left: 0%; opacity: 0; }
	10%  { opacity: 1; }
	50%  { top: 60%; left: 50%; }
	90%  { opacity: 1; }
	100% { top: 30%; left: 98%; opacity: 0; }
}