/* Ролик «Вамос» — 40 секунд в браузере. Он живёт на странице ролика (ролик.html, прежняя главная) и на главной (index.html) первым блоком
   section.rolik#rolik высотой в экран; ниже — оглавление, разделы, заявка и подвал (вид — главная.css,
   основа — style.css). Поэтому здесь НИЧЕГО глобального: ни html, ни body, ни запрета прокрутки —
   все правила под .rolik (или под его классами), страница прокручивается как обычная.
   «Ролик 2» (тз-ролик-2.md): видео поверх фото-заглушек, три кадра-числа, серия и пауза, зерно поверх всего,
   зов вниз над пультом с 1-й секунды, подсказка «Лучше со звуком». Карточки заезда в ролике больше нет.
   Здесь только вид: кадр, текст, кадры-числа, серия, финал, зов вниз, пульт. Всё движение — в js/ролик.js
   (GSAP): он ставит только классы и анимацию. Титров фото в ролике больше нет — 42 строки живут в подвале.
   Цвета и шрифты — те же, что у сайта (style.css; штаб/проект/стиль.md).
   Две раскладки по ориентации: альбом (16:9) — текст слева, фото во весь кадр;
   портрет (9:16) — текст столбиком внизу, безопасные поля 10 % сверху и снизу.
   Нельзя: размытие и режимы наложения — затемнение под текстом обычными полупрозрачными заливками.
   Фото здесь не тонируем и не перекрашиваем: цвет и свет доработал Кодекс заранее (так и сказано в подвале),
   здесь — только кадр. У сцены несколько фото, одно выбирается случайно (ролик.js, data-foto на .kadr),
   поэтому кадр и затемнение — по сцене, а не по конкретному снимку. */

/* ---------- Шрифты: свои файлы, кириллица и латиница отдельно (как в style.css) ---------- */
@font-face {
  font-family: "Playfair Display";
  src: url("шрифты/playfair-display-cyrillic.woff2") format("woff2");
  font-weight: 400 900; font-style: normal; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Playfair Display";
  src: url("шрифты/playfair-display-latin.woff2") format("woff2");
  font-weight: 400 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  src: url("шрифты/manrope-cyrillic.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Manrope";
  src: url("шрифты/manrope-latin.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Переменные ----------
   Цвета — те же, что в style.css (там они и так есть; здесь — на случай, если ролик подключат отдельно).
   Размеры и поля кадра — только у .rolik: на разделы ниже они не действуют */
:root {
  --фон: #F6F1E7;
  --поверхность: #FFFCF6;
  --текст: #1B3326;
  --текст-тихий: #44554A;          /* 7.06 на фоне */
  --зелёный: #1E3B2C;
  --зелёный-глубокий: #14261C;
  --терракота: #B4502F;            /* только кнопка заявки */
  --терракота-тёмная: #9A3F25;
  --песок: #E9C9A9;
  --мяч: #D9E85B;                  /* только в движении: мяч перехода, линия шторки, точка знака, шкала */
  --линия: #DDD3C2;
  --белый: #FFFFFF;
  --шрифт-заголовков: "Playfair Display", Georgia, "Times New Roman", serif;
  --шрифт-основной: "Manrope", system-ui, "Segoe UI", Arial, sans-serif;
  --тень-0: rgba(20, 38, 28, 0);
  --шапка: 56px;                   /* высота шапки главной (главная.css): кадр держит под ней верхнее поле */
}
@media (min-width: 900px) { :root { --шапка: 72px; } }

.rolik {
  /* поля кадра. Альбом: сверху и снизу 7 %, сбоку 6 % ширины; ниже — пульт */
  --поле-бок: clamp(24px, 6vw, 96px);
  --поле-верх: 7%;
  --поле-низ: 7%;
  --пульт: 56px;                   /* место пульта над нижним полем */

  /* размеры текста от кадра (кадр = окно): строка-герой 01, строка сцены, слово «Вамос» */
  --размер-героя: min(14vh, 8.6vw);          /* 1440×900 → 126 */
  --размер-строки: min(8.4vh, 5.4vw);        /* 1440×900 → 76 */
  --размер-слова: min(17vh, 12vw);           /* 1440×900 → 153 */
  --размер-числа: min(18vh, 12.4vw);         /* 1440×900 → 162: кадр-число — самый крупный шрифт страницы (больше «Вамос») */
  --размер-девиза: clamp(1.375rem, 3.4vh, 2.25rem);
  --размер-тега: clamp(1rem, 1.9vh, 1.125rem);
  /* над пультом (его высота 58 = кнопка 44 + отступ 14) стоит зов вниз (48) — текст сцены и финал
     заканчиваются выше зова с запасом 16: 58 + 4 + 48 + 16 = 126 */
  --зов-низ: calc(62px + env(safe-area-inset-bottom, 0px));
  --низ-текста: max(calc(var(--поле-низ) + var(--пульт)), calc(130px + env(safe-area-inset-bottom, 0px)));
}
@media (orientation: portrait) {
  .rolik {
    --поле-бок: 20px;
    --поле-верх: 10%;
    --поле-низ: 10%;
    --пульт: 0px;                  /* на портрете пульт живёт в нижнем безопасном поле */
    --размер-героя: min(15.4vw, 7.4vh);      /* 390×844 → 60 */
    --размер-строки: min(11vw, 5.4vh);       /* 390×844 → 43 */
    --размер-слова: min(22vw, 10.2vh);       /* 390×844 → 86 */
    --размер-числа: min(22.6vw, 10.4vh);     /* 390×844 → 88: крупнее «Вамос»; строки переносятся по словам,
                                                самое длинное слово «каждый» обязано влезть в 350 */
    --зов-низ: calc(66px + env(safe-area-inset-bottom, 0px));   /* пульт на портрете 62 = 44 + 18 */
    --низ-текста: calc(130px + env(safe-area-inset-bottom, 0px));
    --размер-девиза: clamp(1.375rem, 6vw, 1.75rem);
    --размер-тега: 1rem;
  }
}

/* ---------- Ролик: обычный блок высотой в экран ----------
   До 14.10 он стоял position: fixed поверх всего, а html и body не прокручивались. Теперь это первый блок
   страницы: колесо и палец листают страницу, а не ролик. Кадры лежат друг на друге внутри блока.
   С js — какой кадр виден, решает ролик.js. Без js (или без GSAP — ролик.js снимает класс js) виден
   только кадр 01, собранный целиком; 02–07 скрыты, всё их содержание есть ниже, в разделах. */
.rolik {
  position: relative; isolation: isolate;
  height: 100vh; height: 100svh;
  min-height: 360px;                         /* телефон боком: кадр не сплющивается в полоску */
  overflow: hidden;
  background: var(--зелёный-глубокий); color: var(--фон);
  font-family: var(--шрифт-основной); font-size: 1.0625rem; line-height: 1.5;
}
.rolik :is(h1, h2, p, ul, dl, dd) { margin: 0; }
.rolik ul { padding: 0; list-style: none; }
.kadr {
  position: absolute; inset: 0;
  overflow: hidden;
  background: var(--зелёный-глубокий);
  backface-visibility: hidden;
}
html.js .kadr { visibility: hidden; }        /* ролик.js показывает текущий */
html:not(.js) .kadr:not([data-scena="01"]) { display: none; }

/* камера: фото с запасом 8 % на каждую сторону — наезд, панорама и наклон не открывают краёв */
.kadr__kamera { position: absolute; inset: -8%; transform-origin: 50% 50%; will-change: transform; }
.kadr__kamera picture { display: block; width: 100%; height: 100%; }
.kadr__foto {
  width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: var(--kadr-x, 50%) var(--kadr-y, 50%);
}
/* детали 05 (две камеры в одном кадре, видна одна — ролик.js): камера только наезжает 1,00 → 1,08 из центра,
   без сдвига — запас 8 % по краям не нужен. Ровно по кадру: фото 900×1200 и 1200×862 меньше тянутся на 1440 */
.kadr__detal { inset: 0; }
/* видео — поверх фото-заглушки, ровно по кадру (а не по камере с запасом 8 %: иначе 1280×720 растянулся бы
   ещё на 16 % и поплыл). 8 / 116 = 6,8966 % от камеры — это и есть край кадра. Пока видео не пришло,
   ролик.js держит его прозрачным — под ним стоит фото */
.kadr__video {
  position: absolute; inset: 6.8966%;
  width: 86.2069%; height: 86.2069%;
  object-fit: cover; object-position: 50% 50%;
  background: transparent;
  pointer-events: none;
}

/* затемнение под текстом. Альбом: слева, кадр справа открыт; низ чуть темнее под пультом;
   сверху — мягкая полоса под шапкой (знак и пилюля стоят на фото) */
.kadr__ten {
  position: absolute; inset: 0; pointer-events: none;
  background:
    /* спад плавный, без резкого излома: на кадре с вертикалью (стойка корта, край стекла) излом читался как шов */
    linear-gradient(90deg, rgba(20, 38, 28, 0.76) 0%, rgba(20, 38, 28, 0.7) 20%, rgba(20, 38, 28, 0.6) 34%,
      rgba(20, 38, 28, 0.45) 46%, rgba(20, 38, 28, 0.3) 56%, rgba(20, 38, 28, 0.14) 66%, var(--тень-0) 76%),
    linear-gradient(0deg, rgba(20, 38, 28, 0.42) 0%, var(--тень-0) 20%),
    linear-gradient(180deg, rgba(20, 38, 28, 0.42) 0%, var(--тень-0) 16%);
}
@media (orientation: portrait) {
  /* портрет: текст внизу — темнее низ; сверху полоса под шапкой и подписью фото */
  .kadr__ten {
    background:
      linear-gradient(0deg, rgba(20, 38, 28, 0.64) 0%, rgba(20, 38, 28, 0.56) 30%, rgba(20, 38, 28, 0.34) 50%, var(--тень-0) 66%),
      linear-gradient(180deg, rgba(20, 38, 28, 0.55) 0%, var(--тень-0) 20%);
  }
}

/* ---------- Текст сцены ---------- */
.kadr__tekst {
  position: absolute; z-index: 2;
  left: var(--поле-бок); bottom: var(--низ-текста);
  width: min(52%, 60rem);
}
@media (orientation: portrait) {
  .kadr__tekst { right: var(--поле-бок); width: auto; }
}

/* метка над строкой 01 — мелко, заглавными */
.kadr__metka {
  margin-bottom: 2.4vh;
  font-weight: 600; font-size: 1rem; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.35;
  color: var(--фон);
}

/* строка сцены: Playfair, белая. Каждое слово — в маске: влетает снизу, выше маски его не видно */
.kadr__stroka {
  max-width: 10.5em;
  font-family: var(--шрифт-заголовков); font-weight: 600;
  font-size: var(--размер-строки); line-height: 1.04; letter-spacing: -0.015em;
  font-variant-numeric: lining-nums;
  color: var(--белый);
}
.kadr__stroka--geroy { font-size: var(--размер-героя); line-height: 0.98; }
/* тень под буквами: даёт край букве на светлом пятне (песок, облако) там, где затемнение уже гаснет.
   У строки — только узкая (3 точки): каждое слово сидит в маске с overflow: hidden, широкий ореол маска
   обрезала бы прямоугольником. У метки маски нет — у неё и мягкое облачко, как на сайте */
.kadr__stroka { text-shadow: 0 1px 3px rgba(10, 20, 15, 0.55); }
.kadr__metka { text-shadow: 0 1px 2px rgba(10, 20, 15, 0.5), 0 0 28px rgba(10, 20, 15, 0.45); }
.kadr__stroka--geroy .maska { display: block; width: max-content; }   /* 01: три слова — три строки */

.maska {
  display: inline-block; vertical-align: top;
  overflow: hidden;
  /* запас под хвосты букв (у, д, р) и над «Й»: маска не режет буквы */
  padding: 0.04em 0.06em 0.14em 0; margin: -0.04em -0.06em -0.14em 0;
}
.maska--otkryta { overflow: visible; }      /* «турнир.» прилетает ударом из большого — маска не нужна */
.slovo { display: inline-block; white-space: nowrap; transform-origin: 50% 100%; }
.slovo--udar { transform-origin: 0% 80%; }

/* теги — прямые «титры» на своей тёмной подложке, как на сайте */
.kadr__tegi { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 3vh; }
.kadr__teg {
  padding: 8px 12px 7px;
  border: 1px solid rgba(246, 241, 231, 0.55);
  background: rgba(20, 38, 28, 0.6);
  font-weight: 600; font-size: var(--размер-тега); line-height: 1.2; letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--фон);
  text-wrap: balance;                         /* без одинокого «игру» на второй строке */
}
@media (orientation: landscape) and (min-height: 700px) {
  .kadr__teg { padding: 10px 14px 9px; }
}

/* служебная строка «Фото: …» — мелко, в углу кадра, на своей почти сплошной подложке (как .sluzhebnoe сайта).
   Альбом — вверху справа; портрет — вверху слева. С 14.10 над кадром шапка главной: строка стоит
   на 16 точек ниже неё, а не в 5 % от верха (там теперь пилюля «Получить программу») */
.kadr__podpis {
  position: absolute; z-index: 3;
  top: calc(var(--шапка) + 16px); right: var(--поле-бок); max-width: min(46%, 34rem);
  padding: 4px 10px;
  background: rgba(14, 26, 20, 0.88);
  border-radius: 6px;
  font-size: 0.875rem; font-weight: 600; line-height: 1.35; letter-spacing: 0.02em;
  color: var(--фон);
  white-space: nowrap;                        /* подпись угла — всегда одна строка (тз-ролик-2, п. 6) */
}
@media (orientation: portrait) {
  /* 390: самая длинная подпись («Фото: корт для примера, Кабрера-де-Мар, Каталония») — в одну строку
     от поля до поля: шрифт 12,5 без разрядки, поля плашки 8 */
  .kadr__podpis {
    top: max(var(--поле-верх), calc(var(--шапка) + 16px)); left: var(--поле-бок); right: auto;
    max-width: calc(100% - 2 * var(--поле-бок));
    padding: 4px 8px;
    font-size: min(0.8125rem, 3.2vw); letter-spacing: 0;
  }
}
/* ссылка «список внизу» в подписи серии: вид как у всей подписи угла (без подчёркивания — слово смотрителя 14.10);
   цель нажатия выше строки (44), строку не раздвигает */
.kadr__podpis a {
  display: inline-block; padding: 10px 0; margin: -10px 0;
  color: inherit; text-decoration: none;
}
.kadr__podpis a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Кадры: точка кадра — по центру у всех сцен ----------
   Фото выбирается случайно из набора сцены, поэтому кадр по центру (--kadr-x / --kadr-y по умолчанию 50 %),
   текст и затемнение у всех сцен общие. Если когда-нибудь один вариант режется неудачно — точечно по ключу:
   .kadr[data-foto="корт-б"] { --kadr-y: 40%; } */

/* ---------- 03 · Неделя: три кадра-числа ----------
   Фото стоит, поверх — по одному крупному числу по центру кадра (каждое сменяет прошлое, ролик.js).
   Числа — самый крупный шрифт страницы (--размер-числа больше «Вамос»). Три числа лежат друг на друге
   в одной клетке сетки. Затемнение у этой сцены — ровное по всему кадру и гуще в середине: число стоит
   по центру, а не слева, как строки других сцен */
.kadr[data-scena="03"] .kadr__ten {
  background:
    radial-gradient(75% 50% at 50% 50%, rgba(20, 38, 28, 0.7), rgba(20, 38, 28, 0.45) 100%),
    linear-gradient(180deg, rgba(20, 38, 28, 0.42) 0%, var(--тень-0) 16%);
}
.kadr[data-scena="03"] .kadr__tekst {
  top: calc(var(--шапка) + 56px); right: var(--поле-бок); bottom: var(--низ-текста); left: var(--поле-бок);
  width: auto;
  display: grid; grid-template-columns: minmax(0, 1fr); place-items: center;
}
.kadr-chislo {
  grid-area: 1 / 1;
  max-width: 100%;
  font-family: var(--шрифт-заголовков); font-weight: 600;
  font-size: var(--размер-числа); line-height: 0.96; letter-spacing: -0.035em;
  font-variant-numeric: lining-nums;
  text-align: center; text-wrap: balance;
  color: var(--белый);
  text-shadow: 0 2px 4px rgba(10, 20, 15, 0.45), 0 0 48px rgba(10, 20, 15, 0.4);
}
/* Телефон: буквы чуть плотнее, чтобы «каждый» при 88 точках не заходило на боковые поля */
@media (orientation: portrait) {
  .kadr-chislo { letter-spacing: -0.045em; }
}

/* ---------- 06а · Серия и 06б · Пауза ----------
   Блок во весь ролик, кадры друг на друге (виден один — ролик.js). Каждое фото серии — во весь кадр
   с обрезкой краёв; «приземление» 1,05 → 1,00 со сдвигом 2 % — запас на это даёт overflow: hidden.
   Последний кадр — сплошной цвет мяча, пауза — ровный тёмно-зелёный, на ней ничего нет.
   Подпись серии — обычная подпись угла (.kadr__podpis), одна на всю серию */
.seriya {
  position: absolute; inset: 0;
  overflow: hidden;
  background: var(--зелёный-глубокий);
}
.seriya__kadr,
.seriya__pauza { position: absolute; inset: 0; backface-visibility: hidden; }
.seriya__kadr { overflow: hidden; transform-origin: 50% 50%; }
.seriya__kadr picture { display: block; width: 100%; height: 100%; }
.seriya__foto {
  display: block; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 50%;
}
.seriya__kadr--myach { background: var(--мяч); }
.seriya__pauza { background: var(--зелёный-глубокий); }
html.js .seriya__kadr, html.js .seriya__pauza { visibility: hidden; }   /* ролик.js показывает текущий */

/* ---------- 07 · Вамос: финал по центру ----------
   Группа (знак, слово, девиз, кнопка, ссылка про авторов фото) стоит по центру кадра до конца — столбиком
   между шапкой и зовом вниз (зов теперь не в финале, а над пультом всего ролика, см. ниже) */
.kadr--final .kadr__ten {
  background:
    radial-gradient(60% 55% at 50% 46%, rgba(20, 38, 28, 0.62), rgba(20, 38, 28, 0.36) 100%),
    linear-gradient(0deg, rgba(20, 38, 28, 0.5) 0%, rgba(20, 38, 28, 0.25) 40%, var(--тень-0) 70%);
}
.final {
  position: absolute; z-index: 2;
  left: var(--поле-бок); right: var(--поле-бок);
  top: calc(var(--шапка) + 16px); bottom: var(--низ-текста);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.final__gruppa { flex: none; display: flex; flex-direction: column; align-items: center; }
.final .znak { width: clamp(56px, 8.4vh, 88px); height: auto; color: var(--фон); overflow: visible; }
.znak__tochka { fill: var(--мяч); }
/* .rolik впереди: иначе общее «.rolik :is(h1, p) { margin: 0 }» сильнее и отступы пропадают */
.rolik .final__slovo {
  margin-top: 1.2vh;
  font-family: var(--шрифт-заголовков); font-weight: 600;
  font-size: var(--размер-слова); line-height: 1; letter-spacing: -0.01em;
  color: var(--белый);
}
.rolik .final__stroka {
  margin-top: 2.4vh;
  font-family: var(--шрифт-заголовков); font-weight: 500;
  font-size: var(--размер-девиза); line-height: 1.2;
  color: var(--фон);
}
.rolik .final__knopka {
  margin-top: 3.4vh;
  min-height: 56px; padding: 0 36px;
  font-size: 1.1875rem;
}
.zov__foto {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px;
  margin-top: 1.6vh;
  font-size: 1rem; font-weight: 600; line-height: 1.3;
  color: var(--фон);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  text-shadow: 0 1px 2px rgba(10, 20, 15, 0.6), 0 0 14px rgba(10, 20, 15, 0.5);
}
.zov__foto:hover { text-decoration-thickness: 2px; }
@media (orientation: portrait) {
  .final .znak { width: clamp(48px, 7vh, 64px); }
  .rolik .final__knopka { margin-top: 2.8vh; }
}

/* ---------- Зов вниз: над пультом с 1-й секунды до конца ----------
   «Подробности ниже» и стрелка в одну строку, цвета кости — не вторая кнопка, а тихое приглашение листать.
   Стоит прямо в .rolik поверх всех кадров и зерна, нижний край — на 4 выше пульта (пульт его не задевает).
   Альбом — по центру; портрет — у левого поля (справа на той же высоте — подсказка «Лучше со звуком»).
   Цель нажатия — вся строка, 48. Центр — полями auto, без transform: transform двигает ролик.js (y при появлении).
   Стрелку качает ролик.js — один раз на 3 и на 31 с; бесконечного качания в css больше нет */
.zov {
  position: absolute; z-index: 21;
  left: 0; right: 0; bottom: var(--зов-низ);
  width: max-content; margin: 0 auto;
  display: flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 0 14px;
  border-radius: 999px;
  color: var(--фон); text-decoration: none;
  font: 600 1.0625rem/1.25 var(--шрифт-основной); letter-spacing: 0.01em;
  text-shadow: 0 1px 2px rgba(10, 20, 15, 0.6), 0 0 18px rgba(10, 20, 15, 0.45);
}
.zov__strelka { width: 20px; height: 20px; flex: none; }
.zov:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
@media (orientation: portrait) {
  .zov { right: auto; left: calc(var(--поле-бок) - 14px); margin: 0; }
}

/* ---------- Низкое окно: телефон боком (844×390, 667×375) ----------
   Поля меньше, строка 01 плотнее. Текст не мельче 16 точек — ужимаем отступы, а не буквы.
   Зов вниз здесь — справа над пультом (по центру он упёрся бы в строку слева) */
@media (orientation: landscape) and (max-height: 500px) {
  .rolik {
    --поле-верх: 5%;
    --поле-низ: 3%;
    --размер-героя: min(12vh, 8vw);            /* 667×375 → 45 */
    --размер-числа: min(24vh, 13vw);
    --низ-текста: calc(66px + env(safe-area-inset-bottom, 0px));
  }
  /* метка в две строки и левее: подпись фото справа вверху стоит на той же высоте */
  .kadr__metka { margin-bottom: 1.6vh; max-width: 40vw; }
  .kadr__tegi { margin-top: 2.4vh; gap: 6px 8px; }
  .kadr__teg { padding: 6px 10px 5px; }
  .kadr[data-scena="03"] .kadr__tekst { top: calc(var(--шапка) + 8px); }

  .final { top: calc(var(--шапка) + 4px); bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }
  .final .znak { width: 40px; }
  .rolik .final__knopka { min-height: 48px; margin-top: 2vh; }
  .zov__foto { margin-top: 0; }
  .zov { left: auto; right: calc(var(--поле-бок) - 14px); margin: 0; }
}

/* ---------- Переход мячом (04 → 05) — единственный фирменный ---------- */
.perehod { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
html:not(.js) .perehod { display: none; }
.perehod__myach {
  position: absolute; left: 0; top: 0;
  width: clamp(20px, 3.4vmin, 34px); aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #F1F8B4 0, var(--мяч) 46%, #AEBD34 100%);
  visibility: hidden;
}

/* ---------- Зерно и затемнение краёв: один неподвижный слой поверх всего ролика ----------
   Склеивает фото и видео разного цвета в одно кино (тз-ролик-2, п. 3). Под пультом и зовом, над кадрами,
   серией и мячом. Ничего не ловит (pointer-events: none — кнопки финала нажимаются сквозь него).
   Зерно — шум SVG прямо в css (меньше 1 КБ, рисуется один раз, плитка 180), серый, прозрачность 7 %;
   края — радиальное затемнение до 28 %. Без анимации, без режимов наложения.
   Без js тоже виден: это часть кадра 01 */
.zerno {
  position: absolute; inset: 0; z-index: 15;
  pointer-events: none;
  background:
    radial-gradient(ellipse 85% 80% at 50% 48%, rgba(10, 20, 15, 0) 55%, rgba(10, 20, 15, 0.16) 80%, rgba(10, 20, 15, 0.28) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='z'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23z)' opacity='0.07'/%3E%3C/svg%3E");
  background-size: auto, 180px 180px;
}

/* ---------- Пульт: пауза, заново, звук, шкала ----------
   С 14.10 пульт — внутри блока ролика, по его нижнему краю (раньше — к низу окна): уходит вверх вместе
   с роликом при прокрутке */
.pult {
  position: absolute; z-index: 20; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 0 var(--поле-бок) calc(14px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;                       /* нажимается только то, что внутри */
}
.pult > * { pointer-events: auto; }
@media (orientation: portrait) {
  /* 390 точек: три кнопки по центру нижнего безопасного поля, чуть плотнее */
  .pult {
    justify-content: center; gap: 6px;
    padding: 0 12px calc(18px + env(safe-area-inset-bottom, 0px));
  }
  .pult__knopka { padding: 0 12px 0 10px; gap: 6px; }
}
.pult__knopka {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; min-width: 44px; padding: 0 16px 0 13px;
  border: 1px solid rgba(246, 241, 231, 0.42); border-radius: 999px;
  background: rgba(14, 26, 20, 0.72); color: var(--фон);
  font: 600 1rem/1 var(--шрифт-основной);
  white-space: nowrap;                        /* «Со звуком» — в одну строку */
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.pult__knopka:hover { background: rgba(14, 26, 20, 0.92); border-color: var(--фон); }
.ikonka { width: 16px; height: 16px; flex: none; }
/* иконка — то, что случится по нажатию: идёт — «пауза», стоит — «играть»; без звука — «со звуком» */
.pult[data-igraet="da"] .ikonka--igrat,
.pult[data-igraet="net"] .ikonka--pauza,
.pult[data-zvuk="da"] .ikonka--zvuk,
.pult[data-zvuk="net"] .ikonka--tiho { display: none; }

/* подсказка «Лучше со звуком» — тихая строка рядом с кнопкой звука, пока звук выключен (ролик.js ставит hidden).
   Альбом: в ряду пульта сразу за кнопкой. Портрет (390): в ряду места нет — стоит над пультом у правого
   поля, на одной высоте с зовом вниз (зов — слева). Не кнопка: нажатия не ловит */
.pult__podskazka {
  align-self: center;
  padding-left: 4px;
  font: 500 0.9375rem/1.25 var(--шрифт-основной); letter-spacing: 0.01em;
  color: var(--фон);
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(10, 20, 15, 0.6), 0 0 14px rgba(10, 20, 15, 0.5);
}
.pult > .pult__podskazka { pointer-events: none; }
@media (orientation: portrait) {
  .pult__podskazka {
    position: absolute; right: var(--поле-бок); bottom: calc(100% + 4px);
    display: flex; align-items: center; min-height: 48px; padding-left: 0;
  }
}

/* шкала — тонкая линия по нижнему краю; нажатие по ней переводит ролик (полоса для пальца выше линии) */
.pult__shkala {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 20px; cursor: pointer; touch-action: none;
}
.pult__shkala::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: rgba(246, 241, 231, 0.22);
}
.pult__polosa {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--мяч);
  transform-origin: 0 50%; transform: scaleX(0);
}

/* «Меньше движения»: ролик сам не стартует — ролик.js собирает кадр 01 целиком (как на 4 с) и ставит
   на пульте «Играть»; по нажатию идёт тихая версия (только проявления). Здесь — без плавных переходов
   пульта (стрелку зова при этом не качает и ролик.js; общий запрет анимаций — в style.css) */
@media (prefers-reduced-motion: reduce) {
  .pult__knopka { transition: none; }
}