/*
 * Styles for Scroll Video Scrubbing
 */

.angie-svs-container {
	/* The container needs a specific height to allow scrolling. 
	   You can adjust this height via Elementor Custom CSS or inline styles if needed.
	   Here we use a default of 400vh to give a decent scroll duration. */
	position: relative;
	height: 400vh; 
	width: 100%;
	background-color: #000;
}

.angie-svs-sticky {
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}

body.admin-bar .angie-svs-sticky {
	height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));
	top: var(--wp-admin--admin-bar--height, 32px);
}

@media screen and (max-width: 782px) {
	body.admin-bar .angie-svs-sticky {
		height: calc(100vh - 46px);
		top: 46px;
	}
}

.angie-svs-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Prevent interaction */
	pointer-events: none;
}