#appContainer {
	position: relative;
	isolation: isolate;
}

#appContainer::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(
			82% 70% at 12% 4%,
			rgb(245 250 252 / 56%) 0%,
			rgb(237 246 249 / 46%) 34%,
			transparent 67%
		),
		radial-gradient(
			76% 82% at 92% 96%,
			rgb(85 142 164 / 88%) 0%,
			rgb(129 178 195 / 64%) 40%,
			transparent 74%
		),
		radial-gradient(
			48% 78% at 109% 20%,
			rgb(235 111 94 / 72%) 0%,
			rgb(244 151 98 / 46%) 42%,
			transparent 82%
		),
		radial-gradient(
			54% 46% at 0% 100%,
			rgb(230 120 103 / 54%) 0%,
			rgb(244 183 112 / 34%) 42%,
			transparent 78%
		),
		linear-gradient(
			145deg,
			rgb(245 250 252) 0%,
			rgb(208 229 237) 54%,
			rgb(148 191 206) 100%
		) !important;
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat !important;
	background-size: auto, auto, auto, auto, auto !important;
}

#appContainer > :not(.ns-ui-fog-primary-layer):not(.ns-ui-fog-secondary-layer) {
	position: relative;
	z-index: 2;
}

#appContainer > .ns-ui-fog-primary-layer,
#appContainer > .ns-ui-fog-secondary-layer {
	position: fixed;
	z-index: 1;
	pointer-events: none;
	background: radial-gradient(
		ellipse at 50% 50%,
		rgb(255 255 255 / 51%) 0%,
		rgb(255 255 255 / 51%) 18%,
		rgb(255 255 255 / 22%) 52%,
		transparent 82%
	);
	backdrop-filter: none;
	mix-blend-mode: normal;
	will-change: translate, opacity;
}

#appContainer > .ns-ui-fog-primary-layer {
	top: calc(50% - 56vmin);
	left: calc(50% - 70vmin);
	width: 140vmin;
	height: 112vmin;
	mask-image: radial-gradient(
		ellipse 50% 41% at 50% 50%,
		#000 0%,
		#000 22%,
		rgb(0 0 0 / 88%) 44%,
		rgb(0 0 0 / 42%) 68%,
		transparent 94%
	);
	animation: ns-ui-fog-primary-movement 36s ease-in-out -5s infinite both;
}

#appContainer > .ns-ui-fog-secondary-layer {
	top: calc(50% - 47vmin);
	left: calc(50% - 58vmin);
	width: 116vmin;
	height: 94vmin;
	mask-image: radial-gradient(
		ellipse 49% 42% at 50% 50%,
		#000 0%,
		#000 20%,
		rgb(0 0 0 / 84%) 42%,
		rgb(0 0 0 / 38%) 68%,
		transparent 94%
	);
	animation: ns-ui-fog-secondary-movement 43s ease-in-out -10s infinite both;
}

@keyframes ns-ui-fog-primary-movement {
	0%,
	3% {
		translate: -35vw -30vh;
		opacity: 0;
	}

	7% {
		translate: -35vw -30vh;
		opacity: 0.84;
	}

	18% {
		translate: -35vw -30vh;
		opacity: 0.84;
	}

	22%,
	23% {
		translate: -35vw -30vh;
		opacity: 0;
	}

	25%,
	28% {
		translate: 36vw -18vh;
		opacity: 0;
	}

	32% {
		translate: 36vw -18vh;
		opacity: 0.84;
	}

	43% {
		translate: 36vw -18vh;
		opacity: 0.84;
	}

	47%,
	48% {
		translate: 36vw -18vh;
		opacity: 0;
	}

	50%,
	53% {
		translate: 29vw 27vh;
		opacity: 0;
	}

	57% {
		translate: 29vw 27vh;
		opacity: 0.84;
	}

	68% {
		translate: 29vw 27vh;
		opacity: 0.84;
	}

	72%,
	73% {
		translate: 29vw 27vh;
		opacity: 0;
	}

	75%,
	78% {
		translate: -34vw 19vh;
		opacity: 0;
	}

	82% {
		translate: -34vw 19vh;
		opacity: 0.84;
	}

	93% {
		translate: -34vw 19vh;
		opacity: 0.84;
	}

	97%,
	100% {
		translate: -34vw 19vh;
		opacity: 0;
	}
}

@keyframes ns-ui-fog-secondary-movement {
	0%,
	3% {
		translate: 28vw 4vh;
		opacity: 0;
	}

	6%,
	15% {
		translate: 28vw 4vh;
		opacity: 0.76;
	}

	18%,
	19% {
		translate: 28vw 4vh;
		opacity: 0;
	}

	20%,
	23% {
		translate: -27vw -14vh;
		opacity: 0;
	}

	26%,
	35% {
		translate: -27vw -14vh;
		opacity: 0.76;
	}

	38%,
	39% {
		translate: -27vw -14vh;
		opacity: 0;
	}

	40%,
	43% {
		translate: 9vw -32vh;
		opacity: 0;
	}

	46%,
	55% {
		translate: 9vw -32vh;
		opacity: 0.76;
	}

	58%,
	59% {
		translate: 9vw -32vh;
		opacity: 0;
	}

	60%,
	63% {
		translate: -15vw 31vh;
		opacity: 0;
	}

	66%,
	75% {
		translate: -15vw 31vh;
		opacity: 0.76;
	}

	78%,
	79% {
		translate: -15vw 31vh;
		opacity: 0;
	}

	80%,
	83% {
		translate: -19vw 13vh;
		opacity: 0;
	}

	86%,
	95% {
		translate: -19vw 13vh;
		opacity: 0.76;
	}

	98%,
	100% {
		translate: -19vw 13vh;
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	#appContainer > .ns-ui-fog-primary-layer,
	#appContainer > .ns-ui-fog-secondary-layer {
		animation: none;
		opacity: 0;
	}
}
