/* Splash: duplicate --auth-canvas (and glow RGBA) vs src/styles/tokens/app-tokens.css; dark splash = prefers-color-scheme only. */
:root {
	--auth-canvas: #f8f5fa;
	--page-loader-brand-svg-filter: drop-shadow(0 18px 32px rgba(155, 107, 184, 0.38))
		drop-shadow(0 8px 18px rgba(212, 165, 116, 0.22));
}

@media (prefers-color-scheme: dark) {
	:root {
		--auth-canvas: #141018;
		--page-loader-brand-svg-filter: drop-shadow(0 20px 36px rgba(196, 163, 214, 0.32))
			drop-shadow(0 10px 20px rgba(232, 201, 161, 0.14));
	}
}

body {
	margin: 0;
}

.page-loading {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--auth-canvas);
	z-index: 10000;
	transition:
		opacity 300ms ease-out,
		visibility 300ms ease-out;
}

.page-loading.hide {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.page-loader-brand-svg {
	display: block;
	filter: var(--page-loader-brand-svg-filter);
}

.page-loader-brand-ring {
	transform-box: fill-box;
	transform-origin: center;
	animation: page-loader-ring-spin 2.8s linear infinite;
}

@keyframes page-loader-ring-spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.page-loader-brand-ring {
		animation: none;
	}
}