/*
 * Pre-paint boot splash styles. Loaded synchronously from app.html so the
 * spinner is styled on first paint. Kept in a separate file (rather than an
 * inline <style> block in app.html) so SvelteKit's csp: { mode: 'auto' }
 * does NOT generate a style-src hash — once a hash is present in style-src,
 * the CSP spec forces browsers to ignore 'unsafe-inline', which would block
 * every Svelte runtime style="" / style:foo binding in the SPA.
 */

.app-body-wrapper {
	display: contents;
}

#app-splash {
	position: fixed;
	inset: 0;
	z-index: 2147483647;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	background-color: #ffffff;
	transition: opacity 0.25s ease;
}

html.dark #app-splash {
	background-color: #0a0a0a;
}

#app-splash.app-splash--hidden {
	opacity: 0;
	pointer-events: none;
}

#app-splash .app-splash__spinner {
	width: 2rem;
	height: 2rem;
	border-radius: 9999px;
	border: 2px solid rgba(127, 127, 127, 0.25);
	border-top-color: rgba(127, 127, 127, 0.9);
	animation: app-splash-spin 0.7s linear infinite;
}

#app-splash .app-splash__slow {
	display: none;
	font:
		0.8125rem/1.4 system-ui,
		sans-serif;
	color: rgba(127, 127, 127, 0.95);
	text-align: center;
}

#app-splash .app-splash__slow a {
	color: inherit;
	text-decoration: underline;
	cursor: pointer;
}

@keyframes app-splash-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	#app-splash .app-splash__spinner {
		animation-duration: 2s;
	}
}