.menu {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 100px;

    z-index: 4000;
    background: var(--menu-bg);


    opacity: 0;
    pointer-events: none;
    transform: translateY(-24px);
    transition: opacity .3s ease, transform .3s ease;
}

body.menu-open .menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

body.menu-open {
    overflow: hidden;
}

.site {
    transition: opacity .25s ease, transform .25s ease;
}

body.menu-open .site {
    opacity: 0;
    transform: translateY(-24px);
    pointer-events: none;
}

.hero {
    transition: opacity .25s ease, transform .25s ease;
}

body.menu-open .hero {
    opacity: 0;
    transform: translateY(-24px);
    pointer-events: none;
}

.item-inner {
    opacity: 0;
    transform: translateY(20px);
}

body.menu-open .item-inner {
    opacity: 1;
    transform: translateY(0);
}

.menu ol {
    list-style: none;
    counter-reset: menu;
    padding: -3px;
    margin: 0;
}

.menu li {
    counter-increment: menu;
}

.menu .item-inner {
    position: relative;
    padding-left: 2.2rem;
}

.menu .item-inner h1 {
    position: relative;
    padding-left: 2.2rem;
    color: var(--text);
    transform: scale(1.00);
    transform-origin: left;
}

.menu .item-inner a {
    text-decoration: none;
}

.menu .item-inner::before {
    content: counter(menu) ".";
    position: absolute;
    left: 0;
    top: .35em;

    font-size: 1.50rem;
    color: var(--muted-2);
    letter-spacing: .08em;
}

.menu li {
    list-style-type: none;
}

.item-inner {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .45s ease, transform .45s ease;
}



/* cuando abre, se activan */
body.menu-open .item-inner {
    opacity: 1;
    transform: translateY(0);
}

/* delays escalonados */
body.menu-open .menu li:nth-child(1) .item-inner {
    transition-delay: .18s;
}

/* Home */
body.menu-open .menu li:nth-child(2) .item-inner {
    transition-delay: .30s;
}

/* Work */
body.menu-open .menu li:nth-child(3) .item-inner {
    transition-delay: .42s;
}

/* About */
body.menu-open .menu li:nth-child(4) .item-inner {
    transition-delay: .54s;
}

body:not(.menu-open) .item-inner {
    transition-delay: 0s;
}

body.menu-open .icon-default {
    opacity: 0;
    transform: scale(.85);
}


body.menu-open .hamburger-btn .icon-default {
    opacity: 0 !important;
    transform: scale(.85);
}

body.menu-open .hamburger-btn .icon-hover {
    opacity: 0 !important;
    /* 👈 desactiva hover icon */
    pointer-events: none;
}


/* Contact */

/* pantallas grandes */
@media (min-width: 1200px) {
    .menu {
        padding-left: 180px;
        /* ajustá a gusto */
    }
}

@media (min-width: 1600px) {
    .menu {
        padding-left: 260px;
        /* aún más al centro */
    }
}

@media (min-width: 1200px) {
    .menu .item-inner h1 {
        transform: scaleX(1.2);
    }
}

@media (min-width: 1600px) {
    .menu .item-inner h1 {
        transform: scaleX(1.3);
    }
}

@keyframes drawX {
    to {
        stroke-dashoffset: 0;
    }
}