/* How it works: steps on a vertical rail (continuing the hero route) beside a 3D photo card.
 *
 * Scroll-linked values are CSS variables written by assets/js/hero/steps.js:
 *   --sp  card entry 0→1 (card turns from angled/deep to flat)
 *   --q   parallax 0→1 across the whole time the card is on screen
 *   --rp  rail progress 0→1 (line fill + parcel position)
 *   --tx/--ty pointer tilt -1→1, --mx/--my sheen position (%)
 * Defaults are the final state, so without JS (or with reduced motion) nothing is hidden. */
.steps {
	--sp: 1; --q: .5; --rp: 1;
	--tx: 0; --ty: 0; --mx: 50%; --my: 30%;
	position: relative;
	padding: var(--section-pad) 0;
	background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
	overflow: clip;
}
.steps__inner {
	max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center;
}

.steps__head { max-width: 34rem; }
.steps__title {
	margin-top: 18px;
	font-size: clamp(2rem, 1.1rem + 2.4vw, 3.2rem); font-weight: 600; line-height: 1.04; letter-spacing: -.038em;
}
.steps__lede { margin-top: 16px; font-size: 16.5px; color: var(--paper-dim); max-width: 30rem; }

/* ---------- vertical flow ---------- */
.steps__flow { position: relative; margin-top: var(--head-gap); padding-left: 36px; }
.steps__rail { position: absolute; left: 4px; top: 8px; bottom: 8px; width: 1px; background: var(--line); }
.steps__line {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(255, 176, 84, .85), rgba(79, 141, 255, .7) 60%, rgba(127, 231, 255, .5));
	transform-origin: top; transform: scaleY(var(--rp));
}
/* Full-height carrier: translating it by % moves by the rail's own height (no layout reads). */
.steps__parcel {
	position: absolute; left: 0; top: 0; width: 1px; height: 100%;
	transform: translate3d(0, calc(var(--rp) * 100%), 0);
}
.steps__parcel::before {
	content: ""; position: absolute; left: -4px; top: -4px; width: 9px; height: 9px; border-radius: 2px;
	background: var(--amber); box-shadow: 0 0 14px 2px rgba(255, 176, 84, .55), 0 0 0 4px rgba(255, 176, 84, .12);
	transform: rotate(calc(var(--rp) * 180deg));
}

.step { position: relative; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); padding: 0 0 36px; }
.step:last-child { padding-bottom: 0; }
.step + .step { padding-top: 28px; border-top: 1px solid var(--line); }
.step__node {
	position: absolute; left: -37px; top: 6px; width: 9px; height: 9px; border-radius: 50%;
	background: var(--ink); border: 1px solid var(--blue-soft);
	transition: background-color .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease);
}
.step + .step .step__node { top: 34px; }
.step__n { padding-top: 5px; font: 500 12px var(--mono); letter-spacing: .08em; color: var(--paper-faint); transition: color .5s; }
.step__title { font-size: 1.35rem; font-weight: 600; letter-spacing: -.025em; line-height: 1.2; }
.step__text { margin-top: 6px; max-width: 26rem; font-size: 15.5px; color: var(--paper-dim); }
.step__link {
	display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
	font-size: 14.5px; font-weight: 600; color: var(--paper);
	border-bottom: 1px solid var(--line-strong); padding-bottom: 3px;
	transition: border-color .3s var(--ease);
}
.step__link .arrow { transition: transform .45s var(--ease); }
.step__link:hover, .step__link:focus-visible { border-color: var(--blue-soft); }
.step__link:hover .arrow, .step__link:focus-visible .arrow { transform: translateX(3px); }

/* Scroll story (only when steps.js drives it): steps light up as the parcel reaches them. */
.steps.is-motion .step__body { opacity: .5; transform: translate3d(8px, 0, 0); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.steps.is-motion .step.is-reached .step__body { opacity: 1; transform: none; }
.step.is-reached .step__node { background: var(--amber); border-color: var(--amber); box-shadow: 0 0 0 4px rgba(255, 176, 84, .14), 0 0 14px rgba(255, 176, 84, .5); transform: scale(1.1); }
.step.is-reached .step__n { color: var(--amber); }

/* ---------- 3D photo card ---------- */
.steps__media { position: relative; perspective: 1600px; perspective-origin: 30% 40%; }
.steps__scroll, .steps__tilt { position: relative; transform-style: preserve-3d; will-change: transform; }

/* Scroll: enters angled away and set back in depth, settles flat. */
.steps__scroll {
	transform:
		translate3d(0, calc((1 - var(--sp)) * 90px), calc((1 - var(--sp)) * -160px))
		rotateX(calc((1 - var(--sp)) * 14deg))
		rotateY(calc((1 - var(--sp)) * -22deg));
	/* no opacity here: it would flatten the 3D context and the floating chip's depth */
}
/* Pointer: small, eased tilt toward the cursor. */
.steps__tilt {
	transform: rotateX(calc(var(--ty) * -5deg)) rotateY(calc(var(--tx) * 7deg));
	transition: transform .9s var(--ease);
}

.steps__card {
	position: relative; overflow: hidden; isolation: isolate;
	aspect-ratio: 4 / 5; border-radius: 28px;
	background: var(--ink-3);
	box-shadow: 0 0 0 1px var(--line), 0 50px 90px -40px rgba(0, 0, 0, .95), 0 30px 60px -30px rgba(59, 123, 255, .25);
	transform: translateZ(0);
	opacity: calc(.25 + var(--sp) * .75);
}
/* Parallax: the photo travels slower than its frame. */
.steps__card img {
	position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; object-position: 50% 30%;
	transform: translate3d(0, calc((var(--q) - .5) * -9%), 0) scale(calc(1.1 - var(--sp) * .04));
}
.steps__card::after { /* ties any photo into the dark palette */
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background:
		linear-gradient(180deg, rgba(5, 7, 14, 0) 45%, rgba(5, 7, 14, .78) 100%),
		linear-gradient(135deg, rgba(59, 123, 255, .12), rgba(5, 7, 14, 0) 60%);
}
.steps__sheen { /* light catching the glass as it tilts */
	position: absolute; inset: 0; z-index: 2; pointer-events: none;
	background: radial-gradient(40% 35% at var(--mx) var(--my), rgba(255, 255, 255, .14), transparent 70%);
	opacity: 0; transition: opacity .6s var(--ease);
	mix-blend-mode: soft-light;
}
.steps__media.is-hover .steps__sheen { opacity: 1; }

/* No photo yet: a quiet branded panel (dot field + warm glow) instead of an empty box. */
.steps__card--empty {
	background:
		radial-gradient(60% 50% at 62% 58%, rgba(255, 176, 84, .16), transparent 70%),
		radial-gradient(80% 70% at 30% 20%, rgba(59, 123, 255, .2), transparent 70%),
		var(--ink-3);
}
.steps__card--empty::before {
	content: ""; position: absolute; inset: 0;
	background-image: radial-gradient(rgba(141, 176, 255, .28) 1px, transparent 1.4px);
	background-size: 14px 14px;
	-webkit-mask-image: radial-gradient(70% 60% at 50% 50%, #000, transparent); mask-image: radial-gradient(70% 60% at 50% 50%, #000, transparent);
}

.steps__chip {
	position: absolute; z-index: 3; left: 20px; bottom: 20px;
	display: inline-flex; align-items: center; gap: 10px;
	padding: 9px 14px 9px 12px; border-radius: 999px;
	font-size: 13px; font-weight: 500; color: var(--paper);
	background: rgba(12, 16, 31, .55); border: 1px solid var(--line-strong);
	-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}

/* Floating tracking chip: in front of the card (translateZ) and on its own parallax. */
.steps__float {
	position: absolute; z-index: 4; right: -28px; top: 14%;
	display: grid; gap: 6px; min-width: 196px;
	padding: 14px 16px; border-radius: 18px;
	background: rgba(14, 19, 36, .62); border: 1px solid var(--line-strong);
	-webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
	box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .06);
	transform: translate3d(0, calc((var(--q) - .5) * -70px), 90px);
	opacity: calc((var(--sp) - .35) * 1.6);
}
.float__k { font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--paper-faint); }
.float__state { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.float__state i { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.float__route { display: flex; align-items: center; gap: 10px; font: 500 11px var(--mono); letter-spacing: .06em; color: var(--blue-soft); }
.float__bar { position: relative; flex: 1; height: 1px; background: var(--line-strong); }
.float__bar b {
	position: absolute; inset: 0; transform-origin: left;
	transform: scaleX(calc(.2 + var(--q) * .7));
	background: linear-gradient(90deg, rgba(255, 176, 84, .2), var(--amber));
}

/* ---------- heading entrance ---------- */
@media (prefers-reduced-motion: no-preference) {
	.steps.will-reveal .steps__head > * { opacity: 0; transform: translate3d(0, 18px, 0); }
	.steps.is-in .steps__head > * { opacity: 1; transform: none; transition: opacity 1s var(--ease), transform 1s var(--ease); }
	.steps.is-in .steps__head > :nth-child(2) { transition-delay: .1s; }
	.steps.is-in .steps__head > :nth-child(3) { transition-delay: .2s; }
}

/* ---------- stacked ---------- */
@media (max-width: 899px) {
	.steps__inner { grid-template-columns: 1fr; }
	.steps__media { order: -1; perspective: 1200px; }
	.steps__card { aspect-ratio: 4 / 3; border-radius: 22px; }
	.steps__float { right: 12px; top: 12px; min-width: 170px; padding: 11px 13px; }
	.steps__scroll {
		transform:
			translate3d(0, calc((1 - var(--sp)) * 60px), calc((1 - var(--sp)) * -100px))
			rotateX(calc((1 - var(--sp)) * 16deg));
	}
}
@media (max-width: 559px) {
	.steps__card { aspect-ratio: 4 / 4.2; }
	.steps__flow { padding-left: 28px; }
	.step__node { left: -29px; }
	.steps__float { min-width: 150px; }
	.float__state { font-size: 14px; }
}