.header {
    position: fixed;
    z-index: 20;
    background-color: var(--color-surface-main);
    backdrop-filter: blur(4px);
}

.header .section:first-child { border-bottom: 1px solid var(--color-border-dark); }

.header .menu-btn .menu-illustration { transition: gap 0.3s, transform 0.3s; }
.header .menu-btn .menu-illustration .bar {
    width: 20px;
    height: 1px;
    background-color: var(--color-fg-main);
    margin: -0.5px;
    transition: transform 0.3s;
}

.header .menu-btn.active .menu-illustration {
    gap: 0;
    transform: rotateX(180deg);
}

.header .menu-btn.active .menu-illustration .bar1 { transform: rotate(45deg); }
.header .menu-btn.active .menu-illustration .bar2 { display: none; }
.header .menu-btn.active .menu-illustration .bar3 { transform: rotate(-45deg); }

.nav {
    position: fixed;
    top: 0;
    left: 0;
    height: 100dvh;
    transition: height 0.3s;
    width: 80%;
    max-width: 768px;
    backdrop-filter: blur(4px);
    background-color: var(--color-border-dark);
    z-index: 10;
    transform: translateX(-100%);
    opacity: 0;
    transition: 
        opacity 0.5s,
        transform cubic-bezier(0.7,0.1,0.5,0.9) 1.5s;
}

.nav.active {
    transform: translateX(0);
    opacity: 1;
}

.nav li {
    transform: translateX(-100%);
    transition: transform cubic-bezier(0.7,0.1,0.5,0.9) 1.5s;
}

.nav li:nth-child(2) { transition-delay: 200ms; }
.nav li:nth-child(3) { transition-delay: 400ms; }

.nav.active li { transform: translateX(0); }