/*
 * Video background for the hero section.
 *
 * Stack (bottom to top):
 *   <video> (object-fit: cover + blur/brightness filter)
 *   .hero::before → brand radial gradients (kept from before)
 *   .hero::after  → dark scrim (left-to-right darkening + fade at bottom)
 *   .hero-content → text layer
 */

.hero-video {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	background-color: var(--color-bg);
}

.hero-video-el {
	position: absolute;
	top: 50%;
	left: 50%;
	/* Scale up enough so the video fill-crops any empty bands,
	   then center-clip it to the section exactly. */
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	transform: translate(-50%, -50%) scale(1.06);
	object-fit: cover;
	/* Subtle blur + desaturation so the video reads as atmosphere,
	   not as a competing image behind the text. */
	filter: blur(3px) brightness(0.85) saturate(1.15);
	pointer-events: none;
	/* Let the browser prioritise the poster until video can play. */
	display: block;
}

/* Brand gradients stay above the video */
.hero::before {
	z-index: 1;
}

/* Dark scrim: opaque on the left (text legibility),
   opens to transparency on the right (video visible),
   dissolves at the hero bottom edge. */
.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	background:
		linear-gradient(
			90deg,
			rgba(10, 10, 11, 0.96) 0%,
			rgba(10, 10, 11, 0.78) 36%,
			rgba(10, 10, 11, 0.35) 68%,
			rgba(10, 10, 11, 0.55) 100%
		),
		linear-gradient(
			180deg,
			rgba(10, 10, 11, 0.35) 0%,
			rgba(10, 10, 11, 0.05) 28%,
			rgba(10, 10, 11, 0.05) 55%,
			rgba(10, 10, 11, 0.94) 100%
		);
}

.hero-content {
	z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
	.hero-video-el {
		display: none;
	}
	/* Keep the poster visible when video is suppressed. */
	.hero-video {
		background-image: url("../images/hero-video-poster.jpg");
		background-size: cover;
		background-position: center;
	}
}