.menu-wrapper {
    --menu-height: 70vh;
    --max-menu-height: 800px;

    overflow: hidden;
    transform: translate(-50%, 50%) scale(.035);
    left: 50%;
    bottom: 8vh;
    height: 100svh;
    width: 100svh;
    max-height: 900px;
    max-width: min(500px, 48svh);
    border-radius: 400px;
    transform-origin: center center;
    backface-visibility: hidden;
    transition: transform .4s ease-in-out, bottom .4s ease-in-out, width .4s ease-in-out, height .4s ease-in-out;


    &.menu-open {
        transform: translate(-50%, 50%) scale(1);
        width: 100vw;
        height: 70svh;
    }

    &.menu-animating {
        bottom: calc(50% + 4vh);
    }

    @media screen and (max-width: 1024px) {
        bottom: 64px;
    }

    @media screen and (max-width: 768px) {
        height: 100svh;
        width: 100vw;
        padding-bottom: 10vh;
        max-width: 100vw;

        &.menu-open {
            height: 100svh;
        }

        &.menu-animating {
            bottom: calc(50%);
        }
    }
}

.menu-backdrop, .menu-trigger {
    transition: opacity 1s ease-in-out;
}

[data-menu-order] {
    transform: translateX(100%);
    opacity: 0;
    transition: all .8s ease-in-out;

    &.visible {
        transform: translateX(0);
        opacity: 1;
    }
}

.menu-trigger-wrapper {
    transition: transform .4s ease-in-out, bottom .4s ease-in-out;
}

.menu-trigger-wrapper, .menu-wrapper {
    &.out-of-screen {
        bottom: -100px !important;
    }
}

.mask-for-logo {
    mask-position: center;
    mask-size: 0;
    mask-repeat: no-repeat;
}

.menu-trigger {
    z-index: 1;
    position: relative;

    .rotating-menu-wrapper {
        perspective: 5cm;

        .menu-icon, .close-icon {
            position: absolute;
            transform-origin: 50% 50% -22px;
            backface-visibility: hidden;
            transition: transform 1.5s ease-in-out;
        }

        .menu-icon {
            height: 30px;
            width: 30px;
            transform: rotateY(0deg);
        }

        .close-icon {
            height: 20px;
            width: 20px;
            transform: rotateY(180deg);
        }

    }

    &.menu-open {
        .menu-icon {
            transform: rotateY(180deg);
        }

        .close-icon {
            transform: rotateY(360deg);
        }
    }
}

.menu-trigger-wrapper {
    overflow: hidden;

    &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgb(var(--color-oxq-red));
        border-radius: 9999px;
        transform: translateX(-100%);
        transition: transform .3s ease-out;
        animation-duration: 1.4s;
        animation-fill-mode: forwards;
        animation-timing-function: ease;
        z-index: 0;

        @media screen and (max-width: 768px) {
            animation-duration: .9s;
            animation-timing-function: ease-in;
        }
    }

    &.menu-open {
        &:before {
            @media screen and (max-width: 768px) {
                animation-name: menu-charging-up-mobile !important;
            }
            animation-name: menu-charging-up;
        }
    }

    &.menu-close {
        &:before {
            @media screen and (max-width: 768px) {
                animation-name: menu-charging-down-mobile !important;
            }
            animation-name: menu-charging-down;
        }
    }

    &:hover {
        @media screen and (min-width: 1025px) {
            &:before {
                transform: translateX(-80%);
            }
        }
    }
}


@keyframes menu-charging-up {
    0% {
        transform: translateX(-80%);
    }
    70% {
        transform: translateX(-40%);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes menu-charging-down {
    0% {
        transform: translateX(0%);
    }
    58% {
        transform: translateX(-60%);
    }
    100% {
        transform: translateX(-100%);
    }
}


@keyframes menu-charging-up-mobile {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes menu-charging-down-mobile {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-100%);
    }
}

.menu-link {
    position: relative;
    overflow: hidden;

    &:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: rgb(var(--color-oxq-white));
        transform: translateX(-105%);
        transition: transform .3s ease-in-out;
    }

    &:hover {
        @media screen and (min-width: 1025px) {
            &:not(.active):after {
                transform: translateX(0);
            }
        }
    }

    &.active {
        color: rgb(var(--color-oxq-red));
        font-weight: 500;
    }
}

.contact-button {
    overflow: hidden;
    border-radius: 9999px;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
        color: white;

    .on-hover {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        clip-path: inset(0 100% 0 0 round 0 9999px 9999px 0);
        transition: clip-path .3s ease-in-out;
        background-color: rgb(var(--color-oxq-white));
        color: rgb(var(--color-oxq-black));
    }

    &:hover .on-hover {
        @media screen and (min-width: 1025px) {
            clip-path: inset(0 0 0 0 round 0 9999px 9999px 0);
        }
    }
}