/* ==========================================================================
   Alqima Urban — Spatial / 2.5D layer (Stage 07)
   Everything here is keyed on html.has-space, which assets/js/spatial.js adds
   only with GSAP + ScrollTrigger and motion allowed. Without it (no JS,
   reduced motion) none of these rules apply: the static layout is complete.
   Colours come from the section's own surface (computed), never hard-coded.
   ========================================================================== */

/* ---------------------------------------------------------------- Rooms */
/* Two side bands in the previous section's colour (--space-under) frame the
   entering section; each carries a rounded corner on its inner top edge.
   spatial.js slides them out (xPercent ±101) and shrinks the corners. */
html.has-space .is-room {
	position: relative;
	isolation: isolate;
	overflow-x: clip;
}

.space-side {
	position: absolute;
	inset-block-start: 0;
	z-index: -2;
	width: var(--space-w);
	height: 100vh;
	height: 100lvh;
	background: var(--space-under);
	will-change: transform;
	pointer-events: none;
}

.space-side--start {
	left: 0;
}

.space-side--end {
	right: 0;
}

.space-side__corner {
	position: absolute;
	inset-block-start: 0;
	width: var(--space-r);
	height: var(--space-r);
}

.space-side--start .space-side__corner {
	left: 100%;
	transform-origin: 0 0;
	background: radial-gradient(circle at 100% 100%, transparent calc(var(--space-r) - 0.5px), var(--space-under) var(--space-r));
}

.space-side--end .space-side__corner {
	right: 100%;
	transform-origin: 100% 0;
	background: radial-gradient(circle at 0 100%, transparent calc(var(--space-r) - 0.5px), var(--space-under) var(--space-r));
}

/* ----------------------------------------------------- Midground numeral */
html.has-space .has-space-index {
	position: relative;
	isolation: isolate;
	overflow-x: clip;
}

.space-index {
	position: absolute;
	inset-block-start: clamp(4rem, 9vw, 9rem);
	inset-inline-end: var(--margin);
	z-index: -1;
	font-family: var(--f-latin);
	font-size: clamp(9rem, 4rem + 22vw, 26rem);
	font-weight: var(--fw-semibold);
	line-height: 0.8;
	letter-spacing: -0.06em;
	color: transparent;
	-webkit-text-stroke: 1px var(--c-hairline);
	user-select: none;
	pointer-events: none;
	will-change: transform;
}

/* Mobile: smaller, lighter, static and lifted to the section-head row so it
   never sits behind the headline. */
@media (max-width: 47.99em) {
	.space-index {
		inset-block-start: clamp(1.25rem, 6vw, 2rem);
		font-size: clamp(5.5rem, 30vw, 8rem);
		-webkit-text-stroke-color: var(--c-hairline);
		will-change: auto;
	}
}

/* ------------------------------------------------ Process pointer depth */
/* Individual `translate` composes with the transforms the pinned sequence
   already animates (clip scale / recession), so nothing is overwritten. */
html.has-space .prc.is-pinned .prc-step__media {
	translate: var(--px, 0px) var(--py, 0px);
	transition: translate 1.1s var(--ease-out);
}

html.has-space .prc.is-pinned .prc__counter {
	translate: calc(var(--px, 0px) * -1.6) calc(var(--py, 0px) * -1.6);
	transition: translate 1.3s var(--ease-out);
}

/* ------------------------------------------------------- Magnetic CTAs */
/* Selected primary actions only: hero CTA, featured case-study link, final
   CTA button. Each keeps its own transitions; `translate` is added to them. */
@media (hover: hover) and (pointer: fine) {
	html.has-space .hero__actions .cta--primary,
	html.has-space .ctaf__button,
	html.js.has-space [data-fpr] .fpr__cta {
		translate: var(--mg-x, 0px) var(--mg-y, 0px);
	}

	html.has-space .hero__actions .cta--primary {
		transition: translate 0.6s var(--ease-out);
	}

	html.has-space .ctaf__button {
		transition: background-color var(--dur-3) var(--ease-soft), transform 0.8s var(--ease-out), translate 0.6s var(--ease-out);
	}

	html.js.has-space [data-fpr] .fpr__cta {
		transition: opacity 0.9s var(--ease-soft), transform 1.1s var(--ease-out), translate 0.6s var(--ease-out);
	}

	html.has-space .hero__actions .cta--primary .cta__icon,
	html.has-space .fpr__cta .cta__icon {
		translate: calc(var(--mg-x, 0px) * 0.75) calc(var(--mg-y, 0px) * 0.75);
		transition: transform var(--dur-3) var(--ease-out), translate 0.6s var(--ease-out);
	}

	html.has-space .ctaf__button .ctaf__button-icon {
		translate: calc(var(--mg-x, 0px) * 0.75) calc(var(--mg-y, 0px) * 0.75);
		transition: transform 0.8s var(--ease-out), translate 0.6s var(--ease-out);
	}
}

/* ---------------------------------------------------- Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.space-side,
	.space-index {
		display: none;
	}
}