/*
 * GPIPL spectral line band (Phase 3, conditional). The signature element.
 *
 * Twelve emission lines, each labelled with a parameter GPIPL systems monitor.
 * Deliberately NOT data: every line has the same height and spacing, and there
 * are no values, units or axis numbers, so nothing reads as a measurement.
 *
 * Motion (once, when first visible): lines draw upward left to right, labels
 * settle, then a single brightness pass sweeps across like a scan. After that it
 * is still. JS "arms" the band only when it can also start it (main.js
 * spectralBand module), so without JS, on error, or with reduced motion the
 * band is simply fully drawn.
 *
 * Markup: gpipl_spectral_band() / template-parts/components/spectral-band.php
 */
@layer components {
	.spectral-band {
		--band-height: clamp(4.5rem, 3.4rem + 5vw, 7.5rem);
		--band-cols: 6;
		--band-tick: var(--color-line-strong);
		margin: 0;
		color: var(--color-text);
	}
	@media (min-width: 48em) {
		.spectral-band { --band-cols: 12; }
	}

	.spectral-band__list {
		display: grid;
		grid-template-columns: repeat(var(--band-cols), minmax(0, 1fr));
		row-gap: var(--space-l);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/* Line and ruler share the first row, so every line stands exactly on the baseline. */
	.spectral-band__item {
		display: grid;
		justify-items: center;
		grid-template-rows: var(--band-height) auto;
	}
	.spectral-band__line,
	.spectral-band__rule { grid-row: 1; grid-column: 1; }
	.spectral-band__label { grid-row: 2; }

	/* The emission line: same height for every parameter, by design. */
	.spectral-band__line {
		position: relative;
		z-index: 1; /* above the ruler */
		align-self: end;
		width: 2px;
		height: 100%;
		background: var(--color-band-line);
		transform-origin: 50% 100%;
	}

	/* Baseline with unnumbered graticule ticks; continuous across items (no column gap). */
	.spectral-band__rule {
		align-self: end;
		justify-self: stretch;
		height: 7px;
		background:
			linear-gradient(var(--band-tick), var(--band-tick)) bottom / 100% 1px no-repeat,
			repeating-linear-gradient(to right, var(--band-tick) 0 1px, transparent 1px 25%) bottom / 100% 5px no-repeat;
		background-position: bottom, left 12.5% bottom;
	}

	.spectral-band__label {
		margin-top: var(--space-xs);
		font-size: var(--step--1);
		font-weight: var(--wght-medium);
		font-stretch: var(--wdth-ui);
		line-height: 1.2;
		white-space: nowrap;
		color: var(--color-text);
	}

	.spectral-band__caption {
		margin-top: var(--space-m);
		font-size: var(--step--1);
		color: var(--color-text-muted);
	}

	/* ------------------------------------------------------------ Variants */
	.spectral-band--hero { --band-height: clamp(6rem, 4rem + 9vw, 12rem); }
	@media (min-width: 64em) {
		.spectral-band--hero .spectral-band__label { font-size: var(--step-0); }
	}

	/* Compact: a thin divider version. Labels stay in the markup for assistive tech. */
	.spectral-band--compact { --band-height: 2.5rem; }
	.spectral-band--compact .spectral-band__label {
		position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
	}

	/* ------------------------------------------------------------ Motion
	   .is-armed = hidden start state (set by JS only when it will animate).
	   .is-active = run the sequence once. */
	.spectral-band.is-armed:not(.is-active) .spectral-band__line { transform: scaleY(0); }
	.spectral-band.is-armed:not(.is-active) .spectral-band__label { opacity: 0; }

	.spectral-band.is-active .spectral-band__line {
		animation:
			gpipl-band-draw var(--dur-draw) var(--ease-out) calc(var(--i, 0) * var(--stagger)) both,
			gpipl-band-scan 520ms var(--ease-in-out) calc(var(--dur-draw) + 600ms + var(--i, 0) * 70ms) 1;
	}
	.spectral-band.is-active .spectral-band__label {
		animation: gpipl-band-label var(--dur-slow) var(--ease-out) calc(280ms + var(--i, 0) * var(--stagger)) both;
	}

	@keyframes gpipl-band-draw {
		from { transform: scaleY(0); }
		to { transform: scaleY(1); }
	}
	@keyframes gpipl-band-scan {
		0%, 100% { opacity: 1; }
		45% { opacity: 0.28; }
	}
	@keyframes gpipl-band-label {
		from { opacity: 0; transform: translateY(4px); }
		to { opacity: 1; transform: none; }
	}

	@media (prefers-reduced-motion: reduce) {
		.spectral-band .spectral-band__line,
		.spectral-band .spectral-band__label { animation: none !important; transform: none !important; opacity: 1 !important; }
	}

	@media (forced-colors: active) {
		.spectral-band__line { background: CanvasText; }
	}
}