/*
 * Splash-Loader: vollflächiges schwarzes Overlay mit Gorilla-Lockup und
 * rotem Progress-Balken. Nur auf der Startseite (siehe header.php /
 * enqueue.php). Wird per loader-splash.js auf echtem Lade-Progress
 * (DOMContentLoaded → Images → window.load) ausgefadet und aus dem DOM
 * entfernt.
 *
 * Wichtig: Default-Zustand ist SICHTBAR — damit der Splash sofort beim
 * Body-Render auftaucht, bevor JS überhaupt läuft. JS schaltet nur
 * Progress + Fade-Out.
 */

.gg-splash {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: grid;
	place-items: center;
	background-color: var(--gg-black);
	opacity: 1;
	transition: opacity var(--dur-slow) var(--ease-standard);
}

.gg-splash[data-gg-splash-state="done"] {
	opacity: 0;
	pointer-events: none;
}

.gg-splash__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	padding: var(--space-6);
}

.gg-splash__logo {
	display: block;
	width: clamp(300px, 50vw, 540px);
	height: auto;
	-webkit-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
}

.gg-splash__bar {
	position: relative;
	width: clamp(200px, 34vw, 320px);
	height: 4px;
	/* PNG-Canvas hat unten ~35% Whitespace unter dem Slogan — Balken
	 * mit negativem Margin in diese Leerfläche reinziehen, damit er
	 * visuell direkt unter „Wir haben den Dreh raus" sitzt. */
	margin-top: clamp(-100px, -9vw, -40px);
	background-color: var(--gg-grey-700);
	border-radius: var(--radius-pill);
	overflow: hidden;
}

.gg-splash__bar-fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--gg-splash-progress, 0%);
	background-color: var(--gg-red);
	box-shadow: 0 0 12px rgba(200, 16, 46, 0.7);
	border-radius: inherit;
	transition: width var(--dur-base) var(--ease-out);
	will-change: width;
}

@media (prefers-reduced-motion: reduce) {
	.gg-splash,
	.gg-splash__bar-fill {
		transition: none;
	}
}