.ojch-scroll-video {
	background: transparent;
	color: var(--wp--preset--color--text);
	inline-size: 100%;
	margin: 0;
	max-inline-size: none;
	overflow: hidden;
	position: relative;
}

.ojch-scroll-video__sticky { padding: 0; }

.ojch-scroll-video__stage {
	background: var(--wp--preset--color--background);
	height: clamp(18rem, 42svh, 36rem);
	overflow: hidden;
	position: relative;
	width: 100%;
}

.ojch-scroll-video video,
.ojch-scroll-video__poster {
	height: var(--ojch-video-overscan, 125%);
	left: 0;
	position: absolute;
	top: calc((100% - var(--ojch-video-overscan, 125%)) / 2);
	width: 100%;
}

.ojch-scroll-video video,
.ojch-scroll-video__poster img {
	display: block;
	object-fit: cover;
	object-position: var(--ojch-video-focal-x, 50%) var(--ojch-video-focal-y, 50%);
	width: 100%;
}

.ojch-scroll-video__poster img { height: 100%; }

.ojch-scroll-video__poster { pointer-events: none; }
.ojch-scroll-video__beats { display: none; }
.ojch-scroll-video__caption { margin: 0; }
.ojch-scroll-video .screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.ojch-scroll-video__play {
	background: color-mix(in srgb, var(--wp--preset--color--background) 92%, transparent);
	border: 1px solid currentColor;
	bottom: 1rem;
	color: var(--wp--preset--color--text);
	cursor: pointer;
	font: 500 .75rem var(--wp--preset--font-family--inter);
	left: var(--ojch-gutter, 1.25rem);
	min-height: 44px;
	min-width: 44px;
	padding: .65rem 1rem;
	position: absolute;
	z-index: 2;
}

.ojch-scroll-video__play:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

.ojch-scroll-video[data-media-state="playing"] .ojch-scroll-video__poster { visibility: hidden; }
.ojch-scroll-video[data-media-state="static"] video { display: none; }

@media (max-width: 1023px) {
	.ojch-scroll-video__stage { height: clamp(16rem, 38svh, 30rem); }
}

@media (max-width: 767px), (max-height: 540px) {
	.ojch-scroll-video__stage { height: clamp(14rem, 36svh, 24rem); }
}

@media (prefers-reduced-motion: reduce) {
	.ojch-scroll-video video,
	.ojch-scroll-video__poster {
		transform: none !important;
	}
}

@supports not (color: color-mix(in srgb, white, black)) {
	.ojch-scroll-video__play { background: var(--wp--preset--color--background); }
}

/* Moonrise: keep the horizon in the opening crop, then follow normal playback.
   No overscan or scroll translation: those hide the bottom of the source. */
.ojch-scroll-video[data-motion-profile="moonrise"] .ojch-scroll-video__stage {
	height: auto;
	aspect-ratio: 2.6 / 1;
}
.ojch-scroll-video[data-motion-profile="moonrise"] video,
.ojch-scroll-video[data-motion-profile="moonrise"] .ojch-scroll-video__poster {
	top: 0;
	height: 100%;
}
.ojch-scroll-video[data-motion-profile="moonrise"] video,
.ojch-scroll-video[data-motion-profile="moonrise"] .ojch-scroll-video__poster img {
	object-position: var(--ojch-video-focal-x, 50%) 100%;
}
@media (max-width: 767px), (prefers-reduced-motion: reduce) {
	.ojch-scroll-video[data-motion-profile="moonrise"] .ojch-scroll-video__stage {
		aspect-ratio: 16 / 9;
	}
}
