:root {
	--purple-hsl: 255, 60%, 60%;
	--overlay-blurple: hsla(var(--purple-hsl), 0.2);
}

:root[data-theme="light"] {
	--purple-hsl: 255, 85%, 65%;
}

[data-has-hero] .page {
	background:
		linear-gradient(215deg, var(--overlay-blurple), transparent 40%),
		radial-gradient(var(--overlay-blurple), transparent 40%) no-repeat -60vw -40vh / 105vw 200vh,
		radial-gradient(var(--overlay-blurple), transparent 65%) no-repeat 50% calc(
			100% +
			20rem
		) /
		60rem 30rem;
}

[data-has-hero] header {
	border-bottom: 1px solid transparent;
	background-color: transparent;
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
}

[data-has-hero] .hero > img {
	filter: drop-shadow(0 0 3rem var(--overlay-blurple));
}