/**
 * P2p3 template-2: ambient backgrounds for slider items (--slider-bg-* from JS).
 */

.p2p3template-2 .slider-item {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	--slider-bg-a: rgba(250, 248, 244, 0.98);
	--slider-bg-b: rgba(238, 234, 228, 0.96);
	--slider-bg-c: rgba(220, 216, 210, 0.94);
	--slider-bg-accent: rgba(180, 160, 140, 0.2);
	--slider-bg-glow: rgba(255, 255, 255, 0.5);
	--slider-bg-depth: rgba(32, 30, 28, 0.1);
	background-color: var(--slider-bg-c);
	background-image:
		radial-gradient(
			ellipse 95% 70% at 8% 18%,
			var(--slider-bg-accent) 0%,
			transparent 58%
		),
		radial-gradient(
			ellipse 120% 85% at 92% 8%,
			var(--slider-bg-glow) 0%,
			transparent 50%
		),
		radial-gradient(
			ellipse 90% 75% at 78% 92%,
			var(--slider-bg-b) 0%,
			transparent 55%
		),
		linear-gradient(
			168deg,
			var(--slider-bg-a) 0%,
			var(--slider-bg-b) 38%,
			var(--slider-bg-c) 100%
		);
	background-repeat: no-repeat;
	background-size: cover;
	box-shadow: inset 0 0 56px rgba(255, 255, 255, 0.18),
		inset 0 -32px 80px var(--slider-bg-depth),
		inset 0 0 0 1px rgba(255, 255, 255, 0.12);
	transition: background-color 0.7s ease, box-shadow 0.7s ease;
}

.p2p3template-2 .slider-item::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(
			circle at 18% 22%,
			rgba(255, 255, 255, 0.32) 0%,
			transparent 38%
		),
		radial-gradient(
			circle at 85% 78%,
			rgba(0, 0, 0, 0.06) 0%,
			transparent 42%
		),
		repeating-linear-gradient(
			125deg,
			rgba(255, 255, 255, 0.02) 0 1px,
			transparent 1px 5px
		);
	mix-blend-mode: soft-light;
	opacity: 0.88;
}

.p2p3template-2 .slider-item::after {
	content: '';
	position: absolute;
	inset: -14%;
	z-index: 0;
	pointer-events: none;
	background: inherit;
	background-size: cover;
	filter: blur(32px) saturate(1.12);
	opacity: 0.26;
	transform: scale(1.06);
}

.p2p3template-2 .slider-item img {
	position: relative;
	z-index: 1;
}