/*
 * Multicharts Universe — Home Hero
 *
 * Full-viewport opening. Layered cosmic background built entirely from CSS:
 *   - Three star layers (far / mid / near) using box-shadow constellations
 *   - Two slow-spinning gold orbits
 *   - Subtle gold nebula glow
 *
 * No images. No JS. Performant and renders instantly.
 *
 * The constellation technique: a single 1x1 element with hundreds of
 * box-shadows positioned at pseudo-random offsets. Browsers paint this
 * extremely efficiently and we get parallax for free by animating the
 * containers at different speeds.
 */

.mcu-hero {
	position: relative;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-block: var(--space-3xl) var(--space-xl);
	overflow: hidden;
	background:
		radial-gradient(ellipse at 50% 40%, var(--color-cosmic-night) 0%, var(--color-void) 80%);
	isolation: isolate;
}

/* Vignette — strong dark corners pulling focus inward */
.mcu-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(
		ellipse at 50% 50%,
		transparent 0%,
		transparent 40%,
		rgba(0, 0, 0, 0.4) 75%,
		rgba(0, 0, 0, 0.75) 100%
	);
}

/* Hero used to paint its own grid via ::after, but the observatory grid is
 * now site-wide via body background (see base.css), so the hero would
 * double-layer if it kept its own. ::after is freed for future hero-only
 * decorations (e.g. animated meteor sweep).
 */

/* === Background layers ================================================= */
.mcu-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

/* --- Stars: box-shadow constellation ----------------------------------- */
.mcu-hero__stars {
	position: absolute;
	top: 0; left: 0;
	width: 2px;
	height: 2px;
	border-radius: 50%;
	background: transparent;
	animation: mcu-drift var(--mcu-drift-dur, 180s) linear infinite;
	will-change: transform;
}

.mcu-hero__stars--far {
	--mcu-drift-dur: 240s;
	box-shadow:
		73vw 14vh 0 #fff, 12vw 88vh 0 #fff8e7, 47vw 31vh 0 #fff,
		19vw 4vh 0 #fff, 95vw 67vh 0 #fff8e7, 8vw 49vh 0 #fff,
		34vw 75vh 0 #fff, 67vw 92vh 0 #fff8e7, 84vw 22vh 0 #fff,
		51vw 58vh 0 #fff, 28vw 41vh 0 #fff, 62vw 7vh 0 #fff8e7,
		3vw 36vh 0 #fff, 79vw 84vh 0 #fff, 41vw 11vh 0 #fff8e7,
		56vw 25vh 0 #fff, 17vw 71vh 0 #fff, 88vw 47vh 0 #fff,
		24vw 96vh 0 #fff8e7, 70vw 53vh 0 #fff, 38vw 18vh 0 #fff,
		91vw 81vh 0 #fff, 6vw 63vh 0 #fff, 59vw 38vh 0 #fff8e7,
		31vw 9vh 0 #fff, 76vw 76vh 0 #fff, 45vw 64vh 0 #fff,
		22vw 27vh 0 #fff8e7, 82vw 12vh 0 #fff, 14vw 56vh 0 #fff;
	opacity: 0.6;
}

.mcu-hero__stars--mid {
	--mcu-drift-dur: 160s;
	width: 2.5px; height: 2.5px;
	box-shadow:
		42vw 23vh 0 0.5px #fff, 87vw 61vh 0 0.5px #fff,
		16vw 78vh 0 0.5px #fffce0, 64vw 45vh 0 0.5px #fff,
		29vw 16vh 0 0.5px #fff, 53vw 89vh 0 0.5px #fffce0,
		77vw 33vh 0 0.5px #fff, 8vw 55vh 0 0.5px #fff,
		38vw 71vh 0 0.5px #fffce0, 92vw 19vh 0 0.5px #fff,
		60vw 8vh 0 0.5px #fff, 22vw 39vh 0 0.5px #fff,
		71vw 84vh 0 0.5px #fffce0, 47vw 51vh 0 0.5px #fff,
		11vw 28vh 0 0.5px #fff, 84vw 95vh 0 0.5px #fff,
		35vw 4vh 0 0.5px #fffce0, 58vw 67vh 0 0.5px #fff,
		18vw 41vh 0 0.5px #fff, 81vw 73vh 0 0.5px #fff;
	opacity: 0.8;
	animation: mcu-twinkle 3s ease-in-out infinite alternate,
	           mcu-drift var(--mcu-drift-dur) linear infinite;
}

.mcu-hero__stars--near {
	--mcu-drift-dur: 100s;
	width: 3px; height: 3px;
	box-shadow:
		25vw 35vh 0 1px #d4af37, 68vw 62vh 0 1px #fff,
		13vw 19vh 0 1px #fff, 81vw 87vh 0 1px #d4af37,
		44vw 7vh 0 1px #fff, 90vw 44vh 0 1px #fff,
		7vw 73vh 0 1px #d4af37, 57vw 25vh 0 1px #fff,
		33vw 91vh 0 1px #fff, 74vw 15vh 0 1px #d4af37;
	opacity: 0.9;
	animation: mcu-twinkle 5s ease-in-out infinite alternate,
	           mcu-drift var(--mcu-drift-dur) linear infinite;
}

@keyframes mcu-twinkle {
	0%, 100% { opacity: 0.6; }
	50%      { opacity: 1; }
}

@keyframes mcu-drift {
	0%   { transform: translateY(0); }
	100% { transform: translateY(-10vh); }
}

/* --- Orbits: thin gold rings, slowly rotating -------------------------- */
.mcu-hero__orbit {
	position: absolute;
	top: 50%; left: 50%;
	border: 1px solid var(--color-border-subtle);
	border-radius: 50%;
	transform: translate(-50%, -50%) rotate(0deg);
	animation: mcu-orbit var(--mcu-orbit-dur, 120s) linear infinite;
	will-change: transform;
	pointer-events: none;
}
.mcu-hero__orbit::before {
	content: '';
	position: absolute;
	top: -3px;
	left: 50%;
	width: 6px;
	height: 6px;
	background: var(--color-gold-bright);
	border-radius: 50%;
	box-shadow: var(--glow-gold-md);
	transform: translateX(-50%);
}
.mcu-hero__orbit--1 {
	--mcu-orbit-dur: 90s;
	width: 110vh;
	height: 110vh;
}
.mcu-hero__orbit--2 {
	--mcu-orbit-dur: 160s;
	width: 180vh;
	height: 180vh;
	opacity: 0.5;
	animation-direction: reverse;
}
@keyframes mcu-orbit {
	0%   { transform: translate(-50%, -50%) rotate(0deg); }
	100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* --- Soft gold nebula glow behind the logo ----------------------------- */
.mcu-hero__nebula {
	position: absolute;
	top: 40%;
	left: 50%;
	width: 70vmin;
	height: 70vmin;
	background:
		radial-gradient(circle at 40% 40%, rgba(212, 175, 55, 0.22) 0%, transparent 50%),
		radial-gradient(circle at 60% 60%, rgba(139, 105, 20, 0.18) 0%, transparent 50%),
		radial-gradient(circle at center, rgba(212, 175, 55, 0.08) 0%, transparent 70%);
	transform: translate(-50%, -50%);
	filter: blur(50px);
	animation: mcu-pulse var(--dur-glacial) ease-in-out infinite alternate;
}

/* --- Faint candlestick silhouettes — trading theme woven into space ---- */
.mcu-hero__bg::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		/* Tall thin "candles" of varying heights, very low opacity */
		linear-gradient(180deg, transparent 30%, rgba(212, 175, 55, 0.05) 30%, rgba(212, 175, 55, 0.05) 70%, transparent 70%),
		linear-gradient(180deg, transparent 45%, rgba(212, 175, 55, 0.04) 45%, rgba(212, 175, 55, 0.04) 60%, transparent 60%);
	background-size: 100vw 100vh, 100vw 100vh;
	background-position: 12% 0%, 78% 0%;
	background-repeat: no-repeat;
	mix-blend-mode: screen;
	opacity: 0.35;
}
@keyframes mcu-pulse {
	0%   { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
	100% { opacity: 1;   transform: translate(-50%, -50%) scale(1.08); }
}

/* === Foreground content ================================================ */
.mcu-hero__inner {
	position: relative;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-md);
}

.mcu-hero__logo {
	width: clamp(120px, 18vmin, 200px);
	height: auto;
	margin-bottom: var(--space-md);
	filter: drop-shadow(0 0 32px rgba(212, 175, 55, 0.4));
	animation: mcu-rise 1.2s var(--ease-out-soft) both,
	           mcu-float 6s ease-in-out infinite;
}
@keyframes mcu-rise {
	from { opacity: 0; transform: translateY(20px) scale(0.96); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes mcu-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-8px); }
}

.mcu-hero__eyebrow {
	font-family: var(--font-body);
	font-size: clamp(0.7rem, 1.4vw, 0.85rem);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-widest);
	text-transform: uppercase;
	color: var(--color-gold);
	margin: 0;
	max-width: none;
	animation: mcu-rise 1.2s 0.2s var(--ease-out-soft) both;
}

.mcu-hero__title {
	font-family: var(--font-display);
	font-size: var(--text-display);
	font-weight: var(--weight-light);
	line-height: 0.95;
	letter-spacing: var(--tracking-tight);
	color: var(--color-text-primary);
	margin: 0;
	animation: mcu-rise 1.2s 0.35s var(--ease-out-soft) both;
}
.mcu-hero__title-line-1 { display: block; }
.mcu-hero__title-line-2 {
	display: block;
	font-style: italic;
	background: linear-gradient(135deg, var(--color-gold-bright) 0%, var(--color-gold) 50%, var(--color-gold-deep) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.mcu-hero__lead {
	font-family: var(--font-display);
	font-size: clamp(1.2rem, 2.5vw, 1.75rem);
	font-style: italic;
	line-height: var(--leading-snug);
	color: var(--color-text-secondary);
	max-width: 28ch;
	margin: var(--space-sm) auto 0;
	animation: mcu-rise 1.2s 0.5s var(--ease-out-soft) both;
}

.mcu-hero__cta-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-sm);
	margin-top: var(--space-md);
	animation: mcu-rise 1.2s 0.65s var(--ease-out-soft) both;
}

.mcu-hero__cta {
	font-size: var(--text-base);
	padding: 1em 2.5em;
}
.mcu-hero__cta-arrow {
	display: inline-block;
	transition: transform var(--dur-base) var(--ease-spring);
}
.mcu-hero__cta:hover .mcu-hero__cta-arrow { transform: translateX(6px); }

/* === Scroll hint ======================================================= */
.mcu-hero__scroll-hint {
	position: absolute;
	bottom: var(--space-lg);
	left: 50%;
	transform: translateX(-50%);
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-xs);
	color: var(--color-text-muted);
	font-size: 0.65rem;
	letter-spacing: var(--tracking-widest);
	text-transform: uppercase;
	background: none;
	animation: mcu-rise 1.2s 1s var(--ease-out-soft) both;
}
.mcu-hero__scroll-hint:hover { color: var(--color-gold-bright); background: none; }
.mcu-hero__scroll-icon {
	display: inline-block;
}
.mcu-hero__scroll-dot {
	animation: mcu-scroll-dot 1.6s var(--ease-celestial) infinite;
}
@keyframes mcu-scroll-dot {
	0%   { transform: translateY(0);  opacity: 1; }
	60%  { transform: translateY(6px); opacity: 0; }
	100% { transform: translateY(0);  opacity: 0; }
}

/* === Legacy canvas: holds existing front-page content (metaslider etc) === */
.mcu-legacy-canvas {
	padding-block: var(--space-2xl);
	background: linear-gradient(180deg, var(--color-void) 0%, var(--color-deep-space) 100%);
}
.mcu-legacy-canvas img { border-radius: var(--radius-md); }