/**
 * Home alt — editorial cinema + work catalog load choreography.
 * @see docs/HOME_ALT_GSAP_PLAN.md
 */

/* ─── Stage + hero depth ─── */

.home-alt-hero {
	position: relative;
}

.home-alt-hero__grain {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	opacity: 0.35;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
	background-size: 180px 180px;
	mix-blend-mode: soft-light;
}

.home-alt-spotlight {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	opacity: 0;
	--spot-x: 50%;
	--spot-y: 85%;
	background: radial-gradient(
		ellipse 48% 65% at var(--spot-x) var(--spot-y),
		rgba(250, 249, 247, 0.18) 0%,
		transparent 58%
	);
}

body.studio-page-home-alt.home-alt--spotlight-on .home-alt-spotlight {
	opacity: 1;
}

#work-hero-backdrop[data-active-domain='healthcare'] .cluster-hero__layer--healthcare,
#work-hero-backdrop[data-active-domain='security'] .cluster-hero__layer--security,
#work-hero-backdrop[data-active-domain='government'] .cluster-hero__layer--government {
	opacity: 1;
}

#work-hero-backdrop .cluster-hero__layer {
	opacity: 0;
	transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

#work-hero-backdrop[data-active-domain='none'] .cluster-hero__layer {
	opacity: 0;
}

html.home-alt--animate .home-alt-word {
	display: inline-block;
	will-change: transform, opacity;
}

/* Two claim lines are their own block so each can act as its own mask. */
.home-alt-hero__claim .home-alt-line {
	display: block;
}

/*
 * Letterbox load — pre-paint staged states.
 *
 * Scoped to `html.home-alt--animate`, which home-alt-page.php adds in wp_head
 * only when prefers-reduced-motion is not set, and which home-alt-gsap.js
 * removes if GSAP fails. The finished layout is the fallback in both cases.
 */
html.home-alt--animate .home-alt-hero {
	background-color: #0e1a1f;
}

/* Four plain percentages — GSAP cannot interpolate calc() or mixed units. */
html.home-alt--animate #work-hero-backdrop {
	-webkit-clip-path: inset(50% 0% 50% 0%);
	clip-path: inset(50% 0% 50% 0%);
	will-change: clip-path;
}

/* Ignition hairline — built by home-alt-gsap.js, no template change. */
.home-alt-slit {
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	z-index: 4;
	height: 2px;
	margin-top: -1px;
	transform: scaleX(0);
	transform-origin: 50% 50%;
	background: linear-gradient(
		90deg,
		rgba(44, 95, 110, 0) 0%,
		rgba(44, 95, 110, 0.85) 20%,
		rgba(250, 249, 247, 0.95) 50%,
		rgba(44, 95, 110, 0.85) 80%,
		rgba(44, 95, 110, 0) 100%
	);
	box-shadow: 0 0 18px rgba(44, 95, 110, 0.55);
	pointer-events: none;
	will-change: transform, opacity;
}

/*
 * Claim word mask. `overflow: clip` + overflow-clip-margin is ideal, but WebKit
 * still lacks overflow-clip-margin — use hidden + padding so ascenders are not
 * shaved, then clip when supported.
 */
html.home-alt--animate .home-alt-hero__claim .home-alt-line {
	overflow: hidden;
	overflow: clip;
	padding-block: 0.16em;
	margin-block: -0.16em;
}

html.home-alt--animate .home-alt-word {
	transform: translateY(110%);
}

html.home-alt--animate .home-alt-hero__sub,
html.home-alt--animate body.studio-page-home-alt .hero-interactive__door {
	opacity: 0;
}

/*
 * Console glass vs. doors.
 *
 * Frost lives on `.hero-interactive__console::before`. Staging the whole
 * `.work-console` at opacity 0 keeps that layer out of the compositor, so the
 * blur snaps on mid-fade. Stage only the doors; the shell is GSAP-owned and
 * warmed before any other beat (primeConsoleBlur).
 */
html.home-alt--animate .work-console-float .hero-interactive__door {
	opacity: 0;
}

html.home-alt--animate .work-console-float {
	isolation: isolate;
	transform: translateZ(0);
}

html.home-alt--animate.home-alt--console-blur-primed
	.hero-interactive__console::before {
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	will-change: backdrop-filter;
}

html.home-alt--animate .home-alt-catalog .work-hub__toolbar {
	opacity: 0;
}

/*
 * Sliding active indicator for practice filters.
 * Scoped to home-alt--animate: ink only exists when GSAP is live.
 */
html.home-alt--animate .home-alt-catalog .work-hub__chips {
	position: relative;
}

html.home-alt--animate .home-alt-catalog .work-hub__chip {
	position: relative;
	z-index: 1;
}

html.home-alt--animate .home-alt-catalog .work-hub__chip.is-active {
	background: transparent;
	border-color: transparent;
}

.work-hub__chip-ink {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: 0;
	height: 0;
	border: 1px solid var(--studio-teal, #2c5f6e);
	border-radius: 4px;
	background: rgba(44, 95, 110, 0.1);
	pointer-events: none;
}

body.studio-page-home-alt .work-console .hero-interactive__console {
	box-shadow:
		0 40px 100px rgba(0, 0, 0, 0.42),
		0 12px 32px rgba(0, 0, 0, 0.28),
		0 0 0 1px rgba(250, 249, 247, 0.06) inset;
}

body.studio-page-home-alt .hero-interactive__door.is-spotlit {
	box-shadow:
		0 0 0 1px rgba(250, 249, 247, 0.22),
		0 16px 48px rgba(44, 95, 110, 0.45);
}

body.studio-page-home-alt .hero-interactive__door.is-spotlit .hero-interactive__door-meta {
	opacity: 1;
}

/* ─── Console — phone widths ───
 *
 * Stacked hub doors (home + cluster) live in mobile-console-layout.css so the
 * same instrument renders on every hub hop. Do not reintroduce a home-only
 * variant here — it breaks console persistence across home ↔ cluster.
 */

/* ─── Main + catalog ─── */

/* Landing/overlap comes from the console landing grid shell — no local pull here. */
.home-alt-main {
	position: relative;
	padding-bottom: clamp(3rem, 8vh, 5rem);
}

/* ─── Catalog — filters + every engagement ───
 *
 * The whole page below the console. Cards are rendered by work-index.js and
 * dealt from the console by home-alt-gsap.js; perspective makes the rotateX in
 * the catalog entrance read as depth rather than a flat squash.
 */

body.studio-page-home-alt .home-alt-catalog {
	margin-top: clamp(1.5rem, 4vh, 2.5rem);
}

body.studio-page-home-alt .home-alt-catalog .work-hub__grid--engagements {
	perspective: 1400px;
}

/*
 * Catalog → gate seam.
 *
 * Four rules used to stack here: the grid's own bottom margin, the
 * cluster-engagements section padding, the gate mount margin, and the gate
 * rail's padding — roughly 180px of dead space between the last card and the
 * gate copy. The trailing two are the ones that read as intentional (space
 * above the divider, space below it), so the catalog's own trailing space is
 * dropped and the remaining pair carries the seam.
 */
body.studio-page-home-alt .home-alt-catalog .work-hub__grid {
	margin-bottom: 0;
}

body.studio-page-home-alt .home-alt-catalog,
body.studio-page-home-alt .home-alt-catalog .work-hub {
	padding-bottom: 0;
}

/*
 * work-index.js always renders the projects wrapper, but the alt page routes
 * personal projects elsewhere, so it stays empty — its top margin was pure
 * dead space above the gate.
 */
body.studio-page-home-alt .home-alt-catalog .work-hub__projects-section:empty {
	margin-top: 0;
}

/* ─── Gate — after the catalog ───
 *
 * On production `/` the gate is the first block in main, wedged under the
 * console overlap, which is why homepage-gate.css needs the
 * --studio-hp-gate-offset clearance dance. Here it trails the catalog: normal
 * flow, no clearance math, and it asks for the password *after* the visitor has
 * seen what it unlocks.
 */

/*
 * The rail centres its own content with `(100% - wide-size) / 2`, so the mount
 * has to reach the viewport edges or the gate lands inboard of the catalog.
 * `width: auto` plus symmetric negative margins does that without 100vw, which
 * would overflow by the scrollbar width.
 */
body.studio-page-home-alt .studio-hp-gate-mount--tail {
	position: relative;
	z-index: 5;
	width: auto;
	max-width: none;
	margin-block: clamp(2rem, 4vh, 2.75rem) 0;
	margin-inline: calc(-1 * var(--wp--style--root--padding-left, 1.5rem))
		calc(-1 * var(--wp--style--root--padding-right, 1.5rem));
	padding: 0;
	background-color: transparent;
}

/* Unlocked or dismissed must not leave an empty band. */
body.studio-page-home-alt .studio-hp-gate-mount--tail:has([data-hp-gate][hidden]),
body.studio-page-home-alt.studio-hp-gate-unlocked .studio-hp-gate-mount--tail {
	display: none;
}

body.studio-page-home-alt .studio-hp-gate-mount--tail [data-hp-gate].studio-bridge-gate-rail {
	border-top: 1px solid var(--wp--preset--color--subtle, #f0ede8);
	padding-top: clamp(1.5rem, 3.5vh, 2.25rem) !important;
	padding-bottom: clamp(1.75rem, 4vh, 2.5rem);
}

@media (prefers-reduced-motion: reduce) {
	.home-alt-spotlight,
	#work-hero-backdrop .cluster-hero__layer {
		transition: none;
	}

	html.home-alt--animate .home-alt-hero__sub,
	html.home-alt--animate body.studio-page-home-alt .hero-interactive__door,
	html.home-alt--animate .home-alt-catalog .work-hub__toolbar,
	html.home-alt--animate .home-alt-word {
		opacity: 1;
		transform: none;
	}

	html.home-alt--animate #work-hero-backdrop {
		-webkit-clip-path: none;
		clip-path: none;
	}

	.home-alt-slit {
		display: none;
	}
}