:root {
	--site-header-height: 52px;
	--hero-top-gap: 0px;
}

@media (max-width: 992px) {
	:root {
		--site-header-height: 50px;
		--hero-top-gap: 0px;
	}
}

.scrollzee-wrapper {
	position: relative;
	width: 100%;
	margin-top: var(--hero-top-gap, 0px);
}

.scrollzee-sticky-inner {
	position: sticky;
	top: calc(var(--site-header-height, 52px) + var(--hero-top-gap, 0px));
	width: 100%;
	height: calc(100vh - var(--site-header-height, 52px) - var(--hero-top-gap, 0px));
	overflow: hidden;
	background: #000;
}

.scrollzee-video {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.scrollzee-canvas {
	display: block;
	width: 100%;
	height: 100%;
}

.scrollzee-poster {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* When sticky is disabled per-instance, fall back to a normal in-flow block */
.scrollzee-wrapper[data-sticky="0"] .scrollzee-sticky-inner {
	position: relative;
	height: 100vh;
}