.menu {
  position: fixed;
  inset: 0;
  z-index: 40;
}

.menu__backdrop {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 0.3);
  opacity: 0;
  transition: opacity var(--dur) ease;
}

.menu_open .menu__backdrop {
  opacity: 1;
}

/* Все размеры меню — в em от размера шрифта панели (28 px в макете), поэтому на ПК
   лесенка стикеров целиком растёт вместе с экраном и сохраняет пропорции макета */
.menu__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: min(100%, 480px);
  margin-top: calc(var(--header-height) + 82px);
  padding: 0 clamp(12px, 4vw, 20px) 24px;
  font-size: clamp(22px, 6.4vw, 28px);
}

.menu__list {
  display: flex;
  flex-direction: column;
}

/* Стикеры лежат лесенкой с неровным шагом, как в макете: сдвиг и отступ над каждым заданы
   в разметке. Поворот вокруг центра стикера, чтобы наклон не уводил его вверх или вниз.
   Обрезка по высоте заглавных здесь не нужна — иначе пункты наезжают друг на друга */
.menu__item {
  display: flex;
  width: fit-content;
  margin: calc(var(--menu-gap, 0) * 1em / 28) 0 0 var(--menu-x, 0);
  text-box: none;
  opacity: 0;
  transform: translateY(-18px) rotate(calc(var(--menu-tilt, 0deg) - 8deg)) scale(0.85);
  transition:
    opacity 0.35s ease,
    transform 0.6s var(--ease-back);
}

.menu_open .menu__item {
  opacity: 1;
  transform: rotate(var(--menu-tilt, 0deg));
}

.menu_open .menu__item:nth-child(1) { transition-delay: 0.04s; }
.menu_open .menu__item:nth-child(2) { transition-delay: 0.08s; }
.menu_open .menu__item:nth-child(3) { transition-delay: 0.12s; }
.menu_open .menu__item:nth-child(4) { transition-delay: 0.16s; }
.menu_open .menu__item:nth-child(5) { transition-delay: 0.2s; }
.menu_open .menu__item:nth-child(6) { transition-delay: 0.24s; }
.menu_open .menu__item:nth-child(7) { transition-delay: 0.28s; }

.menu__link,
.menu__label {
  text-box: none;
}

.menu__link {
  display: inline-flex;
  align-items: center;
  gap: 0.21em;
  transition: transform var(--dur-fast) var(--ease-back);
}

.menu__label {
  font-family: var(--font-display);
  font-size: 1em;
  font-weight: 400;
  line-height: 1.1;
  color: var(--color-black);
  -webkit-text-stroke: 0.29em var(--color-white);
  paint-order: stroke fill;
}

.menu__arrow {
  flex: none;
  width: 1.21em;
  height: 1.07em;
  background: url("../../img/menu/arrow-button.webp") center / contain no-repeat;
  transition: transform var(--dur) var(--ease-back);
}

@media (hover: hover) {
  .menu__link:hover {
    transform: scale(1.04);
  }

  .menu__link:hover .menu__arrow {
    transform: rotate(45deg);
  }
}

/* Видимая ручка 50 × 6, но нажимать можно на полосу 88 × 44 */
.menu__handle {
  position: relative;
  align-self: center;
  width: 88px;
  height: 44px;
  margin-top: 2.5em;
  opacity: 0;
  transition: opacity var(--dur) ease 0.3s;
}

.menu__handle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 6px;
  border-radius: 10px;
  background: rgb(0 0 0 / 0.1);
  box-shadow: 0 4px 6px -3px rgb(0 0 0 / 0.35), inset 0 0 0 0.8px rgb(0 0 0 / 0.12);
  translate: -50% -50%;
}

.menu_open .menu__handle {
  opacity: 1;
}

@media (min-width: 768px) {
  /* В макете (телефон) страница под меню резкая. На широком экране под стикерами
     оказывается крупный заголовок первого экрана — размываем, чтобы пункты читались */
  .menu__backdrop {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  /* На ПК меню во весь экран: лесенка по центру, размер шрифта от ширины и высоты окна,
     чтобы при уменьшении окна всё плавно уменьшалось и помещалось по высоте */
  .menu {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: calc(var(--header-height) + 40px);
  }

  .menu__panel {
    width: 17.2em;
    margin: 0;
    padding: 0 0 1em;
    font-size: clamp(28px, min(4.4vw, 4.6vh), 72px);
  }
}