/* GLOBAL --------------------------------------------------------------- */
.menu-container{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}
.menu-container .container{
    width: 100%;
    height: 100%;
}
.menu-container .close-background{
    position: absolute;
    top: 0px;
    left: 0px;
    width: calc(100% - 112px);
    height: 100dvh;
    background-color: var(--black);
    pointer-events: none;
    opacity: 0;
}
/* ---------------------------------------------------------------------- */

/* FILTERS -------------------------------------------------------------- */
.menu-container .filters{
    display: flex;
    flex-direction: row-reverse;
    position: absolute;
    top: 0px;
    right: 75px;
    pointer-events: all;
}
.menu-container .filter-trigger{
    position: relative;
    width: fit-content;
    height: fit-content;
}
.menu-container .card-filter{
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
    width: 100px;
    height: 100px;
    /* background-color: var(--black); */
    background-color: var(--white);
    padding-bottom: 10px;
    cursor: pointer;
    box-shadow: 0px 0px 10px 5px var(--shadow-black);
    transform: translateY(-100%);
    transition: background-color 300ms;
}
.menu-container .card-filter.diff{
    background-color: var(--red-dark-1);
}
.menu-container .card-filter::before{
    content: "";
    /* background-color: var(--black); */
    background-color: var(--white);
    width: 100%;
    height: 40px;
    position: absolute;
    top: -35px;
    left: 0px;
    transition: background-color 300ms;
}
.menu-container .card-filter.diff::before{
    background-color: var(--red-dark-1);
}
.menu-container .filter-text{
    /* color: var(--white); */
    color: var(--black);
    text-transform: uppercase;
    user-select: none;
    transition: opacity 300ms, color 300ms;
}
.menu-container .card-filter.diff .filter-text{
    opacity: 0;
}
.menu-container .apply-text{
    text-transform: uppercase;
    opacity: 0;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    transition: opacity 300ms;
}
.menu-container .card-filter.diff .apply-text{
    opacity: 1;
}
.menu-container .filter-icon{
    width: 32px;
    height: 40px;
    position: absolute;
    top: 45px;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
}
.menu-container .filter-icon *{
    width: 2px;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    /* background-color: var(--black); */
    background-color: var(--white);
}
.menu-container .filter-icon.diff *{
    background-color: var(--white) !important;
}
.menu-container .filter-icon .icon-left{
    left: 0%;
    transform: translateX(0%);
}
.menu-container .filter-icon .icon-right{
    left: 100%;
    transform: translateX(-100%);
}
.menu-container .filter-icon * .icon-square{
    /* background-color: var(--white); */
    background-color: var(--black);
    /* border: 2px solid var(--black); */
    border: 2px solid var(--white);
    width: 10px;
    height: 10px;
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
}
.menu-container .filter-icon.diff * .icon-square{
    background-color: var(--white) !important;
    border-color: var(--white) !important;
}
.menu-container .filter-icon .icon-left .icon-square{
    top: 70%;
}
.menu-container .filter-icon .icon-right .icon-square{
    top: 50%;
}
.menu-container .filter.active{
    background-color: var(--red-dark-1);
    transition: background-color 300ms;
}
.menu-container .filter.active::before{
    background-color: var(--red-dark-1);
    transition: background-color 300ms;
}
.menu-container .filter svg{
    fill: var(--black);
    width: 40px;
    height: auto;
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    transition: fill 300ms;
}
.menu-container .filter.active svg{
    fill: var(--white);
}
.menu-container .filter.active .filter-text{
    color: var(--white);
}
.menu-container .filter .svg-dev{
    aspect-ratio: 110 / 60;
    top: 23px;
}
.menu-container .filter .svg-design{
    aspect-ratio: 108 / 57;
    top: 25px;
}
.menu-container .filter .svg-3d{
    aspect-ratio: 1;
}
/* ---------------------------------------------------------------------- */

/* BURGER --------------------------------------------------------------- */
.menu-container .burger-menu{
    width: 70px;
    height: 70px;
    position: absolute;
    right: 0px;
    top: 30px;
    cursor: pointer;
    overflow: hidden;
    pointer-events: all;
    backdrop-filter: blur(10px);
    background-color: rgba(10, 10, 10, 0.3);
}
.menu-container .burger-horizontal{
    position: absolute;
    top: calc(50% - 5px);
    left: 10px;
    width: calc(100% - 20px);
    height: 10px;
    background-color: transparent;
    /* border: 2px solid var(--black); */
    border: 2px solid var(--white);
}
.menu-container .burger-top{
    top: calc(50% - 20px);
}
.menu-container .burger-bottom{
    top: calc(50% + 10px);
}
.menu-container .burger-vertical{
    position: absolute;
    top: -100%;
    left: calc(50% - 5px);
    width: 10px;
    height: calc(100% - 20px);
    /* background-color: var(--black); */
    background-color: var(--white);
}
.menu-container .burger-left{
    left: calc(50% - 20px);
}
.menu-container .burger-right{
    left: calc(50% + 10px);
}
/* ---------------------------------------------------------------------- */

/* RIBBONS -------------------------------------------------------------- */
.menu-container .ribbon-0, .menu-container .ribbon-1, .menu-container .ribbon-2, .menu-container .ribbon-3{
    position: fixed;
    background-color: var(--red-dark-1);
    width: 113px;
    height: 100dvh;
}
.menu-container .ribbon-0{
    top: 0px;
    right: 0px;
    opacity: 0;
    pointer-events: none;
}
.menu-container .ribbon-1{
    top: 0px;
    right: 112px;
    transform: translateY(-100%);
}
.menu-container .ribbon-2{
    bottom: 0px;
    right: 224px;
    transform: translateY(100%);
}
.menu-container .ribbon-3{
    top: 0px;
    right: 336px;
    transform: translateY(-100%);
}
/* ---------------------------------------------------------------------- */

/* CONTENT -------------------------------------------------------------- */
.menu-container .menu{
    width: 449px;
    height: 100dvh;
    position: absolute;
    top: 0px;
    right: 0px;
    transform: translateX(100%);
    z-index: 11;
    pointer-events: all;
}
.menu-container .menu-links{
    display: flex;
    flex-direction: column;
    gap: 50px;
    justify-content: center;
    width: fit-content;
    height: 100%;
    margin: auto;
    position: relative;
}
.menu-container .close-arrow{
    background-color: var(--black);
    width: 100px;
    height: 130px;
    position: absolute;
    top: 0px;
    left: 0px;
    transform: translateY(-100%);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 0px 10px 5px var(--shadow-black);
}
.menu-container .close-arrow::after{
    content: "";
    background-color: var(--black);
    width: 100%;
    height: 50px;
    position: absolute;
    top: -18px;
    left: 0px;
}
.menu-container .close-arrow:hover .arrow::after{
    opacity: 1;
}
.menu-container .arrow{
    background-image: url("data:image/svg+xml,%3Csvg width='41' height='53' viewBox='0 0 41 53' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M39.5 20.75L34.9687 25.125L23.875 14.0313L23.875 52L17.625 52L17.625 14.0313L6.53125 25.125L2 20.75L20.75 2L39.5 20.75Z' fill='none' stroke='%23FFFCF5' stroke-width='2'/%3E%3C/svg%3E%0A");
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    width: 41px;
    height: 53px;
    position: relative;
}
.menu-container .arrow::after{
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg width='41' height='53' viewBox='0 0 41 53' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M39.5 20.75L34.9687 25.125L23.875 14.0313L23.875 52L17.625 52L17.625 14.0313L6.53125 25.125L2 20.75L20.75 2L39.5 20.75Z' fill='%23FFFCF5' stroke='%23FFFCF5' stroke-width='0'/%3E%3C/svg%3E%0A");
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    width: 41px;
    height: 53px;
    position: absolute;
    top: 0px;
    left: 0px;
    opacity: 0;
    transition: opacity 300ms;
}
.menu-container .menu-link{
    transform: translateX(100px);
    opacity: 0;
    cursor: pointer;
    user-select: none;
    position: relative;
    z-index: 1;
    text-decoration: none;
}
.menu-container .menu-link.active, .menu-container .menu-link.active *{
    -webkit-text-stroke: 1.5px var(--white);
    color: transparent;
    pointer-events: none;
}
.menu-container .menu-link::before{
    content: "";
    background-color: var(--black-dark-1);
    width: 26px;
    height: 23px;
    position: absolute;
    top: calc(50% + 15px);
    transform: translateY(-123%) translateX(34%) rotateZ(-40deg) skew(-40deg) scaleX(0);
    transform-origin: center right;
    left: -50px;
    z-index: -2;
    transition: transform 100ms 300ms;
}
.menu-container .menu-link::after{
    content: "";
    background-color: var(--black);
    width: 0%;
    height: 30px;
    position: absolute;
    top: calc(50% + 15px);
    transform: translateY(-50%);
    left: -35px;
    z-index: -1;
    transition: width 300ms, box-shadow 300ms;
}
.menu-container .menu-link:hover::before{
    transform: translateY(-123%) translateX(34%) rotateZ(-40deg) skew(-40deg) scaleX(1);
    transition: transform 100ms;
}
.menu-container .menu-link:hover::after{
    width: 100%;
    box-shadow: 0px 0px 10px 5px var(--shadow-black);
    transition: width 300ms 100ms, box-shadow 300ms 100ms;
}
/* ---------------------------------------------------------------------- */

/* <1440px (+100px car 50px de padding) --------------------------------- */
@media screen and (max-width: 1540px){
    .menu-container .filters{
        right: 115px;
    }
    .menu-container .burger-menu{
        right: 50px;
    }
}
/* ---------------------------------------------------------------------- */