/* ==========================================================================
   Prestige Detailing — process steps (pd-process)
   Figma: 13:3203 (steps + connector line, 580 wide @ 1728) · 13:3205 (one step, fully visible).
   Rendered inside #wrap_all, so every rule is paired: ".pd-proc .x" + "#top #wrap_all .pd-proc .x".
   Self-contained: carries its own copy of the shared tokens and the .pd-nav-t cap trim.
   No !important, no margin/padding shorthands.
   ========================================================================== */

@property --pd-fb       { syntax: "<number>"; inherits: true;  initial-value: 0; }
@property --pd-nav-tt   { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --pd-nav-tb   { syntax: "<length>"; inherits: false; initial-value: 0px; }

/* ---------- Tokens ---------- */
.pd-proc {
	/* Shared site tokens — same values as pd-main-nav */
	--pd-nav-font: "Google Sans Flex", "Google Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--pd-cap: 0.71875;
	--pd-asc: 0.966;
	--pd-desc: 0.286;

	--pd-proc-ink: 255, 255, 255;
	--pd-proc-red: #d60c0c;
	--pd-proc-dark: #161414;
	--pd-proc-dim: 0.4;                  /* steps not reached yet (Figma 03 / 04) */

	--pd-proc-row-gap: 64px;             /* 180 step pitch − 116 card */
	--pd-proc-gap: 28px;                 /* number box → card */
	--pd-proc-box: 72px;
	--pd-proc-num-fs: 32px;
	--pd-proc-num-ls: -0.03em;           /* -0.96px @ 32 */

	--pd-proc-card-h: 116px;
	--pd-proc-pad-t: 32px;
	--pd-proc-pad-x: 40px;
	--pd-proc-pad-b: 32px;
	--pd-proc-text-fs: 22px;
	--pd-proc-text-lh: 32px;
	--pd-proc-arm: 8px;                  /* corner bracket arm — same as pd-stat / pd-button */
	--pd-proc-bar: 2px;
	--pd-proc-line: 2px;                 /* connector box → next box (Figma 13:3277–3281) */
	--pd-proc-line-dim: 0.2;             /* the unfilled track: white at 20% */

	/* Motion */
	--pd-proc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--pd-proc-fade: 0.6s;                /* dim → lit */
	--pd-proc-anim: 0.7s;                /* number roll, text rise */
	--pd-proc-roll: 48px;                /* number travels fully out of the 72px box */
	--pd-proc-rise: 16px;

	/* Margins: inline --pd-proc-mt / --pd-proc-mb from the panel; the ramp only writes -now */
	--pd-proc-mt-now: var(--pd-proc-mt, 0px);
}

@media (max-width: 1199px) {
	.pd-proc.pd-proc--scale { --pd-proc-mt-now: calc(var(--pd-proc-mt, 0px) * 0.75); }
}
@media (max-width: 899px) {
	.pd-proc.pd-proc--scale { --pd-proc-mt-now: calc(var(--pd-proc-mt, 0px) * 0.6); }
}

/* No phone frame in Figma — judgement: a smaller box, tighter card, same rhythm. */
@media (max-width: 767px) {
	.pd-proc {
		--pd-proc-row-gap: 40px;
		--pd-proc-gap: 16px;
		--pd-proc-box: 56px;
		--pd-proc-num-fs: 26px;
		--pd-proc-card-h: 56px;
		--pd-proc-pad-t: 24px;
		--pd-proc-pad-x: 24px;
		--pd-proc-pad-b: 24px;
		--pd-proc-text-fs: 18px;
		--pd-proc-text-lh: 26px;
		--pd-proc-roll: 40px;
	}
}

/* ---------- Cap trim (text-box) with a metric fallback — same as pd-main-nav ---------- */
.pd-proc .pd-nav-t,
#top #wrap_all .pd-proc .pd-nav-t {
	display: block;
	--pd-nav-tt: calc(var(--pd-fb) * ((var(--lh) - (var(--pd-asc) + var(--pd-desc)) * var(--fs)) / 2 + (var(--pd-asc) - var(--pd-cap)) * var(--fs)));
	--pd-nav-tb: calc(var(--pd-fb) * ((var(--lh) - (var(--pd-asc) + var(--pd-desc)) * var(--fs)) / 2 + var(--pd-desc) * var(--fs)));
	font-size: var(--fs);
	line-height: var(--lh);
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	text-box: trim-both cap alphabetic;
	margin-top: calc(-1 * var(--pd-nav-tt));
	margin-bottom: calc(-1 * var(--pd-nav-tb));
}

@supports not ((text-box: trim-both cap alphabetic) or (text-box-trim: trim-both)) {
	.pd-proc { --pd-fb: 1; }
}

/* ---------- Root + list ---------- */
.pd-proc,
#top #wrap_all .pd-proc {
	box-sizing: border-box;
	width: 100%;
	margin-top: var(--pd-proc-mt-f, var(--pd-proc-mt-now));
	margin-bottom: var(--pd-proc-mb, 0px);
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	font-family: var(--pd-nav-font);
	font-style: normal;
	text-align: left;
	-webkit-font-smoothing: antialiased;
}

.pd-proc .pd-proc__list,
#top #wrap_all .pd-proc .pd-proc__list {
	display: flex;
	flex-direction: column;
	row-gap: var(--pd-proc-row-gap);
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	list-style: none;
}

/* ---------- Step: number box + card ---------- */
.pd-proc .pd-proc__step,
#top #wrap_all .pd-proc .pd-proc__step {
	display: flex;
	align-items: flex-start;
	column-gap: var(--pd-proc-gap);
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	list-style: none;
	position: relative;                  /* the connector hangs off the step */
}

.pd-proc .pd-proc__step::marker,
#top #wrap_all .pd-proc .pd-proc__step::marker {
	content: none;
}

.pd-proc .pd-proc__num,
#top #wrap_all .pd-proc .pd-proc__num {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	box-sizing: border-box;
	width: var(--pd-proc-box);
	height: var(--pd-proc-box);
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	overflow: hidden;                    /* the roll travels out of the box; the glyphs sit well inside it */
	background-color: var(--pd-proc-red);
	opacity: 1;
	transition:
		background-color var(--pd-proc-fade) var(--pd-proc-ease) var(--pd-proc-delay, 0s),
		opacity var(--pd-proc-fade) var(--pd-proc-ease) var(--pd-proc-delay, 0s);
}

.pd-proc .pd-proc__n,
#top #wrap_all .pd-proc .pd-proc__n {
	--fs: var(--pd-proc-num-fs);
	--lh: var(--pd-proc-num-fs);
	color: rgb(var(--pd-proc-ink));
	font-family: var(--pd-nav-font);
	font-weight: 400;
	letter-spacing: var(--pd-proc-num-ls);
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
}

.pd-proc .pd-proc__card,
#top #wrap_all .pd-proc .pd-proc__card {
	flex: 1 1 0;
	min-width: 0;
	box-sizing: border-box;
	min-height: var(--pd-proc-card-h);
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: var(--pd-proc-pad-t);
	padding-bottom: var(--pd-proc-pad-b);
	padding-left: var(--pd-proc-pad-x);
	padding-right: var(--pd-proc-pad-x);
	background-color: var(--pd-proc-dark);
	/* Corner brackets: 8 bars, arm × stroke, one per corner edge (Figma 13:3211 / 3214 / 3217 / 3220) */
	background-image:
		linear-gradient(rgb(var(--pd-proc-ink)), rgb(var(--pd-proc-ink))),
		linear-gradient(rgb(var(--pd-proc-ink)), rgb(var(--pd-proc-ink))),
		linear-gradient(rgb(var(--pd-proc-ink)), rgb(var(--pd-proc-ink))),
		linear-gradient(rgb(var(--pd-proc-ink)), rgb(var(--pd-proc-ink))),
		linear-gradient(rgb(var(--pd-proc-ink)), rgb(var(--pd-proc-ink))),
		linear-gradient(rgb(var(--pd-proc-ink)), rgb(var(--pd-proc-ink))),
		linear-gradient(rgb(var(--pd-proc-ink)), rgb(var(--pd-proc-ink))),
		linear-gradient(rgb(var(--pd-proc-ink)), rgb(var(--pd-proc-ink)));
	background-size:
		var(--pd-proc-arm) var(--pd-proc-bar), var(--pd-proc-bar) var(--pd-proc-arm),
		var(--pd-proc-arm) var(--pd-proc-bar), var(--pd-proc-bar) var(--pd-proc-arm),
		var(--pd-proc-arm) var(--pd-proc-bar), var(--pd-proc-bar) var(--pd-proc-arm),
		var(--pd-proc-arm) var(--pd-proc-bar), var(--pd-proc-bar) var(--pd-proc-arm);
	background-position:
		left top, left top,
		right top, right top,
		left bottom, left bottom,
		right bottom, right bottom;
	background-repeat: no-repeat;
	opacity: 1;
	transition: opacity var(--pd-proc-fade) var(--pd-proc-ease) var(--pd-proc-delay, 0s);
}

/* ---------- Connector: box bottom → next step's box top, centred under the box ----------
   A 20% white track with a red fill that follows the scroll (--pd-proc-fill 0…1, written by the
   script). It sits on the step, not in the dimmed box/card, so the dim never touches it. */
.pd-proc .pd-proc__line,
#top #wrap_all .pd-proc .pd-proc__line {
	position: absolute;
	top: var(--pd-proc-box);
	bottom: calc(-1 * var(--pd-proc-row-gap));
	left: calc((var(--pd-proc-box) - var(--pd-proc-line)) / 2);
	width: var(--pd-proc-line);
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	background-color: rgba(var(--pd-proc-ink), var(--pd-proc-line-dim));
	pointer-events: none;
}

.pd-proc .pd-proc__line::before,
#top #wrap_all .pd-proc .pd-proc__line::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--pd-proc-red);
	transform: scaleY(var(--pd-proc-fill, 1));   /* no script: every step is lit, so every line is full */
	transform-origin: 50% 0;
	transition: transform 0.15s linear;
}

.pd-proc .pd-proc__text,
#top #wrap_all .pd-proc .pd-proc__text {
	--fs: var(--pd-proc-text-fs);
	--lh: var(--pd-proc-text-lh);
	color: rgb(var(--pd-proc-ink));
	font-family: var(--pd-nav-font);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

/* ---------- Scroll states (the script adds --armed, then .is-on per step) ---------- */
.pd-proc.pd-proc--armed .pd-proc__step:not(.is-on) .pd-proc__num,
.pd-proc.pd-proc--armed .pd-proc__step:not(.is-on) .pd-proc__card,
#top #wrap_all .pd-proc.pd-proc--armed .pd-proc__step:not(.is-on) .pd-proc__num,
#top #wrap_all .pd-proc.pd-proc--armed .pd-proc__step:not(.is-on) .pd-proc__card {
	opacity: var(--pd-proc-dim);
}

.pd-proc.pd-proc--armed .pd-proc__line,
#top #wrap_all .pd-proc.pd-proc--armed .pd-proc__line {
	--pd-proc-fill: 0;                   /* until the script's first measurement lands inline */
}

.pd-proc.pd-proc--armed .pd-proc__step:not(.is-on) .pd-proc__num,
#top #wrap_all .pd-proc.pd-proc--armed .pd-proc__step:not(.is-on) .pd-proc__num {
	background-color: var(--pd-proc-dark);
}

.pd-proc.pd-proc--armed .pd-proc__step.is-on .pd-proc__n,
#top #wrap_all .pd-proc.pd-proc--armed .pd-proc__step.is-on .pd-proc__n {
	animation: pd-proc-roll var(--pd-proc-anim) var(--pd-proc-ease) var(--pd-proc-delay, 0s) both;
}

.pd-proc.pd-proc--armed .pd-proc__step.is-on .pd-proc__text,
#top #wrap_all .pd-proc.pd-proc--armed .pd-proc__step.is-on .pd-proc__text {
	animation: pd-proc-rise var(--pd-proc-anim) var(--pd-proc-ease) calc(var(--pd-proc-delay, 0s) + 0.12s) both;
}

/* The frame the script arms on: dim at once, no fade from lit. */
.pd-proc.pd-proc--still .pd-proc__num,
.pd-proc.pd-proc--still .pd-proc__card,
.pd-proc.pd-proc--still .pd-proc__line::before,
#top #wrap_all .pd-proc.pd-proc--still .pd-proc__num,
#top #wrap_all .pd-proc.pd-proc--still .pd-proc__card,
#top #wrap_all .pd-proc.pd-proc--still .pd-proc__line::before {
	transition: none;
}

/* The dim number rolls up out of the box and the lit one rolls in from below. */
@keyframes pd-proc-roll {
	0%     { transform: translateY(0);                           opacity: 1; }
	40%    { transform: translateY(calc(-1 * var(--pd-proc-roll))); opacity: 0; }
	40.01% { transform: translateY(var(--pd-proc-roll));          opacity: 0; }
	100%   { transform: translateY(0);                           opacity: 1; }
}

@keyframes pd-proc-rise {
	0%   { transform: translateY(var(--pd-proc-rise)); opacity: 0; }
	100% { transform: translateY(0);                   opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.pd-proc .pd-proc__num,
	.pd-proc .pd-proc__card,
	.pd-proc .pd-proc__line::before,
	#top #wrap_all .pd-proc .pd-proc__num,
	#top #wrap_all .pd-proc .pd-proc__card,
	#top #wrap_all .pd-proc .pd-proc__line::before {
		transition: none;
	}

	.pd-proc.pd-proc--armed .pd-proc__step.is-on .pd-proc__n,
	.pd-proc.pd-proc--armed .pd-proc__step.is-on .pd-proc__text,
	#top #wrap_all .pd-proc.pd-proc--armed .pd-proc__step.is-on .pd-proc__n,
	#top #wrap_all .pd-proc.pd-proc--armed .pd-proc__step.is-on .pd-proc__text {
		animation: none;
	}
}