/*NEW*/
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(8, 5, 25, 0.4);
  transition: transform 0.5s ease;
  z-index: 10;
  animation-duration: 0.4s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  /*clip-path: polygon(0 0, 100% 0, 100% 0%, 0 0%);*/
  clip-path:polygon(0 0, 100% 0, 100% 75px, 0 75px);
  will-change:opacity, transform, clip-path;
  backdrop-filter:blur(30px);
}

body.menu-opened {
  overflow: hidden;
}

/*Открыто-закрыто*/
.mobile-menu.show {
  animation-name: show-menu;
}

.mobile-menu.hide {
  animation-name: hide-menu;
}

/*Бургер*/
.burger {
  position: fixed;
  right:var(--indent);
  top:var(--vu);
  height: 22px;
  width: 40px;
  cursor: pointer;
  z-index: 1001;
  border: none;
  background-color: transparent;
  margin-top: 2px;
}

.burger__bar {
  display: block;
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 2px;
  background-color:var(--white);
  transform-origin: center center;
  transition: var(--transition);
  transition-duration: 0.2s;
}

.burger__bar-top {
  transform: translate(0, 0);
}

.burger__bar-middle {
  transform: translate(0, 8px) scale(1);
  opacity: 1;
}

.burger__bar-bottom {
  transform: translate(0, 16px);
}

.menu-opened .burger__bar-top {
  transform: rotate(45deg) translate(6px, 6px);
}

.menu-opened .burger__bar-middle {
  transform: translate(0, 8px) scale(0);
  opacity: 0;
}

.menu-opened .burger__bar-bottom {
  transform: rotate(-45deg) translate(-6px, 6px);
}

/*Пункты меню*/
.mobile-menu__container {
  margin-top: 80px;
}

.mobile-menu__item {
  display: inline-block;
  font-size: 14px;
  font-size:clamp(16px, -0.24rem + 5.833vi, 23px);
  margin-bottom: 10px;
  margin-left: 60px;
}

/*Анимация пунктов меню*/
.mobile-menu.show .mobile-menu__item, .mobile-menu.show .mobile-menu__background {
  animation:show-menu-items 0.5s var(--transition-ease) both;
  animation-delay:var(--d);
}

.mobile-menu.hide .mobile-menu__item {
  animation: hide-menu-items 0.15s both;
}

/*Анимации*/
@keyframes show-menu {
  from {
    clip-path:polygon(0 0, 100% 0, 100% 75px, 0 75px);
  }
  
  to {
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
  }
}

@keyframes hide-menu {
  from {
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
  }
  
  to {
    clip-path:polygon(0 0, 100% 0, 100% 75px, 0 75px);
  }
}

@keyframes show-menu-items {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  
  to {
    opacity: 1;
    transform: translateX(0%);
  }
}

@keyframes hide-menu-items {
  from {
    opacity: 1;
    transform: translateY(0%);
  }
  
  to {
    opacity: 0;
    transform: translateY(-100%);
  }
}