/* =========================================================
   MuLoader.razor.css  — Al Mudam Municipality Loader
   Blazor scoped CSS (auto-applied to MuLoader.razor)
   ========================================================= */

/* ---------- Design tokens ---------- */
.muload {
    --green: #1F7A4D;
    --green-dark: #145C39;
    --green-deep: #0D4429;
    --green-light: #2E9D67;
    --green-pale: #E8F5EE;
    --green-mist: #F2FAF6;
    --gold: #C8992A;
    --gold-light: #E5B94D;
    --bronze: #9C6B3F;
    --cream: #FCFBF7;
    --line: #E6EDE8;
    --ink-soft: #2C3A32;
    --text-light: #6B7A71;
    --text-mute: #94A29A;
    --sz: clamp(150px, 42vw, 200px);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    user-select: none;
}

/* ---------- Fullscreen overlay ---------- */
.mu-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    background: radial-gradient(60% 50% at 50% 42%, rgba(242,250,246,.82), rgba(252,251,247,.76));
    -webkit-backdrop-filter: blur(6px) saturate(1.05);
    backdrop-filter: blur(6px) saturate(1.05);
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
}

    .mu-overlay.show {
        opacity: 1;
        pointer-events: all;
    }

/* ---------- Ring wrap ---------- */
.muload__ring-wrap {
    position: relative;
    width: var(--sz);
    height: var(--sz);
    display: grid;
    place-items: center;
    isolation: isolate;
}

/* ---------- Glass disc ---------- */
.muload__glass {
    position: absolute;
    inset: 14%;
    border-radius: 50%;
    background: radial-gradient(120% 120% at 30% 25%, rgba(255,255,255,.55), rgba(255,255,255,.10) 55%, rgba(255,255,255,0) 75%);
    -webkit-backdrop-filter: blur(7px) saturate(1.08);
    backdrop-filter: blur(7px) saturate(1.08);
    border: 1px solid rgba(255,255,255,.55);
    box-shadow: 0 10px 30px -12px rgba(13,68,41,.28), inset 0 1px 1px rgba(255,255,255,.6), inset 0 -10px 24px -16px rgba(13,68,41,.20);
}

/* ---------- Scan sweep ---------- */
.muload__scan {
    position: absolute;
    inset: 14%;
    border-radius: 50%;
    overflow: hidden;
    z-index: 2;
    -webkit-mask: radial-gradient(circle at center, #000 60%, transparent 71%);
    mask: radial-gradient(circle at center, #000 60%, transparent 71%);
    opacity: .5;
}

    .muload__scan::before {
        content: "";
        position: absolute;
        left: -10%;
        right: -10%;
        top: 0;
        height: 34%;
        background: linear-gradient(180deg, transparent, rgba(46,157,103,.16) 45%, rgba(200,153,42,.22) 50%, rgba(46,157,103,.16) 55%, transparent);
        transform: translateY(-120%);
        animation: mu-scan 3.6s cubic-bezier(.45,0,.2,1) infinite;
        will-change: transform;
    }

/* ---------- SVG ---------- */
.muload__svg {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 100%;
    overflow: visible;
    display: block;
}

/* ---------- SVG animation groups ---------- */
.mu-arc-grp {
    transform-box: fill-box;
    transform-origin: 100px 100px;
    animation: mu-orbit 3.2s cubic-bezier(.65,0,.35,1) infinite;
    will-change: transform;
}

.mu-inner-arc {
    transform-box: fill-box;
    transform-origin: 100px 100px;
    animation: mu-orbit-rev 9s linear infinite;
    will-change: transform;
}

.mu-logo {
    transform-box: fill-box;
    transform-origin: 100px 100px;
    animation: mu-breathe-soft 4.4s ease-in-out infinite;
    will-change: transform;
}

.mu-ring {
    transform-box: fill-box;
    transform-origin: 100px 100px;
    animation: mu-ring 4.2s ease-in-out infinite;
    will-change: transform, opacity;
}

    .mu-ring.b {
        animation-duration: 5.4s;
        animation-delay: -1.4s;
    }

.mu-glow {
    transform-box: fill-box;
    transform-origin: 100px 100px;
    animation: mu-glow 3.4s ease-in-out infinite;
    will-change: transform, opacity;
}

.mu-orbit-grp.o1 {
    animation: mu-spin 22s linear infinite;
}

.mu-orbit-grp.o2 {
    animation: mu-spin-rev 30s linear infinite;
}

.mu-pt {
    will-change: opacity, transform;
    transform-box: fill-box;
}

.mu-head {
    will-change: opacity;
}

/* ---------- Keyframes ---------- */
@keyframes mu-orbit {
    to {
        transform: rotate(360deg);
    }
}

@keyframes mu-orbit-rev {
    to {
        transform: rotate(-360deg);
    }
}

@keyframes mu-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes mu-spin-rev {
    to {
        transform: rotate(-360deg);
    }
}

@keyframes mu-breathe {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.14);
    }
}

@keyframes mu-breathe-soft {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.045);
    }
}

@keyframes mu-glow {
    0%, 100% {
        transform: scale(1);
        opacity: .30;
    }

    50% {
        transform: scale(1.22);
        opacity: .62;
    }
}

@keyframes mu-ring {
    0%, 100% {
        transform: scale(.965);
        opacity: .16;
    }

    50% {
        transform: scale(1.04);
        opacity: .5;
    }
}

@keyframes mu-scan {
    0% {
        transform: translateY(-120%);
    }

    60%, 100% {
        transform: translateY(320%);
    }
}

@keyframes mu-twinkle {
    0%, 100% {
        opacity: .12;
    }

    50% {
        opacity: .85;
    }
}

/* ---------- Caption ---------- */
.muload__text {
    text-align: center;
    line-height: 1.35;
    animation: mu-textfade 3s ease-in-out infinite;
}

@keyframes mu-textfade {
    0%, 100% {
        opacity: .62;
    }

    50% {
        opacity: 1;
    }
}

.muload__ar {
    display: block;
    font-family: "Tajawal", system-ui, sans-serif;
    font-weight: 500;
    font-size: .98rem;
    color: var(--ink-soft);
    letter-spacing: .2px;
}

.muload__en {
    display: block;
    margin-top: 2px;
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    font-weight: 500;
    font-size: .72rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--text-mute);
}

.muload__dots i {
    opacity: 0;
    animation: mu-dot 1.4s steps(1, end) infinite;
}

    .muload__dots i:nth-child(2) {
        animation-delay: .18s;
    }

    .muload__dots i:nth-child(3) {
        animation-delay: .36s;
    }

@keyframes mu-dot {
    0% {
        opacity: 0;
    }

    30%, 100% {
        opacity: 1;
    }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .mu-arc-grp, .mu-inner-arc, .mu-logo, .mu-ring,
    .mu-glow, .mu-orbit-grp, .mu-pt, .mu-head,
    .muload__text, .muload__dots i, .muload__scan::before {
        animation: none !important;
    }

    .mu-glow {
        opacity: .5;
    }

    .mu-ring {
        opacity: .35;
    }
}
.brandline {
    font-family: "Tajawal", sans-serif;
    color: #6B7A71;
    font-size: .8rem;
    margin-top: 8px;
    letter-spacing: .3px;
}