/* ==========================================================================
   Coject — Opus 5.5 · page loader (loader-opus.css)
   Link AFTER layout-opus.css (_LayoutOpus) / auth-opus.css (Index).
   Design: "Coject Loader" canvas → Page loader · Light / Page loader · Dark
     light: frosted canvas overlay, white disc + teal ring, Electric-Blue caption, teal bar
     dark (body.dark): navy overlay, navy disc + neon glow, white caption, neon bar
   --------------------------------------------------------------------------
   #divLoading is shown by showModalDiv() / hidden by hideModalDiv()
   (Master.js / Layout.js) for every StreamRequest call with showLoading = true.
   jQuery .show() sets display:block, so the inner block is centred with
   absolute positioning (never depends on the overlay's display value).

   markup (same in _LayoutOpus.cshtml and Index.cshtml):
   <div id="divLoading" class="cj-loader" style="display:none;" role="status" aria-live="polite">
       <div class="cj-ld">
           <div class="cj-ld-mark">
               <span class="cj-ld-halo" aria-hidden="true"></span>
               <img src="@UrlAssets/img/loadin_gif.gif" alt="" />
           </div>
           <div class="cj-ld-text"><span class="cj-ld-en">Loading…</span><span class="cj-ld-ar">جارٍ التحميل…</span></div>
           <div class="cj-ld-bar" aria-hidden="true"><i></i></div>
       </div>
   </div>
   ========================================================================== */

/* ---------- overlay ---------- */
#divLoading.cj-loader {
    --ld-scrim: rgba(244,246,251,.74);
    --ld-disc: #FFFFFF;
    --ld-disc-border: transparent;
    --ld-disc-shadow: 0 18px 48px rgba(11,13,46,.12), 0 0 0 10px rgba(9,200,149,.08);
    --ld-text: #00015D;
    --ld-track: rgba(0,1,93,.10);
    --ld-seg: #09C895;
    --ld-seg-glow: none;
    --ld-mark-glow: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    margin: 0;
    padding: 0;
    background: var(--ld-scrim);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 1;
    cursor: progress;
    font-family: "Eudoxus Sans", "eudoxus sans", "Tajawal", system-ui, sans-serif;
}

body.dark #divLoading.cj-loader {
    --ld-scrim: rgba(5,6,26,.74);
    --ld-disc: #12153A;
    --ld-disc-border: rgba(0,255,195,.18);
    --ld-disc-shadow: 0 0 40px rgba(0,255,195,.16), 0 0 0 10px rgba(0,255,195,.05);
    --ld-text: #FFFFFF;
    --ld-track: rgba(121,153,195,.22);
    --ld-seg: #00FFC3;
    --ld-seg-glow: 0 0 10px rgba(0,255,195,.6);
    --ld-mark-glow: drop-shadow(0 0 14px rgba(0,255,195,.45));
}

/* the old CSS spinner (layout-opus.css / auth-opus.css) is replaced by the gif */
#divLoading.cj-loader::after {
    content: none !important;
    display: none !important;
}

/* ---------- centred block ---------- */
#divLoading .cj-ld {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    user-select: none;
}

/* mark: breathing disc + the animated gif on top */
#divLoading .cj-ld-mark {
    position: relative;
    width: 200px;
    height: 200px;
    display: grid;
    place-items: center;
}

#divLoading .cj-ld-halo {
    position: absolute;
    width: 132px;
    height: 132px;
    border-radius: 50%;
    background: var(--ld-disc);
    border: 1px solid var(--ld-disc-border);
    box-shadow: var(--ld-disc-shadow);
    animation: cj-ld-breath 2s ease-in-out infinite;
}

#divLoading .cj-ld-mark img {
    position: relative;
    display: block;
    width: 200px;
    height: 200px;
    margin: 0;
    object-fit: contain;
    filter: var(--ld-mark-glow);
}

/* caption */
#divLoading .cj-ld-text {
    margin-top: -12px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .01em;
    color: var(--ld-text);
}

#divLoading .cj-ld-ar {
    display: none;
    font-family: "Tajawal", "Eudoxus Sans", sans-serif;
}

[dir="rtl"] #divLoading .cj-ld-en {
    display: none;
}

[dir="rtl"] #divLoading .cj-ld-ar {
    display: inline;
}

/* indeterminate bar */
#divLoading .cj-ld-bar {
    position: relative;
    width: 132px;
    height: 3px;
    margin-top: 12px;
    border-radius: 3px;
    background: var(--ld-track);
    overflow: hidden;
}

    #divLoading .cj-ld-bar > i {
        position: absolute;
        top: 0;
        left: 0;
        width: 40%;
        height: 100%;
        border-radius: 3px;
        background: var(--ld-seg);
        box-shadow: var(--ld-seg-glow);
        animation: cj-ld-bar 1.4s cubic-bezier(.45,0,.2,1) infinite;
    }

[dir="rtl"] #divLoading .cj-ld-bar > i {
    animation-direction: reverse;
}

/* ---------- motion ---------- */
@keyframes cj-ld-breath {
    0%, 100% {
        transform: scale(1);
        opacity: .55;
    }

    50% {
        transform: scale(1.08);
        opacity: .95;
    }
}

@keyframes cj-ld-bar {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(250%);
    }
}

@media (prefers-reduced-motion: reduce) {
    #divLoading .cj-ld-halo {
        animation: none;
        opacity: .8;
    }

    #divLoading .cj-ld-bar > i {
        animation-duration: 3s;
    }
}

/* ---------- small screens ---------- */
@media (max-width: 480px) {
    #divLoading .cj-ld-mark, #divLoading .cj-ld-mark img {
        width: 160px;
        height: 160px;
    }

    #divLoading .cj-ld-halo {
        width: 106px;
        height: 106px;
    }
}