/* ============================================================
   Горизонтальный скроллер и точки навигации
   ============================================================ */

.scroller {
  position: relative;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  display: flex;
  z-index: 1;
}

.rail {
  display: flex;
  height: 100%;
  will-change: transform;
  transition: transform 0.55s var(--ease-out);
}

.screen {
  flex: 0 0 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.screen-inner {
  width: 100%;
  max-width: var(--design-w);
  height: 100%;
  margin: 0 auto;
  padding: var(--header-h) var(--pad-x) 40px;
  position: relative;
  display: flex;
  flex-direction: column;
  /* Две строки намеренно. Обычный center на коротких окнах
     (1280x720, 1366x768) выпихивал не влезающий в 100vh контент
     одинаково вверх и вниз — верхняя часть уезжала под фиксированную
     шапку. Ключевое слово safe отличается от center только в этом
     случае: контент прижимается к верхней границе и за шапку не
     заходит. Браузеры, которые safe не знают, вторую строку
     игнорируют и работают как раньше. */
  justify-content: center;
  justify-content: safe center;
}

/* Короткие десктопные окна (1280x720, 1366x768). Экраны рассчитаны на
   ~900px высоты; на 720–768 нижнего отступа в 40px это лишний запас,
   который стоит отдать контенту. Мобильная ветка (<=1024px) не
   затрагивается — там экраны идут в потоке. */
@media (min-width: 1025px) and (max-height: 820px) {
  .screen-inner { padding-bottom: 16px; }
}

/* Точки справа для перехода между экранами */
.dots {
  position: fixed;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 90;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(232, 237, 247, 0.2);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 0.3s var(--ease-out);
  position: relative;
}

.dot::after {
  content: attr(data-label);
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: var(--text-50);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.25s var(--ease);
  white-space: nowrap;
  font-weight: 500;
}

.dot:hover::after { opacity: 1; }

.dot.active {
  background: var(--accent);
  transform: scale(1.4);
  box-shadow: 0 0 12px rgba(77, 107, 255, 0.6);
}

/* ============================================================
   Мобильная раскладка — ниже этого же порога экраны внутри
   страницы уже складываются в одну колонку (см. @media(max-width:
   1024px) в стилях каждой страницы), поэтому здесь отключаем
   горизонтальный постраничный скролл и превращаем .rail в обычный
   вертикальный поток: экраны идут один под другим, а не уезжают
   за пределы 100vh. Взаимодействия (колесо/тач/стрелки), которые
   листали экраны, гасятся в nav.js через isMobileNav().
   ============================================================ */
/* Обёртка карточек нужна только мобильному скролл-треку: на десктопе
   она прозрачна для раскладки, и карточки остаются flex-детьми списка.
   Правило стоит выше media-запроса — иначе перебивало бы display: flex
   внутри него. */
.card-track-rows { display: contents; }

@media (max-width: 1024px) {
  /* html/body с height:100% на десктопе задают рамку, внутри которой
     скроллит сам .rail — на мобильном экраны идут в потоке документа,
     поэтому body должен расти по контенту, а не быть отдельным
     скролл-контейнером высотой в один экран. */
  body {
    height: auto;
    min-height: 100%;
  }
  /* overflow-x: hidden из base.css делает html и body скролл-
     контейнерами (при overflow-y: visible браузер считает пару как
     `hidden auto`). Внутри такого контейнера position: sticky
     бесполезен: он липнет к боксу, который сам не прокручивается —
     залипающая панель скролл-трека карточек просто уезжала вверх.
     overflow-x: clip обрезает так же, но контейнер не создаёт. */
  html, body {
    overflow-x: clip;
    overflow-y: visible;
  }
  .scroller {
    height: auto;
    width: 100%;
    overflow: visible;
    display: block;
  }
  .rail {
    display: block;
    height: auto;
    transition: none;
    transform: none !important;
  }
  .screen {
    flex: none;
    height: auto;
    overflow: visible;
  }
  /* Поля сняты с мобильных макетов: бейдж начинается на 62 от верха
     блока, контент кончается за 60 до низа. Прежние 24/40 сажали
     блоки вплотную друг к другу. */
  .screen-inner {
    height: auto;
    justify-content: flex-start;
    padding: clamp(36px, 16.5vw, 62px) var(--pad-x) clamp(36px, 16vw, 60px);
  }
  /* Только первый экран уходит под фиксированную шапку — остальные и
     так идут в обычном потоке ниже него. */
  .screen:first-child .screen-inner {
    padding-top: calc(var(--header-h) + clamp(24px, 6vw, 40px));
  }
  /* Прокрутка по якорю (кнопка ведёт на экран этой же страницы —
     см. nav.js): экраны идут вертикально, и без запаса верх блока
     уезжал ровно под фиксированную шапку. */
  .screen { scroll-margin-top: var(--header-h); }
  .dots { display: none; }

  /* ---------- Скролл-трек списков карточек ----------
     Классы вешает initCardScrollTrack (nav.js). Экран растягивается в
     трек: по одному «шагу» прокрутки на переход между карточками
     (--track-steps = число карточек минус одна). Внутри трека
     .screen-inner залипает, список превращается в окно с маской, а
     обёртка карточек едет по нему. */
  .screen.card-track {
    min-height: calc(100vh + var(--track-steps, 3) * 62vh);
  }
  .screen.card-track > .screen-inner {
    position: sticky;
    top: 0;
    min-height: 100vh;
    justify-content: center;
    padding-top: var(--header-h);
  }
  /* Селекторы намеренно «через .screen.card-track»: стили страниц
     подключаются после nav.css, и у списков там свой flex: 1 с той же
     специфичностью. Без утяжеления flex-basis: 0% перебивал height, и
     окно схлопывалось в ноль. */
  .screen.card-track .card-track-vp {
    position: relative;
    flex: none;
    height: clamp(260px, 42vh, 400px);
    overflow: hidden;
    /* Края окна растворяются — карточки не обрубаются рамкой, а
       выплывают и уплывают (маска из референса). */
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
  }
  .screen.card-track .card-track-rows {
    display: flex;
    flex-direction: column;
    gap: inherit;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    will-change: transform;
  }
}

/* ============================================================
   КАРУСЕЛЬ КАРТОЧЕК (initCardCarousel в nav.js)

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

   Правила мобильные: на десктопе у каждого блока раскладка своя
   (веер на экране 3, ряд на контактах), и трогать её нельзя.
   ============================================================ */
@media (max-width: 1024px) {
  .card-carousel {
    position: relative;
    overflow: hidden;
    /* Горизонталь наша, вертикаль отдаём странице. Без этого браузер
       на живом телефоне придерживает первые кадры жеста, пока сам не
       решит, куда его отнести, и лента трогается с задержкой. */
    touch-action: pan-y;
  }
  .card-carousel .card-carousel-item {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    transition: transform 0.4s var(--ease-out), opacity 0.3s var(--ease);
  }
  /* Пока ведут пальцем, положение задаёт каждый кадр JS — переход тут
     только догонял бы уже устаревшее значение. */
  .card-carousel.dragging .card-carousel-item { transition: none; }
}