/*====================================

NAVBAR

====================================*/

header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:9999;

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

}



nav{

    width:100%;

    padding:28px 8%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    backdrop-filter:blur(16px);

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

    background:rgba(5,5,5,.12);

    border-bottom:1px solid transparent;

    transition:.4s;

}



/* Active Navbar */

header.scrolled nav{

    padding:18px 8%;

    background:rgba(5,5,5,.82);

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

    box-shadow:0 12px 40px rgba(0,0,0,.35);

}



/* Logo */

.logo{

    font-family:'Bebas Neue',sans-serif;

    font-size:42px;

    letter-spacing:8px;

    color:#fff;

    user-select:none;

    transition:.35s;

}



.logo:hover{

    color:var(--red);

}



/* Menu */

nav ul{

    display:flex;

    align-items:center;

    gap:55px;

}



/* Links */

nav ul li{

    position:relative;

}



nav ul li a{

    color:#fff;

    font-size:13px;

    letter-spacing:4px;

    text-transform:uppercase;

    transition:.35s;

}



/* Red Line */

nav ul li a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-10px;

    width:0;

    height:2px;

    background:var(--red);

    transition:.35s;

}



nav ul li a:hover{

    color:var(--red);

}



nav ul li a:hover::after{

    width:100%;

}



/* Menu Button */

.menu-btn{

    width:55px;

    height:55px;

    display:none;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    border-radius:50%;

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

    transition:.35s;

}



.menu-btn:hover{

    border-color:var(--red);

    background:rgba(193,18,31,.08);

}



.menu-btn span{

    width:24px;

    height:2px;

    background:white;

    position:relative;

    transition:.35s;

}



.menu-btn span::before,

.menu-btn span::after{

    content:"";

    position:absolute;

    left:0;

    width:24px;

    height:2px;

    background:white;

    transition:.35s;

}



.menu-btn span::before{

    top:-8px;

}



.menu-btn span::after{

    top:8px;

}



/* Hover Animation */

.menu-btn:hover span{

    background:var(--red);

}



.menu-btn:hover span::before,

.menu-btn:hover span::after{

    background:var(--red);

}



/* Fullscreen Menu */

.menu-overlay{

    position:fixed;

    inset:0;

    background:#050505;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    opacity:0;

    visibility:hidden;

    transition:.5s;

    z-index:10000;

}



.menu-overlay.active{

    opacity:1;

    visibility:visible;

}



.menu-content{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:35px;

}



.menu-content a{

    font-family:'Bebas Neue',sans-serif;

    font-size:64px;

    letter-spacing:5px;

    color:white;

    transition:.35s;

}



.menu-content a:hover{

    color:var(--red);

    transform:translateX(12px);

}



/* Close */

.close-menu{

    position:absolute;

    top:40px;

    right:50px;

    font-size:46px;

    color:white;

    cursor:pointer;

    transition:.35s;

}



.close-menu:hover{

    color:var(--red);

    transform:rotate(90deg);

}



/* Mobile */

@media(max-width:992px){

    nav ul{
        display:none;
    }

    .menu-btn{
        display:flex;
        width:46px;
        height:46px;
    }

    .logo{
        font-size:30px;
        letter-spacing:5px;
    }

    /* روی موبایل backdrop-filter هنگام اسکرول/جمع‌شدن نوار آدرس فلیکر می‌زند؛
       به‌جایش پس‌زمینه‌ی همیشه‌خوانا می‌گذاریم */
    nav{
        padding:16px 6%;
        backdrop-filter:none;
        -webkit-backdrop-filter:none;
        background:linear-gradient(180deg, rgba(5,5,5,.92), rgba(5,5,5,.55));
    }

    header.scrolled nav{
        padding:12px 6%;
        background:rgba(5,5,5,.97);
    }

    .menu-content a{
        font-size:clamp(30px, 9vw, 44px);
        letter-spacing:4px;
        padding:6px 18px;
    }

    .menu-content{
        gap:22px;
    }

    .close-menu{
        top:18px;
        right:24px;
        font-size:34px;
        width:46px;
        height:46px;
        display:flex;
        align-items:center;
        justify-content:center;
    }

}

/*====================================

MENU OVERLAY — polish

====================================*/

.menu-overlay{
    height:100dvh;
}

.menu-overlay::before{
    content:"改善";
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    font-size:min(46vw, 420px);
    color:rgba(255,255,255,.03);
    letter-spacing:.1em;
    white-space:nowrap;
    pointer-events:none;
    user-select:none;
}

.menu-content a{
    position:relative;
    opacity:0;
    transform:translateY(26px);
}

.menu-overlay.active .menu-content a{
    animation:menuLinkIn .55s cubic-bezier(.2,.8,.2,1) both;
}

.menu-overlay.active .menu-content a:nth-child(1){animation-delay:.08s}
.menu-overlay.active .menu-content a:nth-child(2){animation-delay:.14s}
.menu-overlay.active .menu-content a:nth-child(3){animation-delay:.2s}
.menu-overlay.active .menu-content a:nth-child(4){animation-delay:.26s}
.menu-overlay.active .menu-content a:nth-child(5){animation-delay:.32s}
.menu-overlay.active .menu-content a:nth-child(6){animation-delay:.38s}
.menu-overlay.active .menu-content a:nth-child(7){animation-delay:.44s}
.menu-overlay.active .menu-content a:nth-child(8){animation-delay:.5s}

@keyframes menuLinkIn{
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* وقتی منو باز است صفحه پشت آن اسکرول نخورد */
body.menu-open{
    overflow:hidden;
}

@media(prefers-reduced-motion:reduce){
    .menu-content a{
        opacity:1;
        transform:none;
    }
    .menu-overlay.active .menu-content a{
        animation:none;
    }
}

/*====================================

BOTTOM NAV (موبایل)

====================================*/

.bottom-nav{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:9999;
    display:none;
    justify-content:space-around;
    align-items:stretch;
    background:rgba(8,8,8,.97);
    border-top:1px solid rgba(255,255,255,.08);
    box-shadow:0 -14px 40px rgba(0,0,0,.5);
    padding:8px 4px calc(8px + env(safe-area-inset-bottom));
}

.bottom-nav a{
    flex:1 1 0;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:5px;
    padding:6px 2px;
    color:#9a9a9a;
    text-decoration:none;
    transition:color .3s;
    position:relative;
}

.bottom-nav a::before{
    content:"";
    position:absolute;
    top:-9px;
    left:50%;
    transform:translateX(-50%) scaleX(0);
    width:26px;
    height:2px;
    background:var(--red);
    border-radius:2px;
    transition:transform .3s;
}

.bn-icon{
    width:22px;
    height:22px;
    display:block;
}

.bn-icon svg{
    width:100%;
    height:100%;
    display:block;
}

.bn-label{
    font-size:8.5px;
    letter-spacing:.5px;
    text-transform:uppercase;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:100%;
}

.bottom-nav a.active,
.bottom-nav a:active{
    color:#fff;
}

.bottom-nav a.active .bn-icon{
    color:var(--red);
}

.bottom-nav a.active::before{
    transform:translateX(-50%) scaleX(1);
}

@media(max-width:992px){

    .bottom-nav{
        display:flex;
    }

    /* منوی پایینی جای همبرگری را می‌گیرد */
    .menu-btn{
        display:none;
    }

    /* محتوا و فوتر زیر نوار پایینی گم نشوند */
    body{
        padding-bottom:calc(62px + env(safe-area-inset-bottom));
    }

}