/* Меню — стекло по эффекту Glass из Figma (1:14): размытие 10, преломление 0,8 на глубину 20,
   свет −45° яркостью 0,8, расслоение 0,5. Преломление — SVG-фильтр #nav-glass (Chromium), иначе только размытие */
.nav {
  position: relative; display: flex; gap: 8px; height: 80px; padding: 6px;
  border-radius: calc(16px * var(--sq)); corner-shape: squircle;
  background: rgba(4, 13, 27, .23); backdrop-filter: blur(5px);
}
.nav.glass { backdrop-filter: url(#nav-glass); }
.nav a {
  position: relative; z-index: 1; display: flex; align-items: center; padding: 0 24px;
  border-radius: calc(12px * var(--sq)); corner-shape: squircle;
  font: 500 18px/normal var(--font-ui); white-space: nowrap;
  transition: background-color .25s ease, color .25s ease, transform .15s ease;
}
/* зелёная плашка — нажатая кнопка, выбранный раздел (Variant2 кнопки в Figma) */
.nav a[aria-current="page"] { background: var(--lime); color: var(--ink); }
.nav a:active { transform: scale(.96); }
/* ховер: светлая плашка плавно перетекает за курсором от пункта к пункту (позиция — из JS) */
.nav-hl {
  position: absolute; left: 0; top: 6px; height: calc(100% - 12px); width: 0; pointer-events: none;
  border-radius: calc(12px * var(--sq)); corner-shape: squircle; background: rgba(255, 255, 255, .12);
  opacity: 0; transform: translateX(var(--x, 0)); width: var(--w, 0);
  transition: transform .35s cubic-bezier(.3, 1.3, .5, 1), width .35s cubic-bezier(.3, 1.3, .5, 1), opacity .2s ease;
}
.nav-hl.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .nav-hl, .nav a { transition: none; } }

@media (max-width: 1600px) {
  .nav a { padding: 0 16px; font-size: 16px; }
}

/* Выпадающие меню «Анилог» и «База знаний» (макета нет — по описанию, согласованному с владельцем 30.10):
   то же стекло, что у меню (тёмная подложка + размытие 10 из Glass 1:14), колонки с заголовками,
   пункт — название и строка-подсказка; наведение — та же светлая плашка, что у пунктов меню */
.nav-drop {
  position: absolute; z-index: 20; top: calc(100% + 8px); left: var(--dx, 0); display: flex; gap: 8px; padding: 12px;
  border-radius: calc(16px * var(--sq)); corner-shape: squircle;
  background: rgba(4, 13, 27, .55); backdrop-filter: blur(16px); color: #fff;   /* темнее полосы меню: панель лежит на светлом арте, подсказки должны читаться */
  opacity: 0; transform: translateY(-6px); transition: opacity .2s ease, transform .3s cubic-bezier(.3, 1.3, .5, 1);
}
.nav-drop.on { opacity: 1; transform: none; }
.nav-drop[hidden] { display: none; }
.nav-drop section { width: 260px; display: flex; flex-direction: column; gap: 2px; }
.nav-drop h3 { margin: 6px 14px 8px; font: 500 13px/1 var(--font-ui); letter-spacing: .04em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.nav-drop a { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; border-radius: calc(12px * var(--sq)); corner-shape: squircle;
  color: #fff; text-decoration: none; transition: background-color .2s ease; }
.nav-drop a:hover, .nav-drop a:focus-visible { background: rgba(255, 255, 255, .12); }
.nav-drop b { font: 500 16px/1.2 var(--font-ui); }
.nav-drop small { font: 400 13px/1.3 var(--font-ui); color: rgba(255, 255, 255, .6); }
@media (prefers-reduced-motion: reduce) { .nav-drop { transition: none; } }

/* Прилипшее меню (при прокрутке ниже первого экрана): сверху по центру, ниже ростом, справа иконки поиска и Steam.
   Под ним светлая страница — подложка темнее, чтобы белый текст читался. Макета нет — по описанию владельца 30.10. */
.nav-extra { display: none; }
.nav.stuck {
  position: fixed; z-index: 50; top: 12px; left: 50%; height: 60px; padding: 5px;
  background: rgba(20, 22, 58, .62); transform: translateX(-50%); animation: nav-in .35s cubic-bezier(.3, 1.3, .5, 1);
}
.nav.stuck > a { padding: 0 18px; font-size: 16px; }
.nav.stuck .nav-hl { top: 5px; height: calc(100% - 10px); }
.nav.stuck .nav-extra { display: flex; gap: 4px; margin-left: 4px; padding-left: 6px; border-left: 1px solid rgba(255, 255, 255, .15); }
.nav-ico { width: 50px; height: 50px; display: grid; place-items: center; padding: 0; border: 0; cursor: pointer;
  border-radius: calc(12px * var(--sq)); corner-shape: squircle; background: none; transition: background-color .2s ease; }
.nav-ico:hover, .nav-ico:focus-visible { background: rgba(255, 255, 255, .12); }
.nav-ico img { width: 24px; height: 24px; }
.nav-ico[href] img { width: 30px; height: 30px; border-radius: calc(8px * var(--sq)); corner-shape: squircle; }
@keyframes nav-in { from { opacity: 0; transform: translate(-50%, -12px); } }
.nav-drop.fixed { position: fixed; top: var(--dy); left: var(--dx); }
@media (prefers-reduced-motion: reduce) { .nav.stuck { animation: none; } }

/* Экраны до 1440, при прокрутке: меню прячется; слева сверху отдельная кнопка «три полоски» — открывает все разделы
   на весь экран и сама становится крестиком; справа сверху остаются поиск и Steam */
.nav-burger { display: none; position: relative; }
.nav-burger i { position: absolute; width: 22px; height: 2px; border-radius: 1px; background: #fff; transition: transform .3s cubic-bezier(.3, 1.3, .5, 1), opacity .2s ease; }
.nav-burger i:nth-child(1) { transform: translateY(-7px); }
.nav-burger i:nth-child(3) { transform: translateY(7px); }
.nav-burger[aria-expanded="true"] i:nth-child(1) { transform: rotate(45deg); }
.nav-burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] i:nth-child(3) { transform: rotate(-45deg); }
@media (max-width: 1440px) {
  .nav.stuck > a, .nav.stuck .nav-hl { display: none; }
  .nav.stuck .nav-extra { margin-left: 0; padding-left: 0; border-left: 0; }
  .nav.stuck { left: auto; right: 16px; transform: none; animation-name: nav-in-r; }
  .top.stuck .nav-burger {
    display: grid; position: fixed; z-index: 60; left: 16px; top: 12px; width: 60px; height: 60px;
    border-radius: calc(16px * var(--sq)); background: rgba(20, 22, 58, .62); backdrop-filter: blur(10px); animation: nav-in-r .35s cubic-bezier(.3, 1.3, .5, 1);
  }
}
@keyframes nav-in-r { from { opacity: 0; transform: translateY(-12px); } }

/* Шапка первого экрана до 1440 (Figma «hero 1440» / «hero 720», 55:395 / 55:495): слева кнопка «три полоски» перед логотипом,
   пункты меню — в ней; справа квадратные кнопки поиска и Steam (80, стекло как у меню) */
@media (max-width: 1440px) {
  .top:not(.stuck) .nav-burger { display: grid; order: -1; flex: none; width: 80px; height: 80px;
    border-radius: calc(16px * var(--sq)); corner-shape: squircle; background: rgba(4, 13, 27, .23); backdrop-filter: blur(5px); }
  .top:not(.stuck) > .spacer ~ .spacer { display: none; }
  .nav:not(.stuck) { height: 80px; padding: 0; background: none; backdrop-filter: none; }
  .nav:not(.stuck) > a, .nav:not(.stuck) .nav-hl, .nav:not(.stuck) .nav-extra > a.nav-ico { display: none; }
  .nav:not(.stuck) .nav-extra { display: flex; gap: 10px; }
  .nav:not(.stuck) .nav-ico { width: 80px; height: 80px; border-radius: calc(16px * var(--sq)); background: rgba(4, 13, 27, .23); backdrop-filter: blur(5px); }
  .nav:not(.stuck) .nav-ico img { width: 26px; height: 26px; }
  .nav:not(.stuck) .nav-search input { height: 80px; border-radius: calc(16px * var(--sq)); }
  .nav:not(.stuck) .nav-search.on input { margin-right: 10px; }
  .steam { width: 80px; padding: 6px; }
  .steam .g1, .steam .g2, .steam .dot, .steam span { display: none; }
  .steam .icon { width: 100%; }
}
@media (max-width: 600px) {
  .top { gap: 6px; }
  .top:not(.stuck) .nav-burger, .nav:not(.stuck) .nav-ico, .steam { width: 48px; height: 48px; }
  .nav:not(.stuck) { height: 48px; }
  .nav:not(.stuck) .nav-extra { gap: 0; }
  .nav:not(.stuck) .nav-extra .nav-ico { margin-left: 6px; }
  .nav:not(.stuck) .nav-search input { height: 48px; }
  .nav:not(.stuck) .nav-search.on input { width: calc(100vw - 150px); margin-right: 0; }
  .steam { padding: 3px; }
  .logo, .logo img { width: 130px; height: auto; }
}

/* все разделы на весь экран */
.nav-drop.all {
  position: fixed; inset: 0; z-index: 55; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-content: start; gap: 24px 16px;
  padding: 96px 32px 32px; overflow-y: auto; border-radius: 0; background: rgba(14, 16, 44, .94); backdrop-filter: blur(16px);
}
.nav-drop.all section { width: auto; }
.nav-drop.all .all-art { grid-column: 1 / -1; height: max(120px, calc((100vw - 64px) * 345 / 1273)); margin-bottom: 8px;   /* панорама над разделами, как в макете */
  border-radius: calc(32px * var(--sq)); corner-shape: squircle; background: #2b2d42 url(../assets/menu-hilltop.webp) 50% 50% / cover no-repeat; }

/* поле поиска в прилипшем меню: лупа раскрывает его влево; список результатов — вниз (поиск из modules/search.js) */
.nav-search { position: relative; display: flex; align-items: center; }
.nav-search input {
  width: 0; height: 50px; padding: 0; border: 0; outline: 0; opacity: 0; color: #fff; font: 500 16px/normal var(--font-ui);
  border-radius: calc(12px * var(--sq)); corner-shape: squircle; background: rgba(255, 255, 255, .12);
  transition: width .35s cubic-bezier(.3, 1.3, .5, 1), padding .35s ease, opacity .2s ease;
}
.nav-search input::placeholder { color: rgba(255, 255, 255, .7); }
.nav-search input::-webkit-search-cancel-button { display: none; }
.nav-search.on input { width: 300px; padding: 0 16px; opacity: 1; }
.nav-search .sr-list { top: calc(100% + 13px); bottom: auto; left: auto; right: -110px; width: 440px; }
.nav-search:not(.on) .sr-list { display: none; }

/* в прилипшем меню (отступ 5) скругление кнопок = скругление меню − отступ: углы кнопок идут параллельно углам меню и не торчат за изгиб */
.nav.stuck > a, .nav.stuck .nav-hl, .nav.stuck .nav-ico, .nav.stuck .nav-search input { border-radius: calc(16px * var(--sq) - 5px); }
/* иконки — не пункты меню: правило «.nav a» (отступы 0 24, flex) их не касается — картинка ровно по центру выделения */
.nav .nav-ico { display: grid; place-items: center; padding: 0; font: inherit; }