/* =============================================================================
   Homepage process: the scroll-tracked timeline (§6.1).

   One rail, one numbered node per step. Below md the rail runs down the
   inline-start edge with every card to its right; from md it runs down the
   centre and the cards alternate sides, with the step's large numeral filling
   the empty half opposite each card.

   process-timeline.js writes one variable on the rail, two on the section and
   three classes on the steps; nothing else moves.
     --progress   0..1, how far down the rail the reading line has reached
                  (on .process__rail: it changes every frame, and only the
                  fill and the dot inside the rail read it)
     --rail-top   first node's centre, so the rail starts and ends on a node
     --rail-h     first node's centre to the last node's, in px
     .is-seen     the card has come into view; it slides in once and stays
     .is-reached  the dot has reached this node; tracks both ways
     .is-current  the last node reached

   NOT SCROLL-JACKING, NOT PARALLAX (§8.14). The page scrolls at exactly the
   rate it would with this section removed; the rail only reports how far the
   visitor has read. Every animated property is a transform, an opacity or a
   colour (§8.17).

   NO ACCENT (§8.2). The accent belongs to the primary action, so the fill and
   dot are --brass (hairline and detail only) and a lit node is ink.

   WITHOUT THE SCRIPT the section reads as a finished timeline: the rail is
   full, every node is lit, no dot is drawn and no card is hidden. The hidden
   and travelling states all sit behind .is-timeline-ready, which only the
   script adds.

   main.css still carries the retired dial's .process rules; everything they
   set that this layout does not want is reset here, which loads after it.
   ========================================================================== */

.process--timeline {
	--rail-col: var(--s-9);
	--node: var(--s-9);
	--dot: var(--s-4);
	--tick-step: var(--s-3);
	--tick-step-mid: var(--s-5);
	--tick-step-major: var(--s-8);
	--tick-minor: var(--s-3);
	--tick-mid: var(--s-4);
	--tick-major: var(--s-5);
	--enter-x: 0;
	--enter-y: var(--s-6);

	padding-block: 0;
	background-color: var(--bg-alt);
	background-image: url('../images/process-placeholder.svg');
	background-position: center;
	background-size: cover;
	/* No rules of its own. A --line pair here sat against the dark rule of the
	   section on either side and read as a doubled, two-tone edge; the home
	   section boundary in main.css draws the one rule above, and the next
	   section draws the one below. */
}

.process--timeline .process__inner {
	padding-block: var(--section-y-compact);
}

.process--timeline .process__frame {
	padding: var(--s-5);
	border: var(--s-1) solid var(--mega-media-border);
	/* --r-stage (§8.5): a section-sized box that floats over the section's
	   background image and holds the step cards. It was --r-float (12px), the
	   same as those cards, so the outer corner did not read as the larger of
	   the two, and at this width hardly read as a curve. */
	border-radius: var(--r-stage);
	background: var(--bg);
}

/* ---- Lead ---- */

.process--timeline .process__lead {
	display: grid;
	gap: var(--s-4);
	padding-block-end: var(--s-7);
	margin-block-end: var(--s-8);
	border-block-end: 1px solid var(--line);
}

.process--timeline .process__eyebrow {
	margin: 0;
	font-size: var(--fs-micro);
	font-weight: var(--fw-ui);
	letter-spacing: var(--tracking-micro);
	text-transform: uppercase;
	color: var(--ink-500);
}

.process--timeline .process__heading,
.process--timeline .process__intro {
	margin: 0;
	max-inline-size: var(--w-prose);
}

.process--timeline .process__intro {
	color: var(--ink-700);
}

/* ---- Rail ---- */

.process--timeline .process__track {
	position: relative;
}

.process--timeline .process__rail {
	position: absolute;
	inset-block-start: var(--rail-top, 0);
	inset-inline-start: calc(var(--rail-col) / 2);
	block-size: var(--rail-h, 100%);
	inline-size: var(--s-1);
	margin-inline-start: calc(var(--s-1) / -2);
	background: var(--line);
	pointer-events: none;
}

/* The rail is a ruler: ticks off its inline-end edge on a quarter-inch scale, a
   long one every --tick-step-major and a mid one halfway, the way a tape
   measure is divided. It is the one place on the page the motif appears, on
   the section whose second step is the measure. Ticks are hairlines, so unread
   ones are --line and read ones are --brass (§8.2); the dot is the reading.

   The read ticks cannot ride on .process__rail-fill, whose scaleY would
   stretch them. They are a second copy clipped to the progress by two equal
   and opposite translates: the clipping box slides up off the rail and its
   content slides back down by the same amount, so the ticks never move and
   only transforms change (§8.17). */
.process--timeline .process__rail::before,
.process--timeline .process__rail-ticks {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 50%;
	inline-size: var(--tick-major);
}

.process--timeline .process__rail::before,
.process--timeline .process__rail-ticks::before {
	content: "";
	background-image:
		repeating-linear-gradient(to bottom, var(--tick-color) 0 var(--hairline), transparent var(--hairline) var(--tick-step-major)),
		repeating-linear-gradient(to bottom, var(--tick-color) 0 var(--hairline), transparent var(--hairline) var(--tick-step-mid)),
		repeating-linear-gradient(to bottom, var(--tick-color) 0 var(--hairline), transparent var(--hairline) var(--tick-step));
	background-repeat: no-repeat;
	background-size:
		var(--tick-major) 100%,
		var(--tick-mid) 100%,
		var(--tick-minor) 100%;
}

.process--timeline .process__rail::before {
	--tick-color: var(--line);
}

/* Both halves of the clip move on every scroll frame, like the fill and the
   dot below, so they get the same treatment: a layer each. Without one, each
   frame repainted the three repeating gradients down the whole rail. */
.process--timeline .process__rail-ticks {
	overflow: hidden;
	transform: translateY(calc((var(--progress, 1) - 1) * 100%));
	will-change: transform;
}

.process--timeline .process__rail-ticks::before {
	--tick-color: var(--brass);

	position: absolute;
	inset: 0;
	transform: translateY(calc((1 - var(--progress, 1)) * 100%));
	will-change: transform;
}

.process--timeline .process__rail-fill {
	position: absolute;
	inset: 0;
	background: var(--brass);
	transform: scaleY(var(--progress, 1));
	transform-origin: top;
	/* The fill and the dot move on every scroll frame while the section is in
	   view. Their own layers make that a compositor move with no repaint. Two
	   small layers for something that really is always moving; the cards
	   below, which move once, deliberately get none. */
	will-change: transform;
}

.process--timeline .process__rail-dot {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 50%;
	z-index: var(--z-raised);
	inline-size: var(--dot);
	block-size: var(--dot);
	margin-block-start: calc(var(--dot) / -2);
	margin-inline-start: calc(var(--dot) / -2);
	border-radius: var(--r-full);
	background: var(--brass);
	box-shadow: 0 0 0 var(--s-2) var(--bg), 0 0 0 calc(var(--s-2) + var(--hairline)) var(--brass);
	opacity: 0;
	transform: translateY(calc(var(--progress, 0) * var(--rail-h, 0px)));
	will-change: transform;
}

.process--timeline.is-timeline-ready .process__rail-dot {
	opacity: 1;
}

/* ---- Steps ---- */

.process--timeline .process__steps {
	display: grid;
	gap: var(--s-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Resets the dial's padding, start border and divider from main.css. */
.process--timeline .process__step,
.process--timeline .process__step:first-child,
.process--timeline .process__step + .process__step {
	display: grid;
	grid-template-columns: var(--rail-col) minmax(0, 1fr);
	column-gap: var(--s-5);
	align-items: start;
	padding: 0;
	border: 0;
}

.process--timeline .process__node {
	position: relative;
	z-index: var(--z-raised);
	grid-column: 1;
	grid-row: 1;
	justify-self: center;
	display: grid;
	place-items: center;
	inline-size: var(--node);
	block-size: var(--node);
	margin-block-start: var(--s-4);
	border: 1px solid var(--line);
	border-radius: var(--r-full);
	background: var(--bg);
	font-family: var(--font-display);
	font-size: var(--fs-small);
	font-weight: var(--fw-ui);
	font-variant-numeric: tabular-nums;
	color: var(--ink-500);
	transition: background-color var(--dur-slow) var(--ease), border-color var(--dur-slow) var(--ease), color var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease);
}

.process--timeline:not(.is-timeline-ready) .process__node,
.process--timeline .process__step.is-reached .process__node {
	border-color: var(--ink-900);
	background: var(--ink-900);
	color: var(--ink-on-dark);
}

.process--timeline .process__step.is-current .process__node {
	box-shadow: 0 0 0 var(--s-2) var(--bg), 0 0 0 calc(var(--s-2) + var(--hairline)) var(--brass);
}

.process--timeline .process__card {
	grid-column: 2;
	grid-row: 1;
	display: grid;
	align-content: start;
	gap: var(--s-3);
	min-inline-size: 0;
	padding: var(--card-pad);
	border: 1px solid var(--line);
	/* --r-panel, not --r-card (§8.5): each step card stands alone with open
	   space on every side, so it carries the larger curve the tightly packed
	   product cards cannot. */
	border-radius: var(--r-panel);
	background: var(--surface);
	transition: border-color var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease);
}

.process--timeline .process__step.is-current .process__card {
	border-color: var(--ink-500);
	box-shadow: var(--shadow-md);
}

.process--timeline .process__step-top {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	margin-block-end: var(--s-2);
}

.process--timeline .process__step-icon {
	display: grid;
	place-items: center;
	flex: none;
	inline-size: var(--s-9);
	block-size: var(--s-9);
	border: 1px solid var(--line);
	/* A step up with its card, and still well inside it: --r-control. */
	border-radius: var(--r-control);
	color: var(--brass);
}

.process--timeline .process__step-count {
	font-size: var(--fs-micro);
	font-weight: var(--fw-ui);
	letter-spacing: var(--tracking-micro);
	text-transform: uppercase;
	color: var(--ink-500);
}

.process--timeline .process__label,
.process--timeline .process__body,
.process--timeline .process__note {
	margin: 0;
}

.process--timeline .process__label {
	font-size: var(--fs-h3);
	color: var(--ink-900);
}

.process--timeline .process__body {
	max-inline-size: var(--w-prose);
	color: var(--ink-700);
}

.process--timeline .process__note {
	margin-block-start: var(--s-2);
	padding-block-start: var(--s-4);
	border-block-start: 1px solid var(--line);
	font-size: var(--fs-small);
	font-weight: var(--fw-ui);
	color: var(--ink-500);
}

/* The big numeral only has room once the rail is centred. */
.process--timeline .process__numeral {
	display: none;
}

/* ---- Scroll entrance ----
   Only once the script is running, and never under reduced motion. The card
   rises in below md (a sideways start would push it past the viewport edge
   on a phone) and comes in from the side it sits on from md; either way it
   stays once seen. The node state above is what follows the scroll in both
   directions. */

@media (prefers-reduced-motion: no-preference) {
	.process--timeline.is-timeline-ready .process__card,
	.process--timeline.is-timeline-ready .process__numeral {
		opacity: 0;
		/* 2D, and `none` once seen: a translate3d() pose is a compositor layer
		   for as long as it applies, which for the landed pose was forever. */
		transform: translate(var(--enter-x), var(--enter-y));
		/* `color` is the numeral's: this rule out-specifies the one that gives
		   it a colour transition, so without it here the numeral snapped to
		   ink while the node and the card beside it eased. */
		transition: opacity var(--motion-base) var(--motion-ease), transform var(--motion-slow) var(--motion-soft-ease), border-color var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease), color var(--dur-slow) var(--ease);
	}

	.process--timeline.is-timeline-ready .process__step.is-seen .process__card,
	.process--timeline.is-timeline-ready .process__step.is-seen .process__numeral {
		opacity: 1;
		transform: none;
	}

	/* The numeral arrives a beat after its card. Only the entrance waits: the
	   state colours answer the dot at once, in step with the node. */
	.process--timeline.is-timeline-ready .process__step.is-seen .process__numeral {
		transition-delay: var(--motion-fast), var(--motion-fast), 0s, 0s, 0s;
	}
}

/* ---- md: the rail moves to the centre and the steps alternate ---- */

@media (min-width: 768px) {
	.process--timeline {
		--rail-col: var(--s-12);
		--enter-x: var(--s-6);
		--enter-y: 0;
	}

	.process--timeline .process__inner {
		padding-block: var(--section-y-compact-md);
	}

	.process--timeline .process__frame {
		padding: var(--s-8);
	}

	.process--timeline .process__lead {
		justify-items: center;
		text-align: center;
		padding-block-end: var(--s-8);
		margin-block-end: var(--s-10);
	}

	/* The three step columns are symmetric, so the middle one's centre is
	   the track's centre. */
	.process--timeline .process__rail {
		inset-inline-start: 50%;
	}

	.process--timeline .process__steps {
		gap: var(--s-10);
	}

	.process--timeline .process__step,
	.process--timeline .process__step:first-child,
	.process--timeline .process__step + .process__step {
		grid-template-columns: minmax(0, 1fr) var(--rail-col) minmax(0, 1fr);
		column-gap: 0;
	}

	.process--timeline .process__node {
		grid-column: 2;
	}

	.process--timeline .process__card {
		grid-column: 1;
	}

	.process--timeline .process__numeral {
		display: block;
		grid-column: 3;
		grid-row: 1;
		justify-self: start;
		align-self: center;
		font-family: var(--font-display);
		font-size: var(--fs-dial);
		font-weight: var(--fw-display);
		font-variant-numeric: tabular-nums;
		line-height: 1;
		color: var(--line);
		transition: color var(--dur-slow) var(--ease);
	}

	.process--timeline .process__step.is-current .process__numeral {
		color: var(--ink-900);
	}

	.process--timeline .process__step:nth-child(odd) {
		--enter-x: calc(var(--s-6) * -1);
	}

	.process--timeline .process__step:nth-child(even) .process__card {
		grid-column: 3;
	}

	.process--timeline .process__step:nth-child(even) .process__numeral {
		grid-column: 1;
		justify-self: end;
	}
}

@media (min-width: 1024px) {
	.process--timeline .process__inner {
		padding-block: var(--section-y-compact-lg);
	}

	.process--timeline .process__frame {
		padding: var(--s-10);
	}

	.process--timeline .process__card {
		padding: var(--s-6);
	}
}

@media (min-width: 1280px) {
	.process--timeline .process__inner {
		padding-block: var(--section-y-compact-xl);
	}

	.process--timeline .process__frame {
		padding-inline: var(--s-12);
	}
}