/* video-clip
   Full-bleed background video that stays fixed to the viewport while a
   section scrolls over it, but is visually clipped to the section's bounds
   via JS-driven clip-path. The video itself never moves; only the visible
   window changes. Multiple sections on a page can each have their own
   .mm-bg-video and they take turns being revealed as the user scrolls.

   Optional companion class .mm-cutout-overlay (on the section) suppresses
   the default 50% dark overlay so a custom SVG mask can be layered instead.
   See [[mm-cutout-overlay]] for that variant. */

.mm-video-section {
	position: relative;
	background: #000;
}

.mm-video-section .mm-bg-video {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	object-fit: cover;
	z-index: 0;
	pointer-events: none;
	will-change: clip-path;
}

.mm-video-section > .container {
	position: relative;
	z-index: 2;
}

/* Default sections get a dark overlay so text reads cleanly over video.
   Sections with .mm-cutout-overlay opt out (they bring their own overlay). */
.mm-video-section.mm-cutout-overlay::after { content: none; }
.mm-video-section:not(.mm-cutout-overlay)::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 1;
	pointer-events: none;
}