.eabg-container {
	position: relative !important;
	height: 100vh !important;
	min-height: 100vh !important;
	overflow: hidden !important;
	isolation: isolate;

	/* Fallback/preview background. */
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
}

/*
 * Animated photos.
 * This is intentionally below Elementor's native background overlay.
 */
.eabg-container > .eabg-stage {
	position: absolute !important;
	inset: 0 !important;
	z-index: 0 !important;
	overflow: hidden !important;
	pointer-events: none !important;
	contain: paint;
	transform: translateZ(0);
	backface-visibility: hidden;
}

.eabg-container > .eabg-stage > .eabg-bg {
	position: absolute !important;

	/* Tiny overscan removes GPU seams during horizontal/vertical movement. */
	inset: -1px !important;
	width: calc(100% + 2px) !important;
	height: calc(100% + 2px) !important;

	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;

	transform: translate3d(0,0,0);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	will-change: transform, opacity;
}

/*
 * Elementor background overlay compatibility.
 *
 * Depending on Elementor version/settings the overlay may be:
 * 1) a real .elementor-background-overlay node;
 * 2) the Container ::before pseudo-element.
 *
 * Both are placed ABOVE our slideshow and BELOW the actual Container content.
 */
.eabg-container > .elementor-background-overlay {
	position: absolute !important;
	inset: 0 !important;
	z-index: 1 !important;
	pointer-events: none !important;
}

/* Elementor Containers commonly use ::before for background overlay. */
.eabg-container::before {
	z-index: 1 !important;
	pointer-events: none !important;
}

/*
 * Actual Elementor content.
 * Exclude the slideshow and overlay from this rule.
 */
.eabg-container > :not(.eabg-stage):not(.elementor-background-overlay) {
	position: relative;
	z-index: 2;
}

/*
 * Elementor's inner Container wrapper, when present.
 */
.eabg-container > .e-con-inner {
	z-index: 2;
}

/*
 * Editor mode: ensure the generated stage remains visible and selectable
 * controls stay above it.
 */
.elementor-editor-active .eabg-container > .eabg-stage,
.elementor-editor-preview .eabg-container > .eabg-stage {
	display: block !important;
	visibility: visible !important;
}

/* Respect accessibility preference. */
@media (prefers-reduced-motion: reduce) {
	.eabg-container > .eabg-stage > .eabg-bg {
		transition-duration: 0.01ms !important;
	}
}