/**
 * Кутюр Парфюм — фоновое видео hero-блока.
 *
 * Подключается только на главной и только когда видео задано в Customizer.
 */

.cp-hero--video {
	/* Ровно экран под шапкой: кадр крупный, но кнопка звука и низ блока
	   остаются видны без прокрутки. svh учитывает панели мобильных браузеров. */
	min-height: min(calc(100vh - var(--header-h) - var(--topbar-h)), 46rem);
	min-height: min(calc(100svh - var(--header-h) - var(--topbar-h)), 46rem);
	padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem);
	display: flex;
	align-items: center;
	background: var(--ink);
	isolation: isolate;
}

/* Декоративные пятна фонового градиента с видео не нужны. */
.cp-hero--video::before,
.cp-hero--video::after {
	display: none;
}

.cp-hero__media--video {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	background: var(--ink);
}

.cp-hero__video {
	width: 100%;
	height: 100%;
	/* Исходник вертикальный: cover обрезает его по краям, но никогда
	   не оставляет пустых полей ни на десктопе, ни на мобильном. */
	object-fit: cover;
	object-position: center;
	display: block;
	/* Подсказка браузеру: слой анимированный, выносим его в отдельную композицию. */
	will-change: transform;
}

/* Пока видео не проигралось (ошибка, экономия трафика, reduced-motion) —
   постер отдаёт сам <video>, дополнительно ничего рисовать не нужно. */
.cp-hero--video.is-video-failed .cp-hero__video,
.cp-hero--video.is-video-idle .cp-hero__video {
	filter: saturate(0.9);
}

/* ------------------------------------------------------------ Затемнение */

.cp-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	/* Плотнее слева, где лежит текст, и мягче справа — кадр остаётся виден. */
	background:
		linear-gradient(
			100deg,
			rgba(43, 51, 60, 0.86) 0%,
			rgba(43, 51, 60, 0.66) 42%,
			rgba(43, 51, 60, 0.30) 72%,
			rgba(43, 51, 60, 0.20) 100%
		),
		linear-gradient(
			to top,
			rgba(43, 51, 60, 0.55) 0%,
			rgba(43, 51, 60, 0) 45%
		);
}

.cp-hero--video .cp-container {
	position: relative;
	z-index: 2;
}

/* ------------------------------------------------- Текст поверх видео */

.cp-hero--video .cp-hero__title,
.cp-hero--video .cp-hero__stats dd {
	color: var(--parchment);
}

.cp-hero--video .cp-hero__text,
.cp-hero--video .cp-hero__stats dt {
	color: rgba(236, 238, 240, 0.82);
}

.cp-hero--video .cp-eyebrow--accent {
	color: var(--gold);
}

.cp-hero--video .cp-hero__stats {
	border-top-color: rgba(236, 238, 240, 0.28);
}

.cp-hero--video .cp-btn--primary {
	background: var(--parchment);
	border-color: var(--parchment);
	color: var(--ink);
}

.cp-hero--video .cp-btn--primary:hover {
	background: var(--amber);
	border-color: var(--amber);
	color: var(--paper-pure);
}

.cp-hero--video .cp-btn--ghost {
	color: var(--parchment);
	border-color: rgba(236, 238, 240, 0.55);
}

.cp-hero--video .cp-btn--ghost:hover {
	background: var(--parchment);
	border-color: var(--parchment);
	color: var(--ink);
}

/* ------------------------------------------------------ Кнопка звука */

.cp-hero__controls {
	position: absolute;
	right: var(--gutter);
	bottom: var(--space-6);
	z-index: 3;
}

.cp-hero__sound {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-5);
	border: 1px solid rgba(236, 238, 240, 0.4);
	border-radius: var(--radius-pill);
	background: rgba(43, 51, 60, 0.42);
	backdrop-filter: blur(8px);
	color: var(--parchment);
	font-family: var(--font-mono);
	font-size: var(--fs-2xs);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	cursor: pointer;
	transition:
		background-color var(--dur) var(--ease-out),
		border-color var(--dur) var(--ease-out),
		color var(--dur) var(--ease-out);
}

.cp-hero__sound:hover {
	background: var(--parchment);
	border-color: var(--parchment);
	color: var(--ink);
}

.cp-hero__sound:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 3px;
}

.cp-hero__sound-icon svg {
	width: 18px;
	height: 18px;
	display: block;
}

/* Перечёркнутый динамик — когда звук выключен, дуги — когда включён. */
.cp-hero__sound-on {
	display: none;
}

.cp-hero__sound.is-on .cp-hero__sound-off {
	display: none;
}

.cp-hero__sound.is-on .cp-hero__sound-on {
	display: block;
}

.cp-hero__sound.is-on {
	border-color: var(--gold);
	color: var(--gold);
}

.cp-hero__sound.is-on:hover {
	background: var(--gold);
	border-color: var(--gold);
	color: var(--ink);
}

/* Видео не проигралось — предлагать звук бессмысленно. */
.cp-hero--video.is-video-failed .cp-hero__controls {
	display: none;
}

/* --------------------------------------------------------- Адаптив */

@media (max-width: 900px) {
	.cp-hero--video {
		min-height: min(78vh, 34rem);
	}

	.cp-hero__scrim {
		/* На узком экране текст занимает всю ширину — затемняем равномернее. */
		background:
			linear-gradient(
				180deg,
				rgba(43, 51, 60, 0.55) 0%,
				rgba(43, 51, 60, 0.72) 55%,
				rgba(43, 51, 60, 0.88) 100%
			);
	}

	.cp-hero__controls {
		right: var(--gutter);
		bottom: var(--space-4);
	}

	.cp-hero__sound {
		padding: var(--space-2) var(--space-4);
	}
}

@media (max-width: 560px) {
	/* На самых узких экранах оставляем только иконку — подпись съедает ширину. */
	.cp-hero__sound-label {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.cp-hero__sound {
		padding: var(--space-3);
	}
}

/* Пользователь просил меньше движения — не крутим видео фоном. */
@media (prefers-reduced-motion: reduce) {
	.cp-hero__video {
		will-change: auto;
	}
}