/* Промостраница с роликом по прокрутке (templates/promo_bl002.html).
   Отдельный файл, а не styles.css: подключается только на промо, и ни одна
   строка здесь не может задеть витрину. Все классы — с приставкой reel-:
   .promo на сайте уже занят плиткой акции в каталоге. */

/* цвета сняты с ролика: чернота студии, жёлтый акцент ракетки (#e7e95a —
   линии на плоскости и горло), неон на полу чуть светлее */
:root {
  --reel-bg: #060606;
  --reel-card: #121212;
  --reel-ink: #f3f3ee;
  --reel-mute: rgba(243, 243, 238, .68);
  --reel-dim: rgba(243, 243, 238, .42);
  --reel-line: rgba(243, 243, 238, .14);
  --reel-acc: #e7e95a;
  --reel-acc-hi: #f2f37e;
}

/* липкая шапка над тёмной сценой: её светлый «хвост» ложился бы на ролик */
body:has([data-reel]) .header::after { display: none; }

/* ---------- ролик ---------- */
.reel {
  /* сцена встаёт под шапку (её высоту считает reel.js) и занимает остаток экрана */
  --reel-h: calc(100vh - var(--head-h, 86px) - var(--gap));
  position: relative;
  height: calc(var(--reel-h) * 8);
  margin-bottom: var(--gap);
}
.reel-stage {
  position: sticky;
  top: var(--head-h, 86px);
  height: var(--reel-h);
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--r-tile);
  color: var(--reel-ink);
  /* первый кадр — сразу фоном, пока грузятся остальные (и без скриптов) */
  background: var(--reel-bg) var(--reel-l0) center 30% / cover no-repeat;
}
.reel-film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity .3s ease;
}
.reel-film.is-on { opacity: 1; }

.reel-load, .reel-progress {
  position: absolute;
  left: 24px;
  right: 24px;
  z-index: 4;
  height: 2px;
  border-radius: 2px;
  overflow: hidden;
  background: var(--reel-line);
  pointer-events: none;
}
.reel-load { top: 14px; transition: opacity .6s ease; }
.reel-progress { bottom: 18px; }
.reel.is-loaded .reel-load { opacity: 0; }
.reel-load i, .reel-progress i {
  display: block;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--reel-acc);
}
.reel-load i { transition: transform .2s linear; }

/* тексты поверх ролика: у каждого свои секунды, выходят и уходят по прокрутке */
.reel-beat {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  /* текст держим над неоновой полосой (она на 72 % высоты кадра): на ней
     строки не читаются */
  padding: clamp(24px, 3vw, 48px) clamp(28px, 4.6vw, 72px) calc(var(--reel-h) * .3);
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}
.reel-beat[data-side="r"] { justify-content: flex-end; }
.reel-beat.is-on { pointer-events: auto; }
/* затемнение со стороны текста: у краёв кадра светится дым от ламп */
.reel-beat::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(6, 6, 6, .72), rgba(6, 6, 6, .38) 34%, rgba(6, 6, 6, 0) 52%);
}
.reel-beat[data-side="r"]::before {
  background: linear-gradient(270deg, rgba(6, 6, 6, .72), rgba(6, 6, 6, .38) 34%, rgba(6, 6, 6, 0) 52%);
}
.reel-panel { position: relative; width: min(420px, 34%); will-change: transform; }
/* справа ракетка крупнее и ближе к середине (светлая плоскость на 11-й
   секунде доходит до 60 % ширины) — колонка уже */
.reel-beat[data-side="r"] .reel-panel { width: min(380px, 30%); }
.reel-beat--hero .reel-panel { width: min(500px, 36%); }

.reel-eyebrow {
  display: block;
  margin-bottom: 18px;
  font: 500 11px/1.35 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--reel-acc);
}
.reel-title {
  /* ракетка на первом кадре посередине: название заканчивается до неё */
  font-size: clamp(64px, 8.2vw, 124px);
  line-height: .84;
  letter-spacing: -.05em;
  font-weight: 800;
}
.reel-title em { font-style: normal; color: var(--reel-acc); }
.reel-sub {
  margin: 20px 0 0;
  font: 500 12px/1.3 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--reel-mute);
}
.reel-hint {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 44px;
  font: 500 11px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--reel-dim);
}
.reel-hint b { position: relative; width: 1px; height: 40px; overflow: hidden; background: var(--reel-line); }
.reel-hint b::after {
  content: "";
  position: absolute;
  left: 0;
  top: -100%;
  width: 100%;
  height: 100%;
  background: var(--reel-acc);
  animation: reel-drop 1.8s cubic-bezier(.6, 0, .4, 1) infinite;
}
@keyframes reel-drop { 0% { top: -100%; } 60%, 100% { top: 100%; } }

.reel-beat h2 {
  margin: 0 0 14px;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.02;
  letter-spacing: -.03em;
}
.reel-beat p {
  margin: 0;
  max-width: 38ch;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--reel-mute);
}
.reel-stat {
  display: block;
  margin-bottom: 16px;
  font: 800 clamp(56px, 6.2vw, 96px)/.88 var(--sans);
  letter-spacing: -.045em;
  color: var(--reel-acc);
  white-space: nowrap;
}
.reel-stat small, .reel-nums small, .reel-specs-nums small {
  margin-left: .12em;
  font-size: .38em;
  font-weight: 600;
  letter-spacing: 0;
}

/* последняя сцена: ракетка стоит посередине — покупка слева, цифры справа
   (в разметке цифры первые, row-reverse ставит их направо) */
.reel-beat--final::before {
  background: linear-gradient(90deg, rgba(6, 6, 6, .72), rgba(6, 6, 6, .3) 30%, rgba(6, 6, 6, 0) 42%,
                              rgba(6, 6, 6, 0) 58%, rgba(6, 6, 6, .3) 70%, rgba(6, 6, 6, .72));
}
.reel-split {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  will-change: transform;
}
.reel-beat--final .reel-panel { width: min(430px, 33%); }
.reel-beat--final .reel-nums {
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(18px, 2.6vw, 32px);
  width: auto;
  margin: 0;
  text-align: right;
}
.reel-beat--final .reel-nums dd { font-size: clamp(44px, 4.8vw, 76px); }
.reel-buyline h2 { margin-bottom: 20px; }
.reel-nums { display: flex; gap: clamp(18px, 2.4vw, 36px); margin: 0 0 26px; }
.reel-nums dt {
  margin-bottom: 10px;
  font: 500 10.5px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--reel-dim);
}
.reel-nums dd { margin: 0; font: 800 clamp(36px, 3.8vw, 58px)/.9 var(--sans); letter-spacing: -.045em; white-space: nowrap; }
.reel-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 22px; }
.reel-price b { font: 800 30px/1 var(--sans); letter-spacing: -.02em; }
.reel-price span {
  font: 500 11px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--reel-acc);
}
.reel-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.reel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 24px;
  border-radius: 100px;
  font: 600 13.5px/1 var(--sans);
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease;
}
.reel-btn--acc { background: var(--reel-acc); color: #111; }
.reel-btn--acc:hover { background: var(--reel-acc-hi); }
.reel-btn--ghost { border: 1px solid rgba(243, 243, 238, .34); color: var(--reel-ink); }
.reel-btn--ghost:hover { border-color: rgba(243, 243, 238, .8); }

/* ---------- характеристики: тот же тёмный тон, что у ролика ---------- */
.reel-specs {
  display: grid;
  gap: 34px;
  padding: clamp(24px, 3.4vw, 48px);
  background: var(--reel-bg);
  color: var(--reel-ink);
}
.reel-specs-head .reel-eyebrow { margin-bottom: 12px; }
.reel-specs h2 { font-size: clamp(30px, 3.4vw, 48px); line-height: 1; }
.reel-specs-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; }
.reel-specs-nums div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  min-height: 160px;
  padding: 22px;
  border-radius: 20px;
  background: var(--reel-card);
}
.reel-specs-nums dd { margin: 0; font: 800 clamp(44px, 4.6vw, 70px)/.9 var(--sans); letter-spacing: -.045em; color: var(--reel-acc); }
.reel-specs-nums dt { font: 400 12px/1.4 var(--mono); color: var(--reel-mute); }
.reel-techs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 22px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.reel-techs li {
  padding-top: 16px;
  border-top: 1px solid var(--reel-line);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--reel-mute);
}
.reel-techs b { display: block; margin-bottom: 8px; font: 700 15px/1.2 var(--sans); color: var(--reel-ink); }
.reel-source { margin: 0; font: 400 11px/1.4 var(--mono); color: var(--reel-dim); }

/* ---------- ракетка в магазине ---------- */
.reel-buy {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(20px, 3.4vw, 56px);
  align-items: center;
}
.reel-buy-ph { display: block; }
.reel-buy h2 { margin: 14px 0 20px; font-size: clamp(28px, 3vw, 42px); line-height: 1.02; }
.reel-buy-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 22px; }
.reel-buy-price b { font: 800 34px/1 var(--sans); letter-spacing: -.02em; }
.reel-buy-price span { font: 400 11.5px/1.3 var(--mono); }
.reel-buy-price .is-order { color: var(--orange); }
.reel-buy-price .is-stock { color: var(--green); }
.reel-buy-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.reel-buy-colours { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line-2); }

/* ---------- остальные ракетки марки ---------- */
.reel-more-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 6px 2px;
  scroll-margin-top: calc(var(--head-h, 86px) + 8px);
}
.reel-more-head h2 { font-size: clamp(26px, 2.6vw, 36px); line-height: 1; }

@media (max-width: 1080px) {
  .reel-techs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- узкая сцена: телефон и планшет стоя ----------
   Ракетка в кадре посередине, и сбоку от неё места для текста нет: текст —
   стеклянной панелью внизу, кадр держит ракетку по центру (reel.js) */
@media (max-width: 760px), (max-aspect-ratio: 1/1) {
  .reel-beat, .reel-beat[data-side="r"] { align-items: flex-end; justify-content: stretch; padding: 10px; }
  .reel-beat::before, .reel-beat[data-side="r"]::before { background: none; }
  .reel-panel, .reel-beat[data-side="r"] .reel-panel, .reel-beat--hero .reel-panel, .reel-split {
    width: 100%;
    padding: 18px 18px 20px;
    border-radius: 18px;
    background: rgba(10, 10, 10, .8);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    backdrop-filter: blur(16px) saturate(1.2);
    box-shadow: inset 0 0 0 1px rgba(243, 243, 238, .08);
  }
  /* финал — одна панель: цифры строкой, под ними цена и кнопки */
  .reel-beat--final::before { background: none; }
  .reel-split { flex-direction: column; align-items: stretch; }
  .reel-split .reel-panel, .reel-beat--final .reel-panel {
    width: auto; padding: 0; border-radius: 0; background: none; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .reel-beat--final .reel-nums { flex-direction: row; align-items: flex-start; gap: 22px; margin-bottom: 14px; text-align: left; }
  .reel-beat--final .reel-nums dd { font-size: 34px; }
  .reel-beat--final .reel-eyebrow, .reel-buyline h2 { display: none; }
  /* первый экран — только название, на затемнении снизу */
  .reel-beat--hero .reel-panel { padding: 0 10px 18px; background: none; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none; }
  .reel-beat--hero::before {
    top: 45%;
    background: linear-gradient(180deg, rgba(6, 6, 6, 0), rgba(6, 6, 6, .88) 70%);
  }
  .reel-title { font-size: clamp(64px, 21vw, 96px); }
  .reel-sub { margin-top: 14px; }
  .reel-hint { margin-top: 22px; }
  .reel-hint b { height: 28px; }
  .reel-eyebrow { margin-bottom: 10px; font-size: 10px; }
  .reel-beat h2 { margin-bottom: 8px; font-size: 22px; line-height: 1.1; }
  .reel-beat p { font-size: 14.5px; line-height: 1.5; max-width: none; }
  .reel-stat { margin-bottom: 8px; font-size: 44px; }
  .reel-nums { gap: 22px; margin-bottom: 16px; }
  .reel-nums dt { margin-bottom: 7px; font-size: 9.5px; }
  .reel-nums dd { font-size: 34px; }
  .reel-price { margin-bottom: 16px; }
  .reel-price b { font-size: 24px; }
  .reel-cta .reel-btn { flex: 1 1 0; padding: 14px 12px; font-size: 13px; }
}
/* на планшете панель не во всю ширину: строка в 700 px читается плохо */
@media (min-width: 761px) and (max-aspect-ratio: 1/1) {
  .reel-beat, .reel-beat[data-side="r"] { justify-content: center; padding: 18px; }
  .reel-panel, .reel-beat[data-side="r"] .reel-panel,
  .reel-beat--hero .reel-panel, .reel-split { width: min(560px, 100%); }
  .reel-beat--hero { justify-content: flex-start; }
}

/* ---------- телефон ---------- */
@media (max-width: 760px) {
  /* сцена между шапкой и нижним меню; svh — высота при развёрнутой адресной
     строке: сцена не меняет размер, когда строка прячется, и кадр не прыгает */
  .reel {
    --reel-h: calc(100vh - var(--head-h, 68px) - var(--tabbar-h, 60px) - var(--gap));
    height: calc(var(--reel-h) * 7.5);
  }
  @supports (height: 100svh) {
    .reel { --reel-h: calc(100svh - var(--head-h, 68px) - var(--tabbar-h, 60px) - var(--gap)); }
  }
  .reel-stage { top: var(--head-h, 68px); background-image: var(--reel-p0); background-position: center; }
  .reel-load { top: 10px; left: 18px; right: 18px; }
  .reel-progress { top: 10px; bottom: auto; left: 18px; right: 18px; }

  .reel-specs { gap: 24px; }
  .reel-specs-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .reel-specs-nums div { min-height: 120px; padding: 18px; border-radius: 18px; }
  .reel-specs-nums dd { font-size: 44px; }
  .reel-techs { grid-template-columns: minmax(0, 1fr); gap: 16px; }

  .reel-buy { grid-template-columns: minmax(0, 1fr); }
  .reel-buy h2 { margin: 10px 0 14px; }
  .reel-buy-price b { font-size: 28px; }
  .reel-buy-actions .btn { flex: 1 1 100%; }

  .reel-more-head { flex-direction: column; align-items: stretch; padding: 14px 4px 0; }
  .reel-more-head .btn { width: 100%; }
}

/* ---------- низкий широкий экран: телефон лёжа ----------
   Сцена ниже 300 px: абзацы и подсказку убираем, остаются заголовок и цифры */
@media (max-height: 500px) and (min-aspect-ratio: 1/1) and (min-width: 761px) {
  .reel-beat { padding: 16px 32px; }
  .reel-beat p, .reel-hint, .reel-sub { display: none; }
  .reel-eyebrow { margin-bottom: 8px; }
  .reel-title { font-size: clamp(48px, 9vh, 72px); }
  .reel-stat { margin-bottom: 6px; font-size: 40px; }
  .reel-beat h2 { margin: 0; font-size: 22px; line-height: 1.1; }
  .reel-nums { margin-bottom: 10px; }
  .reel-nums dt { margin-bottom: 5px; }
  .reel-nums dd, .reel-beat--final .reel-nums dd { font-size: 30px; }
  .reel-beat--final .reel-nums { gap: 10px; }
  .reel-price { margin-bottom: 10px; }
  .reel-price b { font-size: 20px; }
  .reel-btn { padding: 11px 16px; font-size: 12.5px; }
}

/* ---------- вариант «во весь экран» (reel--full) ----------
   Ролик от края до края и на всю высоту окна, без плитки. Шапка сайта здесь
   не липкая — уезжает вверх, и закреплённая сцена занимает весь экран. Ширина —
   окно без полосы прокрутки (--sbw считает reel.js): 100vw её включает, и на
   Windows страница уезжала бы вбок */
body:has(.reel--full) { overflow-x: clip; }
body:has(.reel--full) .header { position: relative; }
.reel--full {
  --reel-h: 100vh;
  width: calc(100vw - var(--sbw, 0px));
  margin-left: calc(50% - (100vw - var(--sbw, 0px)) / 2);
  /* под сценой — та же чернота: на телефоне окно выше сцены, когда
     адресная строка прячется */
  background: var(--reel-bg);
}
.reel--full .reel-stage { top: 0; border-radius: 0; }
.reel--full .reel-beat { padding-left: clamp(28px, 6vw, 120px); padding-right: clamp(28px, 6vw, 120px); }
.reel--full .reel-load, .reel--full .reel-progress { left: clamp(20px, 6vw, 120px); right: clamp(20px, 6vw, 120px); }
.reel--full .reel-progress { bottom: 24px; }
@media (max-width: 760px) {
  .reel--full { --reel-h: 100vh; height: calc(var(--reel-h) * 7.5); }
  @supports (height: 100svh) { .reel--full { --reel-h: 100svh; } }
  .reel--full .reel-stage { top: 0; }
  .reel--full .reel-beat { padding: 12px; }
  /* первый экран открывается с шапкой сверху и меню снизу: сцена уходит под
     них, и название поднимаем на их высоту — иначе оно под меню */
  .reel--full .reel-beat--hero { padding-bottom: calc(var(--head-h, 68px) + var(--tabbar-h, 60px) + 8px); }
  .reel--full .reel-progress { top: 12px; bottom: auto; }
  /* нижнее меню на время ролика уезжает вниз: иначе светлая полоса лежит на кадре */
  .tabbar { transition: transform .25s ease; }
  body.reel-immersed .tabbar { transform: translateY(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .reel-hint b::after { animation: none; }
  .reel-film { transition: none; }
}