/*
 * Die Startanzeige: Grund und Wartekringel, bis Vue mountet.
 *
 * Warum eine eigene Datei unter `public/` und kein `<style>` in der `index.html`: die CSP steht auf
 * `style-src 'self'` **ohne** `'unsafe-inline'` (siehe `vite.config.ts`) — ein Inline-Block und
 * sogar ein `style="…"`-Attribut würden verworfen. Und nicht unter `src/`, weil sie sonst Teil des
 * Bündels wäre und damit genau so spät käme wie das, worauf sie warten lassen soll; dieselbe
 * Überlegung wie bei `public/handoff.js`.
 *
 * Aufgeräumt wird nichts: `app.mount('#app')` leert den Container, das Markup aus der `index.html`
 * verschwindet damit von selbst.
 *
 * Immer dunkel, wie die `index.html` selbst (`<html class="dark">`); die gespeicherte Wahl zieht
 * `theme.init()` in `main.ts` vor dem ersten Frame nach. Der Grund ist derselbe Wert wie
 * `--dvlp-bg` im dunklen Thema, damit der Übergang zur fertigen App keine Kante hat.
 *
 * Der Grund gehört an den BODY und **nicht** ans HTML — aus demselben Grund, aus dem `styles.css`
 * es so hält: trägt HTML keinen eigenen Hintergrund, überträgt der Browser die Farbe des BODY auf
 * das Viewport-Canvas, und nur deshalb kann `body.camera-running` sie mit `transparent` wieder
 * wegnehmen. Am HTML gesetzt, stünde das Blau vor dem Kamerabild. Die Regel aus `styles.css` kommt
 * später im Kopf und gewinnt bei gleicher Spezifität, sobald das Bündel da ist.
 */

body {
	background-color: hsl(210 50% 26%);
}

.boot {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;

	/* Erst nach einer knappen halben Sekunde sichtbar. Ein Start aus dem Cache ist deutlich
	   schneller als das, und ein Kringel, der für zwei Frames aufblitzt, wirkt wie ein Fehler. */
	opacity: 0;
	animation: boot-fade 200ms ease-out 450ms forwards;
}

.boot-spinner {
	width: 38px;
	height: 38px;
	border: 3px solid hsl(210 35% 93% / 0.25);
	border-top-color: hsl(210 35% 93%);
	border-radius: 50%;
	animation: boot-spin 800ms linear infinite;
}

@keyframes boot-fade {
	to {
		opacity: 1;
	}
}

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

/* Wer Bewegung abbestellt hat, bekommt denselben Ring als ruhiges Pulsieren — die Auskunft
   „es passiert etwas" bleibt, das Drehen entfällt. */
@media (prefers-reduced-motion: reduce) {
	.boot-spinner {
		animation: boot-pulse 1600ms ease-in-out infinite;
		border-color: hsl(210 35% 93% / 0.6);
	}

	@keyframes boot-pulse {
		50% {
			border-color: hsl(210 35% 93% / 0.2);
		}
	}
}
