/* Mercantile Hero Globe — front-page intro overlay.
   Colors mirror the standalone build. The overlay sits above the Nectar
   header during the intro, then removes itself and hands off to the real site. */

:root {
	--mlx-dark: #0f0f12;
	--mlx-deepred: #7B0A06;
	--mlx-red: #c0392b;
	--mlx-tan: #d9b487;
}

/* Fixed intro overlay. z-index sits above the Nectar header (which is ~1000). */
#mlx-hero {
	position: fixed;
	inset: 0;
	z-index: 100000;
	pointer-events: none;
}

/* Match the standalone build: Inter for the overlay copy and the wordmark.
   Scoped here so the rest of the site keeps its own font. */
#mlx-hero-text,
#mlx-lockup {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* Thin scroll-progress bar across the top, like the standalone (#progress). */
#mlx-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 0;
	background: var(--mlx-red);
	z-index: 10;
	pointer-events: none;
}

#mlx-bg {
	position: fixed;
	inset: 0;
	z-index: 1;
	background: #0a0b14; /* match the dark-home orb field so the intro dissolves into it */
}

#mlx-canvas {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	z-index: 3;
	display: block;
	pointer-events: none;
}

/* Intro copy over the dark globe; fades out as the globe parks. */
#mlx-hero-text {
	position: fixed;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 8vh 7vw;
	pointer-events: none;
}
#mlx-hero-text .mlx-inner { max-width: min(60rem, 84vw); }
#mlx-hero-text .mlx-eyebrow {
	text-transform: uppercase;
	letter-spacing: .2em;
	font-size: .72rem;
	color: var(--mlx-tan);
	margin-bottom: 1rem;
}
#mlx-hero-text h1 {
	color: #f4ede4;
	font-size: clamp(2.4rem, 6.5vw, 4.6rem);
	line-height: 0.95;   /* tighter stacking of heading lines */
	margin: 0 0 1.2rem;
}
#mlx-hero-text p {
	color: #cfc6ba;
	font-size: clamp(1rem, 2.2vw, 1.3rem);
	line-height: 1.8;    /* more open line spacing in the body paragraph */
	max-width: 52ch;
	margin: 0;
}

/* CTA button under the intro text. White outline; turns primary (#c0392b) on
   hover. pointer-events:auto because the parent #mlx-hero-text is none; JS
   turns it off once the intro fades so it can't intercept clicks on the page. */
#mlx-hero-text .mlx-cta {
	display: inline-flex;
	align-items: center;
	gap: .55em;
	margin-top: 2rem;
	padding: .85rem 1.5rem;
	border: 1px solid #fff;
	border-radius: 8px;
	background: transparent;
	color: #fff;
	font-weight: 600;
	font-size: .82rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	opacity: 0;          /* JS fades it in/out together with the intro copy */
	pointer-events: auto;
	transition: color .25s ease, border-color .25s ease, background .25s ease;
}
#mlx-hero-text .mlx-cta:hover,
#mlx-hero-text .mlx-cta:focus-visible {
	color: var(--mlx-red);
	border-color: var(--mlx-red);
}
#mlx-hero-text .mlx-cta .mlx-arw {
	display: inline-block;
	transition: transform .25s ease;
}
#mlx-hero-text .mlx-cta:hover .mlx-arw,
#mlx-hero-text .mlx-cta:focus-visible .mlx-arw {
	transform: translateX(4px);
}

/* Header wordmark that wipes in beside the parked globe and stays as the logo.
   Positioned/scaled by JS to track the globe; styling only here.
   font-family inherits the theme's font so it matches the rest of the site —
   set an explicit family here if you want to force the standalone's look. */
#mlx-lockup {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 5;
	white-space: nowrap;
	line-height: 1;
	opacity: 0;
	pointer-events: auto;   /* the logo is clickable (links home) */
	text-decoration: none;
	display: block;
}
#mlx-lockup .mlx-bl-name {
	display: block;
	color: #f4ede4; /* light on the dark field (was deep red for the old white page) */
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1;
}
#mlx-lockup .mlx-bl-sub {
	display: block;
	color: var(--mlx-tan); /* tan accent, legible on dark */
	text-transform: uppercase;
	letter-spacing: .22em;
	font-weight: 700;
	font-size: .32em;
	margin-top: .55em;
}

.mlx-scroll-hint {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 4;
	font-size: .75rem;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--mlx-tan);
	opacity: .7;
	transition: opacity .4s;
	pointer-events: none;
}
.mlx-scroll-hint.mlx-hidden { opacity: 0; }

/* Scroll driver. This is the full scroll budget for the grow-then-settle: the
   JS now maps progress 0->1 across the whole runway height, so the intro
   finishes exactly as the page content sits flush under the parked globe (no
   trailing white gap). 120vh = a tight, quick intro; raise --mlx-runway for a
   longer, slower one. */
#mlx-runway {
	position: relative;
	z-index: 0;
	height: var(--mlx-runway, 120vh);
	pointer-events: none;
}

/* Fallback / broken-JS only: the script (or the head watchdog) adds .mlx-done
   to <html> to tear the overlay down completely and show the plain Nectar site.
   NOTE: this is NOT added on a normal successful run — the globe stays put as
   the logo, so the overlay must remain. */
html.mlx-done #mlx-hero,
html.mlx-done #mlx-runway { display: none !important; }

/* Reduced motion: the script renders a single static parked frame (globe +
   wordmark) and collapses the scroll runway so there's no empty space. */
html.mlx-static #mlx-runway { height: 0 !important; }
html.mlx-static #mlx-bg { display: none !important; }
html.mlx-static .mlx-scroll-hint { display: none !important; }