/* hero-weave — layout for the growthloom/hero-home pattern.
   Scoped to .hw-hero so nothing leaks into the rest of the theme.
   Recolored from the shipped package defaults (#161826/#9184d9) to match
   theme.json's background/accent tokens (#0A0A0C/#7DD3FC). */

.hw-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	min-height: min(760px, 92vh);

	/* Pin the palette tokens the pattern's markup reads (eyebrow, headline,
	   CTAs) to the dark values regardless of the site's active style
	   variation — the light-weave canvas only glows against black, so this
	   section stays dark even when a light variation is active elsewhere.
	   background/color below read these same custom properties rather
	   than repeating the hex, so the dark values live in exactly one
	   place in this rule. */
	--wp--preset--color--background: #0a0a0c;
	--wp--preset--color--foreground: #f5f5f7;
	--wp--preset--color--muted: #9a9aa2;
	--wp--preset--color--accent: #7dd3fc;

	background: var(--wp--preset--color--background);
	color: var(--wp--preset--color--foreground);
}

/* The canvas: right-hand 58% of the hero, behind everything. */
.hw-hero hero-weave {
	position: absolute;
	top: 0;
	right: 0;
	width: 58%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}

/* One-sided scrim so headline copy stays legible over the light. */
.hw-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: radial-gradient(
		120% 90% at 8% 45%,
		color-mix(in srgb, var(--wp--preset--color--background) 94%, transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--background) 72%, transparent) 38%,
		transparent 68%
	);
}

/* Everything the pattern renders sits above both. */
.hw-hero > *:not(hero-weave):not(.hw-hero__scrim) {
	position: relative;
	z-index: 2;
}

/* Before the script defines the element, reserve its space silently. */
hero-weave:not(:defined) {
	display: block;
	opacity: 0;
}

@media (max-width: 860px) {
	.hw-hero hero-weave {
		width: 100%;
		opacity: 0.55;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hw-hero hero-weave {
		opacity: 0.7;
	}
}