/* ============================================================
   M DESIGN TEAM — DEMO DAYS
   Белый фон, чёрный текст. Киношный хедер во весь экран.
   Display: Modak (локальный .ttf)
   Body:    Mukta Malar (Google Fonts)
   ============================================================ */

@font-face {
  font-family: 'Modak';
  src: url('Modak-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* ============================================================
   МАСШТАБ СТРАНИЦ. Штатное свойство zoom — это и есть механизм браузерного
   зума (самый точный способ; НЕ transform-костыль — не ломает поток, фикс-слои,
   скролл; Chrome/Edge/Safari и Firefox 126+). Главная и страницы проектов — в
   одном масштабе --home-zoom (90%). Фактор в --zoom; его же берут компенсация
   полноэкранного hero (min-height: calc(100vh / var(--zoom))) и анти-зум
   презентации (zoom: calc(1 / var(--zoom))) — иначе 100vh под zoom оставляет
   пустоту снизу. Менять масштаб — число --home-zoom.
   ============================================================ */
:root { --zoom: 1; --home-zoom: 0.9; }   /* --home-zoom — общий масштаб сайта */
/* Нахлёст на стыках чёрных секций с тёмной обложкой. При zoom:0.9 высоты,
   посчитанные от vh/svh, дробные, и границы блоков попадают на пол-пикселя:
   сглаженный ряд подмешивает то, что лежит ЗА границей (не затемнённую
   картинку кавера) → тонкая светлая линия во всю ширину. Везде, где чёрная
   секция стыкуется с hero, перекрываем стык на эту величину. */
:root { --seam-overlap: 3px; }
html.home { --zoom: var(--home-zoom); zoom: var(--zoom); }
body.episode-page { --zoom: var(--home-zoom); zoom: var(--zoom); }   /* тот же масштаб, что и главная */

html, body {
  background: var(--site-bg, #ffffff);
  color: #000000;
  font-family: 'Benne', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* нативный скроллбар скрыт — вместо него кастомный оверлей (.app-scrollbar, script.js) */
  scrollbar-width: none;            /* Firefox */
}

/* ============================================================
   SCROLLBAR: нативный СКРЫТ (не занимает место справа), вместо него
   кастомная полупрозрачная палка-оверлей ПОВЕРХ сайта (.app-scrollbar).
   ============================================================ */
::-webkit-scrollbar { width: 0; height: 0; }

.app-scrollbar {
  position: fixed;
  top: 0; right: 3px;
  width: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.28);
  z-index: 4000;
  opacity: 0;
  cursor: grab;
  transition: opacity 280ms ease, background-color 160ms ease;
  will-change: transform;
}
.app-scrollbar.is-visible { opacity: 1; }
.app-scrollbar:hover      { background: rgba(255,255,255,0.5); }
.app-scrollbar.is-drag    { cursor: grabbing; background: rgba(255,255,255,0.62); }

a { color: inherit; text-decoration: none; }

/* ============================================================
   GLOBAL NAV
   - .site-nav         : fixed bar with logo (left) + links (right)
   - .site-nav__blur   : fixed blur layer under nav, fades down → 0
   - .site-nav__dim    : ABSOLUTE darkening band at top of page
                         (НЕ fixed — уезжает со скроллом, нужна
                         только для читаемости поверх hero-слайда)
   Тюнятся через CSS-переменные на :root: --nav-blur-px, --nav-blur-h,
   --nav-blur-mask, --nav-dim-h, --nav-dim-strength
   ============================================================ */

:root {
  --nav-blur-px: 22px;
  --nav-blur-h: 170px;
  --nav-blur-mask: 60%;
  --nav-dim-h: 220px;
  --nav-dim-strength: 0.45;
  /* стекло элементов управления презентацией: серое (не чёрное, не светлое),
     строго без обводок; видно и на чёрных, и на светлых фонах. */
  --ctrl-glass: rgba(90, 93, 102, 0.55);
  --ctrl-glass-hover: rgba(120, 124, 134, 0.66);
}

/* Блюр под навбаром отключён везде — навбар не липкий, уезжает со скроллом. */
.site-nav__blur { display: none; }

/* Progressive blur: 3 слоя с разной силой и смещёнными масками,
   чтобы переход к чистой картинке шёл плавно, без видимой кромки. */
.site-nav__blur {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-blur-h);
  z-index: 8;
  pointer-events: none;
  backdrop-filter: blur(calc(var(--nav-blur-px) * 0.45));
  -webkit-backdrop-filter: blur(calc(var(--nav-blur-px) * 0.45));
  -webkit-mask-image: linear-gradient(to bottom,
    rgba(0,0,0,1)    0%,
    rgba(0,0,0,0.98) 30%,
    rgba(0,0,0,0.82) 55%,
    rgba(0,0,0,0.48) 75%,
    rgba(0,0,0,0.18) 90%,
    rgba(0,0,0,0)    100%);
  mask-image: linear-gradient(to bottom,
    rgba(0,0,0,1)    0%,
    rgba(0,0,0,0.98) 30%,
    rgba(0,0,0,0.82) 55%,
    rgba(0,0,0,0.48) 75%,
    rgba(0,0,0,0.18) 90%,
    rgba(0,0,0,0)    100%);
}

.site-nav__blur::before,
.site-nav__blur::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* самый сильный слой — короткая полоса под навбаром */
.site-nav__blur::before {
  backdrop-filter: blur(var(--nav-blur-px)) saturate(1.08);
  -webkit-backdrop-filter: blur(var(--nav-blur-px)) saturate(1.08);
  -webkit-mask-image: linear-gradient(to bottom,
    rgba(0,0,0,1)    0%,
    rgba(0,0,0,0.85) 22%,
    rgba(0,0,0,0.35) 48%,
    rgba(0,0,0,0)    68%);
  mask-image: linear-gradient(to bottom,
    rgba(0,0,0,1)    0%,
    rgba(0,0,0,0.85) 22%,
    rgba(0,0,0,0.35) 48%,
    rgba(0,0,0,0)    68%);
}

/* самый лёгкий слой — длинный «хвост» в ноль */
.site-nav__blur::after {
  backdrop-filter: blur(calc(var(--nav-blur-px) * 0.15));
  -webkit-backdrop-filter: blur(calc(var(--nav-blur-px) * 0.15));
  -webkit-mask-image: linear-gradient(to bottom,
    rgba(0,0,0,0)    0%,
    rgba(0,0,0,0.15) 35%,
    rgba(0,0,0,0.55) 65%,
    rgba(0,0,0,0.3)  88%,
    rgba(0,0,0,0)    100%);
  mask-image: linear-gradient(to bottom,
    rgba(0,0,0,0)    0%,
    rgba(0,0,0,0.15) 35%,
    rgba(0,0,0,0.55) 65%,
    rgba(0,0,0,0.3)  88%,
    rgba(0,0,0,0)    100%);
}

.site-nav__dim {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--nav-dim-h);
  z-index: 7;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(0,0,0, var(--nav-dim-strength)) 0%,
    rgba(0,0,0, 0) 100%
  );
}

.site-nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 36px;
  pointer-events: none; /* nav fon просвечивает; интерактивные дети сами включают */
}
.site-nav > * { pointer-events: auto; }

.site-nav__logo {
  display: inline-flex;
  align-items: center;
}
.site-nav__logo .logo-wrap {
  width: 120px;
  height: auto;
}

.site-nav__links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 0; padding: 0;
}
.site-nav__links a,
.site-nav__links button {
  appearance: none; background: none; border: 0; cursor: pointer;
  font-family: inherit;                  /* Benne (как весь сайт) */
  font-size: clamp(18px, 1.5vw, 24px);   /* = боди-текст интро */
  font-weight: 400;                      /* у Benne есть только 400 */
  color: rgba(255,255,255,0.92);
  padding: 6px 4px;
  letter-spacing: 0.01em;
}
/* hover — нижнее подчёркивание, как у ссылок в футере */
.site-nav__links a:hover,
.site-nav__links button:hover { text-decoration: underline; }
/* кнопка random episode: текст + кубики справа с отступом */
/* random episode — ЖЁЛТАЯ как лого + свечение (текст и иконка); ховер ярче-жёлтым */
#randomBtn { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  color: #FBFE1E; filter: drop-shadow(0 0 6px rgba(251, 254, 30, 0.55));
  transition: filter 200ms ease, color 160ms ease; }
#randomBtn svg { width: 1.1em; height: 1.1em; flex: 0 0 auto; }   /* stroke=currentColor → тоже жёлтая */
#randomBtn:hover { text-decoration: none; color: #ffff66; filter: drop-shadow(0 0 13px rgba(251, 254, 30, 1)); }
/* search — иконка вместо слова */
#searchBtn { display: inline-flex; align-items: center; line-height: 0; }
#searchBtn svg { width: 1.25em; height: 1.25em; }
#searchBtn:hover { text-decoration: none; opacity: 0.78; }

/* На СТРАНИЦАХ ПРОЕКТА шапка зафиксирована: лого (слева) и пункты (справа)
   всегда сверху и не уезжают при скролле. Затемняющая полоса под ними тоже
   фиксируется — фон для читаемости поверх прокручивающихся слайдов.
   (По умолчанию навбар absolute и уезжает; здесь перекрываем только для проектов.) */
.episode-page .site-nav,
.episode-page .site-nav__dim {
  position: fixed;
}
/* На странице проекта весь интерфейс прячется в простое (класс ui-dim вешает JS
   при отсутствии активности). Любое движение/скролл/тап снова показывает. */
.episode-page .site-nav,
.episode-page .site-nav__dim { transition: opacity 320ms ease; }
.episode-page.ui-dim .site-nav,
.episode-page.ui-dim .site-nav__dim { opacity: 0; }
.episode-page.ui-dim .site-nav > * { pointer-events: none; }

/* ============================================================
   SEARCH POPUP — нижняя плашка-стекло
   ============================================================ */
.search-popup {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(12px);
  width: min(560px, 92vw);
  max-height: 70vh;
  z-index: 100;
  background: rgba(18,18,18,0.55);
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
  /* «roughness» — лёгкий шум сверху, как у матового стекла */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.search-popup.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.search-popup__results {
  flex: 1 1 auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.search-popup__results:empty { display: none; }

.search-result {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 18px;
  color: #fff;
  text-decoration: none;
  transition: background 140ms ease;
}
.search-result:hover { background: rgba(255,255,255,0.06); }
.search-result + .search-result {
  border-top: 1px solid rgba(255,255,255,0.10); /* full-width divider */
}
.search-result__thumb {
  width: 64px;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: #2a2a2a;
  border-radius: 3px;
}
.search-result__title {
  font-size: 12px;
  font-weight: 400;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.02em;
}

.search-popup__input {
  flex: 0 0 auto;
  border-top: 1px solid rgba(255,255,255,0.10);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
}
.search-popup__input input {
  flex: 1;
  background: transparent;
  border: 0; outline: none;
  color: #fff;
  font: inherit;
  font-size: 14px;
  letter-spacing: 0.01em;
}
.search-popup__input input::placeholder { color: rgba(255,255,255,0.4); }
.search-popup__close {
  appearance: none; background: none; border: 0;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 4px 6px;
}
.search-popup__close:hover { color: #fff; }

.search-empty {
  padding: 20px 18px;
  color: rgba(255,255,255,0.5);
  font-size: 12px;
}

/* ============================================================
   CINEMA HERO (главная)
   Слайд 1 проекта во весь экран (PDF.js рендерит в canvas).
   Поверх — глубокий киношный градиент, виньетка, инфо-marquee.
   ============================================================ */

.cinema-hero {
  position: relative;
  min-height: calc(100vh / var(--zoom, 1));    /* fallback для старых браузеров */
  min-height: calc(100svh / var(--zoom, 1));   /* svh — СТАБИЛЬНАЯ высота (не дёргается при скролле, помещается под плашки) */
  background: #000000;   /* плейсхолдер = фону секций ниже: иначе на стыке видна светлая полоса */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #ffffff;
}

/* Фон с первым слайдом — на весь hero. background-image присваивает JS
   (PDF.js → offscreen canvas → blob URL). До этого виден тёмный плейсхолдер. */
.cinema-hero__bg {
  position: absolute;
  inset: 0;
  /* позиция и размер фона управляются переменными (дев-панель Ctrl+`).
     По умолчанию — как было: cover + центр. */
  background-size: var(--hero-bg-size, cover);
  background-position: var(--hero-pos-x, 50%) var(--hero-pos-y, 50%);
  background-color: #000000;   /* = фону hero и секций ниже (см. шов на стыке) */
  background-image:
    radial-gradient(circle at 30% 40%, rgba(255,255,255,0.04), transparent 60%),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,0.03), transparent 65%);
  z-index: 0;
  transition: opacity 600ms ease;
}

/* === КАВЕР ГЛАВНОЙ: фон (coverp_bg) + объект (coverp_obj) =================
   Оба слоя точно на hero (inset:0) — кадрирование/позиция как у исходного фона.
   Параллакс задаёт JS через transform: при скролле вниз слой отстаёт вниз с
   фактором <1, поэтому увеличение НЕ нужно — hero остаётся полностью покрыт. */
.home .cinema-hero__bg {
  will-change: transform;
}
.cinema-hero__obj,
.cinema-hero__shapes {
  position: absolute;
  inset: 0;
  /* объект и фигуры кадрируются теми же переменными, что и фон — слои совпадают */
  background-size: var(--hero-bg-size, cover);
  background-position: var(--hero-pos-x, 50%) var(--hero-pos-y, 50%);
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}
.cinema-hero__obj    { background-image: url("/Library/0/coverp_obj/slide-01.webp"); }
.cinema-hero__shapes { background-image: url("/Library/0/coverp_shapes.svg"); }   /* верхний слой кавера */
/* Бейджи (ESRB слева, PS5 справа) — слой проекта #18. Сейчас в hero стоит проект #0
   (элемента #coverpBadges в разметке нет), правила оставлены на будущее.
   ОТДЕЛЬНЫЙ слой параллакса #coverpBadges,
   самый ближний/передний (движется быстрее всех — BADGES_FACTOR в script.js).
   Прижаты к бокам с отступом сайта (36px), z-index:2 — над нижним градиентом. */
.cinema-hero__badges {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  will-change: transform;
}
.cinema-hero__badges::before,
.cinema-hero__badges::after {
  content: '';
  position: absolute;
  top: 36%;
  background-repeat: no-repeat;
  background-size: contain;
}
.cinema-hero__badges::before {   /* ЛЕВЫЙ — ESRB */
  left: 36px;
  transform: translateY(-50%);
  transform-origin: left center;         /* якорь скейла — центр левого бока */
  width: clamp(58px, 7vw, 104px);        /* floor 58px — чтобы на мобиле не схлопывались */
  aspect-ratio: 92 / 136;
  background-image: url("/Library/18/coverp_shape_l.svg");
  background-position: left center;
}
.cinema-hero__badges::after {    /* ПРАВЫЙ — PS5 */
  right: 36px;
  transform: translateY(-50%);
  transform-origin: right center;        /* якорь скейла — центр правого бока */
  width: clamp(42px, 5.2vw, 76px);       /* floor 42px — видны на мобиле */
  aspect-ratio: 74 / 246;
  background-image: url("/Library/18/coverp_shape_r.svg");
  background-position: right center;
}
/* Мобильные/coarse — лёгкая версия coverp_obj. coverp_bg идёт через data-bg→LQ в JS. */
@media (max-width: 900px), (pointer: coarse) {
  .cinema-hero__obj { background-image: url("/Library-lq/0/coverp_obj/slide-01.webp"); }
}
/* При наведении на бейдж watch_main (в hero главной) слои coverp_obj + coverp_shapes
   увеличиваются. Используем независимое свойство `scale` (не transform) — оно
   складывается с параллаксом (transform: translate3d) и анимируется отдельно, не
   мешая параллаксу. Точка опоры — по центру, на 20vh от верха. Стиль/скорость = как
   у бейджа. coverp_shapes стартует с паузой 0.1s (сначала obj, потом shapes). */
.cinema-hero__obj,
.cinema-hero__shapes,
.cinema-hero__badges {
  transform-origin: 50% 20vh;
  transition: scale 320ms cubic-bezier(.2, .7, .15, 1);
}
.cinema-hero:has(.watch-cue--main:hover) .cinema-hero__obj    { scale: 1.02; }
.cinema-hero:has(.watch-cue--main:hover) .cinema-hero__shapes { scale: 1.02; transition-delay: 0.1s; }
.cinema-hero:has(.watch-cue--main:hover) .cinema-hero__badges { scale: 1.02; transition-delay: 0.1s; }
/* Центрируем кадр по горизонтали при ЛЮБОЙ ширине — иначе широкий cover
   уезжает вправо и обрезается. background-position-x перебивает x из шортката
   независимо от инлайн-переменной дев-панели; вертикаль остаётся настраиваемой. */
.home .cinema-hero__bg,
.home .cinema-hero__obj,
.home .cinema-hero__shapes {
  background-position-x: 50%;
}

/* === ЛИСТЬЯ hero (plant1/plant2) — слой между фоном и человеком ===========
   Внешний .cinema-hero__plant — параллакс (translate задаёт JS, фактор между
   фоном и объектом). Внутренний .plant-leaf — «качание» (rotate вокруг нижнего
   угла, CSS-анимация). Позиции/размеры — из макета Figma (кадр 1890×985),
   заданы в % от hero, чтобы листья сидели в верхних углах сцены. */
.cinema-hero__plant {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}
.cinema-hero__plant .plant-leaf {
  display: block;
  width: 100%;
  height: auto;
  will-change: transform;
}
/* при сужении НЕ скейлятся (floor в px), и съезжают друг к другу: #1 у левого края, #2 у правого */
.cinema-hero__plant--1 { left: -1.5%; top: -5.9%; width: max(38.5%, 230px); }
.cinema-hero__plant--2 { right: -1.6%; left: auto; top: -3.5%; width: max(36.4%, 218px); }
.cinema-hero__plant--1 .plant-leaf {
  transform-origin: left bottom;     /* ось вращения — нижний левый угол */
  animation: plant-sway-1 3s ease-in-out infinite alternate;
}
.cinema-hero__plant--2 .plant-leaf {
  transform-origin: right bottom;    /* ось вращения — нижний правый угол */
  animation: plant-sway-2 3.7s ease-in-out infinite alternate;
}
@keyframes plant-sway-1 {
  from { transform: rotate(-2.4deg); }
  to   { transform: rotate(2.4deg); }
}
@keyframes plant-sway-2 {
  from { transform: rotate(2.2deg); }
  to   { transform: rotate(-2.8deg); }
}
@media (prefers-reduced-motion: reduce) {
  .cinema-hero__plant .plant-leaf { animation: none; }
}

/* on-page диагностика — маленький бейдж снизу слева, чтобы видеть статус JS */
.cinema-debug {
  position: fixed;
  bottom: 8px; left: 8px;
  z-index: 9999;
  font: 11px/1.3 ui-monospace, 'Cascadia Mono', Menlo, monospace;
  padding: 6px 10px;
  border-radius: 4px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  pointer-events: none;
  max-width: 60vw;
  white-space: pre-wrap;
}
.cinema-debug.ok   { background: rgba(0,120,40,0.85); }
.cinema-debug.fail { background: rgba(180,30,30,0.9); }

/* Затемнение под marquee. Старт повыше, доводим до чёрного.
   --hero-grad можно переопределить из JS (см. tuner) — это live preview. */
.cinema-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--hero-grad, linear-gradient(180deg,
    rgba(0,0,0,0.00) 0.0%,
    rgba(0,0,0,0.00) 38.0%,
    rgba(0,0,0,0.38) 60.0%,
    rgba(0,0,0,0.82) 80.5%,
    rgba(0,0,0,1.00) 96.0%
  ));
  pointer-events: none;
  z-index: 1;
}

/* Верхний градиент НАД картинкой (управляется дев-панелью, по умолчанию выкл). */
.cinema-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--hero-grad-top, none);
  pointer-events: none;
  z-index: 1;
}

/* === Проект 0 / главная — финальные значения из дев-панели (дефолт).
   Дев-панель (Ctrl+`) может перекрыть их вживую; Reset/перезагрузка
   возвращают именно эти. === */
.home { --site-bg: #000000; }
.cinema-hero:not(.cinema-hero--center) {
  --hero-pos-x: 0%;
  --hero-pos-y: 0%;    /* фрейминг под кавер проекта 0 — по верхнему краю картинки */
}
/* Страница проекта: кадрируем фон hero ТАК ЖЕ, как на главной — по верхнему краю
   картинки (--hero-pos-y: 0%; по горизонтали и так центр, 50% по умолчанию). Раньше
   был center-crop (50% 50%), который на не-16:9 экранах срезал верх/низ и выглядел
   как «зум-ин» при переходе с главной. Теперь статичный кадр совпадает с главным hero. */
.cinema-hero--center {
  --hero-pos-y: 0%;
}

/* marquee/контент над фоном; ссылку-оверлей НЕ трогаем — у неё своё
   absolute + z-index:3 (иначе это правило перебило бы его по специфичности). */
.cinema-hero > *:not(.cinema-hero__bg):not(.cinema-hero__plant):not(.cinema-hero__obj):not(.cinema-hero__shapes):not(.cinema-hero__badges):not(.cinema-hero__link) { position: relative; z-index: 2; }

.logo-wrap {
  display: block;
  width: 120px;
  height: auto;
}

/* ---------- marquee: основной info-блок снизу-слева ---------- */
.cinema-hero__marquee {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  max-width: 980px;
  padding: 40px 48px 64px 36px;   /* лево 36px — выровнено с логотипом в навбаре */
}

.film-title {
  font-weight: 400;
  font-size: clamp(44px, 7vw, 128px);
  line-height: 0.95;
  letter-spacing: -0.015em;
  color: #fff;
  text-transform: uppercase;
  max-width: 50vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* шрифты — выбираешь классом на .film-title */
.font-modak     { font-family: 'Modak', 'Ovo', sans-serif; }
.font-blaka     { font-family: 'Blaka', 'Ovo', sans-serif; }
.font-orbitron  { font-family: 'Orbitron', 'Ovo', sans-serif; font-weight: 800; letter-spacing: 0.01em; }
.font-jost      { font-family: 'Jost', 'Ovo', sans-serif; font-weight: 700; font-style: normal; letter-spacing: -0.005em; }
.font-romanesco { font-family: 'Romanesco', 'Ovo', cursive; font-weight: 400; letter-spacing: 0; }
/* per-project display fonts — заголовки эпизодов 9–16 */
.font-sedan      { font-family: 'Sedan SC', serif; font-weight: 400; }
.font-cinzel     { font-family: 'Cinzel', serif; font-weight: 700; }
.font-xmas       { font-family: 'Mountains of Christmas', system-ui, cursive; font-weight: 700; }
.font-swanky     { font-family: 'Swanky and Moo Moo', system-ui, cursive; font-weight: 400; }
.font-oi         { font-family: 'Oi', system-ui, cursive; font-weight: 400; }
.font-vt323      { font-family: 'VT323', ui-monospace, monospace; font-weight: 400; }
.font-pirata     { font-family: 'Pirata One', system-ui, cursive; font-weight: 400; }
.font-montserrat { font-family: 'Montserrat', sans-serif; font-weight: 800; }

.cinema-tagline {
  font-family: 'Benne', Georgia, serif;
  font-weight: 400;
  font-size: clamp(20px, 1.4vw, 25px);
  line-height: 1.45;
  color: rgba(255,255,255,0.88);
  max-width: 56ch;
  margin-top: 4px;
}

/* ---------- stats: дата + счётчик слайдов, тонко и крупно ---------- */
.cinema-stats {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 0;
  font-family: 'Benne', serif;
  font-weight: 400;
  font-size: clamp(20px, 1.4vw, 25px);
  line-height: 1.45;
  color: rgb(255 255 255 / 45%);
}

/* дата и количество слайдов: разделитель "/" с пробелом с каждой стороны, без отступа */
.stat-date::after { content: "\00A0/\00A0"; }

/* ---------- весь hero — кликабельная ссылка на эпизод ---------- */
.cinema-hero__link {
  position: absolute;
  inset: 0;
  z-index: 3;
  cursor: pointer;
  /* пустая ссылка-оверлей — текст под ней остаётся читаемым */
}

/* ---------- вариант hero на странице эпизода:
              центрированный title + tagline + meta на чёрной нижней
              половине слайда, стиль киношного постера ---------- */
.cinema-hero--center .cinema-hero__marquee {
  justify-content: flex-end;   /* контент по низу hero — без пустой нижней половины */
  align-items: center;
  text-align: center;
  max-width: 100%;
  padding: 40px 48px 64px;
  gap: 30px;             /* как на главной — одинаковые отступы между строками */
}
.cinema-hero--center .film-title {
  max-width: 80vw;
  white-space: normal;       /* можно перенос если длинное название */
  overflow: visible;
  text-overflow: clip;
  color: #df0611;
  /* glow управляется ползунками в .tuner (glow); финал захардкодим */
  --glow-r: 40px;
  --glow-a: 1;
  text-shadow:
    0 0 var(--glow-r)              rgba(223, 6, 17, calc(0.22 * var(--glow-a))),
    0 0 calc(var(--glow-r) * 2.75) rgba(223, 6, 17, calc(0.14 * var(--glow-a))),
    0 0 calc(var(--glow-r) * 5)    rgba(223, 6, 17, calc(0.08 * var(--glow-a)));
}

/* Эпизод 2 — жёлтый Orbitron, жёлтый glow вместо красного.
   Шрифт визуально шире Blaka, поэтому уменьшаем кегль ~75%. */
.cinema-hero--center .film-title.font-orbitron {
  color: #fde305;
  font-size: clamp(34px, 5.3vw, 96px);
  text-shadow:
    0 0 var(--glow-r)              rgba(253, 227, 5, calc(0.22 * var(--glow-a))),
    0 0 calc(var(--glow-r) * 2.75) rgba(253, 227, 5, calc(0.14 * var(--glow-a))),
    0 0 calc(var(--glow-r) * 5)    rgba(253, 227, 5, calc(0.08 * var(--glow-a)));
}

/* Эпизод 3 — белый Jost (обычный), жёсткая чёрная тень вниз.
   Жирный Jost визуально крупнее Blaka — уменьшаем кегль ~75%. */
.cinema-hero--center .film-title.font-jost {
  color: #fff;
  font-size: clamp(34px, 5.3vw, 96px);
  text-transform: none;            /* mixed-case, как на скрине */
  /* жёсткая чёрная тень (без блюра): сдвиг ВНИЗ + растяжка В БОКА */
  text-shadow:
     0       0.12em 0 #000,
     0.045em 0.12em 0 #000,
    -0.045em 0.12em 0 #000;
}

/* Проект 0 — Summer Demo Day: рукописный Romanesco, жёлтый, без капса.
   Действует и на главной (.cinema-hero), и на странице эпизода (--center). */
.film-title.font-romanesco {
  text-transform: none;       /* без капса */
  white-space: normal;        /* может переноситься, не обрезается */
  overflow: visible;
  max-width: 90vw;
}
.cinema-hero .film-title.font-romanesco,
.cinema-hero--center .film-title.font-romanesco {
  color: #FBFE1E;
  font-size: clamp(52px, 8.5vw, 140px);
  line-height: 1.1;
  text-shadow: 0 2px 22px rgba(0,0,0,0.5);  /* мягкая тень для читаемости поверх обложки */
}

/* Логотип проекта вместо текстового заголовка в hero (проекты 0–5).
   Ставится прямым <img class="film-logo"> в .cinema-hero__marquee. */
.film-logo {
  display: block;
  width: auto;
  max-width: min(90vw, 600px);
  margin-bottom: 27px;   /* зазор лого → название на hero главной (под лого new2) */
  object-fit: contain;
  filter: drop-shadow(0 2px 18px rgba(0,0,0,0.5));  /* читаемость поверх обложки */
}

/* Логотип hero ГЛАВНОЙ на КОРОТКИХ/ландшафтных экранах (планшеты типа 1024×600):
   ограничиваем по высоте вьюпорта, иначе лого занимает пол-экрана. На высоких
   экранах (1080p+/4K) ведущим остаётся max-width 600px — вид не меняется. */
/* Жёсткий кап ширины лого главной: НИКОГДА не шире 50% экрана (все кейсы/устройства),
   с якорем на левый край (align-items:stretch иначе центрировал бы уменьшенный лого). */
.home .film-logo { max-width: min(50vw, 600px); align-self: flex-start; }
@media (max-height: 760px) {
  .home .film-logo { max-height: 42vh; margin-bottom: 16px; align-self: flex-start; }
}
@media (max-height: 620px) {
  .home .film-logo { max-height: 34vh; margin-bottom: 10px; align-self: flex-start; }
}
@media (max-height: 460px) {
  .home .film-logo { max-height: 30vh; margin-bottom: 6px; align-self: flex-start; }
}

/* На СТРАНИЦЕ ЭПИЗОДА (--center) — единый ФРЕЙМ для логотипа: фикс-бокс, в
   который логотип любого проекта вписывается (object-fit: contain), поэтому
   высота одинаковая независимо от пропорций исходника. Эталон — проект 0,
   чуть меньше прежнего (было ~424px). Прижат к низу фрейма, чтобы зазор до
   подзаголовка был стабильным. margin:0 убирает прежнее налезание (-72px).
   На главной (.cinema-hero без --center) логотип НЕ меняется. */
.cinema-hero--center .film-logo {
  width: min(67vw, 436px);
  height: clamp(160px, 40vh, 280px);
  max-width: none;
  object-fit: contain;
  object-position: center bottom;
  margin: 0;
}
/* Заголовки проектов со своим шрифтом (эпизоды 9–16): без капса, перенос
   разрешён, цвет задаётся inline на <h1>, красный glow центрального hero
   убран, добавлена мягкая тень для читаемости поверх обложки. */
.cinema-hero .film-title.proj-title,
.cinema-hero--center .film-title.proj-title {
  text-transform: none;
  white-space: normal;
  overflow: visible;
  max-width: 90vw;
  line-height: 1.1;
  text-shadow: 0 2px 22px rgba(0,0,0,0.55);
}
.cinema-hero--center .cinema-tagline {
  text-align: center;
  max-width: 56ch;
  margin-right: 10px;
}
.cinema-hero--center .cinema-stats {
  justify-content: center;
  text-align: center;
}

/* Затухание обложки episode-hero: плавная smoothstep-кривая (старт 25% → чёрный 62%),
   многоступенчатая — без жёсткого скачка и видимого бандинга. Правится дев-панелью. */
.cinema-hero--center::before {
  background: var(--hero-grad, linear-gradient(180deg,
    rgba(0,0,0,0.000) 0%,
    rgba(0,0,0,0.000) 25%,
    rgba(0,0,0,0.015) 29.5%,
    rgba(0,0,0,0.055) 34.0%,
    rgba(0,0,0,0.118) 38.5%,
    rgba(0,0,0,0.198) 43.0%,
    rgba(0,0,0,0.292) 47.5%,
    rgba(0,0,0,0.394) 52.0%,
    rgba(0,0,0,0.500) 56.5%,
    rgba(0,0,0,0.606) 61.0%,
    rgba(0,0,0,0.708) 65.5%,
    rgba(0,0,0,0.802) 70.0%,
    rgba(0,0,0,0.882) 74.5%,
    rgba(0,0,0,0.945) 79.0%,
    rgba(0,0,0,0.985) 83.5%,
    rgba(0,0,0,1.000) 88%,
    rgba(0,0,0,1.000) 100%
  ));
}

/* временная панель ползунков — открывается через ?tune в URL */
.tuner {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 9999;
  background: rgba(0,0,0,0.85);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  padding: 12px 14px;
  font: 12px/1.4 ui-monospace, Menlo, monospace;
  width: 280px;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tuner h4 {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin: 0 0 4px;
}
.tuner label {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 8px;
  align-items: center;
  font-size: 11px;
}
.tuner label .val { color: #ffcb47; font-weight: 600; }
.tuner input[type="range"] {
  grid-column: 1 / -1;
  width: 100%;
  accent-color: #ffcb47;
}
.tuner pre {
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  padding: 6px 8px;
  margin: 4px 0 0;
  font-size: 11px;
  white-space: pre-wrap;
  word-break: break-all;
  user-select: all;
}
.tuner button {
  appearance: none;
  border: 0;
  background: #ffcb47;
  color: #000;
  font: inherit;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
}

/* ============================================================
   LINEUP — секция с карточками. Геометрия карточек не меняется.
   ============================================================ */

.lineup {
  background: #000000;
  /* верхний отступ теперь даёт отдельный .intro-section над секцией */
  padding: 0 48px 120px;
}

/* интро-текст вынесен в самостоятельный блок: симметричные отступы
   сверху/снизу (150px — тот же, что раньше давал .lineup сверху) */
.intro-section {
  background: #000000;
  /* симметричные отступы: низ = верх = 225px */
  padding: 225px 48px 225px;
  /* ШОВ НА СТЫКЕ hero → intro. Высота hero дробная (calc(100svh / 0.9) при
     zoom:0.9), поэтому его нижняя граница попадает на пол-пикселя. Слои кавера
     (__bg/__obj/__shapes) вынесены в композиторные слои (will-change+translate3d
     от параллакса), и их клип по overflow:hidden округляется до целого пикселя —
     на пиксель НИЖЕ, чем заканчивается затемняющий градиент ::before. В этот ряд
     проступает картинка кавера → светлая волосяная линия во всю ширину.
     Перекрываем стык: секция получает свой слой (hero — position:relative, иначе
     он рисовался бы поверх) и подтягивается на --seam-overlap. Нижние ~4% hero
     и так сплошной чёрный, потери не видно.
     Тот же баг на страницах эпизодов лечится нахлёстом фейда
     (.cinema-hero--center::before, см. ниже); на 2025/2026 hero нет — там шва
     не возникает. */
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * var(--seam-overlap, 3px));
}

.lineup__header {
  width: 100%;
  margin: 0 0 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lineup__title {
  font-family: 'Benne', Georgia, serif;
  font-weight: 400;
  padding-bottom: 40px;
  font-size: clamp(20px, 11.8vw, 200px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #fff;
}

/* интро-текст под hero — две текстовых колонки + логотип третьей колонкой
   справа (как в макете Figma). Свободный межстрочный интервал ≈1.95. */
.intro {
  max-width: none;
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 48px;
  color: rgb(202 202 202 / 92%);   /* основной текст intro — серый */
  font-size: clamp(18px, 1.5vw, 24px);
  line-height: 1.95;
}
/* две колонки: общая ширина = ширине глифов «More episodes»
   (текст 11.8vw → ≈74vw, тот же потолок 200px → 1254px) */
.intro__text {
  width: min(74vw, 1254px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
.intro__col { min-width: 0; }
.intro p { margin: 0 0 1.1em; }
.intro p:last-child { margin-bottom: 0; }

/* «MDT is EMCD’s marketing design team» — начало абзаца, белым выделением
   (остальной текст intro — серый). Инлайн-фрагмент. */
.intro__lead {
  color: #fff;
}

/* логотип — третья колонка справа от текста (как в макете Figma, ~329×192) */
.intro__col--logo {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
}
.intro__logo {
  width: clamp(160px, 18vw, 330px);
  height: auto;
}

/* ============================================================
   ГАЛЕРЕЯ
   Без скруглений. Строки по 60vw ширины.
   ============================================================ */

.gallery {
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}

.gallery-row {
  width: 100%;
  display: flex;
  gap: 24px;
}

.gallery-row.row-2 .card { flex: 1 1 0; min-width: 0; }
.gallery-row.row-1 .card { flex: 1 1 100%; min-width: 0; }

.card { display: block; }

.thumb-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: 12px;
}

.thumb {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: var(--img);
  background-size: cover;
  background-position: center;
  background-color: #eaeaea;
  overflow: hidden;
  border-radius: 5px;
  z-index: 2;
}
/* BLUR-UP плитки: фон .thumb = крошечное превью (ставит JS), а полный кадр —
   этот слой, плавно проявляется поверх превью после загрузки (.is-loaded). */
.thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--full);
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 450ms ease;
}
.thumb.is-loaded::after { opacity: 1; }

.thumb-bg { display: none; }

.card-title,
.card-desc {
  /* шрифт и размер = боди-текст интро (Benne 400, есть только одно
     начертание — faux-bold от 600 искажал шрифт) */
  font-family: 'Benne', Georgia, serif;
  font-size: clamp(18px, 1.5vw, 24px);
  font-weight: 400;
  line-height: 1.4;
  display: inline;
  margin: 0;
  letter-spacing: 0;
}
.card-title {
  color: #fff;
  text-transform: none;        /* заголовки — натуральный регистр (с большой буквы) */
}
.card-desc {
  font-weight: 400;
  color: #b8b8b8;
  text-transform: lowercase;   /* описания — с маленькой буквы */
}
.card-desc::before {
  content: ' — ';
  color: #b8b8b8;
}
/* аббревиатуры (MDT и т.п.) остаются ЗАГЛАВНЫМИ даже в lowercase-описаниях */
.card-desc .upper { text-transform: uppercase; }
/* hover карточки — превью плавно становится ярче (GPU, без перерисовок) */
.thumb { transition: filter 220ms ease; }
.card:hover .thumb { filter: brightness(1.13); }

.watch-cue { position: absolute; height: auto; z-index: 4; }
/* header главной (watch_main): в нижнем правом углу с отступами, ЗЕРКАЛЬНЫМИ блоку
   лого/названия (marquee: слева 36px, снизу 64px). Точка опоры — правый нижний
   угол; при наведении НА НЕГО плавно увеличивается (угол на месте). Крупнее. */
.watch-cue--main {
  right: 36px;
  bottom: 64px;
  width: clamp(200px, 16vw, 290px);
  transform-origin: right bottom;
  pointer-events: auto;        /* ловит ховер на самой иконке */
  transition: transform 320ms cubic-bezier(.2, .7, .15, 1);
}
.watch-cue--main:hover { transform: scale(1.2); }
/* плитки галереи (watch_white): по ЦЕНТРУ фрейма; скрыт, при наведении на карточку
   — появляется и плавно увеличивается из центра. */
.watch-cue--gallery {
  top: 50%; left: 50%;
  width: clamp(120px, 14vw, 200px);
  transform: translate(-50%, -50%) scale(0.9);   /* старт ближе к 1 → scale менее заметен */
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease, transform 180ms cubic-bezier(.2, .7, .15, 1);  /* быстрее */
}
.card:hover .watch-cue--gallery,
.card:focus-visible .watch-cue--gallery {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
@media (max-width: 900px) {
  .watch-cue--main { right: 20px; bottom: 56px; }   /* = marquee на ≤900px */
}
@media (prefers-reduced-motion: reduce) {
  .watch-cue--gallery { transition: opacity 300ms ease; transform: translate(-50%, -50%); }
  .watch-cue--main:hover { transform: none; }
}

/* ============================================================
   EPISODE PAGE
   Hero — единый стиль с главной (cinema-hero + --center).
   Ниже идут слайды презентации со 2-го по последний.
   ============================================================ */

.episode-page { background: var(--page-bg, #000); }

/* Слайды презентации, чёрный фон, без скруглений */
.episode-slides {
  background: #000;
  /* блок hero (лого+текст+дата+кнопка) выше; здесь — отступ до презентации + бока 48px */
  padding: 180px 48px 120px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 60px;
}

.slide {
  width: min(1280px, 86vw);
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: #111;
  overflow: hidden;
}

/* Слайды из PDF, отрендеренные PDF.js в canvas.
   Каждый слайд высотой 80vh, ширина пропорциональна — масштабируется CSS. */
.pdf-slide {
  display: block;
  width: 100%;          /* на всю ширину контент-окна (внутри паддингов) */
  height: auto;
  background: #111;
  border-radius: 10px;
}
/* обёртка слайда + лейбл loading (виден, пока слайд не загрузился, поверх blur-заглушки) */
.pdf-frame { position: relative; display: block; }
.pdf-load {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: clamp(90px, 22vw, 130px); height: auto; z-index: 2;
  opacity: 0; visibility: hidden; transition: opacity 200ms ease; pointer-events: none;
}
.pdf-frame.is-near:has(.pdf-slide:not(.is-loaded)) .pdf-load { opacity: 1; visibility: visible; }

/* дев-панель сдвига шапки проекта (Ctrl+`) */
#herox-panel {
  position: fixed; top: 12px; right: 12px; z-index: 99999; width: 250px;
  background: rgba(18,18,20,.95); color: #eee; font: 12px/1.4 ui-monospace, Menlo, Consolas, monospace;
  border: 1px solid rgba(255,255,255,.15); border-radius: 10px; padding: 12px 14px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
#herox-panel .hx-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
#herox-panel .hx-top b { color: #fff; font-size: 12px; }
#herox-panel .hx-row { display: flex; align-items: center; gap: 8px; }
#herox-panel input[type=range] { flex: 1; min-width: 0; }
#herox-panel .hx-v { flex: 0 0 48px; text-align: right; color: #fff; }
#herox-panel .hx-hint { color: #8ecbff; font-size: 11px; margin: 7px 0 2px; }
#herox-panel button { font: inherit; cursor: pointer; border-radius: 6px; border: 1px solid rgba(255,255,255,.2); background: #2a2a30; color: #fff; padding: 5px 9px; }
#herox-panel button:hover { background: #3a3a44; }
#herox-panel .hx-x { padding: 2px 8px; }
#herox-panel .hx-copy { margin-top: 8px; }
#herox-panel .hx-out { margin-top: 7px; color: #9f9; font-size: 11px; word-break: break-all; }
/* BLUR-UP: если у слайда есть превью (.lqip) — показываем его размытым фоном
   (мгновенно, из манифеста), полный кадр проявляется сверху сам при загрузке.
   Габариты заданы атрибутами width/height — позиция/высота не прыгают. */
.pdf-slide.lqip {
  background-size: cover;
  background-position: center;
}
/* СКЕЛЕТ-ЗАГРУЗКА (запасной вариант, если превью нет): бегущая «волна». */
.pdf-slide:not(.is-loaded):not(.lqip) {
  background-color: #161616;
  background-image: linear-gradient(100deg,
    rgba(255,255,255,0)    20%,
    rgba(255,255,255,0.07) 42%,
    rgba(255,255,255,0.07) 58%,
    rgba(255,255,255,0)    80%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: slide-skeleton 1.5s linear infinite;
}
@keyframes slide-skeleton {
  0%   { background-position: 150% 0; }
  100% { background-position: -50% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pdf-slide:not(.is-loaded):not(.lqip) { animation: none; }
}

/* ---------- кнопка + режим презентации (страницы проектов) ---------- */
.episode-present-bar {
  background: #000;
  padding: 40px 48px 20px;   /* 40px от hero сверху, 20px до первого слайда */
  display: flex;
  justify-content: center;
}
/* блок под лого: текст (таглайн + дата/слайды), под ним — кнопка презентации.
   Колонка на ВСЕХ страницах проектов (раньше была строка только на мобиле). */
.marquee-cta {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;                /* отступ кнопки от подзаголовка/даты */
}
.marquee-cta__text {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  flex-direction: row;
}
/* кнопка Play — графика watch_episode.svg; жёлтый фон перекрашен в акцент проекта */
.present-btn {
  flex: 0 0 auto;
  display: inline-block;
  width: clamp(210px, 18vw, 300px);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  line-height: 0;
  transition: transform 160ms ease, filter 160ms ease;
}
.present-btn svg { display: block; width: 100%; height: auto; }
.present-btn:hover  { filter: brightness(1.06); }
.present-btn:active { transform: scale(0.97); }
/* кнопка «Open presentation» в шапке ГЛАВНОЙ — только мобайл (см. @media 600px) */
.present-btn--home { display: none; }

/* НАВБАР проекта: previous + next ПО ЦЕНТРУ навбара (фикс); листать можно из любой
   точки. При долгом наведении снизу выезжает превью обложки целевого эпизода. */
.site-nav__switch {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.2vw, 18px);
}
.proj-nav-btn {
  position: relative;            /* якорь для превью */
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: transform 140ms ease, filter 140ms ease;
}
.proj-nav-btn__icon {
  display: block;
  height: clamp(28px, 2.4vw, 36px);
  width: auto;
}
.proj-nav-btn:hover  { filter: brightness(1.18); }
.proj-nav-btn:active { transform: scale(0.95); }
/* превью обложки целевого эпизода — под кнопкой, по долгому ховеру */
.proj-nav-preview {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  width: clamp(170px, 17vw, 250px);
  padding: 5px;
  background: var(--ctrl-glass);
  border: 0;
  border-radius: 10px;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 20;
}
.proj-nav-preview img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
  background: #222;
}
.proj-nav-btn.show-preview .proj-nav-preview {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* полноэкранный показ слайдов */
.present {
  position: fixed;
  inset: 0;
  zoom: calc(1 / var(--zoom, 1));   /* отменяем zoom — презентация во весь реальный экран */
  z-index: 5000;        /* выше кастомного скроллбара (4000) */
  background: #050505;
  opacity: 0;
  visibility: hidden;
  transition: opacity 380ms ease, visibility 380ms;
}
.present.is-open { opacity: 1; visibility: visible; }
.present:fullscreen { background: #050505; }
.present__stage {
  position: absolute;
  inset: 0;
  overflow: hidden;                                        /* трек с соседними кадрами обрезается по краям сцены */
  padding: clamp(56px, 7vh, 96px) clamp(28px, 5vw, 80px);  /* фулл, но средний отступ от краёв/контролов */
  box-sizing: border-box;
}
/* карусель: трек из 3 ячеек (пред/текущий/след), центрирован на средней (translateX -100%) */
.present__track {
  display: flex;
  width: 100%; height: 100%;
  transform: translate3d(-100%, 0, 0);
  will-change: transform;
}
.present__cell {
  flex: 0 0 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.present__img {
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1920 / 1080;          /* 16:9-бокс есть ДО загрузки → видно blur-заглушку */
  object-fit: cover;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  border-radius: 10px;
  box-shadow: 0 24px 90px rgba(0,0,0,0.6);
  transform: scale(0.92);
  opacity: 0;
  transition: transform 460ms cubic-bezier(.2,.7,.15,1), opacity 360ms ease;
  will-change: transform;          /* свайп идёт на GPU-слое — без рывков от box-shadow */
}
.present.is-open .present__img { transform: scale(1); opacity: 1; }
/* видео-слайд в режиме презентации (проигрывается) */
.present__media {
  display: none;                 /* показываем только на видео-кадрах (через JS) */
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1920 / 1080;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 24px 90px rgba(0,0,0,0.6);
  background-size: cover; background-position: center; background-repeat: no-repeat;  /* blur-заглушка */
  will-change: transform;        /* свайп на GPU-слое — плавно */
}
/* лейбл loading.svg — пока кадр не загрузился (свайп без лагов) */
.present__loading {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(96px, 16vw, 150px); height: auto;
  opacity: 0; visibility: hidden;
  transition: opacity 160ms ease;
  pointer-events: none; z-index: 2;
}
.present__stage.is-loading .present__loading { opacity: 1; visibility: visible; }

.present__close {
  position: absolute;
  top: 22px; right: 26px;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1;
  color: #fff;
  background: var(--ctrl-glass);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: background 160ms ease;
}
.present__close:hover { background: var(--ctrl-glass-hover); }

.present__controls {
  position: absolute;
  bottom: 30px; left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px;   /* две отдельные плашки */
}
/* общий вид плашки — без обводки */
.present__pill {
  display: flex; align-items: center;
  min-height: 46px;
  box-sizing: border-box;
  background: var(--ctrl-glass);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.present__pill--bar   { padding: 0 6px; }
.present__pill--count { padding: 0 8px; gap: 2px; }

.present__nav {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  background: none; border: 0; border-radius: 50%;
  cursor: pointer;
  transition: background 140ms ease;
}
.present__nav:hover { background: rgba(255,255,255,0.16); }
.present__nav svg { width: 21px; height: 21px; }
.present__counter {
  min-width: 72px;
  text-align: center;
  font-family: 'Benne', Georgia, serif;
  font-size: 20px;                 /* чуть больше */
  color: rgba(255,255,255,0.92);
  font-variant-numeric: tabular-nums;
}

/* авто-скрытие интерфейса презентации: видно при движении мыши, прячется в простое.
   Класс .is-active вешает JS на mousemove и снимает по таймеру (на тач — всегда активно). */
.present__controls, .present__close {
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
}
.present.is-active .present__controls,
.present.is-active .present__close {
  opacity: 1;
  pointer-events: auto;
}
.present.is-open:not(.is-active) { cursor: none; }   /* в простое прячем и курсор */

/* ---------- инлайн-навигация по слайдам на странице проекта ---------- */
.slides-nav {
  position: fixed;
  bottom: 30px; left: 50%;                /* как .present__controls */
  transform: translateX(-50%);
  z-index: 1500;
  display: flex; align-items: center; gap: 12px;   /* две отдельные плашки */
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease;
}
.slides-nav.is-visible { opacity: 1; pointer-events: auto; }
/* плашка — без обводки */
.slides-nav__pill {
  display: flex; align-items: center;
  min-height: 46px;
  box-sizing: border-box;
  background: var(--ctrl-glass);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.slides-nav__pill--bar   { padding: 0 6px; }
.slides-nav__pill--count { padding: 0 8px; gap: 2px; }

.slides-nav__btn {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  background: none; border: 0; border-radius: 50%;
  cursor: pointer; transition: background 140ms ease;
}
.slides-nav__btn:hover { background: rgba(255,255,255,0.16); }
.slides-nav__btn svg { width: 21px; height: 21px; }
.slides-nav__counter {
  min-width: 72px; text-align: center;
  font-family: 'Benne', Georgia, serif; font-size: 20px;   /* чуть больше */
  color: rgba(255,255,255,0.92); font-variant-numeric: tabular-nums;
}

/* прогресс-бар быстрой навигации (клик/тяни → к любому слайду) */
.present__bar, .slides-nav__bar {
  position: relative;
  width: 160px; height: 5px;
  margin: 0 6px;
  flex: 0 0 auto;
  background: rgba(255,255,255,0.22);
  border-radius: 999px;
  cursor: pointer;
}
/* обёртка обрезает заливки по форме полосы — нет переполнения скруглений */
.present__bar-track, .slides-nav__bar-track {
  position: absolute; inset: 0;
  border-radius: 999px;
  overflow: hidden;
  pointer-events: none;
}
.present__bar-fill, .slides-nav__fill {
  position: absolute;
  left: 0; top: 0; height: 100%;
  width: 0%;
  background: #c6c7cc;              /* залитая часть — светло-серая (кругляш-точка остаётся белым) */
  border-radius: 0;                 /* прямые края — скругление даёт обёртка */
  pointer-events: none;
  transition: width 120ms ease, height 120ms ease;   /* синхронно с точкой; height — для вертикали */
}
/* зона клика/наведения = вся высота плашки */
.present__bar::before, .slides-nav__bar::before {
  content: ''; position: absolute; left: 0; right: 0; top: -5px; bottom: -5px;
}
/* в режиме презентации — высокая полоса во всю плашку с минимальным отступом */
.present__pill--bar .present__bar {
  width: clamp(260px, 44vw, 640px);   /* намного длиннее */
  height: 36px; margin: 0;            /* и чуть тоньше */
}
/* серая заливка при наведении (до курсора) — под белой, обрезается обёрткой */
.present__bar-hover {
  position: absolute; left: 0; top: 0; height: 100%;
  width: 0;
  background: rgba(160,160,165,0.9);
  border-radius: 999px;             /* скруглённый конец — показывает место будущей точки */
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease;
}
.present__bar.is-hover .present__bar-hover { opacity: 1; }
.present__bar-thumb {
  position: absolute; top: 50%; left: 0;
  width: 36px; height: 36px;          /* точка во всю высоту полосы */
  background: #fff;                   /* заливка, без обводки */
  border: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: left 120ms ease, top 120ms ease;   /* top — для вертикального бара */
}
.present__bar.is-drag { cursor: grabbing; }
.present__bar.is-drag .present__bar-thumb,
.present__bar.is-drag .present__bar-fill { transition: none; }

/* мини-окошко с превью слайда под курсором (только миниатюра) */
.present__preview {
  position: absolute;
  bottom: calc(100% + 16px);
  left: 0;
  transform: translateX(-50%);
  width: 240px;
  padding: 5px;
  background: var(--ctrl-glass);
  border: 0;
  border-radius: 10px;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 38px rgba(0,0,0,0.6);
  opacity: 0; visibility: hidden;
  transition: opacity 120ms ease;
  pointer-events: none;
  z-index: 3;
}
.present__preview.is-show { opacity: 1; visibility: visible; }
.present__preview-img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  border-radius: 6px; background: #222;
  background-size: cover; background-position: center; background-repeat: no-repeat;  /* blur-заглушка */
  object-fit: cover;
}

/* такая же высокая полоса на странице проекта (slides-nav) */
.slides-nav__pill--bar .slides-nav__bar {
  width: clamp(260px, 44vw, 640px);   /* намного длиннее */
  height: 36px; margin: 0;            /* и чуть тоньше */
}
.slides-nav__hover {
  position: absolute; left: 0; top: 0; height: 100%;
  width: 0;
  background: rgba(160,160,165,0.9);
  border-radius: 999px;             /* скруглённый конец — показывает место будущей точки */
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease;
}
.slides-nav__bar.is-hover .slides-nav__hover { opacity: 1; }
.slides-nav__thumb {
  position: absolute; top: 50%; left: 0;
  width: 36px; height: 36px;          /* точка во всю высоту полосы */
  background: #fff;                   /* заливка, без обводки */
  border: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: left 120ms ease;
}
.slides-nav__bar.is-drag { cursor: grabbing; }
.slides-nav__bar.is-drag .slides-nav__thumb,
.slides-nav__bar.is-drag .slides-nav__fill { transition: none; }

/* мини-окошко с превью слайда под курсором (только миниатюра) */
.slides-nav__preview {
  position: absolute;
  bottom: calc(100% + 16px);
  left: 0;
  transform: translateX(-50%);
  width: 240px;
  padding: 5px;
  background: var(--ctrl-glass);
  border: 0;
  border-radius: 10px;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 38px rgba(0,0,0,0.6);
  opacity: 0; visibility: hidden;
  transition: opacity 120ms ease;
  pointer-events: none;
  z-index: 3;
}
.slides-nav__preview.is-show { opacity: 1; visibility: visible; }
.slides-nav__preview-img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  border-radius: 6px; background: #222;
  background-size: cover; background-position: center; background-repeat: no-repeat;  /* blur-заглушка */
  object-fit: cover;
}

/* ---------- блок «Next episode» в конце страницы проекта ---------- */
.next-ep {
  display: block;
  background: #000;
  text-decoration: none;
  color: inherit;
}
.next-ep__heading {
  margin: 0;
  padding: 96px 48px 6px;       /* меньше нижнего отступа — ниже идёт имя проекта */
  font-family: 'Benne', Georgia, serif;
  font-weight: 400;
  font-size: clamp(20px, 11.8vw, 200px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #fff;
}
/* имя следующего проекта — между «Next episode» и обложкой (как в галерее) */
.next-ep__name {
  display: block;
  padding: 0 48px 26px;
  font-family: 'Benne', Georgia, serif;
  font-size: clamp(20px, 2.2vw, 34px);
  line-height: 1.2;
  color: #fff;
}
.next-ep__cover {
  padding: 0 48px;              /* боковые стандартные отступы; снизу нет — обрезается краем */
  background: #000;
}
.next-ep__frame {
  position: relative;
  aspect-ratio: 1920 / 672;     /* ~62% обложки (чуть подняли, было 648/60%); низ обрезан */
  overflow: hidden;
  border-radius: 12px 12px 0 0; /* скругление ТОЛЬКО верхних углов */
}
.next-ep__img {
  display: block;
  width: 100%;                  /* 16:9 выше фрейма → низ обрезается */
  filter: brightness(0.62);     /* затемнена по умолчанию */
  transition: filter 220ms ease;
}
.next-ep__frame:hover .next-ep__img { filter: brightness(1.13); }   /* ярче при наведении на КАРТИНКУ (не на заголовок) */
@media (hover: none) { .next-ep__img { filter: brightness(1); } }    /* нет ховера (тач/мобайл) → картинка сразу яркая */
/* при ховере с десктопа — иконка watch_gallery по центру видимой области (как в галерее) */
.next-ep__frame:hover .watch-cue--gallery { opacity: 1; transform: translate(-50%, -50%) scale(1); }
/* описание после имени — дата + кол-во страниц, серым, через тире (как на главной) */
.next-ep__desc { color: #b8b8b8; }
.next-ep__desc::before { content: ' — '; color: #b8b8b8; }

/* ============================================================
   FOOTER — только на главной, в самом низу
   ============================================================ */
.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  padding: 56px 48px;
  background: #000;
  font-family: 'Benne', Georgia, serif;
  font-size: clamp(18px, 1.5vw, 24px);   /* = боди-текст интро */
  line-height: 1.4;
}
.site-footer__left {
  display: flex;
  align-items: baseline;
  gap: 44px;
  flex-wrap: wrap;
  min-width: 0;
}
.site-footer__copy { color: rgb(202 202 202 / 92%); }
.site-footer__links { display: flex; gap: 28px; }
.site-footer__links a {
  color: #fff;
  text-decoration: none;
}
.site-footer__links a:hover { text-decoration: underline; }
.site-footer__logo {
  flex: 0 0 auto;
  width: 120px;                /* = лого в шапке (.site-nav__logo .logo-wrap) */
  height: auto;
}
/* лого в подвале — кликабельная ссылка на главную (как лого в шапке) */
.site-footer__logo-link {
  flex: 0 0 auto;
  display: inline-flex;
  line-height: 0;              /* без инлайн-зазора под картинкой */
}
.site-footer__logo-link .site-footer__logo { width: 120px; }

/* === Позиция контента проекта (по умолчанию -530px сдвиг / 270px раскрытие; правится Ctrl+` ползунком) ===
   hero-блок (лого/название/дата/слайды/кнопка) сдвигается transform'ом ВНУТРИ hero;
   слайды — настоящим margin-top (без пустоты внизу) и подняты НАД обложкой (z-index),
   иначе первый слайд режется слоем hero. Next episode едет за слайдами сам. */
.cinema-hero--center .cinema-hero__marquee {
  transform: translateY(calc(var(--proj-shift, -545px) + var(--cover-reveal, 260px)));
}
.episode-page .episode-slides {
  margin-top: calc(var(--proj-shift, -545px) + var(--cover-reveal, 260px));
  position: relative;
  z-index: 5;
}
/* Низ чёрного фейда ПРИВЯЗАН к верху секции слайдов (а не к низу hero).
   Секция слайдов поднята отрицательным margin = (proj-shift + cover-reveal),
   поэтому ставим низ градиента на тот же офсет над низом hero. Тогда чёрный
   конец фейда ВСЕГДА упирается в чёрную секцию слайдов и двигается ВМЕСТЕ с ней
   при изменении высоты окна — без жёсткой границы. height = высота фейда. */
.cinema-hero--center::before {
  top: auto;
  height: 100vh;     /* fallback */
  height: 100svh;    /* СТАБИЛЬНО — не дёргается при скролле */
  /* −var(--seam-overlap): фейд заходит на пару пикселей НИЖЕ верхнего края
     .episode-slides. Иначе низ фейда и верх секции слайдов совпадают ровно,
     а под zoom:0.9 эта граница попадает на дробный пиксель — сглаженный ряд
     подмешивает то, что за секцией, а там уже НЕ затемнённая обложка, и на
     стыке проступает светлая волосяная линия во всю ширину (тот же баг, что
     был на главной под hero). С нахлёстом за краем секции сплошной чёрный
     хвост фейда — сглаживание чёрного по чёрному не видно. */
  bottom: calc(-1 * (var(--proj-shift, -545px) + var(--cover-reveal, 260px)) - var(--seam-overlap, 3px));
  transform: none;
}
/* === КОРОТКАЯ ВЫСОТА вьюпорта на странице эпизода ===
   Шапка (лого/текст/кнопка) целиком видна у низа, первый слайд подтянут так,
   что его ВЕРХ всегда выглядывает (подсказка «скроллить вниз»). Позицию контента
   (transform) и слайда (margin) РАЗВЯЗЫВАЕМ: контент — у низа шапки, слайд — с
   небольшим «выглядыванием»; фейд (::before) привязан к верху слайда.
   gap = padding-bottom + translate − |margin| (небольшой зазор кнопка→слайд). */
/* Значения в vh (масштабируются с высотой): контент опускаем ближе к слайду
   (но выше его — слайд z-index:5 перекрыл бы контент), слайд подтягиваем так,
   чтобы верх выглядывал; фейд (::before) привязан к верху слайда (bottom = -margin). */
@media (max-height: 820px) {
  .cinema-hero--center .film-logo { height: clamp(84px, 22vh, 200px); }
  .cinema-hero--center .cinema-hero__marquee { transform: translateY(-19vh); gap: 2.2vh; padding-bottom: 4vh; }
  .episode-page .episode-slides { margin-top: -20vh; }
  .cinema-hero--center::before { bottom: calc(20vh - var(--seam-overlap, 3px)); }
}
@media (max-height: 470px) {
  .cinema-hero--center .film-logo { height: clamp(58px, 18vh, 110px); }
  .cinema-hero--center .cinema-hero__marquee { transform: translateY(-15vh); gap: 1.4vh; padding-bottom: 2.5vh; }
  .episode-page .episode-slides { margin-top: -16vh; }
  .cinema-hero--center::before { bottom: calc(16vh - var(--seam-overlap, 3px)); }
}

.proj-tuner {
  position: fixed;
  left: 16px; bottom: 16px;
  z-index: 6000;
  display: none;
  flex-direction: column;
  gap: 10px;
  width: 250px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 14px 16px;
  background: rgba(16,16,18,0.92);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 10px;
  color: #fff;
  font: 12px/1.4 ui-monospace, 'Cascadia Mono', monospace;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.proj-tuner.is-open { display: flex; }
.proj-tuner__row { display: flex; flex-direction: column; gap: 6px; }
.proj-tuner label { display: flex; justify-content: space-between; color: #9ecbff; }
.proj-tuner input[type=range] { width: 100%; accent-color: #ffcb47; }
.proj-tuner button {
  align-self: flex-start;
  padding: 5px 12px;
  background: #ffcb47; color: #000; border: 0; border-radius: 6px;
  font: inherit; font-weight: 700; cursor: pointer;
}
/* заголовок секции внутри панели */
.proj-tuner__h {
  margin-top: 4px;
  color: #9ecbff; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; font-size: 11px;
}
/* кнопка-переключатель градиента (вкл/выкл) */
.proj-tuner button.proj-tuner__toggle {
  padding: 4px 11px; font-weight: 600;
  background: #2a2a30; color: #fff;
  border: 1px solid rgba(255,255,255,.25);
}
.proj-tuner button.proj-tuner__toggle.is-on { background: #ffcb47; color: #000; border-color: #ffcb47; }
.proj-tuner__btns { display: flex; gap: 8px; }
.proj-tuner__row--color label { align-items: center; }
.proj-tuner input[type=color] {
  width: 42px; height: 22px; padding: 0; cursor: pointer;
  border: 1px solid rgba(255,255,255,.25); border-radius: 5px; background: none;
}
.proj-tuner__out {
  width: 100%; height: 76px; resize: vertical;
  background: #0e0e10; color: #9f9;
  border: 1px solid rgba(255,255,255,.15); border-radius: 6px;
  font: 11px/1.35 ui-monospace, monospace; padding: 6px;
}

.pdf-loading {
  color: rgba(255, 255, 255, 0.6);
  font-family: 'Benne', Georgia, serif;
  font-size: 14px;
  padding: 32px;
  letter-spacing: 0.01em;
}
.pdf-loading.pdf-error {
  color: #ff8a8a;
  text-transform: none;
  letter-spacing: 0;
  max-width: 600px;
  line-height: 1.5;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .site-nav             { padding: 16px 20px; }
  /* боковой отступ бейджей = как у интерфейса на мобиле (20px, а не 36px) */
  .cinema-hero__badges::before { left: 20px; }
  .cinema-hero__badges::after  { right: 20px; }
  .site-nav__logo .logo-wrap,
  .logo-wrap            { width: 88px; }
  .site-nav__links      { gap: 18px; }
  .cinema-hero__marquee { padding: 0 20px 56px; }
  .cinema-stats         { gap: 0; }
  /* низ = верх ВИЗУАЛЬНО: над секцией ещё 56px нижнего паддинга marquee внутри
     hero, поэтому верхний зазор = 56+56=112; компенсируем низ до 112px. */
  .intro-section        { padding: 56px 20px 112px; }
  .intro                { flex-direction: column; gap: 32px; }
  .intro__text          { width: 100%; grid-template-columns: 1fr; gap: 24px; }
  .lineup               { padding: 0 20px 80px; }
  .lineup__header       { margin-bottom: 36px; }
  .lineup__title        { padding-bottom: 0; }
  .gallery-row          { gap: 20px; }
  .gallery              { gap: 20px; }   /* на мобиле всё в один столбец → одинаковый отступ между ВСЕМИ плитками */
  .slide                { width: 94vw; }
  .episode-present-bar  { padding-left: 20px; padding-right: 20px; }
  .episode-slides       { padding-left: 20px; padding-right: 20px; }
  .pdf-slide            { width: 100%; height: auto; }
  .site-footer          { padding: 40px 20px; gap: 24px; }
  .site-footer__left    { gap: 16px 28px; }
  .site-footer__logo    { width: 88px; }   /* = лого шапки на мобильных */
}

@media (max-width: 600px) {
  .gallery-row.row-2 { flex-direction: column; }
}

/* ---------- hero soundtrack player ----------
   Минималистичный glass-pill под .cinema-stats.
   По умолчанию выключен; включается кликом на круглую кнопку.
   При is-error JS прячет весь блок (display:none). */
.hero-audio {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  padding: 6px 18px 6px 6px;
  background: rgba(20, 20, 22, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  font-family: 'Benne', serif;
  color: rgba(255, 255, 255, 0.9);
  transition: background 0.25s ease, border-color 0.25s ease;
  user-select: none;
}
.cinema-hero--center .hero-audio { align-self: center; }
.hero-audio:hover {
  background: rgba(20, 20, 22, 0.72);
  border-color: rgba(255, 255, 255, 0.28);
}
.hero-audio.is-loading { opacity: 0.55; }
.hero-audio.is-error   { display: none; }

.hero-audio__play {
  appearance: none;
  border: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  color: #0a0a0a;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: 0 0 auto;
  transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.25s ease;
}
.hero-audio__play:hover  { transform: scale(1.06); box-shadow: 0 0 0 4px rgba(255,255,255,0.08); }
.hero-audio__play:active { transform: scale(0.96); }
.hero-audio__play svg    { display: block; width: 13px; height: 13px; }
.hero-audio__icon-pause  { display: none; }
.hero-audio.is-playing .hero-audio__icon-play  { display: none; }
.hero-audio.is-playing .hero-audio__icon-pause { display: block; }

.hero-audio__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
  min-width: 0;
}
.hero-audio__title {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.95);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 28ch;
}
.hero-audio__hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.hero-audio__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.32);
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.hero-audio.is-playing .hero-audio__dot {
  background: #df0611;
  box-shadow: 0 0 8px rgba(223, 6, 17, 0.7);
  animation: hero-audio-pulse 1.6s ease-in-out infinite;
}
.hero-audio__hint-label::before { content: 'soundtrack'; }
.hero-audio.is-playing .hero-audio__hint-label::before { content: 'now playing'; }

@keyframes hero-audio-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

.hero-audio__track {
  --progress: 0%;
  width: 88px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.18);
  position: relative;
  cursor: pointer;
  flex: 0 0 auto;
}
.hero-audio__track::before {
  /* увеличенная hit-зона для клика по тонкой полоске */
  content: '';
  position: absolute;
  inset: -10px 0;
}
.hero-audio__track-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--progress);
  background: rgba(255, 255, 255, 0.9);
  border-radius: 2px;
  transition: width 0.1s linear;
}

@media (max-width: 720px) {
  .hero-audio          { gap: 10px; padding: 5px 14px 5px 5px; margin-top: 18px; }
  .hero-audio__play    { width: 32px; height: 32px; }
  .hero-audio__play svg{ width: 11px; height: 11px; }
  .hero-audio__title   { font-size: 11px; max-width: 16ch; }
  .hero-audio__hint    { font-size: 8.5px; }
  .hero-audio__track   { width: 56px; }
}

/* =========================================================
   СТРЕЛКИ БЫСТРОЙ ПРОКРУТКИ (страницы проектов) — круги в правых углах
   ========================================================= */
/* Геометрия/вид — 1:1 с угловыми стрелками презентации (.present__fly):
   тот же правый отступ, размер, фон, и позиции up/down (верх под навбаром,
   низ — НАД нижними контролами, а не в самом углу). Отличие лишь в
   position:fixed и переключателе видимости (.is-shown вместо .present.is-active). */
.scroll-fly {
  position: fixed; right: clamp(18px, 2vw, 30px); z-index: 1600;
  width: 56px; height: 104px;                 /* таблетка: выше, чем шире */
  display: flex; align-items: center; justify-content: center;
  color: #fff; background: var(--ctrl-glass);
  border: 0; border-radius: 999px; cursor: pointer;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  opacity: 0; pointer-events: none;     /* по умолчанию скрыты — появляются при скролле/тапе */
  transition: opacity 240ms ease, background 140ms ease, transform 140ms ease;
}
.scroll-fly.is-shown { opacity: 1; pointer-events: auto; }
.scroll-fly:hover  { background: var(--ctrl-glass-hover); }
.scroll-fly:active { transform: scale(0.93); }
.scroll-fly svg    { width: 26px; height: 26px; transform: rotate(90deg); }   /* иконки first/last повёрнуты на 90° по часовой */
.scroll-fly--up    { top: clamp(82px, 11vh, 132px); }      /* под навбаром */
.scroll-fly--down  { bottom: 26px; }                       /* обычный отступ снизу (угол) */

/* =========================================================
   МОБИЛЬНАЯ АДАПТАЦИЯ ПРЕЗЕНТАЦИИ И ШАПКИ ПРОЕКТА
   ========================================================= */
@media (max-width: 600px) {
  /* === КОМПАКТНАЯ ШАПКА ПРОЕКТА на телефоне ===
     лого меньше, блоки теснее (лого ↔ подзаголовок ↔ кнопка), весь блок сжат
     и опущен вниз: сверху открывается обложка, снизу виден край первого слайда. */

  /* лого компактнее десктопа (67vw×280px), но чуть крупнее прежнего ~52vw */
  .cinema-hero--center .film-logo {
    width: min(56vw, 240px);
    height: clamp(86px, 16.5vh, 132px);
  }

  /* кнопка Open presentation — на мобиле ШИРИНОЙ КАК СЛАЙД (во всю ширину контента) */
  .marquee-cta { display: flex; align-self: stretch; align-items: stretch; gap: 24px; }
  .marquee-cta__text { flex-direction: column; gap: 6px; }   /* на мобиле подзаголовок и дата — РАЗНЫМИ строками (не рядом, чтобы не переносило уродливо) */
  .cinema-hero--center .cinema-tagline { margin-right: 0; }   /* убираем правый отступ ряда — теперь столбик */
  .present-btn { width: 100%; }                          /* большая кнопка во всю ширину */
  .cinema-hero--center .cinema-stats { margin-top: 0; }  /* на мобиле без отрицательного подтяга */

  /* кнопка «Open presentation» в шапке ГЛАВНОЙ — пока СКРЫТА (понадобится позже);
     CTA на главной — бейдж watch_main в нижнем правом углу */
  .present-btn--home { display: none; }
  /* блок лого+тексты: прибит СЛЕВА, ПОДНЯТ над бейджем watch_main; отступы:
     лого → бо́льший зазор → заголовок → меньший → дата */
  .home .cinema-hero__marquee { padding: 20px 18px 190px; gap: 0px; align-items: flex-start; }
  /* отступ лого → тексты на мобиле (под лого new2) */
  .home .film-logo { margin-bottom: 5px; width: 60%; }
  .home .cinema-tagline { margin-top: 17px; }   /* отступ заголовка от лого (только главная — на проектах подзаголовок в ряд) */

  /* отступы шапки: меньше зазор лого ↔ нижний блок */
  .cinema-hero--center .cinema-hero__marquee { padding: 20px 18px 28px; gap: 10px; }
  .episode-present-bar { padding: 24px 18px 16px; }

  /* СЖАТЬ ВСЁ ВНИЗ: контент проекта (лого+текст+кнопка) опускаем ближе к низу
     hero — сверху открывается обложка, снизу заходит верхний край первого слайда.
     T = (--proj-shift + --cover-reveal): десктоп −395px, тут ≈ −140px.
     Переменные ставим на .episode-page — общий предок hero и секции слайдов:
     transform marquee, margin-top слайдов и низ градиента едут вниз синхронно. */
  .episode-page { --cover-reveal: 405px; }

  /* меньше чёрной «подушки» над первым слайдом (десктоп 180px) → верхний край
     первого слайда заходит в нижнюю часть hero и виден на экране. */
  .episode-slides { padding-top: 36px; }

  /* МОБИЛА: тот же фейд с привязкой низом (наследует от десктопа), но «приспущен» —
     высота 88vh вместо 100vh: сверху открывается чуть больше обложки. */
  .cinema-hero--center::before { height: 88vh; }

  /* контролы презентации: счётчик и бар — двумя отдельными плашками столбиком
     (счётчик сверху, бар снизу), по центру, помещаются в экран */
  .present__stage { padding: 52px 12px; }
  /* СЧЁТЧИК сверху (слева, только число), БАР загрузки снизу у нижнего отступа
     (column-reverse: счётчик-плашка над баром, без наложения).
     Ширину задаём через left/right (а не vw) — внутри презентации действует zoom. */
  .present__controls {
    flex-direction: column-reverse; align-items: center; gap: 10px;
    left: 12px; right: 12px; bottom: 16px; transform: none; width: auto;
  }
  .present__pill { min-height: 50px; }       /* удобнее под палец */
  .present__pill--bar { width: 100%; }                          /* плашка-бар на всю ширину, СНИЗУ */
  .present__pill--bar .present__bar { width: 100% !important; } /* сама полоса на всю ширину */
  /* при перетаскивании ползунка счётчик «взлетает» над кругом и едет с ним, БЕЗ стрелок */
  .present:has(.present__bar.is-drag) .present__pill--count {
    position: absolute; left: var(--scrub-x, 50%); bottom: 64px; transform: translateX(-50%);
    min-height: 0; padding: 4px 12px;
  }
  .present:has(.present__bar.is-drag) .present__nav { display: none; }
  .present__close { top: 14px; right: 14px; }

  /* бар+счётчик НА СТРАНИЦЕ ПРОЕКТА — зеркало .present__controls:
     счётчик-плашка (только число) сверху слева, бар снизу на всю ширину. */
  .slides-nav {
    flex-direction: column-reverse; align-items: center; gap: 10px;
    left: 12px; right: 12px; bottom: 16px; transform: none; width: auto;
  }
  .slides-nav__pill { min-height: 50px; }
  .slides-nav__pill--bar { width: 100%; }
  .slides-nav__pill--bar .slides-nav__bar { width: 100% !important; }
  .slides-nav:has(.slides-nav__bar.is-drag) .slides-nav__pill--count {
    position: absolute; left: var(--scrub-x, 50%); bottom: 64px; transform: translateX(-50%);
    min-height: 0; padding: 4px 12px;
  }
  .slides-nav:has(.slides-nav__bar.is-drag) .slides-nav__btn { display: none; }

  /* угловые стрелки — 1:1 с present__fly на мобиле (низ — над столбиком контролов) */
  .scroll-fly { width: 48px; height: 86px; right: 12px; }
  .scroll-fly--up   { top: 70px; }
  .scroll-fly--down { bottom: 86px; }   /* НАД полосой загрузки (бар внизу на всю ширину) — без наложения */

  /* слайды на странице проекта ближе друг к другу */
  .episode-slides { gap: 15px; }

  /* плашка Next episode — боковые отступы как у остального контента (20px) */
  .next-ep__heading { padding-left: 20px; padding-right: 20px; }
  .next-ep__name    { padding-left: 20px; padding-right: 20px; }
  .next-ep__cover   { padding: 0 20px; }
  .next-ep__frame   { aspect-ratio: 1920 / 864; }   /* на мобиле показываем 80% высоты след. проекта */
}

/* На ОЧЕНЬ узких экранах в шапке убираем годы (2025 / 2026) — остаются лого + search,
   чтобы навбар не теснился. Домой — по логотипу, поиск на месте. Цель — по href,
   поэтому работает и на главной, и на год-страницах, и на страницах проектов. */
/* Сужение навбара: 1) прячем годы 2025/2026, 2) затем search; random остаётся всегда */
@media (max-width: 560px) {
  .site-nav__links li:has(> a[href="/2025.html"]),
  .site-nav__links li:has(> a[href="/2026.html"]) { display: none; }
}
@media (max-width: 420px) {
  .site-nav__links li:has(> #searchBtn) { display: none; }
}

/* =========================================================
   ГОД-СТРАНИЦЫ (2025/2026): как главная, но без hero и intro —
   фикс-навбар сверху, поэтому отодвигаем лайнап вниз.
   ========================================================= */
.year-page .lineup { padding-top: clamp(118px, 16vh, 180px); }
.year-empty {
  min-height: 38vh;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.5);
  font-family: 'Benne', Georgia, serif; font-size: clamp(18px, 1.6vw, 24px);
}
@media (max-width: 600px) { .year-page .lineup { padding-top: 96px; } }

/* =========================================================
   Угловые стрелки ВНУТРИ презентации (первый/последний слайд) —
   таблетки справа: вверху (под крестиком) и внизу (над контролами).
   Прячутся вместе с остальным интерфейсом (.is-active).
   ========================================================= */
.present__fly {
  position: absolute; right: clamp(18px, 2vw, 30px); z-index: 6;
  width: 56px; height: 104px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; background: var(--ctrl-glass);
  border: 0; border-radius: 999px; cursor: pointer;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  opacity: 0; pointer-events: none;
  transition: opacity 240ms ease, background 140ms ease, transform 140ms ease;
}
.present__fly svg   { width: 26px; height: 26px; transform: rotate(90deg); }   /* как у scroll-fly */
.present__fly:hover { background: var(--ctrl-glass-hover); }
.present__fly:active{ transform: scale(0.93); }
.present__fly--up   { top: clamp(82px, 11vh, 132px); }      /* как scroll-fly--up */
.present__fly--down { bottom: 26px; }                       /* как scroll-fly--down */
.present.is-active .present__fly { opacity: 1; pointer-events: auto; }

@media (max-width: 600px) {
  .present__fly { width: 48px; height: 86px; right: 12px; }
  .present__fly--up   { top: 70px; }
  .present__fly--down { bottom: 86px; }   /* НАД полосой загрузки (бар внизу на всю ширину) — без наложения */
}

/* === РЕЖИМ ПРЕЗЕНТАЦИИ, ТЕЛЕФОН ПОВЁРНУТ (landscape, низкий экран) ===
   СЛЕВА: угловые стрелки first/last + по центру столбик [‹пред›][счётчик][‹след›].
   СПРАВА: X сверху + вертикальный бар прогресса ровно по краю, во всю высоту
   (0 сверху → вниз; см. isVert() в script.js, позиция считается по Y). */
@media (orientation: landscape) and (max-height: 600px) {
  /* угловые стрелки first/last — СЛЕВА (верх/низ) */
  .present__fly       { left: 14px; right: auto; width: 48px; height: 80px; }
  .present__fly--up   { top: 14px; bottom: auto; }
  .present__fly--down { bottom: 14px; top: auto; }
  .present__close     { top: 14px; right: 14px; }

  /* контролы НЕ ловят клики (тап/свайп идут к кадру); плашки позиционируем сами */
  .present__controls {
    position: fixed; inset: 0; left: 0; right: 0; top: 0; bottom: 0;
    transform: none; display: block; width: auto; pointer-events: none;
  }
  .present.is-active .present__controls { pointer-events: none; }
  .present.is-active .present__pill { pointer-events: auto; }

  /* СЧЁТЧИК + СТРЕЛКИ перелистывания — СЛЕВА, по центру по высоте, столбиком:
     [‹пред› (вверх → к 1)] [1/38] [‹след› (вниз → дальше)] */
  .present__pill--count {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    flex-direction: column; align-items: center; min-height: 0; padding: 10px 6px; gap: 4px;
  }
  .present__nav        { display: flex; }                  /* вернули стрелки перелистывания */
  .present__nav svg    { transform: rotate(90deg); }       /* ◄ → вверх (к 1), ► → вниз (дальше) */
  /* счётчик — ВЕРТИКАЛЬНЫМ столбиком, цифры ПРЯМЫЕ: сверху текущий, горизонт. чёрточка, снизу всего */
  .present__counter {
    writing-mode: horizontal-tb;          /* отменяем боковые цифры */
    display: flex; flex-direction: column; align-items: center;
    min-width: 0; line-height: 1.05; gap: 2px;
  }
  .present__sep {                          /* «/» → горизонтальная палочка между числами */
    font-size: 0; width: 16px; height: 2px;
    background: currentColor; border-radius: 1px; margin: 5px 0;
  }

  /* БАР прогресса — СПРАВА, ровно по правому краю, во всю высоту до нижнего отступа */
  .present__pill--bar {
    position: absolute; right: 14px; top: 76px; bottom: 14px;
    padding: 6px; min-height: 0; display: block;
  }
  .present__pill--bar .present__bar { width: 36px; height: 100%; margin: 0; }
  .present__preview { display: none; }   /* превью в вертикали не показываем */
}

/* ТАЧ-ФИКС (iOS Safari + двойной тап-зум):
   — на кнопках/стрелках: touch-action: manipulation → убирает зум по двойному тапу;
   — на скраббере: touch-action: none → браузер не перехватывает жест под скролл/зум
     (без этого iOS Safari шлёт touchcancel и кружок не нажимается/не тянется). */
.present__nav, .present__fly, .present__close, .present__pill--count,
.present-btn, .slides-nav__btn, .scroll-fly, .slides-nav__pill--count {
  touch-action: manipulation;
}
.present__bar, .present__pill--bar,
.slides-nav__bar, .slides-nav__pill--bar {
  touch-action: none;
}