/* One fixed layer inside the body, below every existing content/overlay stack. */
body.peptpro-storefront-atmosphere {
	isolation: isolate;
}

.storefront-atmosphere {
	position: fixed;
	inset: 0;
	z-index: -1;
	height: 100vh;
	height: 100lvh;
	overflow: hidden;
	contain: strict;
	pointer-events: none !important;
	user-select: none;
	background: radial-gradient(ellipse at 85% 42%, #18333c12, transparent 60%);
}

.storefront-atmosphere-canvas,
.storefront-atmosphere-fallback {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none !important;
}

.storefront-atmosphere-canvas {
	opacity: 0;
	transition: opacity 1.2s ease;
}

.storefront-atmosphere-fallback {
	opacity: .54;
	transition: opacity 1.2s ease;
}

.storefront-atmosphere[data-state="ready"] .storefront-atmosphere-canvas { opacity: .68; }
.storefront-atmosphere[data-state="ready"] .storefront-atmosphere-fallback { opacity: 0; }

/* Keep the motif in the negative space; text and product surfaces take priority. */
.storefront-atmosphere::after {
	position: absolute;
	inset: 0;
	content: "";
	background:
		linear-gradient(90deg, #0c1215a6, #0c121530 38%, transparent 70%, #0c121538),
		linear-gradient(180deg, #0c121552, transparent 28%, transparent 80%, #0c12155c);
}

html[data-theme="dark"] .peptpro-storefront-atmosphere #site-content,
html[data-theme="dark"] .peptpro-storefront-atmosphere .onyx-home {
	background: transparent;
}

html[data-theme="dark"] .peptpro-storefront-atmosphere .onyx-home .onyx-hero {
	background: linear-gradient(110deg, #0c121596, #0c12152e 68%, #0c12154d);
}

@media (max-width: 760px) {
	.storefront-atmosphere[data-state="ready"] .storefront-atmosphere-canvas { opacity: .56; }
	.storefront-atmosphere-fallback { opacity: .47; }
	.storefront-atmosphere::after {
		background: linear-gradient(90deg, #0c12154d, transparent 55%, #0c12154d),
			linear-gradient(180deg, #0c121570, transparent 35%, transparent 78%, #0c12155c);
	}
}

@media (prefers-reduced-motion: reduce) {
	.storefront-atmosphere-canvas { display: none; }
	.storefront-atmosphere .storefront-atmosphere-fallback { opacity: .48; }
	.storefront-atmosphere-canvas,
	.storefront-atmosphere-fallback { transition: none; }
}

@media (forced-colors: active), print {
	.storefront-atmosphere { display: none; }
}