@import url("./setup.css");

header {
    z-index: 10;
    width: 100%;
    position: fixed;
    height: fit-content;
    padding: var(--side-padding);
}

header .logo {
    width: 100%;
    margin: auto;
    overflow: hidden;
    max-width: var(--max-screen);
}

header .logo lottie-player {
    top: 0;
    scale: 1.15;
    cursor: pointer;
    position: relative;
    width: fit-content;
    height: var(--text-m);
}

menu {
    z-index: 0;
    width: 100%;
    height: 100%;
    display: flex;
    position: fixed;
    justify-content: left;
    align-items: center;
    padding: var(--side-padding);
    background-color: var(--color-black-2);
}

menu nav {
    width: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    padding-top: var(--text-m);
    max-width: var(--max-screen);
    gap: calc(var(--text-m) / 6 * 4);
}

menu nav .nav-item {
    width: fit-content;
    overflow: hidden;
}

menu nav .nav-item a {
    left: 0px;
    cursor: pointer;
    position: relative;
    text-decoration: none;
    font-size: var(--text-m);
    color: var(--color-gray-2);
    top: calc(var(--text-m) * 1.5);
    font-family: var(--font-light);
    transition: top .3s ease calc(calc(var(--nav-item-count) * .1s) - calc(var(--i) * .1s));
}

menu nav .nav-item.active a {
    color: var(--color-green-1);
    cursor: default;
}

body[data-menu-animating] header .logo lottie-player,
body[data-menu-animating] menu nav .nav-item a {
    cursor: default;
}

body main {
    scale: 1;
    left: 0px;
    transition: left .6s ease calc(calc(var(--nav-item-count) * .1s)), scale .6s ease calc(calc(var(--nav-item-count) * .1s) + .7s);
}

body[data-show-menu] main {
    scale: 0.8;
    left: var(--nav-width);
    transition: left .6s ease .4s, scale .6s ease 0s;
}

body[data-show-menu] menu nav .nav-item a {
    top: 0px;
    transition: top .3s ease calc(.6s + calc(var(--i) * .1s));
}