/* ─────────────────────────────────────────────────────────────────────
   СКВОЗНОЕ МЕНЮ САЙТА — один компонент на лендинг и на страницы кейсов.

   Плавающая пилюля вверху по центру. Фон у неё свой (тёмное стекло),
   поэтому она одинаково читается и над светлым первым экраном лендинга,
   и над тёмной страницей кейса — цвет текста не приходится переключать
   под каждой секцией.

   На узком экране пилюля превращается в карточку: ссылки уезжают вниз
   вторым рядом и показываются по кнопке-бургеру.

   Токены берутся из страницы, но у каждого прописан запасной цвет —
   у страниц кейсов свой :root, и общего файла палитры они не грузят.
   ───────────────────────────────────────────────────────────────────── */

.sitenav {
  position: fixed; z-index: 60; top: 10px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; flex-wrap: wrap; gap: 2px;
  /* Ширина полосы = колонка страницы: те же поля, что у заголовков и текста,
     поэтому меню стоит на общей сетке, а не распирает экран. */
  width: min(calc(100vw - 2 * var(--edge, 18px)), var(--nav-col, 1232px));
  padding: 5px 5px 5px 16px;
  border-radius: 999px;
  border: 1px solid rgba(238, 241, 239, .16);
  background: rgba(3, 24, 30, .74);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
          backdrop-filter: blur(14px) saturate(1.2);
  color: #eef1ef;
  font: 500 13.5px/1 var(--sans, 'Manrope', system-ui, sans-serif);
  box-shadow: 0 12px 34px rgba(3, 24, 30, .22);
  /* Углы и фон меняются БЫСТРО, высота — медленно. Замер показал, почему это
     важно: при одинаковых .22s карточка вырастала до полной высоты за 170 мс,
     а радиус в этот момент был ещё 130 px — открытое меню выглядело распухшей
     пилюлей и только потом «досыхало» в прямоугольник. Диапазон радиуса
     999 → 22 px огромен, поэтому он должен проскакивать сразу. */
  transition: border-radius .12s ease, background-color .12s ease;
}
.sitenav a { color: inherit; text-decoration: none; }

.sitenav__brand { display: inline-flex; align-items: center; gap: 9px;
                 margin-right: 10px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
/* Знак «звено»: горизонтальная линия с кругом по центру — то же, что дорожка
   с данными на первом экране. Обводка задаётся здесь, а не атрибутами в
   разметке, чтобы одинаковый знак лежал на всех четырёх страницах одной
   строкой. Цвет берётся у полосы (currentColor), поэтому на тёмном стекле
   меню знак светлый без отдельного правила. */
.sitenav__mark { height: 16px; width: auto; flex: none;
                 fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (max-width: 430px) { .sitenav__mark { height: 15px; } }
/* Ниже 360 px знак уходит совсем. Замер: он добавляет строке 39 px, и на
   320–344 px имя, «Написать» и бургер перестают помещаться в одну строку —
   бургер сваливается вторым рядом, полоса растёт с 52 до 81 px. Ужать знак
   до влезания нельзя: свободного места там 0, а не 10 px. */
@media (max-width: 359px) { .sitenav__mark { display: none; } }
/* Пальцем нажимают по площади, а не по глифам: у имени, кнопки и бургера
   тапаемая цель доводится до 40 px по высоте. Ширину это не трогает —
   на 320 px имя, «Написать» и бургер по-прежнему стоят в одну строку. */
@media (pointer: coarse) {
  .sitenav__brand { display: flex; align-items: center; min-height: 40px; }
}

/* Имя слева, всё остальное прижато к правому краю полосы. */
.sitenav__links { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.sitenav__links a {
  display: block; padding: 9px 12px; border-radius: 999px; white-space: nowrap;
  color: rgba(238, 241, 239, .62);
  transition: color .16s, background-color .16s;
}
.sitenav__links a:hover,
.sitenav__links a:focus-visible { color: #eef1ef; background: rgba(238, 241, 239, .09); }
.sitenav__links a[aria-current='page'] { color: #eef1ef; background: rgba(238, 241, 239, .12); }

/* Селектор с классом ссылки ОБЯЗАТЕЛЕН: правило `.sitenav a { color: inherit }`
   весит больше одиночного класса и иначе перекрашивает кнопку в цвет пилюли —
   светлое по светлому, контраст 1,1:1. */
.sitenav a.sitenav__cta {
  margin-left: 8px; padding: 9px 17px; border-radius: 999px; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--chalk, #e9e4d8); color: var(--petrol, #05262e); font-weight: 700;
  transition: filter .16s;
}
.sitenav a.sitenav__cta:hover { filter: brightness(1.06); }
@media (pointer: coarse) { .sitenav a.sitenav__cta { min-height: 40px; } }

.sitenav__burger { display: none; }

/* Подложка под раскрытым меню. Карточка меню накрывает первый заголовок
   страницы, и без затемнения это читается как сломанная вёрстка — половина
   букв срезана краем панели. С подложкой то же перекрытие читается как
   «открыто меню». Живёт только на узком экране: на широком список стоит
   в строке и ничего не накрывает. */
.sitenav__scrim { display: none; }

/* ── Узкий экран: пилюля раскрывается в карточку ── */
@media (max-width: 900px) {
  .sitenav { gap: 0; padding: 5px 5px 5px 14px; }

  /* Закрытое состояние — СХЛОПНУТОЕ, а не display: none. display не
     анимируется: список появлялся на полную высоту мгновенно, пока углы
     пилюли ещё доезжали до карточки, и раскрытие читалось как рывок.
     visibility снимает пункты с клавиатуры и с озвучки, пока меню закрыто. */
  .sitenav__links {
    display: flex; order: 3; width: 100%; margin-left: 0;
    flex-direction: column; align-items: stretch; gap: 1px;
    max-height: 0; padding: 0 2px; opacity: 0; overflow: hidden; visibility: hidden;
    transition: max-height .28s cubic-bezier(.4,0,.2,1), padding .28s cubic-bezier(.4,0,.2,1),
                opacity .18s ease, visibility 0s linear .28s;
  }
  /* Пункт раскрытого списка — тапаемая цель: 15px при line-height 1 давали
     37 px высоты, палец требует 40. */
  /* В раскрытой карточке пункт читают, а не скользят по нему взглядом:
     приглушённый цвет полосы давал 4,6:1 — на пороге. */
  .sitenav__links a { display: flex; align-items: center; min-height: 40px;
                      padding: 10px 12px; border-radius: 12px; font-size: 15px;
                      color: rgba(238, 241, 239, .86); }

  .sitenav a.sitenav__cta { margin-left: auto; }

  .sitenav__burger {
    display: grid; place-content: center; gap: 4px; margin-left: 6px;
    width: 40px; height: 40px; padding: 0; border: none; border-radius: 50%;
    background: rgba(238, 241, 239, .10); cursor: pointer;
  }
  .sitenav__burger span {
    display: block; width: 15px; height: 1.6px; border-radius: 2px; background: #eef1ef;
    transition: transform .22s ease;
  }

  .sitenav__scrim {
    display: block; position: fixed; inset: 0; z-index: 59;
    background: rgba(3, 24, 30, .58);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none; transition: opacity .22s ease;
  }
  html.nav-open .sitenav__scrim { opacity: 1; pointer-events: auto; }

  /* Раскрытая карточка — НЕПРОЗРАЧНАЯ. При 93 % сквозь неё просвечивал
     светлый пояс первого экрана, и карточка выглядела двухцветной: верх
     тёмный, низ грязно-серый. */
  .sitenav.is-open { border-radius: 22px; background: #062028; }
  .sitenav.is-open .sitenav__links {
    /* Потолок близок к настоящей высоте списка (~172 px): при 60vh анимация
       проходила рабочий участок за десятую долю времени и раскрытие всё равно
       выглядело рывком. Запас нужен на перенос длинного пункта на 320 px. */
    /* Потолок близок к настоящей высоте списка (172 px, замерено на 320 и
       390 px), иначе анимация проходит рабочий участок за долю времени и
       раскрытие снова читается как рывок. Запас — на перенос длинного пункта. */
    max-height: 200px; padding: 6px 2px 2px; opacity: 1; visibility: visible;
    /* Ровная кривая, а не «выстрел с торможением»: cubic-bezier(.16,1,.3,1)
       набирает 90 % высоты за первую четверть времени, и раскрытие всё равно
       читается как рывок, сколько ни увеличивай длительность. */
    transition: max-height .32s cubic-bezier(.4,0,.2,1), padding .32s cubic-bezier(.4,0,.2,1),
                opacity .24s ease .06s, visibility 0s;
  }
  .sitenav.is-open .sitenav__burger span:first-child { transform: translateY(2.8px) rotate(45deg); }
  .sitenav.is-open .sitenav__burger span:last-child  { transform: translateY(-2.8px) rotate(-45deg); }
}

@media (max-width: 430px) {
  .sitenav { padding-left: 13px; }
  .sitenav__brand { font-size: 13px; }
  .sitenav a.sitenav__cta { padding: 8px 14px; font-size: 13px; }
}

/* Переход по пункту меню — прокруткой, а не прыжком. Отключается системной
   настройкой «меньше движения». */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
  .sitenav, .sitenav *, .sitenav__burger span, .sitenav__scrim { transition: none !important; }
}