header {
	position: relative;
	font-size: initial;
	isolation: isolate;
	margin-bottom: max(-50px, -10vw);

	.text-container {
		overflow: hidden;
		max-width: 100vw;
		text-shadow:
			0.05em 0 0.15em var(--color-main-background),
			0.2em 0.05em 0.01em var(--color-main-background),
			0.1em 0.025em 0 var(--color-main-background);

		@media (prefers-reduced-motion: reduce) {
			overflow: initial;
			max-width: unset;
			display: inline;
			white-space: nowrap;
		}
	}

	&::before,
	&::after {
		content: "";
		pointer-events: none;
		--circle-diameter: max(33vw, 400px);

		position: absolute;
		width: var(--circle-diameter);
		border-radius: var(--circle-diameter);
		height: var(--circle-diameter);
		left: 50%;
		top: 50%;
		translate: -50% -50%;
		overflow: hidden;

		z-index: -2;
	}

	&::before {
		background: var(--color-secondary);
	}

	&::after {
		box-shadow: inset 0 25vw var(--circle-diameter)
			var(--color-main-background);
		border: solid var(--color-main);

		z-index: -1;

		@media not (prefers-reduced-motion: reduce), (not (print)) {
			animation: spotlight-rotation 60s ease infinite;
		}
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-family: ElongatedPills, sans-serif;
		text-transform: uppercase;
		font-weight: 400;
		margin-block: 0;

		position: relative;
	}

	h1,
	h2 {
		font-size: min(15rem, 30vw);
	}

	.title {
		transform: skewX(-20deg);
	}

	.subtitle {
		transform: skewX(20deg);
		font-size: 50%;
	}

	.subtitle-container {
		position: absolute;
		top: 0;
		z-index: -1;
		color: var(--color-secondary);

		@media (prefers-reduced-motion: reduce) {
			position: relative;
			z-index: initial;
		}
	}
}