/* =========================================================
   STAGE 01 — PRECISION FINISH LOADER
========================================================= */


/* =========================================================
   01 — PAGE LOCK
========================================================= */

html.js.agx-loading,
html.js.agx-loading body {

    overflow:
        hidden !important;

    overscroll-behavior:
        none;
}


/* =========================================================
   02 — LOADER ROOT

   در حالت بدون JavaScript مخفی است تا صفحه گیر نکند.
========================================================= */

.agx-loader {

    --agx-loader-yellow:

        var(
            --color-yellow,
            #e7b900
        );

    position:
        fixed;

    z-index:
        2147483000;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    visibility:
        visible;

    opacity:
        1;

    color:
        #ffffff;

    background:
        #111416;

    isolation:
        isolate;
}


html.js.agx-loading
.agx-loader {

    display:
        flex;
}


/* =========================================================
   03 — OPENING PANELS
========================================================= */

.agx-loader-panel {

    position:
        absolute;

    z-index:
        1;

    left:
        0;

    width:
        100%;

    height:
        50.5%;

    background:

        linear-gradient(
            135deg,
            #23272b 0%,
            #15181b 48%,
            #090b0d 100%
        );

    will-change:
        transform;

    transition:

        transform
        .82s
        cubic-bezier(.76, 0, .24, 1);
}


.agx-loader-panel-top {

    top:
        0;

    border-bottom:

        1px solid
        rgba(231, 185, 0, .11);
}


.agx-loader-panel-bottom {

    bottom:
        0;

    border-top:

        1px solid
        rgba(255, 255, 255, .025);
}


/* =========================================================
   04 — CONTENT
========================================================= */

.agx-loader-content {

    position:
        relative;

    z-index:
        4;

    width:

        min(
            440px,
            calc(100% - 40px)
        );

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    opacity:
        1;

    transform:
        translateY(-2vh);

    will-change:
        opacity,
        transform;

    transition:

        opacity .40s ease,
        transform .55s ease;
}


/* =========================================================
   05 — LOGO REVEAL STAGE
========================================================= */

.agx-loader-logo-stage {

    position:
        relative;

    width:

        clamp(
            190px,
            17vw,
            255px
        );

    isolation:
        isolate;

    animation:

        agxLoaderLogoEnter
        .38s
        ease
        both;
}


/* =========================================================
   06 — SHARED LOGO
========================================================= */

.agx-loader-logo {

    display:
        block;

    width:
        100%;

    max-width:
        none;

    height:
        auto;

    user-select:
        none;

    pointer-events:
        none;
}


/* =========================================================
   07 — GREY BASE LOGO
========================================================= */

.agx-loader-logo-base {

    position:
        relative;

    z-index:
        1;

    opacity:
        .58;

    filter:

        brightness(1.35)

        drop-shadow(
            0 8px 18px
            rgba(0, 0, 0, .32)
        );
}


/* =========================================================
   08 — WHITE REVEAL LOGO
========================================================= */

.agx-loader-logo-reveal {

    position:
        absolute;

    z-index:
        2;

    inset:
        0;

    clip-path:

        inset(
            0
            100%
            0
            0
        );

    will-change:
        clip-path;

    filter:

        drop-shadow(
            0 7px 17px
            rgba(0, 0, 0, .32)
        );

    animation:

        agxLoaderLogoReveal
        1.08s
        .16s
        cubic-bezier(.22, .68, .25, 1)
        forwards;
}


/* =========================================================
   09 — GOLD SCAN LINE
========================================================= */

.agx-loader-scan {

    position:
        absolute;

    z-index:
        4;

    top:
        -14%;

    bottom:
        -14%;

    left:
        -2%;

    width:
        2px;

    opacity:
        0;

    transform:
        translateX(-50%);

    pointer-events:
        none;

    background:

        linear-gradient(
            180deg,
            transparent,
            var(--agx-loader-yellow) 18%,
            var(--agx-loader-yellow) 82%,
            transparent
        );

    box-shadow:

        0 0 8px
        rgba(231, 185, 0, .90),

        0 0 20px
        rgba(231, 185, 0, .45),

        0 0 36px
        rgba(231, 185, 0, .18);

    animation:

        agxLoaderLogoScan
        1.08s
        .16s
        cubic-bezier(.22, .68, .25, 1)
        forwards;
}


/* =========================================================
   10 — CAPTION
========================================================= */

.agx-loader-caption {

    width:

        min(
            255px,
            88%
        );

    margin-top:
        18px;

    display:
        grid;

    grid-template-columns:

        minmax(0, 1fr)
        auto
        minmax(0, 1fr);

    align-items:
        center;

    gap:
        14px;

    opacity:
        0;

    animation:

        agxLoaderCaption
        .48s
        .84s
        ease
        forwards;
}


.agx-loader-caption span {

    height:
        1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(231, 185, 0, .52)
        );
}


.agx-loader-caption span:last-child {

    background:

        linear-gradient(
            90deg,
            rgba(231, 185, 0, .52),
            transparent
        );
}


.agx-loader-caption p {

    margin:
        0;

    color:
        rgba(255, 255, 255, .58);

    font-family:
        var(--font-body);

    font-size:

        clamp(
            7px,
            .65vw,
            9px
        );

    font-weight:
        700;

    line-height:
        1;

    letter-spacing:
        2.25px;

    text-align:
        center;

    text-transform:
        uppercase;

    white-space:
        nowrap;
}


/* =========================================================
   11 — EXIT ANIMATION

   این بخش در فایل اصلی وجود نداشت، با وجود اینکه
   JavaScript کلاس is-leaving را اضافه می‌کرد.
========================================================= */

.agx-loader.is-leaving
.agx-loader-panel-top {

    transform:
        translate3d(
            0,
            -101%,
            0
        );
}


.agx-loader.is-leaving
.agx-loader-panel-bottom {

    transform:
        translate3d(
            0,
            101%,
            0
        );
}


.agx-loader.is-leaving
.agx-loader-content {

    opacity:
        0;

    transform:

        translateY(-2vh)
        scale(.975);
}


.agx-loader.is-hidden {

    visibility:
        hidden;

    opacity:
        0;

    pointer-events:
        none;
}


/* =========================================================
   12 — LOGO ANIMATIONS
========================================================= */

@keyframes agxLoaderLogoEnter {

    from {

        opacity:
            0;

        transform:

            translateY(7px)
            scale(.985);
    }


    to {

        opacity:
            1;

        transform:

            translateY(0)
            scale(1);
    }

}


@keyframes agxLoaderLogoReveal {

    from {

        clip-path:

            inset(
                0
                100%
                0
                0
            );
    }


    to {

        clip-path:

            inset(
                0
                0
                0
                0
            );
    }

}


@keyframes agxLoaderLogoScan {

    0% {

        left:
            -2%;

        opacity:
            0;
    }


    10% {

        opacity:
            1;
    }


    88% {

        opacity:
            1;
    }


    100% {

        left:
            102%;

        opacity:
            0;
    }

}


@keyframes agxLoaderCaption {

    from {

        opacity:
            0;

        transform:
            translateY(6px);
    }


    to {

        opacity:
            1;

        transform:
            translateY(0);
    }

}


/* =========================================================
   13 — MOBILE
========================================================= */

@media(max-width: 600px) {

    .agx-loader-content {

        width:
            calc(100% - 34px);

        max-width:
            360px;

        transform:
            translateY(-2vh);
    }


    .agx-loader-logo-stage {

        width:

            clamp(
                215px,
                66vw,
                275px
            );
    }


    .agx-loader-scan {

        top:
            -17%;

        bottom:
            -17%;
    }


    .agx-loader-caption {

        width:
            92%;

        margin-top:
            20px;

        gap:
            10px;
    }


    .agx-loader-caption p {

        font-size:
            7px;

        letter-spacing:
            1.55px;
    }

}

/* =========================================================
   AG BODY SHOP — GLOBAL PAGE LOADER
========================================================= */

@media(prefers-reduced-motion: reduce) {

    .agx-loader-logo-stage {

        animation:
            none;
    }


    .agx-loader-logo-reveal {

        animation:
            none;

        clip-path:
            inset(0);
    }


    .agx-loader-scan {

        display:
            none;
    }


    .agx-loader-caption {

        opacity:
            1;

        animation:
            none;
    }


    .agx-loader-panel,
    .agx-loader-content {

        transition-duration:
            .2s;
    }

}