/**
 * AWR hero visual (assets/js/hero-system.js).
 *
 * Hierarchy: inactive structure 0.2-0.3, resting labels and nodes 0.55-0.7,
 * active paths 0.85-1, active labels 0.9-1, the AWR core at full strength.
 * Blue (#0178FF) marks only what is active. Animated properties (opacity,
 * transform, stroke-dashoffset) are driven by the Web Animations API; this
 * file holds the static styling and placement.
 */

.awr-heroviz {
	position: absolute;
	display: block;
	overflow: visible;
	pointer-events: none;
}

.awr-heroviz .s-line,
.awr-heroviz .s-flow,
.awr-heroviz .s-ring,
.awr-heroviz .s-orbit,
.awr-heroviz .s-core,
.awr-heroviz .s-core-active,
.awr-heroviz .s-pulse,
.awr-heroviz .s-on-ring {
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Inactive structure */
.awr-heroviz .s-line {
	stroke: var(--awr-light-gray);
	stroke-width: var(--sw);
}

.awr-heroviz .s-hair {
	stroke-width: calc(var(--sw) * 0.7);
	opacity: 0.6;
}

/* Paths used only to measure signal routes. */
.awr-heroviz .s-guide {
	fill: none;
	stroke: none;
}

/* Active information flow */
.awr-heroviz .s-flow {
	stroke: var(--awr-blue);
	stroke-width: calc(var(--sw) * 1.4);
}

.awr-heroviz .s-trajectory {
	stroke-width: calc(var(--sw) * 1.8);
}

.awr-heroviz .s-signal {
	fill: var(--awr-blue);
}

.awr-heroviz .s-signal--muted {
	fill: var(--awr-light-gray);
	fill-opacity: 0.55;
}

.awr-heroviz .s-checkpoint {
	fill: var(--awr-blue);
}

/* Nodes at rest */
.awr-heroviz .s-node {
	fill: var(--awr-slate);
	stroke: var(--awr-light-gray);
	stroke-width: calc(var(--sw) * 1.1);
	stroke-opacity: 0.66;
}

.awr-heroviz .s-ring {
	stroke: var(--awr-light-gray);
	stroke-width: calc(var(--sw) * 0.7);
	opacity: 0.22;
}

.awr-heroviz .s-dot {
	fill: var(--awr-light-gray);
}

/* Nodes when active */
.awr-heroviz .s-on-dot {
	fill: var(--awr-blue);
}

.awr-heroviz .s-on-ring {
	stroke: var(--awr-blue);
	stroke-width: var(--sw);
	stroke-opacity: 0.5;
}

/* Performance: the strongest blue, the final result of the system. */
.awr-heroviz .s-on--final .s-on-ring {
	stroke-width: calc(var(--sw) * 1.3);
	stroke-opacity: 0.85;
}

/* AWR Intelligence: the focal point */
.awr-heroviz .s-glow-stop {
	stop-color: var(--awr-blue);
}

.awr-heroviz .s-orbit {
	stroke: var(--awr-light-gray);
	stroke-width: calc(var(--sw) * 0.85);
	stroke-dasharray: 2 6;
	stroke-opacity: 0.3;
}

.awr-heroviz .s-orbit--on {
	stroke: var(--awr-blue);
	stroke-opacity: 0.6;
}

.awr-heroviz .s-core {
	fill: color-mix(in srgb, var(--awr-slate) 80%, #000);
	stroke: var(--awr-light-gray);
	stroke-width: calc(var(--sw) * 1.2);
	stroke-opacity: 0.5;
}

.awr-heroviz .s-core-active {
	stroke: var(--awr-blue);
	stroke-width: calc(var(--sw) * 2);
}

.awr-heroviz .s-pulse {
	stroke: var(--awr-blue);
	stroke-width: calc(var(--sw) * 1.2);
}

.awr-heroviz .s-core-dot {
	fill: var(--awr-blue);
}

.awr-heroviz .s-mark-w,
.awr-heroviz .s-mark-w * {
	fill: var(--awr-blue);
}

.awr-heroviz .s-mark-ar,
.awr-heroviz .s-mark-ar * {
	fill: var(--awr-white);
}

/* Labels */
.awr-heroviz .s-label {
	fill: var(--awr-light-gray);
	font-family: inherit;
	font-weight: 500;
	letter-spacing: 0.14em;
	/* A halo in the hero colour knocks out any line passing under a label. */
	paint-order: stroke;
	stroke: var(--awr-slate);
	stroke-width: calc(var(--sw) * 3.5);
	stroke-linejoin: round;
}

.awr-heroviz .s-label--core,
.awr-heroviz .s-label--final {
	fill: var(--awr-white);
	font-weight: 600;
}

/* Scale/pulse around each element's own centre. */
.awr-heroviz circle,
.awr-heroviz .s-mark {
	transform-box: fill-box;
	transform-origin: center;
}

/* Signals move in SVG user units. */
.awr-heroviz .s-signal {
	transform-box: view-box;
	transform-origin: 0 0;
}

/* Below 1024px: the compact system sits under the buttons (hero-system.js
   sets its position). Its space is reserved here, not by JS, so nothing
   shifts when it appears. Only applies when JS runs (the <head> script always
   sets an awr-intro--* class). */
/* Same boundary as the script's (min-width: 1024px), with no gap at fractional
   widths; 1023.98px rather than range syntax so pre-16.4 Safari applies it. */
@media (max-width: 1023.98px) {

	:root {
		--awr-heroviz-w: min(calc(100vw - 48px), 400px);
	}

	html:is(.awr-intro--full, .awr-intro--short, .awr-intro--none) .awr-hero {
		padding-bottom: calc(var(--awr-heroviz-w) * 0.9412 + 56px); /* compact viewBox is 340 x 320 */
	}

	/* Fallback size; hero-system.js also sets it. */
	.awr-heroviz--below {
		width: var(--awr-heroviz-w);
		height: auto;
	}
}