/* -----------------------------------------------------------------------------
 * Homepage. Loaded only on the front page.
 * -------------------------------------------------------------------------- */

/*
 * Section furniture (.uz-eyebrow, .uz-section-title, .uz-section-lede,
 * .uz-section-head) is shared with the editorial templates and now lives in
 * components.css.
 */

/* ================================ Hero =================================== */
/*
 * A compact cinematic band, not a full-screen splash. The eclipse plate is a
 * raster image; every word over it is live HTML.
 */
.uz-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: min(68vh, 620px);
	padding-block: clamp(3.25rem, 2rem + 5vw, 5rem);
	overflow: hidden;
	isolation: isolate;
	text-align: center;
}

/* The header is translucent and overlaps the hero, so the hero starts below it. */
.uz-hero {
	margin-top: calc(var(--uz-header-height) * -1 - var(--uz-space-lg));
	padding-top: calc(var(--uz-header-height) + 4.25rem);
}

.uz-hero__scene { position: absolute; inset: 0; z-index: -1; }

/* --- Raster plate mode --------------------------------------------------- */
/*
 * Applied only when assets/images/hero-eclipse.png is actually present, so the
 * page never issues a request for a missing file. The artwork is used as
 * supplied — cropped and positioned, never recoloured or redrawn.
 */
.uz-hero--plate .uz-hero__scene { background-color: var(--uz-void-black); }

.uz-hero__plate-fill,
.uz-hero__plate {
	position: absolute;
	inset: 0;
	/*
	 * WebP at ~6% of the PNG's weight, with the original as the fallback. The
	 * plain url() is declared first for engines that do not parse image-set();
	 * engines that do, but cannot decode WebP, pick the PNG from the set. The
	 * PNG is never modified and remains the guaranteed universal source.
	 */
	background-image: url("../images/hero-eclipse.png");
	background-image: image-set(
		url("../images/hero-eclipse.webp") type("image/webp"),
		url("../images/hero-eclipse.png") type("image/png")
	);
	background-repeat: no-repeat;
}

/*
 * Narrow screens crop the plate: there are no gutters to fill, and the crop is
 * biased left of centre so the bright flare drifts off canvas.
 */
.uz-hero__plate { background-position: 44% 48%; background-size: cover; }
.uz-hero__plate-fill { display: none; }

/*
 * Wide screens size the plate by *height* rather than width, so the eclipse is
 * never cut off by a wide viewport. 115% overscans the empty sky above and
 * below the ring — the complete silhouette still clears both edges — which
 * keeps the disc large without forcing a taller hero. The remaining side
 * gutters are filled by a blurred, scaled copy of the same file, so the plate
 * reaches both edges without letterboxing and without a second asset.
 */
@media (min-width: 900px) {
	.uz-hero__plate {
		background-position: center;
		background-size: auto 115%;
		/* Feather the vertical edges so the sharp layer dissolves into the
		   blurred fill instead of meeting it at a hard seam. The eclipse itself
		   sits well inside the untouched middle. */
		-webkit-mask-image: linear-gradient(to right, transparent 0, #000 11%, #000 89%, transparent 100%);
		mask-image: linear-gradient(to right, transparent 0, #000 11%, #000 89%, transparent 100%);
	}

	.uz-hero__plate-fill {
		display: block;
		background-position: center;
		background-size: cover;
		filter: blur(22px) brightness(0.92);
		transform: scale(1.08);
	}
}

/* One single non-repeating star field instance — never tiled. */
.uz-hero__starfield {
	position: absolute;
	inset: 0;
	background-image: url("../img/hero-starfield.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	opacity: 0.55;
}

/*
 * A contained scrim directly beneath the hero copy. It keeps the headline
 * legible where the bright amber rim passes behind the text — especially at
 * narrow widths — without dimming the rim itself or covering the whole scene.
 */
.uz-hero__scene::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 58% 46% at 50% 50%, rgba(3, 7, 13, 0.72) 0%, rgba(3, 7, 13, 0.40) 46%, rgba(3, 7, 13, 0) 74%);
	pointer-events: none;
}

.uz-hero__nebula { position: absolute; border-radius: 50%; filter: blur(60px); }
.uz-hero__nebula--warm {
	right: -10%;
	bottom: -20%;
	width: min(70vw, 900px);
	aspect-ratio: 1;
	background: radial-gradient(circle at 50% 50%, rgba(244, 169, 73, 0.20), rgba(244, 169, 73, 0) 62%);
}
.uz-hero__nebula--cool {
	left: -14%;
	top: -12%;
	width: min(66vw, 820px);
	aspect-ratio: 1;
	background: radial-gradient(circle at 50% 50%, rgba(21, 153, 210, 0.20), rgba(67, 216, 255, 0) 62%);
}

/* --- The drawn eclipse (fallback until the plate is supplied) ------------- */
.uz-hero__eclipse {
	position: absolute;
	top: 50%;
	left: 50%;
	/* Wider than the viewport on small screens so the copy sits inside the dark
	   body of the eclipse rather than across its luminous rim. */
	width: clamp(24rem, 124vw, 46rem);
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
}
@media (min-width: 700px) {
	.uz-hero__eclipse { width: clamp(28rem, 54vw, 46rem); }
}

.uz-hero__rim,
.uz-hero__disc,
.uz-hero__flare { position: absolute; inset: 0; border-radius: 50%; }

/*
 * The rim sits fractionally outside the occluding disc so the ring reads as
 * light escaping from behind it. Without this the disc covers the ring exactly.
 */
.uz-hero__rim { inset: -1.8%; }

/*
 * The rim: a conic sweep clipped to a hairline ring. Amber dominates the right
 * and upper arc, cyan lifts the left edge, and the ring fades at the base.
 */
.uz-hero__rim {
	background: conic-gradient(
		from 220deg,
		rgba(67, 216, 255, 0.55) 0deg,
		rgba(67, 216, 255, 0.25) 40deg,
		rgba(244, 169, 73, 0.10) 80deg,
		rgba(255, 233, 196, 0.95) 150deg,
		#FFF6E4 172deg,
		rgba(244, 169, 73, 0.90) 200deg,
		rgba(244, 169, 73, 0.35) 250deg,
		rgba(67, 216, 255, 0.30) 320deg,
		rgba(67, 216, 255, 0.55) 360deg
	);
	-webkit-mask-image: radial-gradient(circle closest-side, transparent 0 97.4%, #000 98%, #000 100%);
	mask-image: radial-gradient(circle closest-side, transparent 0 97.4%, #000 98%, #000 100%);
	filter: drop-shadow(0 0 16px rgba(244, 169, 73, 0.65)) drop-shadow(0 0 70px rgba(244, 169, 73, 0.32));
}

/* The occluding body: a textured dark disc, not flat black. */
.uz-hero__disc {
	background:
		radial-gradient(circle at 20% 28%, rgba(21, 153, 210, 0.22), rgba(3, 7, 13, 0) 42%),
		radial-gradient(circle at 78% 70%, rgba(134, 93, 255, 0.10), rgba(3, 7, 13, 0) 48%),
		radial-gradient(circle at 50% 50%, #050C15 0%, #03070D 82%);
	box-shadow: inset 0 0 70px rgba(3, 7, 13, 0.75);
}

/* Corona: the light spilling around the occluding body. */
.uz-hero__eclipse::before {
	content: "";
	position: absolute;
	inset: -16%;
	border-radius: 50%;
	background: radial-gradient(circle closest-side, rgba(244, 169, 73, 0.16) 78%, rgba(244, 169, 73, 0) 100%);
	pointer-events: none;
}

/* The bright point where the rim breaks, at roughly four o'clock. */
.uz-hero__flare {
	inset: auto;
	top: 62%;
	left: 92%;
	width: 46%;
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	background-image: url("../img/hero-flare.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* Very slow orbital drift. Disabled entirely under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
	.uz-hero__rim { animation: uz-drift 90s linear infinite; }
	.uz-hero__flare { animation: uz-pulse 9s ease-in-out infinite; }
}
@keyframes uz-drift { to { transform: rotate(360deg); } }
@keyframes uz-pulse {
	0%, 100% { opacity: 0.88; transform: translate(-50%, -50%) scale(1); }
	50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.05); }
}

/* --- Hero content -------------------------------------------------------- */
.uz-hero__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(0.9rem, 0.6rem + 0.8vw, 1.35rem);
}

.uz-hero__eyebrow {
	margin: 0;
	font-family: var(--uz-font-heading);
	font-size: clamp(0.625rem, 0.58rem + 0.22vw, 0.75rem);
	font-weight: 700;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	line-height: 1.75;
	color: var(--uz-human-amber);
}

/*
 * Bee Three, the Adobe Fonts display face. It is genuinely condensed, so the
 * headline is set larger than the old Anybody treatment to occupy the same
 * optical width — the narrowness comes from the typeface, never from a
 * transform or a synthetic width axis. Sized to sit compactly inside the
 * eclipse rather than fill the viewport, so it deliberately does not use the
 * shared --uz-text-display scale.
 */
.uz-hero__title {
	margin: 0;
	font-family: var(--uz-font-bee);
	font-size: clamp(3.5rem, 1.5rem + 7vw, 7rem);
	font-weight: 600;
	font-style: normal;
	line-height: 0.82;
	/* Generously tracked, as in the approved design. Bee Three is narrow enough
	   that the letterforms need the air to read as a display setting. */
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-wrap: balance;
	color: var(--uz-warm-white);
}
.uz-hero__line { display: block; }
.uz-hero__five-thousand { color: var(--uz-electric-cyan); }

.uz-hero__lede {
	max-width: 32rem;
	margin: 0;
	color: var(--uz-warm-white);
	font-size: clamp(0.9375rem, 0.88rem + 0.28vw, 1.0625rem);
	line-height: 1.55;
	opacity: 0.9;
}

.uz-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--uz-space-md);
	justify-content: center;
	margin-top: var(--uz-space-sm);
}

/* --- Hero statistics ------------------------------------------------------ */
/*
 * Live figures, derived at render time from real site data. See
 * uz_home_hero_stats() — nothing here is baked into the artwork.
 */
.uz-hero__stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: start;
	gap: clamp(1.1rem, 0.4rem + 3vw, 2.75rem);
	margin: clamp(1.5rem, 0.9rem + 2vw, 2.75rem) 0 0;
	padding: 0;
	list-style: none;
}

.uz-hero__stat {
	display: grid;
	grid-template-columns: auto auto;
	grid-template-areas:
		"icon value"
		"icon label";
	align-items: center;
	column-gap: 0.55rem;
	text-align: left;
}

.uz-hero__stat-icon {
	grid-area: icon;
	width: 1.5rem;
	height: 1.5rem;
	color: var(--uz-warm-white);
	opacity: 0.72;
}

.uz-hero__stat-value {
	grid-area: value;
	font-family: var(--uz-font-heading);
	font-size: clamp(0.9375rem, 0.86rem + 0.3vw, 1.125rem);
	font-weight: 700;
	line-height: 1.15;
	color: var(--uz-warm-white);
	font-variant-numeric: tabular-nums;
}

.uz-hero__stat-label {
	grid-area: label;
	font-family: var(--uz-font-heading);
	font-size: clamp(0.625rem, 0.6rem + 0.15vw, 0.6875rem);
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	line-height: 1.3;
	color: var(--uz-warm-white);
	opacity: 0.62;
}

/* Hairline separators, wide screens only — they would break up a wrapped row. */
@media (min-width: 900px) {
	.uz-hero__stat + .uz-hero__stat { position: relative; }
	.uz-hero__stat + .uz-hero__stat::before {
		content: "";
		position: absolute;
		left: calc(clamp(1.1rem, 0.4rem + 3vw, 2.75rem) / -2);
		top: 50%;
		width: 3px;
		height: 3px;
		border-radius: 50%;
		transform: translate(-50%, -50%);
		background: var(--uz-warm-white);
		opacity: 0.3;
	}
}

/* --- Hero responsive ------------------------------------------------------ */
@media (max-width: 640px) {
	.uz-hero {
		min-height: min(78vh, 560px);
		padding-inline: 0;
	}

	/*
	 * Bias the crop left of centre so the bright right-hand flare drifts off
	 * canvas and the copy stays on the dark body of the eclipse.
	 */
	.uz-hero__plate { background-position: 44% 48%; }

	.uz-hero__scene::after {
		background: radial-gradient(ellipse 86% 42% at 50% 48%, rgba(3, 7, 13, 0.80) 0%, rgba(3, 7, 13, 0.52) 52%, rgba(3, 7, 13, 0) 80%);
	}

	.uz-hero__eyebrow { letter-spacing: 0.2em; }

	.uz-hero__lede { max-width: 28rem; }

	/* Full-width stacked buttons read better than two cramped pills. */
	.uz-hero__actions {
		flex-direction: column;
		align-items: stretch;
		width: min(100%, 20rem);
		gap: var(--uz-space-sm);
	}
	.uz-hero__actions > * { width: 100%; }

	/* Two clean columns rather than a four-across squeeze. */
	.uz-hero__stats {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: min(100%, 21rem);
		margin-inline: auto;
		gap: 1rem 1.25rem;
	}
	.uz-hero__stat { justify-content: start; }
}

@media (max-width: 380px) {
	.uz-hero__stats { gap: 0.9rem 1.1rem; }
	.uz-hero__stat-icon { width: 1.25rem; height: 1.25rem; }
}

/*
 * The pathway card family (.uz-pathway*, .uz-pathways__grid) moved to
 * components.css in Phase 4: the homepage and every pathway page render the
 * same component from template-parts, so the CSS has to be shared too.
 */

/* The homepage section wrapper stays here; the card component is shared. */
.uz-pathways { border-top: 1px solid var(--uz-border); }

/* ========================= Ideas Worth Becoming ========================== */
.uz-ideas { border-top: 1px solid var(--uz-border); }

.uz-ideas__lead { display: grid; grid-template-columns: 1fr; gap: var(--uz-gutter); align-items: start; }
@media (min-width: 1000px) { .uz-ideas__lead { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--uz-space-3xl); } }

.uz-ideas__intro { text-align: left; }
.uz-ideas__intro .uz-section-title { font-size: calc(var(--uz-text-2xl) * 1.55); }
.uz-ideas__intro .uz-section-lede { font-size: var(--uz-text-base); margin-bottom: var(--uz-space-xl); }

.uz-ideas__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--uz-gutter);
	margin: var(--uz-space-2xl) 0 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 720px) { .uz-ideas__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/*
 * The editorial card family now lives in components.css, shared by the
 * homepage, Discover, every archive, search results and the related rail.
 * Only the homepage-specific grid geometry stays here.
 */

/*
 * The 5000 Practice step component (.uz-practice__steps, .uz-step*) moved to
 * components.css in Phase 4 — it is rendered on the homepage and on all four
 * pathway pages from one shared definition.
 */

/* ========================= Community invitation ========================== */
.uz-invite { border-top: 1px solid var(--uz-border); }

.uz-invite__panel {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--uz-space-2xl);
	overflow: hidden;
	padding: clamp(2rem, 1.2rem + 3vw, 4rem);
	background:
		radial-gradient(ellipse at 88% 18%, rgba(21, 153, 210, 0.20), rgba(7, 21, 37, 0) 58%),
		linear-gradient(135deg, var(--uz-bg-card) 0%, var(--uz-midnight) 100%);
	border: 1px solid var(--uz-border);
	border-radius: var(--uz-radius-lg);
}
@media (min-width: 900px) { .uz-invite__panel { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: var(--uz-space-3xl); } }

.uz-invite__copy { position: relative; z-index: 1; }
.uz-invite__copy .uz-section-title { font-size: calc(var(--uz-text-2xl) * 1.55); max-width: 16ch; }
.uz-invite__copy .uz-section-lede { font-size: var(--uz-text-base); margin-bottom: var(--uz-space-xl); max-width: 40ch; }

.uz-invite__list { position: relative; z-index: 1; margin: 0; padding: 0; list-style: none; display: grid; gap: var(--uz-space-md); }
.uz-invite__list li { display: flex; align-items: center; gap: var(--uz-space-sm); color: var(--uz-warm-white); font-size: var(--uz-text-sm); }
.uz-invite__tick { flex: 0 0 auto; color: var(--uz-electric-cyan); }
.uz-invite__tick .uz-icon { width: 1.375rem; height: 1.375rem; }

/* A contained luminous horizon rather than a photographic globe. */
.uz-invite__glow {
	position: absolute;
	right: -18%;
	bottom: -62%;
	width: min(64%, 34rem);
	aspect-ratio: 1;
	border-radius: 50%;
	background:
		radial-gradient(circle at 50% 8%, rgba(244, 169, 73, 0.30), rgba(244, 169, 73, 0) 34%),
		radial-gradient(circle at 50% 50%, #0B1B2A 0 62%, rgba(11, 27, 42, 0) 63%);
	box-shadow: 0 -14px 60px rgba(67, 216, 255, 0.22), inset 0 8px 40px rgba(21, 153, 210, 0.28);
	pointer-events: none;
}