/* Верхнее меню с движением. Поведение снято с «Motion Navigation Menu»
   (unlumen, 21st.dev), выбор Тимура 12.09.2026. Их компонент написан
   на Tailwind и framer-motion; здесь то же поведение своими правилами,
   поверх пилюли Dayos, которая остаётся их.

   Пружина у них задана жёсткостью 350 и затуханием 32 при нулевом
   отскоке — быстрый разгон и мягкая посадка без перелёта. В CSS это
   `cubic-bezier(.22,1,.36,1)`. Панель едет 420 мс, подсветка 320:
   подсветка должна успевать за курсором, панель — догонять её. */

.menyu-verh {
  position: relative;
}

/* Подсветка под наведённым пунктом. Едет и меняет ширину под слово. */
.menyu-podsvetka {
  background: color-mix(in srgb, var(--cl-color1) 8%, transparent);
  border-radius: 2.8rem;
  bottom: 0.4rem;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0.4rem;
  transition:
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.2s ease-in-out;
  width: 0;
  z-index: 0;
}

/* Слова поверх подсветки. */
.menyu-verh .group {
  position: relative;
  z-index: 1;
}

/* Стрелка у пункта. Своя: их иконка из lucide, а тянуть библиотеку
   значков ради одной галочки незачем. */
.menyu-strelka {
  display: inline-flex;
  height: 1.2rem;
  margin-left: 0.6rem;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  width: 1.2rem;
}

.menyu-strelka svg {
  height: 100%;
  width: 100%;
}

.menyu-strelka.vniz {
  transform: rotate(180deg) translateY(0.1rem);
}

/* Место под панель. Его поле сверху в 1,2rem — тот самый зазор между
   словом и списком, по которому идёт курсор. Пока зазор был пустым,
   меню закрывалось на полпути к пунктам. */
.menyu-mesto {
  left: 50%;
  padding-top: 1.2rem;
  pointer-events: none;
  position: absolute;
  top: 100%;
  transform: translateX(-50%);
  transition: left 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  visibility: hidden;
  z-index: 2;
}

.menyu-mesto.vidno {
  pointer-events: auto;
  visibility: visible;
}

/* Прозрачность живёт на самой панели, а не на месте под ней.

   Причина техническая: `backdrop-filter` размывает то, что лежит
   за элементом, но перестаёт видеть страницу, если предок задаёт
   свою прозрачность — такой предок создаёт отдельный слой, и фоном
   для размытия становится он, а не страница. Пока прозрачность
   стояла здесь, панель была просто полупрозрачной, и сквозь неё
   читался заголовок первого экрана. */
.menyu-okno {
  opacity: 0;
  transition:
    opacity 0.24s ease-in-out,
    width 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.menyu-mesto.vidno .menyu-okno {
  opacity: 1;
}

/* Панель подменю. Одна на все пункты: переезжает под активный
   и меняет размер под своё содержимое.

   Светлая и прозрачная — правка Тимура 12.09.2026, до этого она была
   чёрной. На белой странице чёрный прямоугольник бил в глаза сильнее,
   чем сам заголовок.

   Держится на трёх вещах: почти белая заливка, тонкая рамка и мягкая
   широкая тень — на белом полотне панель иначе не отделяется.

   Про размытие и прозрачность. `backdrop-filter` пробовался и эффекта
   не дал: computed style фильтр показывает, картинка не меняется
   (проверено в браузере 12.09.2026). А заметная прозрачность тут
   не работает по простой причине: панель выпадает ровно на заголовок
   первого экрана, и крупные чёрные буквы лезут сквозь. На 72 процентах
   пункты в них тонули, на 96 буквы ещё угадывались. Осталось 98:
   панель читается светлой за счёт рамки и тени, а не за счёт того,
   что сквозь неё что-то видно. */
.menyu-okno {
  background: color-mix(in srgb, var(--cl-white) 98%, transparent);
  border: 1px solid color-mix(in srgb, var(--cl-black) 8%, transparent);
  border-radius: 2.8rem;
  box-shadow: 0 2.4rem 6rem color-mix(in srgb, var(--cl-black) 10%, transparent);
  color: var(--cl-grey-500);
  overflow: hidden;
  transition:
    width 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  width: 0;
}

/* Содержимое панели. Ключ у него меняется вместе с пунктом, поэтому
   при каждой смене оно въезжает заново — в ту сторону, куда идёт
   курсор по списку. */
.menyu-sod {
  animation: menyu-vezd 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  padding: 5rem 3.1rem;
  width: max-content;
}

@keyframes menyu-vezd {
  from {
    opacity: 0;
    transform: translateX(calc(var(--storona, 1) * 2.4rem));
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.menyu-punkt {
  color: color-mix(in srgb, var(--cl-black) 62%, transparent);
  display: block;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
  white-space: nowrap;
}

.menyu-okno .menyu-punkt:hover {
  color: var(--cl-black);
}

/* Мерка: по ней панель узнаёт свой будущий размер. Лежит в потоке
   невидимой, поэтому меряется браузером честно. */
.menyu-merka {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  left: 0;
  padding: 5rem 3.1rem;
  pointer-events: none;
  position: absolute;
  top: 100%;
  visibility: hidden;
  width: max-content;
}

/* Кому движение мешает, тому его нет: панель просто появляется. */
@media (prefers-reduced-motion: reduce) {
  .menyu-podsvetka,
  .menyu-okno,
  .menyu-strelka {
    transition: none;
  }
  .menyu-sod {
    animation: none;
  }
}