/* -----------------------------------------------------------------------------
   custom.css — доработки поверх базовой таблицы стилей (base.css).
   Подключается последним, поэтому перекрывает базовые стили.
   -------------------------------------------------------------------------- */

/* Контейнер под картинку внутри брендового бокса (секция преимуществ).
   Занимает свободное место между логотипом и текстом.
   4 картинки лежат в одной grid-ячейке и переключаются вместе с текстом. */
.benefits-box-media {
  display: grid;
  flex: 1 1 auto;
  min-height: 0;                 /* чтобы не распирало флекс-контейнер */
  align-items: center;
  padding-right: var(--_responsive-sizes---spacing--s);
  padding-top: var(--_responsive-sizes---spacing--s);
  padding-bottom: var(--_responsive-sizes---spacing--s);
  position: relative;
}

.benefits-box-media-item {
  grid-area: 1 / 1;              /* все 4 — в одной ячейке, стопкой */
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: var(--_responsive-sizes---spacing--radius);
  overflow: hidden;
  background-color: #0a0a0a;
  opacity: 0;
  transform: scale(0.98);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  will-change: opacity, transform;
}

.benefits-box-media-item.is-active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.benefits-box-media-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* тонкая рамка-обводка в стиле сайта */
.benefits-box-media-frame {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--_responsive-sizes---spacing--radius);
  pointer-events: none;
}

/* На мобилке правый sticky-блок не используется (там свой слайдер),
   но на всякий случай ограничим высоту картинки. */
@media screen and (max-width: 991px) {
  .benefits-box-media {
    padding-right: 0;
  }
  .benefits-box-media-item {
    aspect-ratio: 16 / 10;
    height: auto;
  }
}

/* -----------------------------------------------------------------------------
   Кнопка музыки (на месте бывшей «Врата Титанов»).
   Стиль полностью наследуется от .icon-button — ничего не переопределяем,
   кроме сетки для десктопного варианта и скрытия неактивного состояния.
   -------------------------------------------------------------------------- */

/* дубль десктопной кнопки не имеет #w-node-… id, поэтому повторяем его сетку */
.music-toggle.is-desktop {
  grid-area: 1 / 3 / 2 / 4;
  place-self: center end;
}

/* прячем неактивное состояние (вкл/выкл), не ломая медиазапросы */
.icon-button.music-toggle.is-music-hidden {
  display: none !important;
}

.music-toggle {
  cursor: pointer;
}

/* -----------------------------------------------------------------------------
   Названия видов спорта в бегущей дорожке (вместо логотипов).
   Шрифт сайта (Inter), капс, разрядка. Размер тянется за карточкой:
   карточка 17vw/34vw/50vw -> текст масштабируется медиазапросами.
   -------------------------------------------------------------------------- */
.sport-name {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 8%;
  box-sizing: border-box;

  font-family: var(--font--body-family);   /* Inter — как заголовки сайта */
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--colour--light);
  text-align: center;
  line-height: 1.15;
  text-wrap: balance;                      /* аккуратный перенос длинных названий */

  font-size: clamp(0.7rem, 1.15vw, 1.35rem);
  -webkit-user-select: none;
  user-select: none;
}

@media screen and (max-width: 991px) {
  .sport-name { font-size: clamp(0.9rem, 2.1vw, 1.6rem); }
}

@media screen and (max-width: 767px) {
  .sport-name { font-size: clamp(1rem, 3vw, 1.8rem); }
}


/* -----------------------------------------------------------------------------
   Текстовый логотип «ОРВАНТ» (вместо векторных знаков исходного шаблона).
   Классы оригинала сохранены, поэтому цвет/анимации/сетка работают как были;
   здесь задаём только типографику и размер под каждый контекст.
   -------------------------------------------------------------------------- */
.wordmark {
  font-family: var(--font--body-family);   /* Inter — шрифт сайта */
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}

/* шапка */
.main-logo.wordmark {
  width: auto;
  font-size: 1.4rem;
  letter-spacing: 0.22em;
  padding-left: 0.22em;          /* компенсируем разрядку последней буквы */
}

/* логотип в подвале (тёмный на белом) */
.main-logo.is-footer.wordmark {
  font-size: 1.2rem;
  letter-spacing: 0.2em;
}


/* знак в боксе продукта */
.benefits-box-logo.wordmark {
  width: auto;
  font-size: 1.15vw;
  letter-spacing: 0.24em;
}
.benefits-box-logo.is-mobile.wordmark {
  font-size: 3.4vw;
  letter-spacing: 0.22em;
}


@media screen and (max-width: 991px) {
  .main-logo.wordmark { font-size: 2.6vw; }
  .benefits-box-logo.wordmark { font-size: 2.2vw; }
}
@media screen and (max-width: 767px) {
  .main-logo.wordmark { font-size: 4vw; }
}

/* Логотип лежит внутри <a> — убираем браузерное подчёркивание и синий цвет.
   (text-decoration предка нельзя отменить у потомка, поэтому:
    1) снимаем его на самой ссылке,
    2) делаем логотип inline-block — на атомарный inline подчёркивание не наносится.) */
a:has(> .wordmark),
a:has(.wordmark) {
  text-decoration: none;
  color: inherit;
}
.wordmark {
  display: inline-block;
  text-decoration: none;
}

/* -----------------------------------------------------------------------------
   Простой чёрный подвал вместо белого во весь экран.
   Перебиваем правила базовой таблицы (белый фон, min-height:100vh, крупные отступы).
   -------------------------------------------------------------------------- */
.footer-section.is-simple {
  background-color: var(--colour--black);
  min-height: 0;
  padding: var(--_responsive-sizes---spacing--m) var(--_responsive-sizes---spacing--s);
  overflow: visible;
}

.footer-simple {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.footer-simple__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2.5rem;
  flex-wrap: wrap;
}

.footer-simple__line {
  width: 100%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.12);
}

/* логотип на чёрном — белый */
.footer-simple .main-logo.is-footer.wordmark {
  color: var(--colour--light);
  font-size: 1.2rem;
  letter-spacing: 0.2em;
}

/* ссылка разработчика: на чёрном базовый чёрный цвет не читается */
.footer-simple .sf-link {
  color: #7a7a7a;
  text-decoration: none;
}

@media screen and (max-width: 767px) {
  .footer-simple__row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* -----------------------------------------------------------------------------
   Цифры в одинаковых прямоугольниках вместо кругов.
   Круги НЕ удаляем из DOM (их держит и анимирует app.js) — просто прячем,
   иначе бандл потеряет свои цели анимации.
   -------------------------------------------------------------------------- */
.stat-number-circle,
.stat-number-circle-fg,
.stat-number-circle-bg {
  display: none !important;
}

/* сама рамка */
.stat-number-wrap {
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: 34rem;              /* одинаковый размер слева и справа */
  height: auto;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--_responsive-sizes---spacing--radius);
  place-items: center;
  padding: 0 1.5rem;
  box-sizing: border-box;
}

/* цифра по центру рамки */
.stat-number {
  font-size: clamp(2.5rem, 8vw, 7rem);
  letter-spacing: -0.03em;
  margin-left: 0;
  place-self: center;
}

/* декоративный микро-текст мешал бы внутри рамки */
.stat-number-micro-text {
  display: none;
}

@media screen and (max-width: 991px) {
  .stat-number-wrap { max-width: 30rem; }
  .stat-number { font-size: clamp(2.5rem, 12vw, 6rem); }
}

/* Микро-графика: декоративные надписи-коды в стиле техпаспорта */
.graphic-text {
  width: 9rem;
  white-space: nowrap;
  line-height: 1.6;
}

/* микро-маркер вместо векторного «TG EQ 0025» */
.graphic-text.is-3 {
  width: 5rem;
}

/* -----------------------------------------------------------------------------
   ПРЕЛОАДЕР — только слово «ОРВАНТ» по центру
   -------------------------------------------------------------------------- */

/* app.js текстом лоадера больше не управляет (сняли data-loader-item),
   в базе у .loader-span было opacity:0 — показываем сами */
.loader-span {
  opacity: 1;
}

/* в базе .loader-inner — грид на 12 колонок; нам нужен просто центр */
.loader-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  grid-template-columns: none;
  padding: 0 2rem;
}

.loader-brand .loader-span {
  font-family: var(--font--mono-typography);
  font-size: 2.1rem;
  letter-spacing: 0.3em;
  padding-left: 0.3em;        /* компенсируем разрядку последней буквы */
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  color: #ffffff;
}

/* мерцание как у микро-текстов, но финал белый — прелоадер должен читаться */
@keyframes loader-char-flicker {
  0%   { color: #ffffff; opacity: 0.35; }
  30%  { color: #8898e7; opacity: 1; }
  45%  { color: #ffffff; opacity: 0.35; }
  100% { color: #ffffff; opacity: 1; }
}
.loader-char {
  display: inline-block;
  animation: loader-char-flicker 1.2s linear infinite;
  will-change: color, opacity;
}

/* плавный уход вместо резкого */
.loader {
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

/* держим прелоадер, пока не готово видео первого экрана */
html.media-pending .loader {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

@media screen and (max-width: 767px) {
  .loader-brand .loader-span { font-size: 1.4rem; letter-spacing: 0.24em; }
}

@media (prefers-reduced-motion: reduce) {
  .loader-char { animation: none; color: #fff; opacity: 1; }
}

/* -----------------------------------------------------------------------------
   Убираем браузерный скролл-бар (скролл при этом работает как обычно:
   колесо, тачпад, клавиши, тач). Lenis крутит страницу сам.
   -------------------------------------------------------------------------- */
html {
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* старый Edge/IE */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {         /* Chrome / Safari */
  width: 0;
  height: 0;
  display: none;
}
body {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* -----------------------------------------------------------------------------
   ПОПАП: условия пользования / политика конфиденциальности
   Стиль сайта: чёрное окно, тонкая обводка, стеклянная подложка,
   моно-надзаголовок, Inter в заголовке, кнопка как .icon-button.
   -------------------------------------------------------------------------- */
.tg-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* visibility НЕ «едет» вместе с fade: на закрытии ждёт конца анимации (0.4s),
     на открытии включается мгновенно. Иначе элемент остаётся hidden всё время
     перехода — и focus() по нему не срабатывает. */
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
.tg-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.4s ease, visibility 0s linear 0s;
}

.tg-modal__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.tg-modal__box {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 34rem;
  padding: 2.25rem;
  background-color: var(--colour--black);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--_responsive-sizes---spacing--radius);
  transform: translateY(12px) scale(0.98);
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  max-height: 85vh;
  overflow-y: auto;
}
.tg-modal.is-open .tg-modal__box {
  transform: translateY(0) scale(1);
}

.tg-modal__eyebrow {
  color: #6a6a6a;
  margin-bottom: 0.75rem;
}

.tg-modal__title {
  font-family: var(--font--body-family);
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--colour--light);
  margin: 0 0 1.25rem;
}

.tg-modal__text p {
  font-family: var(--font--body-family);
  font-size: 0.95rem;
  line-height: 1.5;
  color: #8a8a8a;
  margin: 0 0 1rem;
}
.tg-modal__text p:last-child { margin-bottom: 0; }

.tg-modal__btn {
  margin-top: 1.75rem;
  border: 0;
  cursor: pointer;
  font: inherit;
}

/* пока попап открыт — фон не скроллится */
html.modal-open,
html.modal-open body {
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  .tg-modal__box { padding: 1.5rem; }
  .tg-modal__title { font-size: 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tg-modal, .tg-modal__box { transition: none; }
}

/* Подвал: слева ©/права, справа ссылки на попап */
.footer-legal-group {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}
/* Кнопка вместо ссылки (чтобы не было прыжка наверх от href="#").
   Сбрасываем только «кнопочные» стили браузера — шрифт, капс, разрядку
   и цвет задаёт класс .subheading.is-legal, поэтому inherit тут нельзя:
   он бы наследовал от родителя и затирал класс. */
.footer-legal-btn {
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  line-height: inherit;
}
.footer-legal-btn:hover { color: var(--colour--light); }

@media screen and (max-width: 767px) {
  .footer-legal-group { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
}

/* Слово-переключатель («пересобираем / перепроверяем / переписываем»).
   Сплошной серый, без полупрозрачных кадров.

   Как было: app.js прятал неактивные слова ТОЛЬКО прозрачностью (opacity 0..1).
   На середине перехода слово висело на ~50% — читалось как градиент, плюс
   сверху просвечивал призрак уходящего слова.

   Как стало: строку маскируем (overflow:hidden по высоте 1 строки), а
   прозрачность фиксируем на 1 через !important — inline-стиль GSAP её не перебьёт.
   Слово теперь просто выезжает вверх и скрывается за краем маски. */
.swap-list {
  /* Высоту отдаём содержимому: маска станет ровно по слову (35px), а не по
     line-height:1 (32px) — иначе резало хвосты «р»/«у». */
  height: auto;

  /* Режем ТОЛЬКО по вертикали. overflow:hidden тут нельзя: сам .swap-list
     шириной ~1px (слова всегда торчали за него), и overflow срезал бы их
     по горизонтали. clip-path с отрицательными боками не трогает ширину. */
  clip-path: inset(0 -100vw);
}
.swap-list-item {
  color: #898989;
  -webkit-text-fill-color: #898989;
  opacity: 1 !important;
}

/* -----------------------------------------------------------------------------
   Видео: без серой вспышки при быстром F5 / возврате на вкладку.
   1) у каждого <video> есть poster (первый кадр) — его отдаёт браузер,
      пока видео не декодировало первый кадр;
   2) фон под видео чёрный: даже если постер ещё не скачался,
      мигнёт чёрным (фон сайта), а не серым.
   -------------------------------------------------------------------------- */
/* Чёрный фон — ТОЛЬКО у самого <video> (он рисуется ПОД кадрами и виден
   лишь пока кадра нет). Обёртке .w-background-video фон давать НЕЛЬЗЯ:
   у видео внутри неё z-index:-100, и фон обёртки закрашивает его целиком —
   именно из-за этого видео «пропали». */
video {
  background-color: #000;
}

/* -----------------------------------------------------------------------------
   Картинка продукта в мобильном слайдере преимуществ.
   На десктопе она живёт в боксе ОРВАНТ (.benefits-box-media); мобильный
   слайдер — отдельная разметка, поэтому картинка добавлена и туда.
   Встаёт в пустоту между логотипом и текстом (.slider-inner: space-between).
   -------------------------------------------------------------------------- */
.benefits-mobile-media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--_responsive-sizes---spacing--radius);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background-color: #0a0a0a;
  margin: 1.1rem 0;
}

/* Цифры шагов (01–04) в секции «От сырья до…» — белые вместо тёмно-серых.
   !important — чтобы гарантированно перебить базовое правило при любом кэше. */
.step-number {
  color: var(--colour--light) !important;
}

/* -----------------------------------------------------------------------------
   Цифры шагов на мобильном/планшете (<992px) — показываем ЦЕЛИКОМ.
   Reveal-анимация с обрезкой в бандле работает только при ≥992px; ниже цифры
   статичны, и обрезающая маска смотрелась как ошибка вёрстки. Снимаем клип
   и уменьшаем кегль, чтобы полная цифра выглядела аккуратно.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
  .number-mask {
    height: auto;
    overflow: visible;
  }
  .step-number {
    font-size: 15vw;
  }
}

@media screen and (max-width: 479px) {
  .step-number {
    font-size: 20vw;
  }
}

/* -----------------------------------------------------------------------------
   Мобильные товары (< 992px): прокрутка по товарам как на десктопе.
   Управляет js/products-mobile.js. Слайдер бандла здесь отключён.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
  /* Фолбэк без JS: товары простым вертикальным списком — всё читается. */
  .benefits-mobile .centered-slider-list { flex-direction: column; width: 100%; }
  .benefits-mobile .centered-slider-slide { width: 100%; }
  .benefits-mobile .centered-slider-row { overflow: visible; }
  .benefits-mobile .centered-slider-buttons { display: none; }

  /* Режим прокрутки (JS добавил .is-pinned): товар «прибит», едем по горизонтали. */
  /* КРИТИЧНО: у секции overflow:hidden ломает sticky (она сама становится
     контейнером прокрутки). Возвращаем visible — горизонтальную обрезку
     делает .centered-slider-row ниже. */
  .benefits-mobile.is-pinned {
    position: relative;
    overflow: visible;
  }

  .benefits-mobile.is-pinned .centered-slider-group {
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 34rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
  }

  .benefits-mobile.is-pinned .centered-slider-row {
    overflow: hidden;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
  }

  .benefits-mobile.is-pinned .centered-slider-list {
    flex-direction: row;
    width: auto;
    will-change: transform;
  }

  .benefits-mobile.is-pinned .centered-slider-slide {
    width: 100vw;
    flex: 0 0 100vw;
  }

  /* В режиме прокрутки стрелки не нужны — листание идёт скроллом.
     Убрать их даёт карточке товара уместиться в экран целиком. */
  .benefits-mobile.is-pinned .centered-slider-buttons {
    display: none;
  }

  /* Карточка товара должна влезать в «прибитый» экран (100vh):
     поджимаем картинку и внутренние отступы. */
  .benefits-mobile.is-pinned .slider-inner {
    min-height: 0;
    padding-top: 5%;
    padding-bottom: 5%;
  }
  /* базовый кегль подзаголовка (10vw) слишком крупный — длинный текст режется */
  .benefits-mobile.is-pinned .slider-title {
    font-size: 6.5vw;
  }

  /* --- ВЫРАВНИВАНИЕ товаров при листании ---
     Контент разной длины -> центрирование давало «прыжки» по вертикали.
     Прижимаем к верху и фиксируем высоту одинаковых элементов, чтобы у всех
     товаров заголовок, картинка и текст стояли на одном уровне. */
  .benefits-mobile.is-pinned .centered-slider-slide {
    grid-row-gap: 10px;
    justify-content: flex-start;   /* было center — теперь верх у всех общий */
    padding-top: 4vh;
  }
  .benefits-mobile.is-pinned .carousel-heading {
    height: auto !important;
    min-height: 6rem;              /* заголовки в 2–3 строки -> одинаковая высота */
  }
  .benefits-mobile.is-pinned .benefits-mobile-media {
    height: 22vh;                  /* фикс. высота вместо max -> картинки на одном уровне */
    max-height: none;
    aspect-ratio: auto;
  }
  /* текст «Орвант» разной длины -> одинаковая высота, блок «Массмаркет» выравнивается.
     :not(.gradient-text) отсекает нижний текст «Массмаркет». */
  .benefits-mobile.is-pinned .body-large.is-card:not(.gradient-text) {
    min-height: 8.75rem;   /* по самому длинному тексту (Креатин, ~140px) */
  }
}

/* -----------------------------------------------------------------------------
   Демо-режим: отключаем перетаскивание картинок/видео/ссылок
   (убирает «призрачный» драг при зажатии мышью).
   -------------------------------------------------------------------------- */
img, video, svg, a, [data-button] {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  user-select: none;
}