.hero-video {
	position: relative;
	width: 100%;
	height: 100vh;
	min-height: 100vh;
	overflow: hidden;
	background-color: var(--wp--preset--color--noir);
}

.hero-video__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

body.has-hero-video #masthead {
	opacity: 0;
	transition: opacity 0.5s ease;
}

body.has-hero-video.hero-video-header-visible #masthead {
	opacity: 1;
}

.hero-video__scroll-indicator--white {
	position: absolute;
	bottom: 3rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	width: 36px;
	height: 36px;
	background-image: url(../../../assets/svg/scroll.svg);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	opacity: 0;
	cursor: pointer;
}

.hero-video__scroll-indicator--white.is-visible {
	animation: hero-scroll-indicator-intro 0.6s ease-in-out 0s 1 forwards;
}

@media (max-width: 1000px) {
	.hero-video__scroll-indicator--white {
		width: 25px;
		height: 25px;
		bottom: 2rem;
	}

	.hero-video__scroll-indicator--white.is-visible {
		animation: hero-scroll-indicator-intro-mobile 0.6s ease-in-out 0s 1 forwards;
	}
}

@keyframes hero-scroll-indicator-intro {
	0% {
		opacity: 0;
		bottom: 3rem;
	}

	100% {
		opacity: 1;
		bottom: 3rem;
	}
}

@keyframes hero-scroll-indicator-loop {
	0% {
		bottom: 3rem;
	}

	100% {
		bottom: 2rem;
	}
}

@keyframes hero-scroll-indicator-intro-mobile {
	0% {
		opacity: 0;
		bottom: 2rem;
	}

	100% {
		opacity: 1;
		bottom: 2rem;
	}
}

@keyframes hero-scroll-indicator-loop-mobile {
	0% {
		bottom: 2rem;
	}

	100% {
		bottom: 1rem;
	}
}