/* Homepage-only WebGL atmosphere. The static swoop is reserved for fallback states. */

body.home .ux-font-home:has(> .ux-font-home__hero) {
	position: relative;
	display: grid;
	min-height: clamp(38rem, 78vh, 56rem);
	overflow: hidden;
	isolation: isolate;
	background: var(--ux-font-color-charcoal);
	color: var(--ux-font-color-ivory);
}

body.home .ux-font-home:has(> .ux-font-home__hero):not(.is-home-dither-live) {
	background: var(--ux-font-color-charcoal) url("../images/dither-swoop.png") right center / cover no-repeat;
}

body.home .ux-font-home__hero {
	position: relative;
	z-index: 2;
	width: min(100%, 54rem);
	min-height: clamp(38rem, 78vh, 56rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: inherit;
}

body.home .ux-font-home-dither__canvas {
	position: absolute;
	z-index: 1;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	opacity: 0;
	pointer-events: none;
}

body.home .ux-font-home.is-home-dither-live .ux-font-home-dither__canvas {
	opacity: 1;
}

body.home .ux-font-home__hero .is-style-outline .wp-block-button__link {
	color: var(--ux-font-color-ivory);
	text-decoration-color: var(--ux-font-color-orange);
}

body.home .ux-font-home__hero .wp-block-button__link {
	border-color: var(--ux-font-color-ivory);
}

body.home .ux-font-home__hero .wp-block-button__link:hover {
	background: var(--ux-font-color-ivory);
	color: var(--ux-font-color-charcoal);
}

body.home .ux-font-home__hero .is-style-outline .wp-block-button__link:hover {
	background: transparent;
	color: var(--ux-font-color-ivory);
}

body.home .ux-font-home:has(> .ux-font-home__hero) + .ux-font-home {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

body.home .ux-font-home:has(> .ux-font-home__hero) + .ux-font-home::after {
	position: absolute;
	z-index: 0;
	right: -11rem;
	bottom: -14rem;
	width: min(48vw, 42rem);
	height: min(48vw, 42rem);
	background: url("../images/dither-swoop.png") right bottom / auto 150% no-repeat;
	clip-path: ellipse(53% 46% at 52% 48%);
	content: "";
	pointer-events: none;
}

body.home .ux-font-home:has(> .ux-font-home__hero) + .ux-font-home > * {
	position: relative;
	z-index: 1;
}

@media (max-width: 48rem) {
	body.home .ux-font-home:has(> .ux-font-home__hero) {
		background: var(--ux-font-color-charcoal);
	}

	body.home .ux-font-home-dither__canvas {
		display: none;
	}

	body.home .ux-font-home:has(> .ux-font-home__hero),
	body.home .ux-font-home__hero {
	min-height: 31rem;
	}

	body.home .ux-font-home:has(> .ux-font-home__hero) + .ux-font-home::after {
	right: -10rem;
	bottom: -12rem;
	width: min(70vw, 28rem);
	height: min(70vw, 28rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	body.home .ux-font-home:has(> .ux-font-home__hero) {
		background: var(--ux-font-color-charcoal) url("../images/dither-swoop.png") right center / cover no-repeat;
	}

	body.home .ux-font-home-dither__canvas {
		display: none;
	}
}