/* ============================================================
   SITE PRELOADER — single source of truth for the loading
   overlay used on EVERY page (design/animation/timing taken
   from the original ums.php loader).

   Loaded by includes/head.php on the main PHP pages and via a
   plain <link> on the self-contained HTML pages. The matching
   markup is the #loader div emitted by includes/header.php (or
   hand-written on self-contained pages); the behavior lives in
   assets/js/preloader.js.

   The overlay is visible by default so it covers the very first
   paint (no flash of unstyled content); preloader.js fades it
   out on window load. A <noscript> rule next to the markup
   hides it when JS is disabled so the site stays usable.
   ============================================================ */

#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    transition: opacity .5s ease;
}

.loader-dots {
    display: flex;
    gap: 12px;
}

.loader-dots div {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #00468B;
    animation: loader-bounce 1s infinite;
}

.loader-dots div:nth-child(1) {
    animation-delay: .7s;
}

.loader-dots div:nth-child(2) {
    animation-delay: .3s;
}

.loader-dots div:nth-child(3) {
    animation-delay: .7s;
}

/* Namespaced (was `bounce`) so a page-level @keyframes can never
   silently override the shared loader animation. */
@keyframes loader-bounce {
    0%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-15px);
    }
}