body {
	background-image:
		linear-gradient(180deg, rgba(7, 6, 10, 0.78), rgba(7, 6, 10, 0.92)),
		image-set(
			url("../images/stage-texture.webp") type("image/webp"),
			url("../images/stage-texture.jpg") type("image/jpeg")
		);
}

.hazard-bar,
.hazard-bar--footer {
	background-color: var(--yellow);
	background-image: image-set(
		url("../images/hazard-tape-sm.webp") type("image/webp"),
		url("../images/hazard-tape-sm.jpg") type("image/jpeg")
	);
	background-repeat: repeat-x;
	background-position: center;
	background-size: auto 100%;
}

.hero--stage {
	--stage-y: 0;
	position: relative;
	overflow: hidden;
	min-height: min(88vh, 860px);
	display: grid;
	align-items: end;
	padding: 72px 0 56px;
	background-color: #05040a;
	background-image: none;
}

.hero__layers {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.hero__layer {
	position: absolute;
	inset: -8% 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	will-change: transform;
}

.hero__layer--stage {
	inset: 0;
	background-image: image-set(
		url("../layers/hero-stage-sm.webp") type("image/webp"),
		url("../layers/hero-stage-sm.jpg") type("image/jpeg")
	);
	transform: translate3d(0, calc(var(--stage-y) * 0.12px), 0) scale(1.06);
}

.hero__layer--lights {
	mix-blend-mode: screen;
	opacity: 0.92;
	background-image: image-set(
		url("../layers/hero-lights-sm.webp") type("image/webp"),
		url("../layers/hero-lights-sm.jpg") type("image/jpeg")
	);
	transform: translate3d(0, calc(var(--stage-y) * 0.3px), 0);
	animation: hero-lights-sway 16s ease-in-out infinite alternate;
}

.hero__layer--smoke {
	top: auto;
	bottom: -6%;
	height: 64%;
	mix-blend-mode: screen;
	opacity: 0.88;
	background-position: center bottom;
	background-image: image-set(
		url("../layers/hero-smoke-sm.webp") type("image/webp"),
		url("../layers/hero-smoke-sm.jpg") type("image/jpeg")
	);
	transform: translate3d(0, calc(var(--stage-y) * 0.48px), 0);
	animation: hero-smoke-drift 26s linear infinite alternate;
}

@media (min-width: 700px) {
	.hero__layer--stage {
		background-image: image-set(
			url("../layers/hero-stage.webp") type("image/webp"),
			url("../layers/hero-stage.jpg") type("image/jpeg")
		);
	}

	.hero__layer--lights {
		background-image: image-set(
			url("../layers/hero-lights.webp") type("image/webp"),
			url("../layers/hero-lights.jpg") type("image/jpeg")
		);
	}

	.hero__layer--smoke {
		background-image: image-set(
			url("../layers/hero-smoke.webp") type("image/webp"),
			url("../layers/hero-smoke.jpg") type("image/jpeg")
		);
	}
}

.hero__layers::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 58%;
	background: linear-gradient(180deg, transparent, rgba(7, 6, 10, 0.82));
}

/* No z-index/transform here: a stacking context would isolate the wordmark's screen blend from the stage layers. */
.hero--stage .hero__copy {
	position: relative;
	z-index: auto;
}

.hero--stage .hero__title {
	margin: 0 0 12px;
	filter: none;
}

.hero--stage .hero__title picture,
.hero--stage .hero__wordmark {
	display: block;
	width: min(920px, 100%);
	height: auto;
}

.hero--stage .hero__wordmark {
	mix-blend-mode: screen;
	filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.55));
}

.page-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0.28;
	mix-blend-mode: screen;
	background-image: image-set(
		url("../layers/hero-lights-sm.webp") type("image/webp"),
		url("../layers/hero-lights-sm.jpg") type("image/jpeg")
	);
	background-position: center top;
	background-size: cover;
}

@media (min-width: 700px) {
	.page-hero::before {
		background-image: image-set(
			url("../layers/hero-lights.webp") type("image/webp"),
			url("../layers/hero-lights.jpg") type("image/jpeg")
		);
	}
}

.page-hero .wrap {
	position: relative;
	z-index: 1;
}

@keyframes hero-lights-sway {
	from {
		background-position: 46% 38%;
	}

	to {
		background-position: 56% 50%;
	}
}

@keyframes hero-smoke-drift {
	from {
		background-position: 18% 100%;
	}

	to {
		background-position: 82% 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero__layer,
	.hero--stage .hero__copy {
		transform: none;
		animation: none;
		will-change: auto;
	}

	.marquee__track {
		animation: none;
	}
}