/* Названия заказчиков теперь написаны прямо в сцене — на ярлыках, к которым
   сходятся лучи. Меню их дублирует, поэтому в покое оно уходит в фон и не
   спорит с работами; нужно оно только чтобы прыгнуть к заказчику, чей
   ярлык уехал за край экрана. Разворачивается по наведению. */
#menu {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 45;
  max-height: 70vh;
  overflow: hidden;
  padding: 18px var(--pad) 18px var(--pad);
  /* Подложка появляется вместе с меню: в покое сцена ничем не перекрыта.
     Гасим именно её, а не весь #menu — иначе opacity контейнера
     перемножится с opacity строки и активный заказчик тоже исчезнет. */
  background: linear-gradient(90deg,
    rgba(8, 8, 10, .92) 0%,
    rgba(8, 8, 10, .78) 55%,
    rgba(8, 8, 10, 0) 100%);
  transition: opacity .32s ease;
}

/* Курсор у левого края, фокус с клавиатуры или смена заказчика —
   любой из этих поводов раскрывает список. */
#menu:not(:hover):not(:focus-within):not(.is-awake) {
  background: none;
}

/* Пока меню спит, виден только активный заказчик: зритель не теряет,
   где он находится, а сцена не перекрыта списком из десяти строк. */
#menu .menu-item { transition: color .28s ease, transform .28s ease,
                               opacity .32s ease; }
#menu:not(:hover):not(:focus-within):not(.is-awake) .menu-item {
  opacity: 0;
}
#menu:not(:hover):not(:focus-within):not(.is-awake) .menu-item.is-active {
  opacity: 1;
}

/* Полоска-«язычок» у самого края: подсказывает, что здесь что-то есть. */
#menu::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 2px;
  height: 42px;
  margin-top: -21px;
  background: var(--fg-mute);
  opacity: 1;
  transition: opacity .32s ease;
}
#menu:hover::before,
#menu:focus-within::before,
#menu.is-awake::before { opacity: 0; }

/* Зона захвата шире самого меню: целиться в узкую колонку неудобно. */
#menu::after {
  content: '';
  position: absolute;
  inset: -12px -40px -12px 0;
  z-index: -1;
}

.menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.menu-item {
  display: block;
  border: 0;
  background: none;
  padding: 3px 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  line-height: 1.35;
  color: var(--fg-mute);
  cursor: pointer;
  text-align: left;
  transition: color .28s ease, transform .28s ease;
  transform-origin: left center;
  white-space: nowrap;
}

.menu-item:hover { color: var(--fg-dim); }

/* Активный кластер: сдвиг вправо читается лучше, чем просто цвет —
   взгляд ловит движение на периферии, не отрываясь от сцены */
.menu-item.is-active {
  color: var(--fg);
  transform: translateX(6px);
}

.menu-item.is-disabled {
  color: #2e2d2b;
  cursor: default;
  font-style: italic;
}

.menu-item:focus-visible {
  outline: 1px solid var(--fg-dim);
  outline-offset: 3px;
}

/* На телефоне вертикальный список съедает половину экрана —
   уводим в горизонтальную ленту снизу */
@media (max-width: 760px) {
  /* На телефоне наведения нет, а лента снизу работам не мешает —
     прятать её незачем. Возвращаем постоянную видимость. */
  #menu:not(:hover):not(:focus-within):not(.is-awake) .menu-item { opacity: 1; }
  #menu::before { content: none; }

  #menu,
  #menu:not(:hover):not(:focus-within):not(.is-awake) {
    left: 0;
    right: 0;
    top: auto;
    bottom: calc(max(var(--pad), env(safe-area-inset-bottom)) + 26px);
    transform: none;
    max-height: none;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 10px 0 8px;
    background: linear-gradient(0deg,
      rgba(8, 8, 10, .95) 0%, rgba(8, 8, 10, .82) 60%, rgba(8, 8, 10, 0) 100%);
    mask-image: linear-gradient(90deg, transparent, #000 18px,
                                #000 calc(100% - 18px), transparent);
  }
  #menu::-webkit-scrollbar { display: none; }

  .menu-list {
    flex-direction: row;
    gap: 14px;
    padding: 0 var(--pad);
    width: max-content;
  }

  .menu-item { font-size: 11px; padding: 6px 0; }
  .menu-item.is-active { transform: none; text-decoration: underline;
                         text-underline-offset: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  #menu, #menu .menu-item, #menu::before { transition-duration: .01ms; }
}