html.prime-splash-active,
html.prime-splash-active body {
	background: #202020;
	overflow: hidden;
}

#prime-splash-screen {
	--prime-lamp-duration: 3.65s;
	--prime-lamp-easing: cubic-bezier(0.45, 0, 0.18, 1);
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #202020;
	opacity: 1;
	overflow: hidden;
	transition: opacity 0.35s ease;
}

#prime-splash-screen.fade-out {
	opacity: 0;
}

#prime-splash-progress-track {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
	height: 6px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.08);
}

#prime-splash-progress-bar {
	width: 100%;
	height: 100%;
	background: #d71937;
	box-shadow: 0 0 12px rgba(255, 47, 99, 0.62);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.18s ease-out;
}

#prime-splash-content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: min(72vw, 340px);
}

.prime-splash-defs {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
	pointer-events: none;
}

.prime-logo-stage {
	position: relative;
	width: min(72vw, 340px);
	aspect-ratio: 1000 / 654;
	overflow: visible;
	isolation: isolate;
}

.prime-logo-stage::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		linear-gradient(
			104deg,
			transparent 0%,
			transparent 34%,
			rgba(0, 0, 0, 0.08) 40%,
			rgba(0, 0, 0, 0.34) 48%,
			rgba(0, 0, 0, 0.2) 56%,
			transparent 68%,
			transparent 100%
		);
	background-size: 260% 100%;
	background-position: 154% 0;
	filter: blur(7px) saturate(1.25);
	opacity: 0;
	-webkit-mask: url("./prime-loading-logo.png") center / contain no-repeat;
	mask: url("./prime-loading-logo.png") center / contain no-repeat;
	animation: primeLogoShadowTrail var(--prime-lamp-duration) var(--prime-lamp-easing) infinite;
}

.prime-logo-base,
.prime-logo-edge-image,
.prime-logo-fill-sweep,
.prime-logo-edge-sweep {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.prime-logo-base,
.prime-logo-edge-image {
	display: block;
	object-fit: contain;
	user-select: none;
}

.prime-logo-base {
	z-index: 1;
	filter:
		drop-shadow(0 0 10px rgba(0, 0, 0, 0.34))
		drop-shadow(0 0 22px rgba(0, 0, 0, 0.18));
}

.prime-logo-fill-sweep {
	z-index: 2;
	background:
		linear-gradient(
			104deg,
			transparent 0%,
			transparent 38%,
			rgba(255, 255, 255, 0.02) 43%,
			rgba(255, 255, 255, 0.46) 49%,
			rgba(255, 110, 140, 0.26) 54%,
			transparent 62%,
			transparent 100%
		);
	background-size: 240% 100%;
	background-position: 130% 0;
	mix-blend-mode: screen;
	opacity: 0.08;
	-webkit-mask: url("./prime-loading-logo.png") center / contain no-repeat;
	mask: url("./prime-loading-logo.png") center / contain no-repeat;
	animation: primeLogoLightSweep var(--prime-lamp-duration) var(--prime-lamp-easing) infinite;
}

.prime-logo-edge-sweep {
	z-index: 3;
	-webkit-mask-image:
		linear-gradient(
			105deg,
			transparent 0%,
			transparent 39%,
			rgba(0, 0, 0, 0.18) 44%,
			#000000 49%,
			#000000 52%,
			rgba(0, 0, 0, 0.24) 56%,
			transparent 63%,
			transparent 100%
		);
	-webkit-mask-size: 240% 100%;
	-webkit-mask-position: 130% 0;
	mask-image:
		linear-gradient(
			105deg,
			transparent 0%,
			transparent 39%,
			rgba(0, 0, 0, 0.18) 44%,
			#000000 49%,
			#000000 52%,
			rgba(0, 0, 0, 0.24) 56%,
			transparent 63%,
			transparent 100%
		);
	mask-size: 240% 100%;
	mask-position: 130% 0;
	animation: primeLogoEdgeSweep var(--prime-lamp-duration) var(--prime-lamp-easing) infinite;
}

.prime-logo-edge-image {
	filter: url("#prime-logo-edge-filter");
	opacity: 0.98;
}

@keyframes primeLogoShadowTrail {
	0% {
		background-position: 154% 0;
		opacity: 0;
		transform: translate(-9px, 4px);
	}
	12% {
		opacity: 0.24;
	}
	58% {
		background-position: -2% 0;
		opacity: 0.42;
		transform: translate(10px, 4px);
	}
	74% {
		opacity: 0;
	}
	100% {
		background-position: -2% 0;
		opacity: 0;
		transform: translate(10px, 4px);
	}
}

@keyframes primeLogoLightSweep {
	0% {
		background-position: 132% 0;
	}
	58% {
		background-position: -24% 0;
	}
	100% {
		background-position: -24% 0;
	}
}

@keyframes primeLogoEdgeSweep {
	0% {
		-webkit-mask-position: 132% 0;
		mask-position: 132% 0;
	}
	58% {
		-webkit-mask-position: -24% 0;
		mask-position: -24% 0;
	}
	100% {
		-webkit-mask-position: -24% 0;
		mask-position: -24% 0;
	}
}

@media (max-width: 480px) {
	#prime-splash-content,
	.prime-logo-stage {
		width: min(78vw, 280px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.prime-logo-stage::before,
	.prime-logo-fill-sweep,
	.prime-logo-edge-sweep {
		animation: none !important;
		opacity: 0;
	}

	#prime-splash-screen {
		transition-duration: 0.01ms !important;
	}
}