/*  The processing overlay.

    IT IS THE LOGO, MOVING. The three slashes are the ones on the pill, in the same lavender →
    periwinkle → cyan order, sweeping in sequence over the cyan strip. A generic spinner would do
    the same job and say nothing; this one tells somebody whose system is thinking.

    IT DOES NOT APPEAR IMMEDIATELY. nexus-loading.js holds it back a quarter of a second, because
    an overlay that flashes up and vanishes on a fast response is worse than no overlay - it reads
    as a glitch. Anything quicker than that never shows it at all. */

.nx-load {
    position: fixed; inset: 0; z-index: 20000;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1.15rem;
    background: rgba(19, 17, 58, .58);
    backdrop-filter: blur(3px);
    opacity: 0; visibility: hidden;
    transition: opacity .18s ease, visibility .18s ease;
}
.nx-load.on { opacity: 1; visibility: visible; }

/*  The pill, at rest. The slashes move inside it. */
.nx-load-mark {
    position: relative; width: 96px; height: 96px; border-radius: 22px;
    background: linear-gradient(135deg, var(--nexus-deep, #1E1B4B), var(--nexus-abyss, #13113A));
    box-shadow: 0 18px 44px rgba(19, 17, 58, .45);
    overflow: hidden;
}

/*  The strip along the bottom edge, sweeping left to right. */
.nx-load-mark::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 7px;
    background: linear-gradient(90deg,
        var(--nexus-accent, #22D3EE), var(--nexus-primary, #6366F1), var(--nexus-violet, #4338CA));
    transform-origin: left center;
    animation: nx-strip 1.4s ease-in-out infinite;
}

.nx-load-slash {
    position: absolute; bottom: 20px; width: 11px; height: 56px;
    transform: skewX(-20deg);
    border-radius: 2px;
    animation: nx-slash 1.4s ease-in-out infinite;
}
.nx-load-slash:nth-child(1) { left: 24px; background: var(--nexus-tint,   #DDD6FE); opacity: .28; animation-delay: 0s;    }
.nx-load-slash:nth-child(2) { left: 39px; background: var(--nexus-soft,   #818CF8); animation-delay: .14s; }
.nx-load-slash:nth-child(3) { left: 54px; background: var(--nexus-accent, #22D3EE); animation-delay: .28s; }

@keyframes nx-slash {
    0%, 100% { transform: skewX(-20deg) translateY(0);     opacity: .35; }
    45%      { transform: skewX(-20deg) translateY(-9px);  opacity: 1;   }
}
@keyframes nx-strip {
    0%, 100% { transform: scaleX(.25); }
    50%      { transform: scaleX(1);   }
}

.nx-load-text {
    color: #F0F9FF; font-size: .9rem; font-weight: 600; letter-spacing: .3px;
    text-shadow: 0 1px 3px rgba(19, 17, 58, .6);
}

/*  Somebody who has asked for less motion still needs to know the system is busy, so the overlay
    stays and only the movement stops. */
@media (prefers-reduced-motion: reduce) {
    .nx-load-slash, .nx-load-mark::after { animation: none; }
    .nx-load-slash { opacity: .9; }
    .nx-load-mark::after { transform: scaleX(1); }
}