/* Home scene 04: Process, a sticky step counter and four steps on a rail (S01, COMPONENTS 12). */

.proc {
	position: relative;
	padding-block: var(--sec);
	background: var(--ink-900);
	color: var(--fg);
}

.proc::before {
	content: "";
	position: absolute;
	inset: 0 var(--rail);
	border-inline: var(--hairline) solid var(--ln);
	pointer-events: none;
}

.proc-grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: var(--margin);
	align-items: start;
}

.proc-l {
	position: sticky;
	inset-block-start: 16vh;
}

.proc-l .eyebrow {
	margin-block-end: 10px;
}

.proc .odo {
	color: var(--hi);
	font-size: clamp(130px, 20vw, 320px);
}

.proc .odo .col {
	width: 0.64em;
}

.proc .odo .col > span {
	transition-duration: 0.8s;
}

.pname {
	min-height: 1.4em;
	margin: 14px 0 0;
	color: var(--fg2);
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

:lang(ar) .pname {
	letter-spacing: 0;
}

.steps {
	position: relative;
	padding-inline-start: 44px;
}

.steps ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.steps::before {
	content: "";
	position: absolute;
	inset-inline-start: 7px;
	inset-block: 6px;
	width: var(--hairline);
	background: var(--ln-s);
}

.fill {
	position: absolute;
	inset-inline-start: 6px;
	inset-block-start: 6px;
	width: 3px;
	height: calc(100% - 12px);
	background: var(--hi);
	transform: scaleY(var(--p, 0));
	transform-origin: top;
}

.step {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
	min-height: 62svh;
	transition: opacity 0.7s var(--ease);
}

.step::before {
	content: "";
	position: absolute;
	inset-inline-start: -44px;
	inset-block-start: calc(50% - 40px);
	width: 15px;
	height: 15px;
	border: 2px solid var(--ln-s);
	background: var(--ink-900);
	transition:
		background 0.5s,
		border-color 0.5s,
		transform 0.6s var(--ease);
}

.step.on::before {
	border-color: var(--hi);
	background: var(--hi);
	transform: rotate(45deg) scale(1.2);
}

.step .mono {
	color: var(--hi);
}

.step h3 {
	font-size: clamp(34px, 4vw, 60px);
	font-weight: 300;
	letter-spacing: -0.04em;
	line-height: 1;
}

.step h3 strong {
	font-weight: 800;
}

.step p {
	max-width: 40ch;
	color: var(--fg2);
}

/* The steps not in focus recede while the person scrolls; without script, or with reduced motion, all stay fully readable. */
.js:not(.rm) .step:not(.on) {
	opacity: 0.72;
}

@media (max-width: 999px) {
	.proc-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	/* The counter becomes a bar that sticks to the top while the steps scroll (the header hides on scroll down and covers it when it returns). */
	.proc-l {
		inset-block-start: 0;
		z-index: 3;
		display: flex;
		align-items: baseline;
		gap: 20px;
		padding-block: 8px;
		background: var(--ink-900);
	}

	.proc-l .eyebrow {
		display: none;
	}

	.proc-count {
		display: flex;
		align-items: baseline;
		gap: 20px;
	}

	.proc .odo {
		font-size: 96px;
	}

	.pname {
		margin: 0;
	}

	.step {
		min-height: 46svh;
	}
}