/* =========================================================
   PRIMESCAPE INFOSOFT
   NAVIGATION.CSS
========================================================= */


/* =========================================================
   HEADER TRANSITION
========================================================= */

.site-header {
    transition:
        top 0.3s ease,
        transform 0.3s ease;
}

.header-inner {
    transition:
        min-height 0.3s ease,
        padding 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}


/* =========================================================
   HEADER AFTER SCROLL
========================================================= */

.site-header.ps-header-scrolled
.header-inner {
    min-height: 64px;

    padding:
        5px 11px
        5px 16px;

    background:
        rgba(
            255,
            255,
            255,
            0.94
        );

    border-color:
        rgba(
            45,
            58,
            105,
            0.08
        );

    box-shadow:
        0 14px 45px
        rgba(
            30,
            38,
            80,
            0.11
        );
}

.site-header.ps-header-scrolled
.brand img.custom-logo {
    height:
        48px !important;

    max-height:
        48px !important;
}


/* =========================================================
   ACTIVE DESKTOP LINK
========================================================= */

.desktop-nav a.ps-active-link {
    color:
        #7950ee;
}

.desktop-nav a.ps-active-link::after {
    transform:
        scaleX(1);
}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.mobile-menu-button {
    position: relative;

    flex: 0 0 44px;

    width: 44px;
    height: 44px;

    padding: 0;

    border: 0;

    border-radius: 12px;

    background:
        rgba(
            247,
            247,
            252,
            0.9
        );

    cursor: pointer;

    z-index: 10003;

    transition:
        background 0.25s ease;
}

.mobile-menu-button:hover {
    background:
        #f1effb;
}

.mobile-menu-button span {
    position: absolute;

    left: 50%;

    width: 21px;
    height: 2px;

    transform:
        translateX(-50%);

    border-radius:
        999px;

    background:
        #17213c;

    transition:
        top 0.3s ease,
        transform 0.3s ease,
        opacity 0.2s ease;
}

.mobile-menu-button span:nth-child(1) {
    top: 14px;
}

.mobile-menu-button span:nth-child(2) {
    top: 21px;
}

.mobile-menu-button span:nth-child(3) {
    top: 28px;
}


/* =========================================================
   MOBILE BUTTON OPEN
========================================================= */

.mobile-menu-button.ps-open
span:nth-child(1) {
    top: 21px;

    transform:
        translateX(-50%)
        rotate(45deg);
}

.mobile-menu-button.ps-open
span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-button.ps-open
span:nth-child(3) {
    top: 21px;

    transform:
        translateX(-50%)
        rotate(-45deg);
}


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

.mobile-navigation {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height:
        100dvh;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding:
        120px 30px
        50px;

    background:
        rgba(
            251,
            250,
            248,
            0.97
        );

    -webkit-backdrop-filter:
        blur(24px);

    backdrop-filter:
        blur(24px);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform:
        translateY(-20px);

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease,
        transform 0.35s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

    z-index: 10001;
}


/* =========================================================
   MOBILE NAV OPEN
========================================================= */

.mobile-navigation.active {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translateY(0);
}


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

.mobile-navigation > a {
    display: flex;

    align-items: center;

    justify-content: center;

    width:
        min(
            100%,
            480px
        );

    padding:
        13px 18px;

    border-radius:
        14px;

    color:
        #111a36;

    font-size:
        clamp(
            27px,
            7vw,
            42px
        );

    font-weight:
        780;

    line-height: 1;

    letter-spacing:
        -1.4px;

    transition:
        color 0.25s ease,
        background 0.25s ease,
        transform 0.25s ease;
}

.mobile-navigation > a:hover {
    color:
        #7950ee;

    background:
        rgba(
            255,
            255,
            255,
            0.75
        );

    transform:
        translateX(5px);
}


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

.mobile-navigation
.mobile-project-button {
    min-height: 55px;

    margin-top: 20px;

    color:
        white;

    font-size:
        14px;

    letter-spacing: 0;

    background:
        linear-gradient(
            135deg,
            #2869ef,
            #7950ee,
            #e98ca3
        );

    box-shadow:
        0 18px 45px
        rgba(
            103,
            74,
            222,
            0.22
        );
}

.mobile-navigation
.mobile-project-button:hover {
    color: white;

    background:
        linear-gradient(
            135deg,
            #2869ef,
            #7950ee,
            #e98ca3
        );

    transform:
        translateY(-2px);
}


/* =========================================================
   PAGE LOCK WHEN MENU OPEN
========================================================= */

body.ps-menu-open {
    overflow: hidden;
}


/* =========================================================
   MOBILE MENU AMBIENT LIGHT
========================================================= */

.mobile-navigation::before,
.mobile-navigation::after {
    content: "";

    position: absolute;

    width: 450px;
    height: 450px;

    border-radius: 50%;

    filter:
        blur(100px);

    pointer-events: none;

    z-index: -1;
}

.mobile-navigation::before {
    left: -200px;
    bottom: -150px;

    background:
        rgba(
            246,
            178,
            145,
            0.30
        );
}

.mobile-navigation::after {
    right: -200px;
    top: -150px;

    background:
        rgba(
            197,
            185,
            255,
            0.40
        );
}


/* =========================================================
   TABLET / MOBILE ONLY
========================================================= */

@media (
    max-width: 1100px
) {

    .mobile-menu-button {
        display: block;
    }

}


/* =========================================================
   DESKTOP
========================================================= */

@media (
    min-width: 1101px
) {

    .mobile-navigation {
        display: none !important;
    }

}


/* =========================================================
   SMALL PHONE
========================================================= */

@media (
    max-width: 480px
) {

    .mobile-navigation {
        padding:
            105px 20px
            35px;
    }

    .mobile-navigation > a {
        padding:
            10px 15px;

        font-size:
            29px;
    }

}


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

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

    .mobile-navigation,
    .mobile-menu-button span,
    .site-header,
    .header-inner {
        transition:
            none !important;
    }

}