.hero, .epilogue__scene {
	--fg-height: clamp(450px, 84vw, 1560px);
	--fg-overscan: clamp(140px, 62vw - 240px, 850px);
	position: relative;
	width: 100%;
	min-height: 100vh;
	overflow: hidden;
}
.hero__background, .epilogue__background {
	position: absolute;
	inset: 0;
	z-index: 1;
	height: 100%;

}
:is(.hero__background, .epilogue__background ) img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hero__vignette, .epilogue__vignette {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 4;
}
.hero__foreground, .epilogue__foreground {
	position: absolute;
	inset: 0;
	z-index: 3;
	height: 100vh;
	pointer-events: none;

}
:is(.hero__foreground, .epilogue__foreground) img {
	position: absolute;
	bottom: calc(-1 * var(--fg-overscan));
	height: var(--fg-height);
	width: auto;
	object-fit: cover;
	object-position: left bottom;
}
.hero__content, .epilogue__content {
	position: absolute;
	inset: 0;
	padding: 0 var(--space-5);
	z-index: 2;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	flex-direction: column;
	gap: var(--space-3);
}
.hero__title, .epilogue__end {
	font-family: var(--font-display);
	font-size: var(--text-5xl);
	font-weight: var(--weight-regular);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-wide);
	text-shadow: 0 5px 16px rgb(var(--shadow-color));

}
.hero__subtitle, .epilogue__closing-text {
	font-size: var(--text-base);
	font-weight: var(--weight-light);
	line-height: var(--leading-normal);
}
/* -- Hero -- */
.hero__vignette {
	background: linear-gradient(to bottom, rgb(var(--background-color) / 0.16), rgb(var(--background-color) / 0.08) 45%, rgb(var(--background-color)));
}
/* -- Intro Section -- */

.intro {
	position: relative;
	height: 600vh;
}
.intro__viewport {
	position: sticky;
	top: 0;
	width: 100%;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.intro__heading {
	pointer-events: none;
	position: absolute;
	left: 50%;
	text-align: center;
	white-space: nowrap;
	font-family: var(--font-display);
	text-transform: uppercase;
	color: rgb(var(--foreground-color));
	/* Changed this to an interpolation function so we can have start and end values*/
	font-size: calc(var(--text-2xl) + (var(--text-xl) - var(--text-2xl)) * var(--intro-progress, 0));
	top: calc(50% - var(--intro-progress) * 7vh);
	transform: translateX(-50%) translateY(-50%);
}
.intro__panel {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transform: translateY(calc(var(--space-5)));
}
.intro__panel.is-active {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity var(--duration-base) var(--ease), visibility 0s, transform var(--duration-quick);
}
.intro__text {
	width: 100%;
	text-align: center;
	font-weight: var(--weight-light);
	color: rgb(var(--foreground-color) / 0.75);
}
/* -- Epilogue -- */

.epilogue__scene {
	min-height: 108vh;
}
.epilogue__vignette {
	background: linear-gradient(to top, rgb(var(--background-color)), rgb(var(--background-color) / 0.5) 40%, transparent);
}
.epilogue__divider {
	width: 100%;
	height: 150vh;
	/* this is the same color as the top of the background image to create this smooth blend */
	background: linear-gradient(to bottom, transparent, rgb(184 189 220));
}
.epilogue__closing {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: var(--space-6);
	min-height: 100vh;
	color: rgb(var(--foreground-color) / 0.75);
}

.epilogue__closing-dedication {
	font-size: var(--text-sm);
	font-style: italic;
	font-weight: var(--weight-light);
	line-height: var(--leading-normal);
	letter-spacing: var(--tracking-wide);
	color: rgb(var(--muted-color));
}