body {
	position: relative;
	isolation: isolate;
	background:
		radial-gradient(circle at top left, rgba(108, 124, 149, 0.1), transparent 32%),
		radial-gradient(circle at right 12%, rgba(70, 82, 101, 0.08), transparent 26%),
		linear-gradient(180deg, #05070a 0%, #090d12 46%, #11161d 100%);
}

body::before,
body::after {
	opacity: 0.14;
	filter: blur(110px);
}

.html {
	z-index: 2;
}

.site-bg-gallery {
	--bg-gallery-fade-ms: 1800ms;
	--bg-gallery-motion-ms: 8600ms;
	position: fixed;
	inset: 0;
	width: 100%;
	min-height: 100vh;
	min-height: 100svh;
	pointer-events: none;
	user-select: none;
	overflow: hidden;
	overflow: clip;
	z-index: 0;
	background: #06080c;
}

.site-bg-gallery *,
.site-bg-gallery::before,
.site-bg-gallery::after {
	pointer-events: none;
}

.site-bg-gallery__base,
.site-bg-gallery__media,
.site-bg-gallery__slide,
.site-bg-gallery__overlay,
.site-bg-gallery__gradient,
.site-bg-gallery__vignette {
	position: absolute;
	inset: 0;
}

.site-bg-gallery__base {
	z-index: 0;
	background:
		radial-gradient(circle at 16% 18%, rgba(196, 165, 124, 0.14) 0%, transparent 34%),
		radial-gradient(circle at 84% 14%, rgba(73, 94, 122, 0.16) 0%, transparent 28%),
		linear-gradient(180deg, #05070a 0%, #0a0d13 44%, #121821 100%);
}

.site-bg-gallery__media {
	z-index: 1;
	overflow: hidden;
}

.site-bg-gallery__slide {
	--bg-pan-from-x: 0%;
	--bg-pan-from-y: 0%;
	--bg-pan-to-x: 0%;
	--bg-pan-to-y: 0%;
	--bg-zoom-from: 1.04;
	--bg-zoom-to: 1.12;
	opacity: 0;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	transform: translate3d(var(--bg-pan-from-x), var(--bg-pan-from-y), 0) scale(var(--bg-zoom-from));
	transform-origin: center center;
	transition:
		opacity var(--bg-gallery-fade-ms) cubic-bezier(0.33, 0, 0.16, 1),
		transform var(--bg-gallery-motion-ms) linear;
	will-change: opacity, transform;
	backface-visibility: hidden;
}

.site-bg-gallery__slide.is-active {
	opacity: 1;
	transform: translate3d(var(--bg-pan-to-x), var(--bg-pan-to-y), 0) scale(var(--bg-zoom-to));
}

.site-bg-gallery__slide.is-leaving {
	opacity: 0;
	transform: translate3d(var(--bg-pan-to-x), var(--bg-pan-to-y), 0) scale(var(--bg-zoom-to));
	transition:
		opacity var(--bg-gallery-fade-ms) cubic-bezier(0.4, 0, 0.2, 1),
		transform var(--bg-gallery-fade-ms) cubic-bezier(0.4, 0, 0.2, 1);
}

.site-bg-gallery__overlay {
	z-index: 2;
	background: rgba(4, 6, 10, 0.42);
}

.site-bg-gallery__gradient {
	z-index: 3;
	background:
		linear-gradient(180deg, rgba(4, 6, 10, 0.78) 0%, rgba(6, 8, 12, 0.42) 24%, rgba(7, 9, 14, 0.5) 48%, rgba(5, 7, 11, 0.76) 100%),
		linear-gradient(90deg, rgba(4, 6, 10, 0.56) 0%, rgba(4, 6, 10, 0.18) 28%, rgba(4, 6, 10, 0.12) 50%, rgba(4, 6, 10, 0.24) 74%, rgba(4, 6, 10, 0.58) 100%),
		radial-gradient(circle at center top, rgba(255, 255, 255, 0.04), transparent 46%);
}

.site-bg-gallery__vignette {
	z-index: 4;
	background:
		radial-gradient(circle at center, transparent 34%, rgba(3, 4, 6, 0.16) 58%, rgba(2, 3, 5, 0.56) 100%),
		linear-gradient(180deg, rgba(2, 3, 5, 0.22) 0%, transparent 14%, transparent 74%, rgba(2, 3, 5, 0.34) 100%);
}

.site-bg-gallery.is-fallback .site-bg-gallery__overlay {
	background: rgba(4, 6, 10, 0.58);
}

.site-bg-gallery.is-fallback .site-bg-gallery__gradient {
	background:
		linear-gradient(180deg, rgba(4, 6, 10, 0.88) 0%, rgba(7, 9, 14, 0.54) 32%, rgba(5, 7, 11, 0.88) 100%),
		radial-gradient(circle at 28% 12%, rgba(215, 183, 122, 0.08) 0%, transparent 28%),
		radial-gradient(circle at 76% 10%, rgba(83, 160, 255, 0.08) 0%, transparent 24%);
}

body.page-home .site-bg-gallery__overlay {
	background: rgba(4, 6, 10, 0.36);
}

body.page-home .site-bg-gallery__gradient {
	background:
		linear-gradient(180deg, rgba(4, 6, 10, 0.74) 0%, rgba(6, 8, 12, 0.28) 22%, rgba(7, 9, 14, 0.4) 50%, rgba(5, 7, 11, 0.72) 100%),
		linear-gradient(90deg, rgba(4, 6, 10, 0.52) 0%, rgba(4, 6, 10, 0.14) 28%, rgba(4, 6, 10, 0.1) 50%, rgba(4, 6, 10, 0.2) 74%, rgba(4, 6, 10, 0.56) 100%),
		radial-gradient(circle at center top, rgba(255, 255, 255, 0.05), transparent 48%);
}

@media (max-width: 860px) {
	.site-bg-gallery {
		--bg-gallery-fade-ms: 1600ms;
		--bg-gallery-motion-ms: 7600ms;
	}

	.site-bg-gallery__overlay {
		background: rgba(4, 6, 10, 0.48);
	}

	.site-bg-gallery__gradient {
		background:
			linear-gradient(180deg, rgba(4, 6, 10, 0.82) 0%, rgba(6, 8, 12, 0.46) 26%, rgba(7, 9, 14, 0.54) 50%, rgba(5, 7, 11, 0.82) 100%),
			linear-gradient(90deg, rgba(4, 6, 10, 0.58) 0%, rgba(4, 6, 10, 0.24) 22%, rgba(4, 6, 10, 0.14) 50%, rgba(4, 6, 10, 0.28) 76%, rgba(4, 6, 10, 0.6) 100%);
	}
}

@media (max-width: 640px) {
	body::before,
	body::after {
		opacity: 0.1;
		filter: blur(90px);
	}

	.site-bg-gallery__vignette {
		background:
			radial-gradient(circle at center, transparent 28%, rgba(3, 4, 6, 0.22) 58%, rgba(2, 3, 5, 0.64) 100%),
			linear-gradient(180deg, rgba(2, 3, 5, 0.28) 0%, transparent 14%, transparent 72%, rgba(2, 3, 5, 0.42) 100%);
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.site-bg-gallery {
		--bg-gallery-fade-ms: 900ms;
		--bg-gallery-motion-ms: 900ms;
	}

	.site-bg-gallery__slide,
	.site-bg-gallery__slide.is-active,
	.site-bg-gallery__slide.is-leaving {
		transform: none;
		transition: opacity var(--bg-gallery-fade-ms) ease;
	}
}