/**
 * MRMVR Elements — Video Hero.
 *
 * A band filled edge to edge by a queue of slides, each a video or a still,
 * crossed into one another.
 *
 * Three things do the filling, and all three are needed. `position: absolute`
 * with `inset: 0` gives every slide the exact box of the band, so no padding,
 * margin or gap can get between the two. `object-fit: cover` scales the frame
 * to cover that box and crops what will not fit, rather than fitting it inside
 * and leaving bars. And `display: block` removes the line-box a replaced element
 * otherwise sits on, which is where the few stubborn pixels under a video
 * usually come from.
 *
 * Nothing here is a flex child, so no flex rule can add a gap around it.
 *
 * The slides are scenery: no controls, no pointer events, nothing in the tab
 * order, hidden from assistive technology. They cannot be paused by clicking
 * them, which is the whole point of a hero.
 *
 * @package MRMVR\Elements
 * @since   1.31.0
 */

.mrx-vh-wrap {
	/* Frame */
	--mrx-v-bg: #0a0d1c;
	--mrx-v-radius: 0px;
	--mrx-v-min: 420px;
	--mrx-v-vh: 92;
	--mrx-v-offset: 0px;
	--mrx-v-ratio: 16 / 9;
	--mrx-v-h: 620px;

	/* What the browser keeps when it crops. */
	--mrx-v-x: 50%;
	--mrx-v-y: 50%;

	/* Overlay */
	--mrx-v-overlay: #0a0d1c;
	--mrx-v-overlay-a: 0.62;

	/* Content */
	--mrx-v-align: center;
	--mrx-v-valign: center;
	--mrx-v-content-max: 900px;
	--mrx-v-gap: clamp(14px, 2vw, 22px);
	--mrx-v-eyebrow: var(--mrmvr-clay, #cfa190);
	--mrx-v-heading: var(--mrmvr-white, #ffffff);
	--mrx-v-heading-accent: var(--mrmvr-clay, #cfa190);
	--mrx-v-text: rgba(255, 255, 255, 0.82);

	/* Buttons */
	--mrx-v-btn-bg: var(--mrmvr-amber, #f57528);
	--mrx-v-btn-fg: var(--mrmvr-white, #ffffff);
	--mrx-v-btn-bg-hover: var(--mrmvr-white, #ffffff);
	--mrx-v-btn-fg-hover: var(--mrmvr-navy, #1a2142);
	--mrx-v-btn-ghost-fg: var(--mrmvr-white, #ffffff);
	--mrx-v-btn-ghost-border: rgba(255, 255, 255, 0.5);
	--mrx-v-btn-ghost-bg-hover: var(--mrmvr-white, #ffffff);
	--mrx-v-btn-ghost-fg-hover: var(--mrmvr-navy, #1a2142);
	--mrx-v-btn-radius: 999px;

	/* Motion */
	--mrx-v-fade: 900ms;
	--mrx-v-ease: var(--mrmvr-ease, cubic-bezier(0.22, 0.61, 0.36, 1));

	position: relative;
	display: flex;
	isolation: isolate;
	/* Clips the footage to the corner radius, and stops a video whose intrinsic
	   size is larger than the band from spilling out of it while it loads. */
	overflow: hidden;
	min-height: var(--mrx-v-min);
	padding: 0;
	background-color: var(--mrx-v-bg);
	border-radius: var(--mrx-v-radius);
	font-family: var(--mrmvr-font-body);
}

.mrx-vh {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
}

/* -------------------------------------------------------------------------
 * Height
 * ---------------------------------------------------------------------- */

/*
 * `svh` is the viewport with the phone's browser bars counted as present, which
 * is the one measurement that does not change as they slide away. `vh` is the
 * fallback for anything that does not know it, and is declared first so the
 * newer unit simply wins where it is understood.
 */
.mrx-vhh-viewport .mrx-vh-wrap {
	height: calc((var(--mrx-v-vh) * 1vh) - var(--mrx-v-offset));
	height: calc((var(--mrx-v-vh) * 1svh) - var(--mrx-v-offset));
}

.mrx-vhh-aspect .mrx-vh-wrap {
	aspect-ratio: var(--mrx-v-ratio);
}

.mrx-vhh-fixed .mrx-vh-wrap {
	height: var(--mrx-v-h);
}

.mrx-vh__media {
	position: absolute;
	z-index: 0;
	inset: 0;
	/* A stacking context of its own, so the overlay layers against the slides
	   rather than against whatever else the page has going on. */
	isolation: isolate;
	overflow: hidden;
}

.mrx-vh__slides {
	position: absolute;
	inset: 0;
}

/* -------------------------------------------------------------------------
 * One slide
 *
 * Every slide is stacked in the same box and only one is shown, so the queue
 * never reflows and a slide of a different shape cannot move the band. The
 * outgoing slide is marked as it leaves, which is what lets a transition send
 * it the opposite way to the one arriving instead of both moving together.
 * ---------------------------------------------------------------------- */

.mrx-vh__slide {
	position: absolute;
	z-index: 0;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity var(--mrx-v-fade) var(--mrx-v-ease),
		transform var(--mrx-v-fade) var(--mrx-v-ease),
		visibility 0s linear var(--mrx-v-fade);
}

.mrx-vh__slide.is-active {
	z-index: 2;
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s, 0s, 0s;
}

/* Kept drawn for the length of the cross-fade, underneath the one arriving. */
.mrx-vh__slide.is-leaving {
	z-index: 1;
	visibility: visible;
}

.mrx-vh__slide > .mrx-vh__video,
.mrx-vh__slide > .mrx-vh__image,
.mrx-vh__slide > .mrx-vh__image img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	object-fit: cover;
	object-position: var(--mrx-v-x) var(--mrx-v-y);
}

.mrx-vh__video {
	/*
	 * Not a control surface. Without this a click anywhere on the band lands on
	 * the media element, and on some browsers that is enough to pause it.
	 */
	pointer-events: none;
}

/* Some browsers still draw their own furniture over a video. None of it
   belongs on scenery. */
.mrx-vh__video::-webkit-media-controls,
.mrx-vh__video::-webkit-media-controls-enclosure,
.mrx-vh__video::-webkit-media-controls-panel,
.mrx-vh__video::-webkit-media-controls-start-playback-button {
	display: none !important;
	-webkit-appearance: none;
	appearance: none;
}

/* -------------------------------------------------------------------------
 * Between slides
 *
 * Each effect describes the resting state a slide waits in and, where the two
 * differ, the state it leaves through. The active state above cancels both.
 * ---------------------------------------------------------------------- */

/* Cross-fade needs no transform: opacity alone carries it. */

.mrx-vfx-zoom .mrx-vh__slide {
	transform: scale(1.06);
}

.mrx-vfx-zoom .mrx-vh__slide.is-leaving {
	transform: scale(0.98);
}

.mrx-vfx-slide .mrx-vh__slide {
	transform: translateX(8%);
}

.mrx-vfx-slide .mrx-vh__slide.is-leaving {
	transform: translateX(-8%);
}

/* A straight cut has nothing to animate, and a transition here would only
   delay the visibility switch behind it. */
.mrx-vfx-cut .mrx-vh__slide {
	transition: none;
}

/* -------------------------------------------------------------------------
 * Overlay
 *
 * The colour is one property and the strength another, so the gradients below
 * can reuse the same colour at both ends without a second control for each.
 * ---------------------------------------------------------------------- */

.mrx-vh__overlay {
	position: absolute;
	/* Above every slide, active or leaving, rather than tied with the active one
	   and settling it on document order. */
	z-index: 5;
	inset: 0;
	opacity: var(--mrx-v-overlay-a);
	pointer-events: none;
}

.mrx-vov-none .mrx-vh__overlay {
	display: none;
}

.mrx-vov-solid .mrx-vh__overlay {
	background-color: var(--mrx-v-overlay);
}

.mrx-vov-bottom .mrx-vh__overlay {
	background-image: linear-gradient(to top, var(--mrx-v-overlay) 0%, transparent 68%);
}

.mrx-vov-top .mrx-vh__overlay {
	background-image: linear-gradient(to bottom, var(--mrx-v-overlay) 0%, transparent 68%);
}

.mrx-vov-both .mrx-vh__overlay {
	background-image: linear-gradient(
		to bottom,
		var(--mrx-v-overlay) 0%,
		transparent 42%,
		transparent 58%,
		var(--mrx-v-overlay) 100%
	);
}

/* -------------------------------------------------------------------------
 * Content
 *
 * Padding lives here and nowhere near the video, which is why the words can be
 * inset while the footage still reaches all four edges.
 * ---------------------------------------------------------------------- */

.mrx-vh__inner {
	position: relative;
	z-index: 3;
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	flex-direction: column;
	justify-content: var(--mrx-v-valign);
	align-items: var(--mrx-v-align);
	width: 100%;
	padding: clamp(28px, 5vw, 72px);
}

.mrx-vh__content {
	display: flex;
	flex-direction: column;
	align-items: var(--mrx-v-align);
	gap: var(--mrx-v-gap);
	width: 100%;
	max-width: var(--mrx-v-content-max);
	text-align: var(--mrx-v-align);
}

.mrx-vh__eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	color: var(--mrx-v-eyebrow);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

.mrx-vh__eyebrow::before {
	content: "";
	width: 34px;
	height: 1px;
	flex: 0 0 auto;
	background-color: currentColor;
}

.mrx-vh__heading {
	margin: 0;
	color: var(--mrx-v-heading);
	font-family: var(--mrmvr-font-display);
	font-size: clamp(38px, 6vw, 76px);
	font-weight: 500;
	line-height: 1.04;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.mrx-vh__heading em {
	color: var(--mrx-v-heading-accent);
	font-style: italic;
}

.mrx-vh__text {
	max-width: 62ch;
	color: var(--mrx-v-text);
	font-size: clamp(15px, 1.5vw, 18px);
	line-height: 1.65;
}

.mrx-vh__text p {
	margin: 0 0 0.7em;
}

.mrx-vh__text p:last-child {
	margin-bottom: 0;
}

.mrx-vh__text a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* -------------------------------------------------------------------------
 * Buttons
 * ---------------------------------------------------------------------- */

.mrx-vh__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: var(--mrx-v-align);
	gap: 12px;
	margin-top: 6px;
}

.mrx-vh__btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 14px 30px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	border: 1px solid transparent;
	border-radius: var(--mrx-v-btn-radius);
	transition:
		color 300ms var(--mrx-v-ease),
		background-color 300ms var(--mrx-v-ease),
		border-color 300ms var(--mrx-v-ease),
		transform 300ms var(--mrx-v-ease);
}

.mrx-vh__btn--solid {
	color: var(--mrx-v-btn-fg);
	background-color: var(--mrx-v-btn-bg);
}

.mrx-vh__btn--solid:hover,
.mrx-vh__btn--solid:focus-visible {
	color: var(--mrx-v-btn-fg-hover);
	background-color: var(--mrx-v-btn-bg-hover);
	transform: translateY(-2px);
}

.mrx-vh__btn--outline {
	color: var(--mrx-v-btn-ghost-fg);
	background-color: transparent;
	border-color: var(--mrx-v-btn-ghost-border);
}

.mrx-vh__btn--outline:hover,
.mrx-vh__btn--outline:focus-visible {
	color: var(--mrx-v-btn-ghost-fg-hover);
	background-color: var(--mrx-v-btn-ghost-bg-hover);
	border-color: var(--mrx-v-btn-ghost-bg-hover);
	transform: translateY(-2px);
}

.mrx-vh__btn-icon {
	display: inline-flex;
	align-items: center;
	font-size: 0.9em;
	transition: transform 300ms var(--mrx-v-ease);
}

.mrx-vh__btn:hover .mrx-vh__btn-icon {
	transform: translateX(3px);
}

.mrx-vh__btn-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.mrx-vh__btn:focus-visible {
	outline: 2px solid var(--mrx-v-btn-bg);
	outline-offset: 3px;
}

/* -------------------------------------------------------------------------
 * Full width
 *
 * `--mrx-sbw` is the scrollbar width, published by the script. Without it the
 * rule falls back to plain 100vw, which is a hair wide on desktop but still
 * renders; with it the bleed is exact and cannot cause a horizontal scrollbar.
 * ---------------------------------------------------------------------- */

.mrx-vbleed-yes .mrx-vh-wrap {
	--mrx-v-bleed-width: calc(100vw - var(--mrx-sbw, 0px));

	width: var(--mrx-v-bleed-width);
	margin-left: calc(50% - (var(--mrx-v-bleed-width) / 2));
	margin-right: 0;
	/* Edge to edge has no corners to round. */
	border-radius: 0;
}

/* -------------------------------------------------------------------------
 * Narrow screens
 *
 * The band does not change shape here — that is what the second video file and
 * the two focal-point controls are for. Only the words are brought in.
 * ---------------------------------------------------------------------- */

@media (max-width: 767px) {
	.mrx-vh__inner {
		padding: clamp(24px, 7vw, 40px);
	}

	.mrx-vh__heading {
		font-size: clamp(30px, 8.4vw, 46px);
	}

	.mrx-vh__actions .mrx-vh__btn {
		flex: 1 1 auto;
		justify-content: center;
	}
}

/* -------------------------------------------------------------------------
 * Editor placeholder
 * ---------------------------------------------------------------------- */

.mrx-vh-wrap--empty {
	display: block;
	min-height: 0;
	padding: 28px 30px;
	background-color: var(--mrmvr-cream, #fdf8f5);
	border: 1px dashed rgba(207, 161, 144, 0.6);
	border-radius: 16px;
}

.mrx-vh__empty-title {
	margin: 0 0 6px;
	color: var(--mrmvr-navy, #1a2142);
	font-family: var(--mrmvr-font-display);
	font-size: 21px;
	font-weight: 600;
}

.mrx-vh__empty-text {
	margin: 0;
	max-width: 64ch;
	color: rgba(26, 33, 66, 0.7);
	font-size: 14px;
	line-height: 1.6;
}

/* -------------------------------------------------------------------------
 * Reduced motion
 *
 * The script does the real work here — where the preference is set nothing is
 * fetched and nothing advances, and the first slide is held as a still. This
 * only stops the transitions that would otherwise run if it did.
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.mrx-vh__slide {
		transition: none;
	}

	.mrx-vh__btn,
	.mrx-vh__btn-icon {
		transition: none;
	}

	.mrx-vh__btn:hover {
		transform: none;
	}
}