/* =========================================================
   Swell — Video Hero (.hvideo)
   Alternative homepage hero (toggle in Homepage hero → Hero style).
   Reuses the shared .hslider__eyebrow / .hslider__scroll cue styles
   from hero-slider.css; this file holds the .hvideo* layer only.
   ========================================================= */

.hvideo {
	position: relative;
	min-height: 100vh;
	background: var(--night, #08161c);
	overflow: hidden;
	isolation: isolate;
}

/* The looping film (or the poster <img> fallback when no source is set).
   object-fit:cover crops to fill; the poster shows until the first frame
   decodes and stays if the source fails to load. */
.hvideo__media {
	position: absolute; inset: 0; z-index: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}

/* Two stacked gradients protect the headline (darker top/bottom + left). */
.hvideo__veil {
	position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background:
		linear-gradient(180deg, rgba(6,29,40,0.48) 0%, rgba(6,29,40,0.12) 26%, rgba(6,29,40,0.08) 50%, rgba(6,29,40,0.70) 100%),
		linear-gradient(94deg, rgba(6,29,40,0.74) 0%, rgba(6,29,40,0.38) 40%, rgba(6,29,40,0.04) 72%);
}

/* Bottom "horizon seam" — fades the video into the next section's dark band. */
.hvideo__seam {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
	height: 42%; pointer-events: none;
	background: linear-gradient(180deg, rgba(8,22,28,0) 0%, rgba(8,22,28,0.5) 52%, var(--night, #08161c) 96%);
}

/* Copy block — pinned bottom-left, inside a max-1280 content frame. */
.hvideo__inner {
	position: absolute; z-index: 2;
	bottom: clamp(72px, 12vh, 132px);
	left:  max(clamp(20px, 4vw, 56px), calc((100% - 1280px) / 2 + clamp(20px, 4vw, 56px)));
	right: max(clamp(20px, 4vw, 56px), calc((100% - 1280px) / 2 + clamp(20px, 4vw, 56px)));
	max-width: 640px;
	color: #fff;
	animation: hs-text-in 760ms var(--ease-swell, cubic-bezier(.4,0,.1,1)) both;
}
.hvideo__inner .hslider__eyebrow { margin-bottom: 22px; }

.hvideo__title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(58px, 8.2vw, 130px);
	line-height: 0.9;
	letter-spacing: -0.025em;
	color: #fff;
	text-shadow: 0 2px 30px rgba(6,29,40,0.55), 0 1px 4px rgba(6,29,40,0.45);
}
.hvideo__title i { font-style: italic; }

.hvideo__body {
	margin: 26px 0 0;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: clamp(16px, 1.25vw, 19px);
	line-height: 1.55;
	color: rgba(255,255,255,0.94);
	max-width: 46ch;
	text-wrap: pretty;
	text-shadow: 0 1px 2px rgba(6,29,40,0.7), 0 1px 1px rgba(0,0,0,0.35);
}

/* Mute / unmute toggle — frosted circular button, bottom-right. */
.hvideo__mute {
	position: absolute; z-index: 3;
	right: max(clamp(20px, 4vw, 56px), calc((100% - 1280px) / 2 + clamp(20px, 4vw, 56px)));
	bottom: clamp(72px, 12vh, 132px);
	width: 50px; height: 50px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid rgba(255,255,255,0.28);
	background: rgba(13,53,55,0.4);
	-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
	color: #fff; cursor: pointer;
	transition: background var(--dur-base, 260ms) var(--ease-swell, cubic-bezier(.4,0,.1,1)),
	            transform  var(--dur-base, 260ms) var(--ease-swell, cubic-bezier(.4,0,.1,1));
}
.hvideo__mute:hover  { background: rgba(13,53,55,0.62); }
.hvideo__mute:active { transform: scale(0.94); }
.hvideo__icon { display: inline-flex; align-items: center; justify-content: center; }
/* Default state = muted → show the muted (volume-x) icon. */
.hvideo__mute .hvideo__icon--on { display: none; }
.hvideo__mute.is-unmuted .hvideo__icon--off { display: none; }
.hvideo__mute.is-unmuted .hvideo__icon--on { display: inline-flex; }

@keyframes hs-text-in {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 760px) {
	.hvideo { min-height: 100svh; }
	.hvideo__inner { max-width: none; bottom: clamp(96px, 16vh, 150px); }
	.hvideo__title { font-size: clamp(48px, 14vw, 80px); }
	.hvideo__body  { font-size: 19px; max-width: 36ch; }
	.hvideo__mute  { bottom: auto; top: clamp(80px, 12vh, 110px); }
}

@media (prefers-reduced-motion: reduce) {
	.hvideo__inner { animation: none; }
}