/*
 * Ladeanzeige bei Swup-Navigation.
 *
 * Gesteuert über die Klasse html.is-loading (siehe swup.js). Beides sind
 * Pseudo-Elemente von <html>: kein zusätzliches Markup, kein JS-Positionieren.
 * Beide starten verzögert, damit schnelle Wechsel (z.B. aus dem Cache)
 * nicht aufblitzen.
 */

 html.is-loading {
    cursor: progress;
}

/* Dünner Balken oben im Viewport */
html.is-loading::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--color-loading-bar, #111);
    z-index: 9999;
    pointer-events: none;
    animation: swup-loading-bar 6s cubic-bezier(0.1, 0.6, 0.3, 1) 150ms forwards;
}

/* Spinner, im Viewport zentriert */
html.is-loading::after {
    content: "";
    position: fixed;
    top: 30vh;
    left: 50%;
    width: 32px;
    height: 32px;
    margin-left: -16px;
    border: 3px solid rgba(0, 0, 0, 0.15);
    border-top-color: var(--color-loading-bar, #111);
    border-radius: 50%;
    opacity: 0;
    z-index: 9998;
    pointer-events: none;
    animation:
        swup-loading-fade-in 150ms linear 300ms forwards,
        swup-loading-rotate 0.7s linear infinite;
}

@keyframes swup-loading-bar {
    to { width: 85%; }
}

@keyframes swup-loading-fade-in {
    to { opacity: 1; }
}

@keyframes swup-loading-rotate {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    html.is-loading::before {
        animation-duration: 0.01s;
        width: 40%;
    }

    html.is-loading::after {
        animation:
            swup-loading-fade-in 150ms linear 300ms forwards,
            swup-loading-rotate 1.4s linear infinite;
    }
}