/* ==========================================================================
   Дока — навигация, залипшая внизу экрана.

   Два состояния, два слоя, лежащих друг на друге в одной точке: три точки
   на стекле и полная навигация. Переход простой и прямой — точки улетают
   вниз, навигация приходит сверху на их место. Одно направление на оба
   слоя, поэтому смена читается как одно движение, а не как две отдельные
   анимации.

   Слои совмещены не выравниванием, а раскладкой: навигация остаётся в
   потоке и задаёт доке высоту, точки лежат поверх неё по центру. Поэтому
   при смене состояний ничего не прыгает: точка, вокруг которой всё
   происходит, всегда одна и та же.

   Прогрессом перехода управляют двое — прокрутка первого экрана (сцена
   сворачивает навигацию в точки) и клик по точкам; считает scripts/dock.js.

   Размытие фона накладывает жёсткое условие на раскладку: над стеклом
   не должно быть ни одного слоя с прозрачностью, трансформацией или
   will-change. Такой слой отсекает стекло от страницы, и размывать ему
   становится нечего — фон остаётся чётким. Поэтому перелёт написан не
   на обёртках, а на самих стеклянных элементах, и в состоянии покоя
   скрипт убирает свои стили совсем.

   По той же причине наведение и перелёт разведены по разным свойствам:
   скрипт ведёт translate, CSS — scale. Отдельные свойства трансформации
   складываются сами и не переписывают друг друга.

   Без скрипта и в режиме пониженной подвижности остаётся раскрытая
   навигация обычным потоком: точки показывает только класс dock--morph,
   который ставит скрипт.
   ========================================================================== */

.dock {
  /* Тёмный фон страницы — состояние по умолчанию. */
  --dock-fg: var(--color-white);
  --dock-plate: var(--color-white);
  --dock-on-plate: var(--color-ink);

  position: fixed;
  z-index: 50;
  left: 0;
  right: 0;
  bottom: max(var(--space-20), 3svh);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 var(--gutter);
  color: var(--dock-fg);
  /* Ряд ловит клики только там, где что-то есть. */
  pointer-events: none;
  transition: color 0.3s ease;
}

.dock > * {
  pointer-events: auto;
}

/* --- Раскрытая навигация ------------------------------------------------- */

.dock__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-20);
}

.dock__pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-4) var(--space-16) var(--space-4) var(--space-4);
  border-radius: var(--radius-16);
  background-color: var(--color-glass);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  transition: background-color 0.3s ease;
}

/* Подсветка под курсором — одна на все разделы: она не зажигается и не
   гаснет на каждом, а переезжает с одного на другой. Поэтому это отдельный
   слой, а не фон самого раздела: фон пришлось бы гасить в одном месте и
   зажигать в другом, и связи между двумя движениями не было бы.

   Лежит под разделами, значит, под белой плашкой активного: заезжая на
   неё, подсветка скрывается за ней, а не ложится поверх. */
.dock__glow {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  border-radius: var(--radius-12);
  background-color: rgba(255, 255, 255, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
    width 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
    height 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.2s ease;
}

.dock__glow.is-on {
  opacity: 1;
}

/* Появляясь, подсветка не должна прилетать с прошлого места: она встаёт
   на новое сразу и только потом проявляется. */
.dock__glow.is-placed {
  transition: none;
}

.dock__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: 34px;
  padding: 0 var(--space-12);
  font-size: var(--fs-ui);
  line-height: 1;
  letter-spacing: var(--tracking-ui);
  white-space: nowrap;
}

.dock__link--active {
  border-radius: var(--radius-12);
  background-color: var(--dock-plate);
  color: var(--dock-on-plate);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.dock__marker {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: currentColor;
}

/* --- Свёрнутое меню ------------------------------------------------------ */

/* Стекло с точками — сама кнопка, без обёрток: над размытием не должно
   быть ни одного слоя, который отрежет его от страницы. */
.dock__toggle {
  display: none;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8);
  border-radius: var(--radius-16);
  background-color: var(--color-glass);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  cursor: pointer;
  transition: scale 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
    background-color 0.3s ease;
}

.dock__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: currentColor;
}

/* Курсору отвечает scale, перелёт скрипт пишет в translate — отдельные
   свойства складываются и не переписывают друг друга. */
.dock__toggle:hover,
.dock__toggle:focus-visible {
  scale: 1.09;
  background-color: rgba(255, 255, 255, 0.18);
}

.dock__toggle:active {
  scale: 0.97;
  transition-duration: 0.2s;
}

/* ==========================================================================
   Режим смены состояний — включает скрипт
   ========================================================================== */

/* Точки ложатся поверх навигации, в её центр: высоту доки задаёт
   навигация, и точка отсчёта у обоих слоёв одна. */
.dock--morph .dock__toggle {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  translate: -50% -50%;
}

/* ==========================================================================
   Светлый фон под докой
   ========================================================================== */

.dock--light {
  --dock-fg: var(--color-bg);
  --dock-plate: var(--color-bg);
  --dock-on-plate: var(--color-white);
}

.dock--light .dock__pill,
.dock--light .dock__toggle {
  background-color: rgba(4, 10, 10, 0.06);
}

.dock--light .dock__glow {
  background-color: rgba(4, 10, 10, 0.06);
}

.dock--light .dock__toggle:hover,
.dock--light .dock__toggle:focus-visible {
  background-color: rgba(4, 10, 10, 0.12);
}

/* ==========================================================================
   Адаптив
   ========================================================================== */

@media (max-width: 900px) {
  .dock--mobile {
    --dock-mobile-button-width: 88px;
    --dock-mobile-right: max(32px, calc(env(safe-area-inset-right) + 20px));
    --dock-mobile-bottom: max(24px, calc(env(safe-area-inset-bottom) + 16px));

    right: 0;
    left: 0;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    bottom: 0;
    justify-content: flex-end;
    padding: 0;
  }

  .dock--mobile .dock__nav {
    position: fixed;
    right: var(--dock-mobile-right);
    bottom: var(--dock-mobile-bottom);
    left: auto;
    display: flex;
    flex-direction: column;
    width: 520px;
    max-width: calc(100vw - var(--dock-mobile-right) - 18px);
    margin: 0;
    /* Нижняя зона принадлежит кнопке: панель растёт из той же капсулы,
       а не появляется отдельной карточкой над ней. */
    padding: 8px 8px 58px;
    border-radius: 999px;
    background: var(--color-white);
    color: var(--color-bg);
    box-shadow: 0 12px 32px rgba(4, 10, 10, 0.22);
    opacity: 0;
    pointer-events: none;
    /* Меню рождается из центра кнопки и растёт только вверх и влево. */
    transform-origin:
      calc(100% - (var(--dock-mobile-button-width) / 2))
      calc(100% - 22px);
    scale: 0.04;
    transition: opacity 220ms ease,
      scale 520ms cubic-bezier(0.2, 0.75, 0.2, 1),
      border-radius 380ms cubic-bezier(0.2, 0.75, 0.2, 1);
    will-change: scale, opacity;
  }

  .dock--mobile-open .dock__nav {
    border-radius: var(--radius-16);
    opacity: 1;
    pointer-events: auto;
    scale: 1;
  }

  .dock--mobile .dock__pill {
    display: flex;
    align-self: stretch;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 2px;
    padding: 0;
    overflow: visible;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
  }

  .dock--mobile .dock__link {
    min-width: 0;
    width: 100%;
    height: 54px;
    justify-content: flex-start;
    padding-inline: 12px;
    font-size: clamp(19px, 5.5vw, 26px);
    letter-spacing: -0.02em;
    text-align: left;
    opacity: 0;
    translate: 0 14px;
    transition: opacity 220ms ease,
      translate 360ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .dock--mobile .dock__cta {
    justify-content: center;
    width: 100%;
    height: 48px;
    margin-top: 8px;
    padding-inline: 16px;
    font-size: 16px;
    font-weight: 500;
    opacity: 0;
    translate: 0 14px;
    transition: opacity 220ms ease,
      translate 360ms cubic-bezier(0.16, 1, 0.3, 1),
      background-color 0.25s ease, color 0.25s ease;
  }

  .dock--mobile-open .dock__link,
  .dock--mobile-open .dock__cta {
    opacity: 1;
    translate: 0;
  }

  .dock--mobile-open .dock__link:nth-of-type(1) {
    transition-delay: 180ms;
  }

  .dock--mobile-open .dock__link:nth-of-type(2) {
    transition-delay: 250ms;
  }

  .dock--mobile-open .dock__link:nth-of-type(3) {
    transition-delay: 320ms;
  }

  .dock--mobile-open .dock__link:nth-of-type(4) {
    transition-delay: 390ms;
  }

  .dock--mobile-open .dock__cta {
    transition-delay: 460ms, 460ms, 0ms, 0ms;
  }

  .dock--mobile .dock__toggle {
    position: fixed;
    right: var(--dock-mobile-right);
    bottom: var(--dock-mobile-bottom);
    z-index: 2;
    display: flex;
    width: var(--dock-mobile-button-width);
    min-width: var(--dock-mobile-button-width);
    max-width: calc(100vw - 36px);
    height: 44px;
    align-items: center;
    justify-content: center;
    padding-inline: 18px;
    border-radius: 999px;
    background: var(--color-white);
    color: var(--color-bg);
    translate: none;
    transition: border-radius 300ms cubic-bezier(0.16, 1, 0.3, 1),
      background-color 180ms ease, color 180ms ease;
  }

  /* Общий hover увеличивает десктопную кнопку. На узком экране этот scale
     выталкивал правый и нижний край за safe-area, особенно после тапа. */
  .dock--mobile .dock__toggle:hover,
  .dock--mobile .dock__toggle:focus-visible {
    scale: 1;
  }

  .dock--mobile .dock__toggle:focus-visible {
    outline: 2px solid rgba(4, 10, 10, 0.62);
    outline-offset: 3px;
  }

  .dock--mobile-open .dock__toggle {
    border-radius: 999px;
    background: rgba(4, 10, 10, 0.06);
  }

  .dock--mobile .dock__toggle::before {
    content: "Меню";
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.015em;
  }

  .dock--mobile-open .dock__toggle::before {
    content: "Закрыть";
  }

  .dock--mobile .dock__dot {
    display: none;
  }
}

/* Пониженная подвижность убирает движение, а не отклик на курсор: смена
   цвета и проявление подсветки остаются, пропадают перелёт подсветки между
   разделами и увеличение кнопки. В Windows этот режим включается вместе с
   выключенными «Эффектами анимации», и многие даже не знают, что он у них
   включён. */
@media (prefers-reduced-motion: reduce) {
  .dock__toggle {
    transition: background-color 0.3s ease;
  }

  .dock__toggle:hover,
  .dock__toggle:focus-visible,
  .dock__toggle:active {
    scale: none;
  }

  .dock__glow {
    transition: opacity 0.2s ease;
  }
}