.hero-stack {
	position: relative;
}

.hero {
	--p: 0;
	--header-h: 90px;
	position: sticky;
	top: var(--header-h);
	margin-top: var(--header-h);
	height: calc(100vh - var(--header-h));
	height: calc(100svh - var(--header-h));
	min-height: 520px;
	max-height: 1080px;
	overflow: hidden;
	z-index: 0;
	background: #0f0f0f;
}

.hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* сдвиг вниз должен быть меньше половины прироста зума, иначе сверху открывается край */
	transform: translate3d(0, calc(var(--p) * 4%), 0) scale(calc(1 + var(--p) * .12));
	will-change: transform;
}

.hero__dim {
	position: absolute;
	inset: 0;
	background: #080808;
	opacity: calc(var(--p) * .65);
	pointer-events: none;
}

.hero__content {
	position: relative;
	z-index: 1;
	height: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	transform: translate3d(0, calc(var(--p) * -18vh), 0);
	opacity: calc(1 - var(--p) * 1.5);
	will-change: transform, opacity;
	width: 100%;
	max-width: 1548px;
	margin: 0 auto;
}

body.dark .hero__content {
	width: 100%;
	max-width: 1920px;
}


.hero__content .hero-slide__content {
	width: 100%;
	margin: 0 0 40px;
	padding: 52px 16px !important;
}

.hero__content .hero-slide__content p {
	text-transform: none;
	margin-bottom: 32px !important;
}

.hero__buttons {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
}

.hero__btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 340px;
	height: 70px;
	padding: 0 48px;
	background: center / 100% 100% no-repeat;
	font-family: Colus;
	font-size: 22px;
	line-height: 1;
	text-transform: uppercase;
	filter: drop-shadow(0px 2px 2px #0000004D);
	transition: all 250ms ease-out;
}

.hero__btn:hover {
	filter: drop-shadow(0px 3px 3px #00000073);
	transform: scale(1.02);
}

.hero__btn--red {
	background-image: url(../assets/simple_red.png);
	color: var(--grey-20) !important;
}

.hero__btn--white {
	background-image: url(../assets/white3.png);
	color: var(--primary-black) !important;
}

.hero__btn--white:hover {
	color: #AA0909 !important;
}

.hero__btn--external::after {
	content: "";
	position: absolute;
	right: 26px;
	top: 50%;
	width: 18px;
	height: 18px;
	margin-top: -9px;
	background: url(../assets/go.svg) center / contain no-repeat;
}

body.dark .hero__btn--white {
	background-image: url(../assets/black3.png);
	color: #F5F5F5 !important;
}

body.dark .hero__btn--white:hover {
	color: #BD9C49 !important;
}

body.dark .hero__btn--external::after {
	background-image: url(../assets/go_black.svg);
}

.page-sheet {
	position: relative;
	z-index: 1;
	background: url(../assets/back.jpg);
	box-shadow: 0 -16px 32px rgba(0, 0, 0, .35);
}

body.dark .page-sheet {
	background: url(../assets/back_dark.jpg);
}

@media (max-width: 1440px) {
	.hero {
		--header-h: 72px;
	}

	.hero__content .hero-slide__content {
		padding: 36px 16px 32px !important;
	}

	.hero__content .hero-slide__content p {
		margin-bottom: 24px !important;
	}

	.hero__btn {
		width: 300px;
		height: 60px;
		font-size: 18px;
	}
}

@media (max-width: 640px) {

	/* без параллакса; вторая кнопка ниже первого экрана — появляется при скролле */
	.hero {
		--header-h: 65px;
		--below-fold: 76px;
		position: relative;
		top: 0;
		height: calc(100vh - var(--header-h) + var(--below-fold));
		height: calc(100svh - var(--header-h) + var(--below-fold));
		min-height: calc(480px + var(--below-fold));
	}

	.hero__video,
	.hero__content {
		transform: none;
		opacity: 1;
	}

	.hero__dim {
		display: none;
	}

	.hero__content .hero-slide__content {
		margin-bottom: 0;
		padding: 28px 16px 24px !important;
	}

	.hero__content .hero-slide__content h1 {
		font-size: 40px;
		line-height: 44px;
	}

	.hero__btn {
		width: 256px;
		height: 52px;
		padding: 0 24px;
		font-size: 18px;
	}

	.hero__buttons {
		flex-direction: column;
		align-items: center;
		gap: 12px;
	}
}

/* на низких экранах (телефон в ландшафте) баннер не помещается — без залипания */
@media (max-height: 560px) {
	.hero {
		position: relative;
		top: 0;
	}
}

@media (prefers-reduced-motion: reduce) {

	.hero__video,
	.hero__content {
		transform: none !important;
	}
}