/* ==========================================================================
   .leqa-hero — the showpiece (T-B)
   The one memorable atmospheric motif: a fixed signal-grid + radial glow with a
   thin animated loudness-meter. CSS-first, token-only, reduced-motion aware.
   Reveal hooks ([data-leqa-reveal]) get a staggered entrance; main.js adds
   .is-revealed on intersect — but the hero also self-reveals on load so it is
   never blank if JS is slow/absent (see "JS-disabled fallback" below).
   ========================================================================== */

.leqa-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(var(--leqa-space-9), 12vw, calc(var(--leqa-space-10) + var(--leqa-space-6)));
}

/* ---- Atmospheric backdrop ---- */
.leqa-hero__backdrop {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

/* Fine signal grid echoing the logo; fades out toward the bottom. */
.leqa-hero__grid {
	position: absolute;
	inset: -2px;
	background-image:
		linear-gradient(to right, var(--leqa-surface-line) 1px, transparent 1px),
		linear-gradient(to bottom, var(--leqa-surface-line) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(120% 90% at 50% 8%, #000 0%, rgba(0, 0, 0, 0.55) 42%, transparent 78%);
	mask-image: radial-gradient(120% 90% at 50% 8%, #000 0%, rgba(0, 0, 0, 0.55) 42%, transparent 78%);
	opacity: 0.5;
}

/* Single signature radial glow — the only "light source" on the page. */
.leqa-hero__glow {
	position: absolute;
	top: -28%;
	left: 50%;
	width: min(1100px, 120vw);
	aspect-ratio: 1 / 1;
	transform: translateX(-50%);
	background:
		radial-gradient(closest-side, var(--leqa-glow) 0%, rgba(114, 255, 100, 0.10) 38%, transparent 70%);
	opacity: 0.85;
	filter: blur(6px);
	animation: leqa-hero-glow 9s var(--leqa-ease-in-out) infinite alternate;
}

@keyframes leqa-hero-glow {
	from { transform: translateX(-50%) scale(0.96); opacity: 0.7; }
	to   { transform: translateX(-50%) scale(1.06); opacity: 0.95; }
}

/* ---- Loudness-meter motif (thin bars along the bottom of the hero) ---- */
.leqa-hero__meter {
	position: absolute;
	left: 50%;
	bottom: clamp(var(--leqa-space-6), 6vw, var(--leqa-space-9));
	transform: translateX(-50%);
	display: flex;
	align-items: flex-end;
	gap: clamp(3px, 0.8vw, 7px);
	width: min(var(--leqa-maxw), calc(100% - var(--leqa-gutter) * 2));
	height: clamp(54px, 9vw, 96px);
	-webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
	opacity: 0.55;
}

.leqa-hero__bar {
	flex: 1 1 0;
	height: var(--leqa-bar-h, 40%);
	min-width: 2px;
	border-radius: var(--leqa-radius-pill);
	background: linear-gradient(to top, var(--leqa-accent), color-mix(in srgb, var(--leqa-accent) 24%, transparent));
	transform-origin: bottom center;
	animation: leqa-hero-bar 2.4s var(--leqa-ease-in-out) infinite alternate;
	animation-delay: calc(var(--leqa-bar-i, 0) * -90ms);
	will-change: transform;
}

@keyframes leqa-hero-bar {
	0%   { transform: scaleY(0.42); }
	100% { transform: scaleY(1); }
}

/* ---- Content ---- */
.leqa-hero__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: 860px;
}

.leqa-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--leqa-space-3);
	flex-wrap: wrap;
	margin: 0 0 var(--leqa-space-5);
}

.leqa-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--leqa-space-2);
	padding: var(--leqa-space-1) var(--leqa-space-3);
	border: var(--leqa-border-width) solid var(--leqa-border);
	border-radius: var(--leqa-radius-pill);
	background: var(--leqa-bg-elev);
	color: var(--leqa-text-muted);
	letter-spacing: var(--leqa-tracking-eyebrow);
}

.leqa-hero__badge-dot {
	width: 7px;
	height: 7px;
	border-radius: 5px;
	background: var(--leqa-accent);
	box-shadow: 0 0 0 0 var(--leqa-glow);
	animation: leqa-hero-pulse 2.6s var(--leqa-ease-in-out) infinite;
}

@keyframes leqa-hero-pulse {
	0%, 100% { box-shadow: 0 0 0 0 var(--leqa-glow); }
	50%      { box-shadow: 0 0 0 5px transparent; }
}

.leqa-hero__version {
	color: var(--leqa-accent);
	font-size: var(--leqa-fs-small);
	letter-spacing: 0;
}

.leqa-hero__title {
	margin: 0;
	font-family: var(--leqa-font-display);
	font-optical-sizing: auto;
	font-weight: var(--leqa-weight-semibold);
	font-size: var(--leqa-fs-h1);
	line-height: var(--leqa-lh-tight);
	letter-spacing: var(--leqa-tracking-tight);
	color: var(--leqa-text);
	text-wrap: balance;
}

.leqa-hero__accent {
	font-style: italic;
	font-weight: var(--leqa-weight-medium);
	color: var(--leqa-accent);
}

.leqa-hero__lead {
	margin: var(--leqa-space-5) 0 0;
	max-width: 56ch;
	font-size: var(--leqa-fs-lead);
	line-height: var(--leqa-lh-body);
}

.leqa-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--leqa-space-4);
	margin-top: var(--leqa-space-7);
}

.leqa-hero__cta,
.leqa-hero__secondary {
	gap: var(--leqa-space-2);
}

.leqa-hero__cta-icon { flex: none; }

.leqa-hero__secondary-icon {
	flex: none;
	transition: transform var(--leqa-dur) var(--leqa-ease);
}

.leqa-hero__secondary:hover .leqa-hero__secondary-icon,
.leqa-hero__secondary:focus-visible .leqa-hero__secondary-icon {
	transform: translateX(3px);
}

/* ---- Meta strip ---- */
.leqa-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--leqa-space-7);
	margin: var(--leqa-space-8) 0 0;
	padding-top: var(--leqa-space-5);
	border-top: var(--leqa-border-width) solid var(--leqa-border);
	width: 100%;
	max-width: 640px;
}

.leqa-hero__meta-item { margin: 0; }

.leqa-hero__meta-label {
	margin: 0;
	font-size: var(--leqa-fs-eyebrow);
	font-weight: var(--leqa-weight-semibold);
	letter-spacing: var(--leqa-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--leqa-text-faint);
}

.leqa-hero__meta-value {
	margin: var(--leqa-space-1) 0 0;
	font-size: var(--leqa-fs-body);
	font-weight: var(--leqa-weight-medium);
	color: var(--leqa-text);
}

/* ==========================================================================
   Staggered reveal — load + scroll. Hidden initial state only applies when JS
   is present (html.js); without JS, content shows immediately (no FOUC trap).
   main.js adds .is-revealed; we also key the first paint off the hero so it
   animates on load even before any scroll.
   ========================================================================== */
.leqa-js .leqa-hero [data-leqa-reveal] {
	opacity: 0;
	transform: translateY(10px);
	transition:
		opacity var(--leqa-dur-slow) var(--leqa-ease),
		transform var(--leqa-dur-slow) var(--leqa-ease);
}

.leqa-js .leqa-hero [data-leqa-reveal].is-revealed,
.leqa-js .leqa-hero.is-loaded [data-leqa-reveal] {
	opacity: 1;
	transform: none;
}

/* Stagger the hero's own reveal children for a single orchestrated load.
   main.js adds .is-loaded to .leqa-hero on load (the observer sets .is-revealed
   on individual children; the hero block itself keys off .is-loaded). */
.leqa-js .leqa-hero.is-loaded [data-leqa-reveal]:nth-child(1) { transition-delay: 60ms; }
.leqa-js .leqa-hero.is-loaded [data-leqa-reveal]:nth-child(2) { transition-delay: 140ms; }
.leqa-js .leqa-hero.is-loaded [data-leqa-reveal]:nth-child(3) { transition-delay: 220ms; }
.leqa-js .leqa-hero.is-loaded [data-leqa-reveal]:nth-child(4) { transition-delay: 300ms; }
.leqa-js .leqa-hero.is-loaded [data-leqa-reveal]:nth-child(5) { transition-delay: 380ms; }

/* ==========================================================================
   Reduced motion — freeze the glow/meter, drop reveal transforms.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.leqa-hero__glow,
	.leqa-hero__bar,
	.leqa-hero__badge-dot {
		animation: none;
	}

	.leqa-hero__bar { transform: none; }

	.leqa-js .leqa-hero [data-leqa-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ==========================================================================
   Narrow screens
   ========================================================================== */
@media (max-width: 640px) {
	.leqa-hero__actions { width: 100%; }
	.leqa-hero__cta { flex: 1 1 auto; justify-content: center; }
	.leqa-hero__meta { gap: var(--leqa-space-6); }
}