/*
 * NakedERP – Ladebildschirm: drei kreisende Ringe statt des Logos
 *
 * Frappe zeigt beim Laden der Büro-Oberfläche und nach der Anmeldung (templates/includes/splash_screen.html) das Logo
 * der Website Settings: <div class="centered splash"><img src="…"></div>. Wir lassen das Logo weg und zeichnen drei
 * Ringe in der Aktionsfarbe (nach "CSS loading animation 12" von martinvd, CodePen, MIT; dieselbe Animation wie in
 * frontend/src/index.css). .splash ist die Perspektive, das Bild und die beiden Pseudo-Elemente sind die Ringe; das Logo
 * selbst wird aus dem Bild geschoben und dort abgeschnitten. Frappe entfernt das Element, sobald die Oberfläche steht
 * (desk.js: $(".splash").remove()).
 *
 * Das hängt am Aufbau dieses Includes (CLAUDE.md: Desk-UI); tests/test_splash.py prüft ihn. Geladen in der Büro-Oberfläche
 * (app_include_css) und auf Login und Website (web_include_css); die Farbe kommt aus den Tokens der jeweiligen Datei.
 */

.splash {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	perspective: 800px;
	color: var(--nk-accent, var(--nk-brand, #00485a));
}

.splash > img,
.splash::before,
.splash::after {
	position: absolute;
	top: 0;
	left: 0;
	box-sizing: border-box;
	height: 100%;
	border-radius: 50%;
	border: 0 solid currentColor;
}

/* width wie die Ringe; !important, weil Frappe die Breite am Bild selbst setzt (style="width: auto; max-width: 200px") */
.splash > img {
	width: 100% !important;
	max-width: none !important;
	object-fit: none;
	object-position: 9999px 0;
	border-bottom-width: 3px;
	animation: nk-splash-one 1s linear infinite;
}

.splash::before,
.splash::after {
	content: "";
	width: 100%;
}

.splash::before {
	border-right-width: 3px;
	animation: nk-splash-two 1s linear infinite;
}

.splash::after {
	border-top-width: 3px;
	animation: nk-splash-three 1s linear infinite;
}

@keyframes nk-splash-one {
	from {
		transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
	}
	to {
		transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
	}
}

@keyframes nk-splash-two {
	from {
		transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
	}
	to {
		transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
	}
}

@keyframes nk-splash-three {
	from {
		transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
	}
	to {
		transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.splash > img,
	.splash::before,
	.splash::after {
		animation-duration: 3s;
	}
}