/**
 * P1 Luxury Background 1.3
 *
 * Only #p1-luxury-background-layer is allowed to paint the page artwork.
 * Every Oxygen section stays transparent and scrolls over that one fixed layer.
 */

html {
	background: #050308;
}

body.p1-luxury-background-active {
	position: relative;
	isolation: isolate;
	background: transparent !important;
}

body.p1-luxury-background-active #p1-luxury-background-layer {
	position: fixed;
	inset: 0;
	z-index: 0;
	display: block;
	width: 100%;
	height: 100vh;
	height: 100svh;
	height: 100dvh;
	pointer-events: none;
	background-color: #050308;
	background-image:
		linear-gradient(180deg, rgba(3, 2, 7, 0.18), rgba(3, 2, 7, 0.48)),
		var(--p1-luxury-bg-desktop);
	background-repeat: no-repeat, no-repeat;
	background-position: center, center;
	background-size: 100% 100%, cover;
	transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	will-change: transform;
}

/*
 * Oxygen originally assigns a separate image/video background to each section.
 * Force all public-site sections transparent so the fixed layer cannot restart.
 */
body.p1-luxury-background-active .ct-section,
body.p1-luxury-background-active :is(
	#section-3758-14,
	#section-4-14,
	#section-42-14,
	#section-47-14,
	#pricing,
	#section-830-14,
	#section-951-14,
	#section-1115-14,
	#section-1182-14,
	#section-1192-14,
	#section-1277-14,
	#section-1217-14,
	#section-3728-14
) {
	position: relative;
	z-index: 1;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	background-repeat: no-repeat !important;
	background-attachment: scroll !important;
}

/* Clear only section-level decorative pseudo backgrounds, not card artwork. */
body.p1-luxury-background-active .ct-section::before,
body.p1-luxury-background-active .ct-section::after,
body.p1-luxury-background-active #pricing::before,
body.p1-luxury-background-active #pricing::after {
	background-image: none !important;
}

/* Hide every Oxygen background-video layer throughout the public site. */
body.p1-luxury-background-active .ct-section > .oxy-video-container,
body.p1-luxury-background-active .ct-section > .oxy-video-background,
body.p1-luxury-background-active .oxy-video-container[aria-hidden="true"] {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* Phones use one fixed portrait artwork; no image is placed on any section. */
@media (max-width: 768px) {
	body.p1-luxury-background-active #p1-luxury-background-layer {
		background-image:
			linear-gradient(180deg, rgba(3, 2, 7, 0.20), rgba(3, 2, 7, 0.50)),
			var(--p1-luxury-bg-mobile);
		background-position: center, center;
		background-size: 100% 100%, cover;
	}
}

@media (prefers-reduced-data: reduce) {
	body.p1-luxury-background-active #p1-luxury-background-layer {
		will-change: auto;
	}
}