/* ===========================================================
   CELETIOUS
   Navbar Component
   Version 1.0
=========================================================== */


.navbar-container{

    display:flex;

    position: relative;

    align-items:center;

    justify-content:space-between;

    padding:11px 22px;

    border-radius:999px;

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

    backdrop-filter:blur(22px);

    border:1px solid rgba(255,255,255,.08);

    transition:
        background .35s ease,
        border-color .35s ease,
        transform .35s ease;

}


.navbar-container:hover{

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

    border-color:rgba(255,255,255,.16);

}


.navbar-scrolled .navbar-container{

    background:rgba(8,10,18,.72);

    border-color:rgba(255,255,255,.12);

    backdrop-filter:blur(28px);

}


.navbar-menu{

    background:none;

    border:none;

    color:white;

    cursor:pointer;

    font-size:18px;

}

.navbar-logo{

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    text-decoration:none;

    color:white;

    display:flex;

    align-items:center;

    gap:8px;

    font-family:"Gambetta", Georgia, serif;

    letter-spacing:.20em;

    font-size:17px;

    line-height:1;

    font-weight:500;

}

.brand-star{

    flex:0 0 auto;

    font-family:Arial, sans-serif;

    color:#C8D8FF;

    font-size:11px;

    line-height:1;

    letter-spacing:0;

    text-shadow:
        0 0 8px rgba(168,198,255,.48),
        0 0 18px rgba(168,198,255,.20);

}

.navbar-contact{

    text-decoration:none;

    color:white;

    padding:8px 16px;

    border-radius:999px;

    border:1px solid rgba(255,255,255,.12);

    transition:.3s;

    margin-left:auto;

}

.navbar-contact:hover{

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

}


/* ===========================================================
   Navbar Entrance
=========================================================== */

.navbar{

    position:fixed;

    top:45px;

    left:50%;

    width:min(1100px,92%);

    z-index:100;

    opacity:0;

    transform:translate(-50%, -24px);

    animation:navbarEnter 1s ease forwards;

    animation-delay:.3s;

}

@keyframes navbarEnter{

    to{

        opacity:1;

        transform:translate(-50%,0);

    }

}

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

    .navbar{

        animation:none;

        opacity:1;

        transform:translate(-50%,0);

    }

}

@media(max-width:768px){

    .navbar{

        width:94%;

        top:20px;

    }

    .navbar-container{

        padding:12px 18px;

    }

}

/* ===========================================================
   Fullscreen Menu
=========================================================== */

body.menu-open{

    overflow:hidden;

}


.navbar-panel{

    position:fixed;

    inset:0;

    z-index:99;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:105px 7vw 55px;

    overflow-x:hidden;

    overflow-y:auto;

    overscroll-behavior:contain;

    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(168,198,255,.055),
            transparent 40%
        ),
        rgba(5,6,8,.97);

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

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transform:translateY(-14px);

    transition:
        opacity .4s ease,
        visibility .4s ease,
        transform .5s cubic-bezier(.22,.8,.22,1);

}


.navbar-panel.is-open{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transform:translateY(0);

}


.navbar-panel-close{

    position:absolute;

    top:150px;

    right:max(
        24px,
        calc((100vw - min(1100px, 92vw)) / 2 + 35px)
    );

    padding:9px 16px;

    border:1px solid rgba(255,255,255,.13);

    border-radius:999px;

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

    color:#ffffff;

    font:inherit;

    font-size:14px;

    cursor:pointer;

    transition:
        background .3s ease,
        border-color .3s ease,
        transform .3s ease;

}


.navbar-panel-close:hover{

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

    border-color:rgba(255,255,255,.24);

    transform:translateY(-1px);

}


.navbar-panel-content{

    width:min(760px,100%);

}


.navbar-panel-label{

    display:block;

    margin-bottom:24px;

    font-size:11px;

    letter-spacing:.24em;

    text-transform:uppercase;

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

}


.navbar-panel-links{

    display:flex;

    flex-direction:column;

}


.navbar-panel-links a{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:16px 0;

    border-bottom:1px solid rgba(255,255,255,.08);

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

    font-size:clamp(28px,3.6vw,48px);

    line-height:1.05;

    text-decoration:none;

    transition:
        color .3s ease,
        padding-left .35s ease;

}


.navbar-panel-links a:first-child{

    border-top:1px solid rgba(255,255,255,.09);

}


.navbar-panel-links a:hover{

    padding-left:8px;

    color:#ffffff;

}


.navbar-panel-links a span{

    font-size:.32em;

    color:rgba(190,214,255,.52);

}


/* ===========================================================
   Mobile
=========================================================== */

@media (max-height:600px){

    .navbar-panel{

        align-items:flex-start;

    }

}

@media (max-width:768px){

    .navbar{

        top:12px;

        padding:0 12px;

        width:calc(100% - 24px);

    }

    .navbar-container{

        display:grid;

        grid-template-columns:44px 1fr 44px;

        align-items:center;

        height:58px;

        padding:0 16px;

    }

    .navbar-logo{

        justify-self:center;

        min-width:44px;

        min-height:44px;

        justify-content:center;

        font-size:14px;

        letter-spacing:.16em;

    }

    .navbar-contact{

        display:none;

    }

    .navbar-menu{

        justify-self:start;

        display:inline-flex;

        min-width:44px;

        min-height:44px;

        align-items:center;

        justify-content:center;

        font-size:18px;

    }

}

@media (max-width:768px){

    .navbar-contact{

        display:none;

    }

}




@media (max-width:768px){

    .navbar-panel{

        align-items:flex-start;

        padding:110px 24px 40px;

    }

    .navbar-panel-content{

        width:100%;

    }

    .navbar-panel-close{

        top:88px;

        right:28px;

    }

    .navbar-panel-links a{

        padding:17px 0;

        font-size:clamp(27px,9vw,40px);

    }

}

@media (max-width:767px){

    .navbar-panel-label{

        font-size:11px;

        letter-spacing:4px;

    }


    .navbar-panel-links a{

        /* font-size:clamp(26px,8vw,32px); */
        font-size:clamp(24px,7vw,29px);

        line-height:1.15;

        padding:15px 0;

    }


    .navbar-panel-contact{

        font-size:14px;

    }


    .navbar-panel-close{

        font-size:13px;

    }

}