/* ===== Точки-индикаторы позиций трека (десктоп) ==========================
   Вертикальный ряд справа: сколько всего экранов и на каком мы сейчас.

   ЗАЧЕМ. Меню показывает пять ГРУПП, а колесо листает одиннадцать реальных
   позиций — по меню невозможно понять, сколько ещё крутить внутри группы.
   Точки закрывают именно это: они про количество экранов, а не про разделы.
   (Идея выросла из отвергнутой затеи со свободным скроллом: тот потребовал бы
   переписать всю анимационную механику, а тут — отдельный слой поверх.)

   ⚠️ Живёт СНАРУЖИ #stage/.stage-wrap, как .menubar: это фиксированный
   элемент реального экрана, а не часть design-канваса 1440×760 — иначе он
   масштабировался бы вместе с композицией и на широких окнах уезжал бы от
   края. Тот же приём, что у шапки и попапа «О компании».

   Ступенька z-index проекта: menubar/sidebar 100 → попапы регалий 120/130 →
   Lastpopup 150/200 → демо-панель 300/310. Точки стоят на 90 — ниже всего
   перечисленного: любой оверлей обязан их перекрывать, а не наоборот.
   ======================================================================== */
@media (min-width:1024px) and (orientation:landscape){

  .slide-dots{
    position:fixed; right:28px; top:calc(var(--header-h, 80px) + 50%);
    transform:translateY(-50%); z-index:90;
    display:flex; flex-direction:column; align-items:flex-end; gap:14px;
    margin:0; padding:0; list-style:none;
    /* Появляется не сразу, а по окончании интро первого экрана — чтобы не
       конкурировать с заголовком, пока тот всплывает. Класс .is-visible
       ставит js/slide-dots.js, там же и величина задержки с обоснованием.
       ⚠️ До 2026-08-08 ряд не появлялся на первом экране ВООБЩЕ (ждал
       первого перехода), и это читалось как поломка: вернувшись на первый
       экран с любого другого, человек видел точки, а после перезагрузки той
       же страницы — не видел. */
    opacity:0; pointer-events:none; transition:opacity 0.35s ease;
  }
  .slide-dots.is-visible{ opacity:1; pointer-events:auto; }
  /* Любой открытый оверлей гасит ряд целиком — он не должен просвечивать
     сквозь затемнение. */
  .slide-dots.is-hidden{ opacity:0 !important; pointer-events:none; }

  .slide-dots__item{ display:flex; align-items:center; justify-content:flex-end; }

  .slide-dots__btn{
    -webkit-appearance:none; appearance:none; border:none; background:none;
    padding:6px 0 6px 10px;      /* хит-зона больше самой точки */
    display:flex; align-items:center; gap:10px; cursor:pointer;
  }

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

     ⚠️ Подпись обязана быть НА ПЛАШКЕ, а не голым текстом: она выезжает
     поверх контента слайда (у «Как проходит внедрение» это длинная строка,
     которая ложится ровно на абзац) — без фона две строки текста наезжают
     друг на друга и не читаются обе. Плашка — та же пилюля, что у кнопок
     проекта, и перекрашивается вместе с точками на тёмном слайде. */
  .slide-dots__label{
    font-family:'Source Sans Pro',sans-serif; font-weight:600; font-size:12px;
    letter-spacing:0.4px; text-transform:uppercase; white-space:nowrap;
    padding:6px 12px; border-radius:14px;
    background:var(--ink); color:#fff;
    opacity:0; transform:translateX(6px);
    transition:opacity 0.18s ease, transform 0.18s ease;
    pointer-events:none;
  }
  .slide-dots__btn:hover .slide-dots__label,
  .slide-dots__btn:focus-visible .slide-dots__label{ opacity:1; transform:translateX(0); }

  /* Сама точка. Размер меняется у ВНУТРЕННЕГО кружка, а бокс остаётся 10×10 —
     иначе соседние точки прыгали бы при смене активной. */
  .slide-dots__dot{
    position:relative; display:block; width:10px; height:10px;
  }
  .slide-dots__dot::after{
    content:''; position:absolute; left:50%; top:50%;
    width:6px; height:6px; margin:-3px 0 0 -3px;
    border-radius:50%; background:var(--ink); opacity:0.32;
    transition:opacity 0.2s ease, width 0.2s ease, height 0.2s ease, margin 0.2s ease;
  }
  .slide-dots__btn:hover .slide-dots__dot::after{ opacity:0.6; }
  .slide-dots__item.is-active .slide-dots__dot::after{
    width:10px; height:10px; margin:-5px 0 0 -5px; opacity:1;
  }

  /* Тёмный слайд Cost: точки и подписи перекрашиваются в белый — ровно та же
     логика и тот же момент переключения, что у шапки (js/nav-menu.js
     setMenubarDark, завязка на ИНДЕКС слайда, а не на группу меню). */
  .slide-dots.is-dark .slide-dots__label{ background:#fff; color:var(--ink); }
  .slide-dots.is-dark .slide-dots__dot::after{ background:#fff; }
}

/* Мобильная раскладка и портрет: там своя лента со своим скроллом и своя
   шапка — ряд точек не нужен и мешал бы жестам у правого края. */
@media (max-width:1023px), (orientation:portrait){
  .slide-dots{ display:none; }
}