/*
 * OrgTree — hero.css
 *
 * v2 luxury rebrand, LP-style SPLIT hero (copy left, tree visual right) + the
 * static fallback. Enqueued ONLY on the front page (inc/enqueue.php).
 *
 * The split layout is the fix for the previous centred-overlay hero: the
 * headline/CTA sit in the LEFT column and never overlap the tree or ride up
 * into the nav; the tree lives in the RIGHT column, contain-fit on a seamless
 * near-black so it floats. Generous top/bottom padding gives real breathing
 * room (LP-style margins).
 */

.hero.section--dark {
	position: relative;
	padding: 0;
	/* orgtree_section_open() adds `.reveal` (a translateY transform) — any
	   non-none transform on an ancestor breaks position:sticky for the
	   scroll stage, so neutralise it here. The hero needs no fade-in. */
	transform: none !important;
	opacity: 1 !important;
	transition: none !important;
}

/* ------------------------------------------------------------------------ */
/* Shared split layout (both the static and the scroll variants use it)      */
/* ------------------------------------------------------------------------ */

.hero-inner {
	max-width: var(--container-xl);
	margin-inline: auto;
	padding-inline: var(--space-lg);
	/* Modest padding only — `align-items: center` does the vertical placement,
	   which keeps the copy clear of the fixed header AND keeps the CTA in view
	   (a large top pad pushed content down and clipped the CTA off the bottom).
	   Top pad is just enough that on very short viewports the headline never
	   tucks under the transparent header. */
	padding-block: clamp(4.5rem, 3.8rem + 2vh, 5.5rem) var(--space-lg);
	min-height: 100vh;
	display: grid;
	grid-template-columns: minmax(0, 45%) minmax(0, 55%);
	align-items: center;
	gap: clamp(var(--space-lg), 4vw, var(--space-2xl));
}

.hero-copy {
	max-width: 34rem;
}

.hero-eyebrow {
	margin: 0 0 var(--space-md);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--gold);
}

.hero-title {
	color: var(--text-on-dark);
	font-size: clamp(2rem, 1.4rem + 2.1vw, 3rem);
	line-height: 1.1;
	margin: 0 0 var(--space-md);
}

.hero-sub {
	color: color-mix(in srgb, var(--text-on-dark) 80%, transparent);
	font-size: var(--text-lg);
	line-height: 1.55;
	max-width: 40ch;
	margin: 0 0 var(--space-md);
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
}

/* Cue is taken OUT of the copy flow (absolute, bottom-left of the sticky
   stage) so it never adds to the copy column height / pushes the CTA down. */
.hero-cue {
	position: absolute;
	left: var(--space-lg);
	bottom: var(--space-md);
	margin: 0;
	color: var(--muted-on-dark);
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	opacity: 1;
	transition: opacity 400ms ease;
}

.hero-cue.is-hidden {
	opacity: 0;
}

.hero-cue::after {
	content: "";
	display: block;
	width: 1px;
	height: 2rem;
	margin-top: var(--space-2xs);
	background: color-mix(in srgb, var(--muted-on-dark) 60%, transparent);
}

/* Right-column visual — a centred, fixed-ratio frame so the tree sits as a
   block whose vertical centre lines up with the copy's centre (both cells
   are `align-items: center`). Contain-fit keeps the tree un-stretched. */
.hero-visual {
	position: relative;
	align-self: center;
	width: 100%;
	aspect-ratio: 3 / 2;
	min-height: 0;
}

.hero-visual__img {
	width: 100%;
	height: 100%;
	object-fit: contain; /* never stretch or crop the tree */
	object-position: center;
	/* Same edge-feather as the canvas so the static hero tree also meshes
	   seamlessly into the hero background. */
	-webkit-mask-image: radial-gradient(120% 118% at 50% 44%, #000 50%, transparent 94%), linear-gradient(to bottom, #000 56%, transparent 99%);
	-webkit-mask-composite: source-in;
	mask-image: radial-gradient(120% 118% at 50% 44%, #000 50%, transparent 94%), linear-gradient(to bottom, #000 56%, transparent 99%);
	mask-composite: intersect;
}

/* ------------------------------------------------------------------------ */
/* Static fallback (no-JS / reduced-motion / narrow-or-low-power default)     */
/* ------------------------------------------------------------------------ */

.hero-static {
	position: relative;
}

html.hero-scroll-active .hero-static {
	display: none;
}

/* ------------------------------------------------------------------------ */
/* Scroll-driven canvas hero                                                 */
/* ------------------------------------------------------------------------ */

.hero-scroll {
	display: none;
	position: relative;
	height: 300vh; /* desktop scroll range */
}

html.hero-scroll-active .hero-scroll {
	display: block;
}

.hero-scroll__stage {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: hidden;
	/* Seamless float: this is sampled to MATCH the tree frames' own near-black
	   backdrop (frame corners measure ~#0D-#12 grey), so the frame's straight
	   top/side edges have no colour contrast against the stage and disappear;
	   the edge-feather mask on the canvas then only has to dissolve the lighter
	   "floor" at the bottom and the corners. Kept a whisper of gradient for depth. */
	background: linear-gradient(180deg, #111417 0%, #0C0F12 62%, #0A0D10 100%);
}

.hero-scroll__stage .hero-inner {
	height: 100vh;
	min-height: 100vh;
}

.hero-scroll__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	/* Feather the edges so the frame's own dark backdrop dissolves into the
	   hero background (no visible rectangle border) and the bottom-right
	   corner (old watermark area) fades out entirely. */
	-webkit-mask-image: radial-gradient(120% 118% at 50% 44%, #000 50%, transparent 94%), linear-gradient(to bottom, #000 56%, transparent 99%);
	-webkit-mask-composite: source-in;
	mask-image: radial-gradient(120% 118% at 50% 44%, #000 50%, transparent 94%), linear-gradient(to bottom, #000 56%, transparent 99%);
	mask-composite: intersect;
}

/* Minimal luxury loader inside the right (visual) column. */
.hero-scroll__loader {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	transition: opacity 500ms ease;
}

.hero-scroll__loader.is-done {
	opacity: 0;
	pointer-events: none;
}

.hero-scroll__loader-track {
	width: 9rem;
	max-width: 40vw;
	height: 2px;
	background: color-mix(in srgb, var(--text-on-dark) 15%, transparent);
	border-radius: 999px;
	overflow: hidden;
}

.hero-scroll__loader-fill {
	display: block;
	height: 100%;
	width: 0%;
	background: var(--green-glow);
	transition: width 150ms ease;
}

/* ------------------------------------------------------------------------ */
/* Mobile: stack — copy on top, tree below.                                  */
/* ------------------------------------------------------------------------ */

@media (max-width: 60rem) {
	.hero-inner {
		/* minmax(0,1fr) not 1fr: a bare 1fr track has min-width:auto, so the tree
		   image's intrinsic min-content width (~512px) blows the single column
		   past a 375px viewport and causes horizontal scroll. min 0 lets the
		   column shrink to the container. */
		grid-template-columns: minmax(0, 1fr);
		padding-block: clamp(5rem, 3.5rem + 6vh, 7rem) var(--space-xl);
		gap: var(--space-lg);
		min-height: auto;
	}

	.hero-copy {
		max-width: none;
	}

	.hero-visual {
		order: 2;
		min-height: 42vh;
	}

	.hero-cue {
		margin-top: var(--space-lg);
	}

	.hero-scroll {
		height: 240vh;
	}

	.hero-scroll__stage .hero-inner {
		/* fit copy + tree inside the sticky 100vh viewport */
		min-height: 100vh;
		grid-template-rows: auto 1fr;
	}
}