/* =========================================
   NAVBAR WRAPPER — sticky desktop container
========================================= */

.navbar-wrapper {
    position: sticky;
    top: 1vh;
    z-index: 1000;

    width: 70%;
    margin: 2vh auto;

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

    transition:
        width 0.4s ease 0.2s,
        opacity 1s ease 0.5s;
}


/* =========================================
   LOGO
========================================= */

.logo {
    position: absolute;
    left: 50%;
    top: 50%;

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

    z-index: 1001;

    display: flex;
    align-items: center;

    cursor: pointer;
}


.logo img {
    height: 5rem;
    width: 5rem;

    
    object-fit: cover;

    transition:
        transform 2s cubic-bezier(.2,.8,.2,1);
}


.logo:hover img {
    transform: scale(1.08) rotate(-90deg);
}


/* =========================================
   NAVBAR
========================================= */

.navbar {

    font-family: 'Exo 2', sans-serif;

    min-height: 5rem;

    width:100%;

    padding:
        1.125rem
        2.625rem;


    border-radius:1.5625rem;


    display:flex;
    align-items:center;
    justify-content:space-between;


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


    backdrop-filter:blur(12px);


    box-shadow:
        0 0.625rem 1.5625rem rgba(0,0,0,0.08);


    transition:
        padding 1.5s cubic-bezier(0.22,1,0.36,1),
        width 1.5s cubic-bezier(0.22,1,0.36,1),
        border-radius 1.5s cubic-bezier(0.22,1,0.36,1),
        box-shadow 1.5s ease;
}


/* invisible center space */

.logo-placeholder {

    width:5rem;
    height:5rem;

    flex-shrink:0;

    pointer-events:none;

    visibility:hidden;
}


/* =========================================
   NAV SIDES
========================================= */


.nav-left,
.nav-right {
    display: flex;
    align-items: center;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    transition: opacity 0.3s ease;
}




.nav-left {
    justify-content: space-evenly;
}


.nav-right {
    justify-content: space-evenly;
}


/* =========================================
   DESKTOP SCROLL STATE
========================================= */


.navbar-wrapper.scrolled {

    width:6rem;

}


.navbar-wrapper.scrolled .navbar {

    height:6rem;

    padding:1rem 1.5rem;

    border-radius:50%;

    box-shadow:
        0 0.375rem 1.25rem rgba(0,0,0,0.1);

}


.navbar-wrapper.scrolled .nav-left,
.navbar-wrapper.scrolled .nav-right {


    opacity:0;

    pointer-events:none;

    flex:0;

    width:0;

}



/* hover expansion desktop */

.navbar-wrapper.scrolled:hover {

    width:60%;

}


.navbar-wrapper.scrolled:hover .navbar {


    padding:
        1.125rem
        2.625rem;


    border-radius:1.5625rem;

}


.navbar-wrapper.scrolled:hover .nav-left,
.navbar-wrapper.scrolled:hover .nav-right {

    opacity:1;

    pointer-events:auto;

    flex:1;

    width:auto;

}


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


.navbar a {

    text-decoration:none;

    color:black;

    font-weight:bold;


    font-size:
        clamp(1rem,2vw,1.875rem);


    margin:
        0 0.9375rem;

}



.navbar a:hover {

    color:#3b82f6;

}