/* =========================================================================
   The deployment story: one core opening into departments.
   A tall track whose stage is pinned, so the core has room to open while
   the visitor scrolls past it. Same shape as .story, one section later.
   ========================================================================= */

.deploy {
	position: relative;
	background: var(--bg);
	border-block: 1px solid var(--line);
}

.js .deploy {
	height: 320vh;
}

.deploy__stage {
	position: sticky;
	top: 0;
	height: 100svh;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
	align-items: center;
	gap: clamp(20px, 4vw, 56px);
	padding-inline: max(20px, calc((100vw - var(--wrap)) / 2));
	overflow: hidden;
}

.deploy__copy {
	position: relative;
	z-index: 3;
	max-width: 31rem;
}

.deploy__copy h2 {
	font-size: clamp(1.9rem, 3.4vw, 2.9rem);
	margin-top: var(--xs);
}

.deploy__copy > p {
	color: var(--muted);
	margin-top: var(--sm);
}

.deploy__steps {
	display: grid;
	gap: 14px;
	margin-top: var(--md);
}

.deploy__step {
	border-left: 1px solid var(--line);
	padding: 4px 0 4px 18px;
	color: var(--muted);
	opacity: 0.34;
	transition: opacity 0.45s ease, border-color 0.45s ease, color 0.45s ease;
}

.deploy__step strong {
	display: block;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.15;
	color: var(--ink);
	margin-bottom: 3px;
}

.deploy__step.is-on {
	opacity: 1;
	border-left-color: var(--accent);
	color: var(--ink);
}

.deploy__field {
	position: relative;
	width: min(78svh, 100%);
	aspect-ratio: 1 / 1;
	margin-inline: auto;
}

.deploy__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
}

/* Department endpoints are real DOM, so the logos stay crisp and each one
   keeps a readable label. Positions come from the same angle list the
   canvas draws its spokes from. */
.dep__node {
	position: absolute;
	left: var(--x);
	top: var(--y);
	transform: translate(-50%, -50%) scale(0.72);
	display: grid;
	justify-items: center;
	gap: 7px;
	width: max-content;
	z-index: 2;
	opacity: 0;
	transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.dep__node.is-on {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

.dep__tile {
	--t: clamp(38px, 5vw, 58px);
	width: var(--t);
	height: var(--t);
	border-radius: var(--r-md);
	background: #FFFFFF;
	display: grid;
	place-items: center;
	box-shadow: 0 0 0 1px var(--c, rgba(34, 211, 238, .5)), 0 0 26px color-mix(in srgb, var(--c, #22D3EE) 34%, transparent);
}

.dep__tile svg {
	width: 52%;
	height: 52%;
	display: block;
}

.dep__dept {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(0.86rem, 1vw, 1rem);
	color: var(--ink);
	white-space: nowrap;
}

.dep__what {
	font-family: var(--font-mono);
	font-size: clamp(0.66rem, 0.75vw, 0.76rem);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
	white-space: nowrap;
	margin-top: -4px;
}

@media (max-width: 980px) {
	.deploy__stage {
		grid-template-columns: 1fr;
		align-content: center;
		gap: var(--md);
	}
	.deploy__field {
		order: -1;
		width: min(58svh, 100%);
	}
	.deploy__copy {
		max-width: none;
	}
	.deploy__copy > p {
		display: none;
	}
	.dep__what {
		display: none;
	}
	.js .deploy {
		height: 280vh;
	}
}

@media (max-width: 620px) {
	.dep__dept {
		display: none;
	}
}

/* No JavaScript: no pin, no tall track, one readable panel with every
   department already in place. */
html:not(.js) .deploy {
	height: auto;
}

html:not(.js) .deploy__stage {
	position: static;
	height: auto;
	padding-block: var(--xl);
}

html:not(.js) .dep__node,
html:not(.js) .deploy__step {
	opacity: 1;
}

html:not(.js) .dep__node {
	transform: translate(-50%, -50%);
}

@media (prefers-reduced-motion: reduce) {
	.js .deploy {
		height: auto;
	}
	.js .deploy__stage {
		position: static;
		height: auto;
		padding-block: var(--xl);
	}
	.deploy__step {
		opacity: 1;
		color: var(--ink);
	}
	.dep__node {
		transition: none;
	}
}

/* =========================================================================
   Phones: keep the pin, shrink the contents to fit inside it.

   The frame must hold still until the animation has finished, then release
   and let the page carry on. That is the whole point of the section, so the
   pin stays on mobile. The earlier problem was not the pin, it was that the
   stacked layout did not fit inside one screen and the overflow clipped the
   last step. So everything inside is sized against the screen height here:
   the field, the gaps and the padding are all svh based, and the type steps
   down, so the whole thing fits without clipping.

   The track is 300vh, giving 200vh of scroll. The animation completes at
   roughly three quarters of that, so it is always finished and idling before
   the frame lets go.
   ========================================================================= */

@media (max-width: 980px) {
	.js .deploy {
		height: 300vh;
	}

	.deploy__stage {
		position: sticky;
		top: 0;
		height: 100svh;
		overflow: hidden;
		grid-template-columns: 1fr;
		align-content: center;
		row-gap: clamp(10px, 2.2svh, 20px);
		padding-block: clamp(12px, 2.5svh, 26px);
		padding-inline: max(20px, 5vw);
	}

	.deploy__field {
		order: -1;
		width: min(42svh, 76vw);
	}

	.deploy__copy {
		max-width: none;
	}

	.deploy__copy h2 {
		font-size: clamp(1.25rem, 5.4vw, 1.7rem);
		margin-top: 2px;
	}

	/* No room for the lede once the canvas has its share of the screen. */
	.deploy__copy > p {
		display: none;
	}

	.deploy__steps {
		gap: clamp(6px, 1.4svh, 12px);
		margin-top: clamp(6px, 1.4svh, 14px);
	}

	.deploy__step {
		font-size: 0.9rem;
		line-height: 1.42;
		padding: 1px 0 1px 13px;
	}

	.deploy__step strong {
		font-size: 0.97rem;
		margin-bottom: 1px;
	}
}

/* Very short screens: drop the steps rather than clip them. */
@media (max-width: 980px) and (max-height: 620px) {
	.deploy__steps {
		display: none;
	}

	.deploy__field {
		width: min(52svh, 76vw);
	}
}