/* =============================================================================
   Aamal Aljoud — the loading screen
   -----------------------------------------------------------------------------
   The first thing a visitor sees, on the first load and on every move between
   pages. It replaces the purchased theme's plain grey panel (.loading-box in
   style.css) without touching it: the same three elements, repainted here.

   The ground is the brand's own charcoal with the company motif barely there
   behind it; the mark arrives once, quietly, and a single sheen passes over it;
   a hairline of the accent shows the page is still coming. On the way out the
   screen lifts rather than blinking off.

   Nothing here decides when the screen goes: that is the inline script in the
   layout. The failsafe below is the last resort — if no script ever runs, the screen still
   clears itself rather than holding the site behind it.
   ========================================================================== */

.loading-area {
    position: fixed;
    inset: 0;
    z-index: 9999;
    overflow: hidden;
    /* last resort: a screen nobody dismissed clears itself */
    animation: aj-loader-failsafe 0s linear 6s forwards;
}

/* the ground: the brand's charcoal, lit a little from the middle */
.loading-box {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(120% 120% at 50% 38%, #2c313a 0%, #20242b 58%, #171a20 100%);
}

/* the company motif, at a whisper */
.loading-box::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.05;
    background-color: #ffffff;
    -webkit-mask-image: var(--aj-loader-motif);
    mask-image: var(--aj-loader-motif);
    -webkit-mask-repeat: repeat;
    mask-repeat: repeat;
    -webkit-mask-size: 280px auto;
    mask-size: 280px auto;
    -webkit-mask-position: center;
    mask-position: center;
}

.loading-pic {
    position: absolute;
    inset-block-start: 50%;
    inset-inline: 0;
    z-index: 2;
    transform: translateY(-50%);
    text-align: center;
}

.aj-loader {
    display: grid;
    justify-items: center;
    gap: clamp(22px, 3vw, 34px);
}

/* the mark, and the sheen that crosses it */
.aj-loader__mark {
    position: relative;
    display: block;
    inline-size: clamp(148px, 17vw, 208px);
}

.aj-loader__mark img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    animation: aj-loader-rise 900ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/*
 * The sheen.
 *
 * The mark's own shape is held by this element, which never moves; the light
 * travels inside it. Masking the moving element instead would carry the shape
 * along with it — a second copy of the mark sliding across the screen rather
 * than light crossing a mark that stays where it is.
 */
.aj-loader__sheen {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: var(--aj-loader-mark);
    mask-image: var(--aj-loader-mark);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/*
 * The band is dark and multiplied, not white: the mark is a white square, and
 * white light over white artwork is nothing at all — it has to read as a
 * shadow passing over the surface. Blending is confined to this element, so
 * the ground behind the mark is untouched.
 */
.aj-loader__sheen::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    background: linear-gradient(115deg,
        transparent 34%,
        rgba(32, 36, 43, 0.20) 50%,
        transparent 66%);
    mix-blend-mode: multiply;
    transform: translateX(-130%);
    animation: aj-loader-sheen 2.6s ease-in-out 800ms infinite;
}

/* no mask support: no sheen at all, rather than a rectangle crossing the mark */
@supports not ((mask-image: url("#m")) or (-webkit-mask-image: url("#m"))) {
    .aj-loader__sheen {
        display: none;
    }
}

/* the hairline that says the page is still on its way */
.aj-loader__bar {
    position: relative;
    display: block;
    inline-size: clamp(86px, 11vw, 124px);
    block-size: 2px;
    border-radius: var(--aj-radius-pill, 999px);
    background: rgba(255, 255, 255, 0.18);
    overflow: hidden;
}

.aj-loader__bar::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inline-size: 42%;
    border-radius: inherit;
    background: var(--aj-accent, #4a758c);
    animation: aj-loader-travel 1.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

/* the way out: the screen lifts off the page */
.loading-area.is-done {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition:
        transform 760ms cubic-bezier(0.7, 0, 0.2, 1),
        opacity 520ms ease;
}

@keyframes aj-loader-rise {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes aj-loader-sheen {
    0% { transform: translateX(-130%); }
    55%, 100% { transform: translateX(130%); }
}

@keyframes aj-loader-travel {
    0% { inset-inline-start: -45%; }
    100% { inset-inline-start: 100%; }
}

@keyframes aj-loader-failsafe {
    to {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

/*
 * Reduced motion: the mark is simply there, the sheen never runs, the hairline
 * rests filled rather than travelling, and the screen goes without a slide.
 */
@media (prefers-reduced-motion: reduce) {

    .aj-loader__mark img,
    .aj-loader__sheen::before,
    .aj-loader__bar::before {
        animation: none;
    }

    .aj-loader__mark img {
        opacity: 1;
        transform: none;
    }

    .aj-loader__sheen {
        display: none;
    }

    .aj-loader__bar::before {
        inset-inline: 0;
        inline-size: 100%;
    }

    .loading-area.is-done {
        transform: none;
        transition: opacity 200ms linear;
    }
}