/*
 * Framer-style background video (js/video-background.js).
 *
 * The container is the positioning context; js inserts a <video> (and an
 * optional tint overlay) behind whatever foreground content it already holds.
 * Give the container a height/aspect-ratio yourself — the video only fills
 * whatever box the container establishes.
 */
.rah-video-bg {
	position: relative;
	overflow: hidden;
	isolation: isolate; /* keeps the video's stacking context self-contained */
}

/* the video fills the container edge-to-edge and fades in once it can play */
.rah-video-bg__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	z-index: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.6s ease;
}
.rah-video-bg__video.is-ready {
	opacity: 1;
}
.stk-block-hero .rah-video-bg__video {
	border-radius: 21px;
	-webkit-border-radius: 21px;
	-moz-border-radius: 21px;
	-ms-border-radius: 21px;
	-o-border-radius: 21px;
}
.rah-video-bg[data-fit="contain"] .rah-video-bg__video {
	object-fit: contain;
}

/* optional dark tint for foreground contrast; strength via --rah-video-overlay */
.rah-video-bg__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: rgba(0, 0, 0, var(--rah-video-overlay, 0.35));
}

/* everything the author put inside the container sits above video + overlay */
.rah-video-bg > :not(.rah-video-bg__video):not(.rah-video-bg__overlay) {
	position: relative;
	z-index: 2;
}

/* reduced motion: no fade, just the still poster */
@media (prefers-reduced-motion: reduce) {
	.rah-video-bg__video {
		opacity: 1;
		transition: none;
	}
}