/*
 * Loader-Streifen am unteren Viewport-Rand — zwei Modi in einer Leiste:
 *   1. Scroll-Fortschritt: roter Fill wächst mit `--gg-scroll` (gesetzt
 *      von main.js, 0–100%). Default-Verhalten, immer sichtbar.
 *   2. Navigation: bei `html.is-loading` läuft eine Indeterminate-
 *      Animation drüber (überschreibt Width + Position).
 */

.gg-loader {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: 6px;
	background-color: var(--gg-grey-700);
	z-index: 9999;
	pointer-events: none;
}

.gg-loader__bar {
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--gg-scroll, 0%);
	background-color: var(--gg-red);
	box-shadow: 0 0 8px rgba(200, 16, 46, 0.65);
	transition: width 90ms linear;
	will-change: width;
}

/* Navigation-Modus: Width fix auf 40%, Position wird per Keyframe
 * von links nach rechts geschoben — überschreibt den Scroll-Fill. */
html.is-loading .gg-loader__bar {
	width: 40%;
	transition: none;
	animation: gg-loader-slide 1100ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes gg-loader-slide {
	0%   { transform: translateX(-100%); }
	100% { transform: translateX(250%); }
}

@media (prefers-reduced-motion: reduce) {
	.gg-loader__bar {
		transition: none;
	}
	html.is-loading .gg-loader__bar {
		animation: none;
		width: 100%;
		opacity: 0.6;
	}
}