/**
 * Homepage video background — desktop only.
 * Native layout remains unchanged; mobile receives the normal hero background.
 */
.mwp-hero-v3--has-media .mwp-hero-v3__background {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	background: color-mix(in srgb, var(--primary) 2.5%, var(--surface));
}

.mwp-hero-v3__video-poster,
.mwp-hero-v3__video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/*
 * The previous opacity: 0 depended entirely on the JS "playing" event.
 * The media itself must never be invisibly gated by an event.
 */
.mwp-hero-v3__video {
	opacity: 1;
}

/* Light-touch tint, increasing contrast behind the right-hand RTL heading. */
.mwp-hero-v3--has-media .mwp-hero-v3__background::after {
	position: absolute;
	inset: 0;
	content: "";
	background: linear-gradient(
		90deg,
		color-mix(in srgb, var(--surface) 48%, transparent) 0%,
		color-mix(in srgb, var(--surface) 62%, transparent) 48%,
		color-mix(in srgb, var(--surface) 76%, transparent) 100%
	);
}

.mwp-hero-v3--has-media > .mwp-hero-v3__dots {
	z-index: 1;
}

/* No desktop video decode or playback on narrow screens or reduced-motion devices. */
@media (max-width: 767px), (prefers-reduced-motion: reduce) {
	.mwp-hero-v3__video {
		display: none;
	}
}