/**
 * Scrolling Statements
 *
 * The statements pin while the reader scrolls past them, each one crossfading over the last. The
 * gradient is the module's own rather than the global wash: the wash's ray ramp is bottom-anchored
 * and this one runs the other way, out of --ray at the top to nothing at the bottom.
 *
 * **The flat stack is the default and the sticky machinery is what no-preference adds.** Built
 * the other way round, statements 2 and 3 would sit at opacity 0 forever under `reduce` —
 * JazzyParallax registers nothing there, so --jazzy-progress is never published and every
 * consumer falls back to 0. That is unreachable content, not a missing animation.
 */

.module.manifesto {
	background: linear-gradient(180deg, var(--ray) 0%, rgb(from var(--ray) r g b / 0) 100%);
	padding-block: var(--module-spacing-xlarge);
}

.module.manifesto .beats {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
}

.module.manifesto .beats > li + li {
	margin-top: var(--module-spacing-xlarge);
}

.module.manifesto .beats :is(h1, h2, h3, h4, h5, h6) {
	margin: 0;
}

/* At every width. It was held above tablet on the assumption the pin was a desktop idea, but the
   statements are the module — stacked, they are three headings in a row with nothing to say why.
   Safe on touch: the parallax library only zeroes its offset on a coarse pointer, and the one
   thing that stops it publishing progress is `reduce`, which the query below still excludes.

   And not on a screen shorter than a statement: pinned, the stage is the screen, and at 400%
   zoom a laptop is 225px tall against 400px of heading — the first and last lines sat past its
   edges with no way to scroll to them. Below 500px it stays the stack (WCAG 1.4.10). */
@media (prefers-reduced-motion: no-preference) and (min-height: 501px) {

	.module.manifesto .track {
		height: calc((var(--beats, 3) + 1) * 100svh);
	}

	/* `dvh`, not `svh`: the stage is what the beat centres in, and on a phone the small viewport is
	   the screen with the browser's own bars showing. Sized to that, the stage is shorter than what
	   the reader is actually looking at once those bars roll away, and every beat sits above the
	   middle of it. The track keeps `svh` — that is scroll length, and it should not change as the
	   bars come and go. */
	.module.manifesto .stage {
		align-items: center;
		display: flex;
		height: 100dvh;
		position: sticky;
		top: 0;
	}

	.module.manifesto .beats {
		--fade: 6;
		display: grid;
	}

	.module.manifesto .beats > li {
		--end: calc(var(--handover, 9) + 1 / var(--fade) / var(--beats, 3));
		grid-area: 1 / 1;
		opacity: clamp(0, min(
			calc((var(--jazzy-progress, 0) - var(--start, 0)) * var(--beats, 3) * var(--fade)),
			calc((var(--end) - var(--jazzy-progress, 0)) * var(--beats, 3) * var(--fade))
		), 1);
	}

	.module.manifesto .beats > li + li {
		margin-top: 0;
	}

	.module.manifesto .beats > .beat-1 { --start: -1;                        --handover: calc(1 / var(--beats, 3)); }
	.module.manifesto .beats > .beat-2 { --start: calc(1 / var(--beats, 3)); --handover: calc(2 / var(--beats, 3)); }
	.module.manifesto .beats > .beat-3 { --start: calc(2 / var(--beats, 3)); --handover: calc(3 / var(--beats, 3)); }
	.module.manifesto .beats > .beat-4 { --start: calc(3 / var(--beats, 3)); --handover: calc(4 / var(--beats, 3)); }
	.module.manifesto .beats > .beat-5 { --start: calc(4 / var(--beats, 3)); --handover: calc(5 / var(--beats, 3)); }

	.module.manifesto .beats > li:last-child {
		--end: 9;
	}

	.module.manifesto:has(.beats > li:nth-child(1):last-child) { --beats: 1; }
	.module.manifesto:has(.beats > li:nth-child(2):last-child) { --beats: 2; }
	.module.manifesto:has(.beats > li:nth-child(4):last-child) { --beats: 4; }
	.module.manifesto:has(.beats > li:nth-child(5):last-child) { --beats: 5; }

}