/* =========================================================
   NAKSH ELEVATOR - FIRST VISIT INTRO
========================================================= */

/* .naksh-site-intro {
    position: fixed;
    inset: 0;

    z-index: 999999;

    overflow: hidden;

    background: transparent;

    pointer-events: all;
} */

.naksh-site-intro {
    position: fixed;
    inset: 0;

    z-index: 999999;

    overflow: hidden;

    /* IMPORTANT:
       Logo disappear hone ke baad
       blank white screen visible rahegi */
    background: #ffffff;

    pointer-events: all;
}

/*
=========================================================
WHEN BLUE DOORS START OPENING
Remove white intro background so actual website
becomes visible behind the opening doors.
=========================================================
*/

.naksh-site-intro.is-door-opening {
    background: transparent;
}

body.naksh-intro-active {
    overflow: hidden;
}


/* =========================================================
   STEP 1 : WHITE LOGO LOADER
========================================================= */

/* .naksh-site-intro__loader {
    position: absolute;
    inset: 0;

    z-index: 30;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background: #ffffff;

    transition:
        opacity .45s ease,
        visibility .45s ease,
        transform .45s ease;
} */

.naksh-site-intro__loader {
    position: absolute;
    inset: 0;

    z-index: 30;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background: #ffffff;

    transition:
        opacity .32s ease,
        visibility .32s ease,
        transform .32s ease;
}

.naksh-site-intro__logo-wrap {
    position: relative;

    width: 180px;
    height: 180px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.naksh-site-intro__logo {
    position: relative;
    z-index: 2;

    width: 118px;
    max-height: 92px;

    object-fit: contain;

    animation:
        nakshLogoPulse 1.5s ease-in-out infinite;
}


/* spinner */

.naksh-site-intro__spinner {
    position: absolute;
    inset: 0;

    border-radius: 50%;

    border: 2px solid #e8edf4;
    border-top-color: #f79300;
    border-right-color: #07366d;

    animation:
        nakshSpinner 1.05s linear infinite;
}

.naksh-site-intro__spinner::before {
    content: "";

    position: absolute;
    inset: 10px;

    border-radius: inherit;

    border:
        1px solid rgba(7, 54, 109, .08);
}


/* loading line */

.naksh-site-intro__loading-line {
    width: 145px;
    height: 2px;

    margin-top: 18px;

    background: #e9edf3;

    overflow: hidden;

    border-radius: 50px;
}

.naksh-site-intro__loading-line span {
    display: block;

    width: 45%;
    height: 100%;

    background:
        linear-gradient(90deg,
            #07366d,
            #f79300);

    animation:
        nakshLoadingLine 1.2s ease-in-out infinite;
}

.naksh-site-intro__loader p {
    margin: 13px 0 0;

    color: #64748b;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2px;
    text-transform: uppercase;
}


/* logo loader hide */

.naksh-site-intro.is-loading-complete .naksh-site-intro__loader {
    opacity: 0;

    visibility: hidden;

    transform: scale(1.035);
}


/* =========================================================
   STEP 2 : BLUE SCREEN
========================================================= */

.naksh-blue-intro {
    position: absolute;
    inset: 0;

    z-index: 20;

    overflow: hidden;

    pointer-events: none;
}


/*
|--------------------------------------------------------------------------
| BLUE DOORS
|--------------------------------------------------------------------------
|
| Initially doors screen ke TOP ke bahar rahenge.
| Logo loader complete hone ke baad top -> bottom slide honge.
|
*/

/* .naksh-blue-intro__door {
    position: absolute;

    top: 0;
    bottom: 0;

    width: 50%;

    background:
        linear-gradient(
            180deg,
            #07366d 0%,
            #062f60 55%,
            #052650 100%
        );

    transform: translateY(-100%);

    will-change: transform;

    box-shadow:
        inset 0 0 80px rgba(0, 0, 0, .08);
} */

.naksh-blue-intro__door {
    position: absolute;

    top: 0;
    bottom: 0;

    width: 50%;

    /*
     * Naksh logo navy blue.
     * Simple clean background.
     * Koi elevator graphic nahi.
     */
    background: #07366d;

    /*
     * Initially complete blue screen
     * viewport ke TOP ke bahar hai.
     */
    transform: translateY(-101%);

    will-change: transform;

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

/* .naksh-blue-intro__door--left {
    left: 0;

    transition:
        transform .85s cubic-bezier(.76, 0, .24, 1);
}

.naksh-blue-intro__door--right {
    right: 0;

    transition:
        transform .85s cubic-bezier(.76, 0, .24, 1);
} */


.naksh-blue-intro__door--left {
    left: 0;
}


.naksh-blue-intro__door--right {
    right: 0;
}

/* =========================================================
   BLUE TOP -> BOTTOM ENTER
========================================================= */


.naksh-site-intro.is-blue-entering .naksh-blue-intro__door {
    transform: translateY(0);
}


/* =========================================================
   CENTER SEAM
========================================================= */

/* .naksh-blue-intro__seam {
    position: absolute;

    z-index: 5;

    top: 0;
    bottom: 0;

    left: 50%;

    width: 1px;

    background:
        rgba(255, 255, 255, .15);

    opacity: 0;

    transform:
        translateX(-50%)
        translateY(-100%);

    transition:
        transform .85s cubic-bezier(.76, 0, .24, 1),
        opacity .3s ease;
} */

.naksh-blue-intro__seam {
    position: absolute;

    z-index: 5;

    top: 0;
    bottom: 0;

    left: 50%;

    width: 1px;

    background:
        rgba(255, 255, 255, .18);

    opacity: 0;

    transform:
        translateX(-50%) translateY(-101%);

    transition:
        transform 1s cubic-bezier(.76, 0, .24, 1),
        opacity .25s ease;
}

/* .naksh-site-intro.is-blue-entering
.naksh-blue-intro__seam {
    transform:
        translateX(-50%)
        translateY(0);

    opacity: 1;
} */

.naksh-site-intro.is-blue-entering .naksh-blue-intro__seam {
    transform:
        translateX(-50%) translateY(0);

    opacity: 1;
}

/* =========================================================
   BLUE SCREEN FULLY ARRIVED
========================================================= */

.naksh-site-intro.is-blue-ready .naksh-blue-intro__door {
    transform: translateY(0);
}


/* =========================================================
   STEP 3 : ELEVATOR DOORS OPEN
========================================================= */

.naksh-site-intro.is-door-opening .naksh-blue-intro__door--left {
    transform: translateX(-100%);
}

.naksh-site-intro.is-door-opening .naksh-blue-intro__door--right {
    transform: translateX(100%);
}

.naksh-site-intro.is-door-opening .naksh-blue-intro__seam {
    opacity: 0;
}


/* =========================================================
   WEBSITE REVEAL
========================================================= */

/*
Website actual me intro ke niche already loaded hai.

Doors open hote hi transparent area badhta jayega,
isliye website naturally reveal hogi.

Slight premium fade/scale website ko aur smooth feel deta hai.
*/

/* body.naksh-intro-active> :not(.naksh-site-intro) {
    transition:
        opacity .9s ease,
        filter .9s ease;
}

body.naksh-door-revealing> :not(.naksh-site-intro) {
    opacity: .72;
    filter: blur(1.5px);
}

body.naksh-intro-complete> :not(.naksh-site-intro) {
    opacity: 1;
    filter: blur(0);
}

body.naksh-intro-complete> :not(.naksh-site-intro) {
    opacity: 1;
    filter: none;
} */

/* =========================================================
   WEBSITE REVEAL
========================================================= */
/* =========================================================
   WEBSITE REVEAL
========================================================= */

body.naksh-intro-active> :not(.naksh-site-intro) {
    transition:
        opacity 1.15s cubic-bezier(.22, .61, .36, 1),
        filter 1.15s cubic-bezier(.22, .61, .36, 1);

    opacity: 1;
}


/*
Door open hona start hote hi
website light opacity me visible hogi
*/
body.naksh-door-revealing> :not(.naksh-site-intro) {
    opacity: .58;
    filter: blur(1.2px);
}


/*
Door open hote-hote website
smoothly full visible hone lagegi
*/
body.naksh-website-revealing> :not(.naksh-site-intro) {
    opacity: 1;
    filter: blur(0);
}


/*
Doors completely open hone ke baad
website 100% clear
*/
body.naksh-intro-complete> :not(.naksh-site-intro) {
    opacity: 1;
    filter: blur(0);
}


/* =========================================================
   FINISH INTRO
========================================================= */

.naksh-site-intro.is-finished {
    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .25s ease,
        visibility .25s ease;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes nakshSpinner {

    to {
        transform: rotate(360deg);
    }

}

@keyframes nakshLogoPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.04);
    }

}

@keyframes nakshLoadingLine {

    0% {
        transform: translateX(-120%);
    }

    100% {
        transform: translateX(340%);
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .naksh-site-intro__logo-wrap {
        width: 165px;
        height: 165px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .naksh-site-intro__logo-wrap {
        width: 140px;
        height: 140px;
    }

    .naksh-site-intro__logo {
        width: 92px;
        max-height: 72px;
    }

    .naksh-site-intro__loading-line {
        width: 120px;
    }

    .naksh-site-intro__loader p {
        font-size: 9px;

        letter-spacing: 1.6px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .naksh-site-intro__spinner,
    .naksh-site-intro__logo,
    .naksh-site-intro__loading-line span {
        animation: none;
    }

    .naksh-blue-intro__door {
        transition-duration: .35s;
    }

}