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

.header {
    position: fixed;
    z-index: 48;
    top: 0;
    left: 0;
    width: 100%;
    height: 90px;
    background-color: var(--color-surface-main);
}

.header .section { border-bottom: 1px solid var(--color-border); }
.header .link { transition: color 0.3s; }
.header .link:hover { color: var(--color-text-alt); }

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

.nav {
    position: fixed;
    z-index: 48;
    top: 0;
    left: 0;
    width: clamp(320px, 50vw, 768px);
    height: 100dvh;
    background-color: var(--color-surface-alt);
    backdrop-filter: blur(8px);

    transform: translateX(-100%);
    opacity: 0;
    visibility: hidden;
    transition:
        transform 1s linear(0, 0.0007, 0.0022, 0.0044, 0.0072, 0.0104, 0.0142, 0.0184, 0.023, 0.028, 0.0335, 0.0393, 0.0455, 0.052, 0.0589, 0.0662, 0.0737, 0.0816, 0.0899, 0.0984, 0.1073, 0.1164, 0.1259, 0.1356, 0.1457, 0.156, 0.1667, 0.1776, 0.1888, 0.2002, 0.212, 0.224, 0.2362, 0.2488, 0.2616, 0.2746, 0.2879, 0.3015, 0.3153, 0.3294, 0.3437, 0.3582, 0.373, 0.3881, 0.4034, 0.4189, 0.4346, 0.4506, 0.4669, 0.4833, 0.5, 0.5167, 0.5331, 0.5494, 0.5654, 0.5811, 0.5966, 0.6119, 0.627, 0.6418, 0.6563, 0.6706, 0.6847, 0.6985, 0.7121, 0.7254, 0.7384, 0.7512, 0.7638, 0.776, 0.788, 0.7998, 0.8112, 0.8224, 0.8333, 0.844, 0.8543, 0.8644, 0.8741, 0.8836, 0.8927, 0.9016, 0.9101, 0.9184, 0.9263, 0.9338, 0.9411, 0.948, 0.9545, 0.9607, 0.9665, 0.972, 0.977, 0.9816, 0.9858, 0.9896, 0.9928, 0.9956, 0.9978, 0.9993, 1),
        opacity 0.4s,
        visibility 0.4s;
}

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

.nav .list li {
    transform: translateX(-100%);
    transition: transform 1s;
    transition-timing-function: inherit;
}

.nav .list li:nth-child(1) { transition-delay: 100ms; }
.nav .list li:nth-child(2) { transition-delay: 200ms; }
.nav .list li:nth-child(3) { transition-delay: 300ms; }
.nav .list li:nth-child(4) { transition-delay: 400ms; }
.nav .list li:nth-child(5) { transition-delay: 500ms; }

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

.nav .link { transition: color 0.3s; }
.nav .link:hover { color: var(--color-text-alt); }