/* =========================================================================
   SKRIABIN — Solar Grain
   -------------------------------------------------------------------------
   Тёмный доминирует, зернистый фон: диагональная оранжево-жёлтая полоса
   света прожигает дым (как на постере-референсе с шаттлом) — плотное,
   тяжёлое, уверенное пятно света. Типографика — массивный гротеск
   (display 900, Archivo Black, в духе референса «BIGGER»), никакого
   тонкого начертания. Палитра/шрифты — в :root.
   ========================================================================= */

:root {
  /* Высота липкой шапки (+ её верхний отступ) — чтобы якоря
     не уезжали под неё при прокрутке. */
  --header-h:  calc(clamp(58px, 8vh, 76px) + 14px);
  --scroll-pad: calc(var(--header-h) + 18px);

  /* ---- База: почти чёрный, живой ---- */
  --bg:        #0b0b0c;
  --bg-2:      #131315;
  --ink:       #f2f1ec;   /* почти белый */
  --ink-soft:  #948f86;   /* приглушённый тёплый серый */
  --ink-dim:   #5c584f;
  --line:      rgba(244,243,239,0.12);

  /* ---- Акцент: чёрный → оранжевый → белый → голубой/синий → чёрный ----
     Атмосферная диагональ, как на референсе с шаттлом. Используется в
     фоне, почте, буквице бренда. */
  --c-cyan:    #6fd6ff;   /* холодный канал хроматической аббирации, голубой акцент диагонали */
  --c-blue:    #2f7fe0;   /* синий канал диагонали */
  --c-orange:  #ff8a3d;
  --c-yellow:  #ffce54;
  --c-smoke:   #b7b3aa;
  --spectrum:      linear-gradient(90deg, #0b0b0c, #ff8a3d 30%, #fff8ec 50%, #6fd6ff 70%, #0b0b0c);
  --spectrum-glow: linear-gradient(90deg, #0b0b0c, #ff8a3d 28%, #ffffff 50%, #4fb8ff 72%, #0b0b0c);

  /* ---- Liquid glass — тёмное стекло ---- */
  --glass-bg:      rgba(255,255,255,0.045);
  --glass-bg-2:    rgba(255,255,255,0.075);
  --glass-brd:     rgba(244,243,239,0.12);
  --glass-blur:    blur(14px) saturate(140%);
  --glass-shadow:  0 8px 32px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -1px 1px rgba(0,0,0,0.2);

  /* ---- Шрифты ----
     Display — массивный, плотно сбитый гротеск (900), как в референсе
     «BIGGER»: без изящества, максимальная плотность и контраст. Моно —
     служебные подписи. */
  --font-display: "Archivo Black", "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Space Mono", "SFMono-Regular", ui-monospace, monospace;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* ---- Размеры (fluid) ---- */
  --step--1: clamp(0.72rem, 0.68rem + 0.18vw, 0.82rem);
  --step-0:  clamp(0.98rem, 0.94rem + 0.2vw, 1.08rem);
  --step-1:  clamp(1.2rem, 1.05rem + 0.75vw, 1.5rem);
  --step-2:  clamp(1.7rem, 1.3rem + 2vw, 2.8rem);
  --step-3:  clamp(2.6rem, 1.6rem + 5.4vw, 6.8rem);

  --gap: clamp(0.85rem, 0.6rem + 1.3vw, 1.5rem);
  --pad-x: clamp(1.1rem, 0.6rem + 2.6vw, 4rem);
  --maxw: 1300px;
  --radius: 18px;
  --radius-lg: 26px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  /* Тёмный доминирует, диагональ чёрный → оранжевый → белый → голубой/синий
     → чёрный светится сквозь фон — как атмосферная полоса на референсах.
     Накрывает весь скролл. */
  background:
    radial-gradient(ellipse 128vw 84vw at 26% -22%,
      transparent 0%, transparent 32%,
      rgba(12,7,4,0.4) 38%,
      rgba(180,55,8,0.78) 44%,
      rgba(255,110,15,0.98) 50%,
      rgba(255,205,140,0.68) 56%,
      rgba(255,238,210,0.4) 60%,
      rgba(130,195,255,0.26) 66%,
      rgba(10,10,14,0.16) 76%,
      transparent 86%),
    radial-gradient(60% 50% at -6% -8%, rgba(22,18,15,0.5), transparent 60%),
    radial-gradient(55% 48% at 104% 96%, rgba(8,12,20,0.6), transparent 58%),
    linear-gradient(155deg, #050505 0%, #0c0b0a 30%, #0a0d10 52%, #08090c 74%, #050505 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* clip, а не hidden: hidden делает body скролл-контейнером и ломает position: sticky */
  overflow-x: hidden;
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--c-orange); color: #0b0b0c; }
:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-x); position: relative; z-index: 2; }

/* =========================================================================
   ФОН: живой тёплый свет поверх градиента + тяжёлое зерно
   ========================================================================= */
.bg-fx { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; contain: strict; }
.blob {
  position: absolute; border-radius: 50%;
  filter: blur(70px); opacity: 0.6;
  will-change: transform; transform: translateZ(0);
}
/* Оранжевое пятно света вверху-слева и голубое/синее внизу-справа —
   тёмный доминирует, диагональный переход чёрный → оранжевый → белый →
   голубой → чёрный, как на референс-постере. */
/* Анимация фоновых блобов и зерна отключена — тяжёлый blur/turbulence
   на каждый кадр ощутимо тормозил. Фон статичный. */
.blob-1, .blob-2, .blob-3 { background: none; }

/* Плёночное зерно — плотный статичный слой (без анимации). Двухслойное:
   крупное киношное зерно (низкая частота) поверх мелкого — как эмульсия
   плёнки, а не ровный цифровой шум. */
.grain {
  position: fixed; inset: -10px; z-index: 1; pointer-events: none; opacity: 0.2; mix-blend-mode: overlay;
  filter: contrast(105%) brightness(1.02);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.35' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 100px 100px, 260px 260px;
}

/* =========================================================================
   Стеклянные утилиты
   ========================================================================= */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--glass-shadow);
}

/* Технический мономаркер */
.mono { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }

/* =========================================================================
   Шапка
   ========================================================================= */
.site-header { position: sticky; top: 0; z-index: 50; }
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: clamp(58px, 8vh, 76px); margin-top: 14px;
  padding-inline: clamp(0.9rem, 2vw, 1.4rem);
  border-radius: 999px;
  background: var(--glass-bg-2);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--glass-shadow);
}
.brand {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(0.9rem, 0.82rem + 0.5vw, 1.15rem);
  letter-spacing: 0.01em; text-transform: uppercase;
  display: inline-flex; align-items: baseline; gap: 0.45em;
}
/* «Directed by» — тише и мельче имени, как на стартовом экране */
.brand-pre { font-size: 0.7em; font-weight: 600; letter-spacing: 0.16em; opacity: 0.7; }
.nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2rem); }
.nav a { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); transition: color 0.25s var(--ease); }
.nav a:hover { color: var(--ink); }
/* CTA-пилюля: контурная, на ховере заливается светлым — минимально, без радуги */
.nav-cta {
  color: var(--ink) !important; border-radius: 999px; padding: 0.6em 1.15em;
  background: transparent; border: 1px solid var(--line);
  position: relative; overflow: hidden; isolation: isolate;
  transition: border-color 0.4s var(--ease), color 0.4s var(--ease), filter 0.4s var(--ease), transform 0.4s var(--ease), background 0.4s var(--ease);
}
.nav-cta:hover, .nav-cta:focus-visible {
  border-color: var(--ink); transform: translateY(-1px);
  background: var(--ink); color: #0b0b0c !important;
  filter: drop-shadow(-1.5px 0 rgba(111,214,255,0.7)) drop-shadow(1.5px 0 rgba(255,59,59,0.6));
}

.burger { display: none; background: none; border: 0; width: 44px; height: 44px; padding: 10px; }
.burger span { display: block; height: 1.6px; background: var(--ink); margin: 5px 0; transition: transform 0.3s var(--ease), opacity 0.3s; }
.burger.is-open span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

/* =========================================================================
   GATE — стартовый экран
   -------------------------------------------------------------------------
   Полноэкранный оверлей: тёмный дымный фон, доминирует чёрный/тёмно-серый,
   яркая оранжево-жёлтая полоса света по диагонали — как атмосферная полоса
   на референсе с шаттлом. Печатающийся заголовок, кнопка Start.
   ========================================================================= */
body.gate-open { overflow: hidden; }
.gate {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: #060606;
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease), visibility 0.8s;
}
.gate.is-hidden { opacity: 0; transform: scale(1.04); pointer-events: none; }

/* Погружение: клик по Start запускает "нырок" в дугу-градиент — она резко
   приближается и разгоняется на зрителя, контент гаснет, в кульминации
   вспыхивает белым (::after) — и только затем .is-hidden гасит экран
   целиком, открывая главную страницу под ним. */
.gate.is-diving { pointer-events: none; }
.gate.is-diving.is-hidden { transition: opacity 0.5s ease-out; }

.gate::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 46% 46%, #fff 0%, rgba(255,238,210,0.9) 20%, rgba(150,205,255,0.4) 42%, transparent 65%);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}
.gate.is-diving::after { animation: gate-flash 1.05s cubic-bezier(0.6, 0, 0.85, 0.35) forwards; }

@keyframes gate-flash {
  0% { opacity: 0; }
  68% { opacity: 0; }
  86% { opacity: 0.9; }
  100% { opacity: 0.15; }
}

@media (prefers-reduced-motion: no-preference) {
  .gate.is-diving .gate-bg {
    transform: scale(7.5);
  }
  /* На время нырка снимаем blur со слоёв дуги и с дыма. Иначе при scale(7.5)
     радиус размытия тоже растёт в 7.5 раз, и браузер каждый кадр заново
     растрирует гигантские размытые поверхности — отсюда лаги. Дуга и так
     мягкая по градиенту, на разгоне разницы не видно. Яркость/насыщенность
     тоже больше не анимируем через transition filter: анимация filter
     заставляет перерисовывать слой на каждом кадре. */
  .gate.is-diving .gate-beam,
  .gate.is-diving .gate-beam-thick,
  .gate.is-diving .gate-beam-soft,
  .gate.is-diving .gate-smoke {
    filter: none;
  }
  /* И снимаем mix-blend-mode на время нырка — это главный источник лагов:
     режим наложения требует читать подложку, поэтому слой нельзя вынести
     в композитор, и весь огромный градиент перерисовывается на каждом
     кадре зума (замерено: 16 → 41 fps). Подложка здесь почти чёрная
     (#0a0a0a), а screen поверх чёрного ≈ обычное наложение, так что
     картинка не меняется. Маски слоёв гасят их взаимное перекрытие,
     поэтому без screen они и не складываются. */
  .gate.is-diving .gate-bg > * {
    mix-blend-mode: normal;
  }
  .gate.is-diving .gate-smoke,
  .gate.is-diving .gate-grain {
    opacity: 0;
  }
  .gate.is-diving .gate-content {
    opacity: 0;
    transform: translateY(6vh) scale(0.92);
  }
}

.gate-bg {
  position: absolute; inset: 0; overflow: hidden; background: #0a0a0a;
  transform-origin: 46% 46%;
  transition: transform 1.05s cubic-bezier(0.6, 0, 0.85, 0.35);
  will-change: transform;
}

/* Дымная зернистая текстура на весь экран — неровный тёмный свет. Статично. */
.gate-smoke {
  position: absolute; inset: -10%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='4' seed='6' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140% 140%;
  background-position: 50% 50%;
  filter: blur(10px) contrast(170%) brightness(1.15);
  mix-blend-mode: soft-light;
  opacity: 0.9;
  transition: opacity 0.5s ease-out;
}

/* Дугообразный луч-лимб, как атмосфера планеты за бортом станции на
   референсе: гигантский повёрнутый овал вынесен почти целиком за кадр —
   в видимой области остаётся только его дуга-кромка. Кольцевой градиент
   внутри овала даёт слой цвета вдоль дуги: чёрный → оранжевый → белое
   ядро → голубой/синий → снова чёрный, повторяя изгиб горизонта.
   Два drop-shadow (циан / алый), как в остальной оптике сайта, дают
   лёгкое расщепление каналов вдоль кромки дуги. */
.gate-beam {
  position: absolute;
  width: 132vw; height: 84vw;
  left: 42%; top: 92%;
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(12deg);
  background: radial-gradient(ellipse at 50% 50%,
    transparent 0%,
    transparent 46%,
    rgba(6,3,1,0.5) 49%,
    rgba(150,38,4,0.92) 52%,
    rgba(255,72,0,1) 55%,
    rgba(255,150,10,1) 58.5%,
    rgba(255,238,202,1) 62%,
    rgba(255,250,240,1) 65%,
    rgba(196,228,255,0.85) 67%,
    rgba(150,205,255,0.55) 73%,
    rgba(111,214,255,0.35) 80%,
    rgba(120,190,230,0.15) 90%,
    transparent 99%);
  filter: blur(clamp(13px, 1.6vw, 34px));
  mix-blend-mode: screen;
  /* В точке утолщения (см. .gate-beam-thick) и в точке смягчения голубого
     края (см. .gate-beam-soft) обычная линия притухает — иначе она
     складывается с наложенным слоем и там становится ярче, а не просто
     меняется. Обе маски зеркальны маскам этих слоёв, mask-composite:
     intersect скрывает линию, если хоть одна из зон просит её скрыть. */
  -webkit-mask-image:
    radial-gradient(26% 36% at 89% 16%, transparent 0%, #000 100%),
    radial-gradient(20% 30% at 13% 30%, transparent 0%, #000 100%);
  mask-image:
    radial-gradient(26% 36% at 89% 16%, transparent 0%, #000 100%),
    radial-gradient(20% 30% at 13% 30%, transparent 0%, #000 100%);
  mask-composite: intersect;
}

/* Локальное утолщение линии: тот же контур/центр/поворот, что у .gate-beam
   (полностью концентрично), но цветовые стопы растянуты на больший радиус
   — сама лента шире. Видна только в одной точке дуги через мягкую
   вытянутую маску вдоль направления линии — не пятно света, а место, где
   сама линия становится толще, как будто ткань пространства растянулась. */
.gate-beam-thick {
  position: absolute;
  width: 132vw; height: 84vw;
  left: 42%; top: 92%;
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(12deg);
  background: radial-gradient(ellipse at 50% 50%,
    transparent 0%,
    transparent 36%,
    rgba(6,3,1,0.5) 40.4%,
    rgba(150,38,4,0.92) 44.7%,
    rgba(255,72,0,1) 49.1%,
    rgba(255,150,10,1) 54.2%,
    rgba(255,238,202,1) 59.3%,
    rgba(255,250,240,1) 63.7%,
    rgba(196,228,255,0.85) 66%,
    rgba(150,205,255,0.55) 74%,
    rgba(111,214,255,0.35) 84%,
    rgba(120,190,230,0.15) 96%,
    transparent 108%);
  filter: blur(clamp(9px, 1.1vw, 24px));
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(26% 36% at 89% 16%, #000 0%, transparent 100%);
  mask-image: radial-gradient(26% 36% at 89% 16%, #000 0%, transparent 100%);
}

/* Смягчение контура в левой части дуги: тот же контур/центр/поворот, что
   у .gate-beam, те же цвета — но сильнее размыт, отчего голубая кромка
   там теряет чёткую границу. Видна только в одной точке через маску,
   .gate-beam в этом месте гасится (см. его mask-image), поэтому слои не
   складываются и не светлеют. */
.gate-beam-soft {
  position: absolute;
  width: 132vw; height: 84vw;
  left: 42%; top: 92%;
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(12deg);
  background: radial-gradient(ellipse at 50% 50%,
    transparent 0%,
    transparent 46%,
    rgba(6,3,1,0.5) 49%,
    rgba(150,38,4,0.92) 52%,
    rgba(255,72,0,1) 55%,
    rgba(255,150,10,1) 58.5%,
    rgba(255,238,202,1) 62%,
    rgba(255,250,240,1) 65%,
    rgba(196,228,255,0.85) 67%,
    rgba(150,205,255,0.55) 73%,
    rgba(111,214,255,0.35) 80%,
    rgba(120,190,230,0.15) 90%,
    transparent 99%);
  filter: blur(clamp(20px, 2.2vw, 42px));
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(20% 30% at 13% 30%, #000 0%, transparent 100%);
  mask-image: radial-gradient(20% 30% at 13% 30%, #000 0%, transparent 100%);
}

/* Дуга СТАТИЧНА — никакой постоянной анимации на экране-гейте. Пробовали
   и медленный поворот (читался как сдвиг рамки), и параллакс за курсором
   (подлагивал: три огромных размытых слоя с mix-blend-mode перерисовываются
   на каждом кадре). Осталось одно фиксированное смещение: дуга сдвинута
   вправо, из-за чего её левая ветка опускается в кадр и градиент торчит
   из левого нижнего угла.
   Сдвиг одинаковый для всех трёх слоёв, иначе они разъедутся и перестанут
   быть концентричными (маски утолщения и смягчения должны стоять ровно на
   линии). Наклон 12deg и градиентные стопы не трогаем. */
.gate-bg {
  --gate-mx: 12vw;  /* вправо: левая ветка дуги уходит в нижний левый угол */
  --gate-my: 0vw;   /* по вертикали не двигаем — иначе полоса лезет на заголовок */
}

.gate-beam,
.gate-beam-thick,
.gate-beam-soft {
  transform: translate(calc(-50% + var(--gate-mx)), calc(-50% + var(--gate-my))) rotate(12deg);
}

.gate-grain {
  position: absolute; inset: -10px; opacity: 0.4; mix-blend-mode: overlay;
  filter: contrast(115%) brightness(1.05);
  transition: opacity 0.5s ease-out;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.35' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 100px 100px, 260px 260px;
}

.gate-content { position: relative; z-index: 2; text-align: center; padding: 0 1.4rem; transform: translateY(6vh); transition: opacity 0.45s ease, transform 0.45s ease; }
.gate-eyebrow {
  color: rgba(244,243,239,0.6); font-size: clamp(0.72rem, 0.66rem + 0.3vw, 0.9rem);
  letter-spacing: 0.4em; margin: 0 0 0.4rem; min-height: 1.4em; font-weight: 400;
}
.gate-title {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(2rem, 0.9rem + 6.6vw, 5.8rem); line-height: 0.95; letter-spacing: -0.01em;
  margin: 0; color: #f4f3ef; min-height: 1.1em;
}
.gate-eyebrow.is-typing::after, .gate-title.is-typing::after {
  content: ""; display: inline-block; width: 0.05em; height: 0.85em; margin-left: 0.14em;
  background: currentColor; vertical-align: -0.06em; animation: gate-caret 0.9s step-end infinite;
}
@keyframes gate-caret { 50% { opacity: 0; } }

/* Tilt-shift на заголовке: резкий только в центре, сверху и снизу —
   размыт (эффект «миниатюры» на референсе). Это буквальная копия текста
   (content: attr(data-title)) поверх оригинала, с filter: blur — значит
   размывается силуэт самих букв, а не прямоугольная область фона.
   mask-image проявляет копию только у верхнего и нижнего края и гасит
   её к центру, где виден резкий оригинал. Хроматическая аббирация
   (drop-shadow циан/алый) — там же, только в размытой копии. */
.gate-title { position: relative; }
.gate-title::before {
  content: attr(data-title);
  position: absolute; inset: 0;
  color: #f4f3ef;
  filter: blur(5px) drop-shadow(-2.5px 0 rgba(111,214,255,0.6)) drop-shadow(2.5px 0 rgba(255,59,59,0.55));
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 24%, transparent 76%, #000 100%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 24%, transparent 76%, #000 100%);
  pointer-events: none;
}

.gate-start {
  margin-top: clamp(2.2rem, 5vw, 3.4rem); border: 1px solid rgba(244,243,239,0.45);
  background: transparent; color: #f4f3ef; border-radius: 999px;
  padding: 0.85em 2.6em; font-family: var(--font-mono); font-size: var(--step--1);
  text-transform: uppercase; letter-spacing: 0.3em;
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.gate-start.is-in { opacity: 1; transform: none; }
.gate-start:hover, .gate-start:focus-visible { background: #f4f3ef; color: #0b0b10; border-color: #f4f3ef; }

/* =========================================================================
   ГЕРОЙ — полноэкранный шоурил-фон с текстом поверх (витрина в духе
   онлайн-кинотеатров): один явный CTA, ничего лишнего не отвлекает.
   ========================================================================= */
.hero { position: relative; padding: clamp(1.1rem, 3vw, 1.8rem) 0 clamp(1.4rem, 3vw, 2.2rem); }
.hero-media {
  position: relative; overflow: hidden; background: #06070c;
  width: min(1500px, calc(100% - 2 * var(--pad-x))); margin-inline: auto;
  aspect-ratio: 16 / 9; max-height: 74vh;
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-brd);
  box-shadow: 0 24px 80px rgba(0,0,0,0.5);
}
.hero-media video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; background: #06070c; }
.hero-media.no-video { display: none; }
.hero-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6,6,8,0.94) 0%, rgba(6,6,8,0.62) 34%, rgba(6,6,8,0.1) 60%, transparent 78%),
    linear-gradient(to top, rgba(6,6,8,0.92) 0%, rgba(6,6,8,0.1) 40%, transparent 62%);
}
.hero-inner {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: flex-end; padding-bottom: clamp(1.8rem, 6vw, 4.2rem);
}
.hero-content { max-width: 640px; }
.hero-eyebrow { color: rgba(244,243,239,0.65); letter-spacing: 0.32em; margin: 0 0 0.9rem; }
.hero-title {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(2.2rem, 1.1rem + 5.6vw, 5rem); line-height: 0.94; letter-spacing: -0.01em;
  margin: 0 0 0.9rem; color: #f4f3ef;
}
.hero-desc { max-width: 46ch; font-size: var(--step-1); line-height: 1.5; color: rgba(244,243,239,0.86); margin: 0 0 1.7rem; }
.hero-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.hero-cta {
  display: inline-flex; align-items: center; gap: 0.55rem; border: 0;
  font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.1em;
  padding: 0.95em 1.9em; border-radius: 999px; background: #f4f3ef; color: #0b0b0c;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease);
}
.hero-cta svg { width: 16px; height: 16px; margin-left: -2px; }
.hero-cta:hover, .hero-cta:focus-visible { transform: translateY(-2px); box-shadow: 0 16px 44px rgba(255,138,61,0.32); }
.hero-cta-ghost {
  background: rgba(255,255,255,0.08); color: #f4f3ef; border: 1px solid rgba(255,255,255,0.28);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.hero-cta-ghost:hover, .hero-cta-ghost:focus-visible { background: rgba(255,255,255,0.16); }
@media (max-width: 620px) { .hero-media { aspect-ratio: 3 / 4; max-height: 72vh; } }

.mode-toggle { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: clamp(2.1rem, 4.4vw, 3.6rem); margin-bottom: clamp(1.3rem, 2.6vw, 2rem); }
.mode-btn {
  font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.16em;
  padding: 0.75em 1.8em; border-radius: 999px; cursor: pointer;
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd); color: var(--ink-soft);
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease), filter 0.35s var(--ease);
}
.mode-btn:hover { transform: translateY(-2px); color: var(--ink); }
.mode-btn.is-active { background: var(--ink); color: #0b0b0c; border-color: var(--ink); }

/* =========================================================================
   ЖАНРОВЫЙ ЛЕТТЕРИНГ (в духе Кинопоиска: у каждого жанра своё начертание)
   Каждый жанр — самостоятельная кнопка со своей тёмной плашкой: надпись
   больше не висит прямо на светлой полосе фонового градиента.
   Разметку и выбор стиля делает letteringHTML() в assets/js/main.js.
   ========================================================================= */
.mode-toggle { gap: clamp(0.5rem, 1.1vw, 0.85rem); align-items: stretch; }
.mode-btn--lt {
  display: inline-flex; align-items: center; justify-content: center;
  letter-spacing: normal; text-transform: none; font-size: inherit;
  padding: 0.62em 1.15em; border-radius: 14px;
  /* плашка тёмная и своя у каждой кнопки — фон под ней не должен читаться как подложка */
  background: rgba(12,12,14,0.62); -webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%);
  border: 1px solid rgba(255,255,255,0.16); color: var(--ink); opacity: 1;
  box-shadow: 0 10px 26px rgba(0,0,0,0.32);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease),
              box-shadow 0.3s var(--ease), transform 0.3s var(--ease), filter 0.35s var(--ease);
}
.mode-btn--lt:hover {
  transform: translateY(-2px); color: var(--ink);
  background: rgba(20,20,24,0.78); border-color: rgba(255,255,255,0.34);
  box-shadow: 0 14px 32px rgba(0,0,0,0.42);
}
.mode-btn--lt.is-active {
  background: var(--ink); color: #0b0b0c; border-color: var(--ink);
  box-shadow: 0 12px 30px rgba(0,0,0,0.38);
}
.mode-btn--lt .lt { display: inline-flex; align-items: center; line-height: 1; white-space: nowrap; }


/* AI — каждая буква в своей клетке (как «ДЕ/ТЕК/ТИВЫ») */
.lt-box { gap: 0.18em; }
.lt-box i {
  font-family: var(--font-display); font-style: normal; font-weight: 900;
  font-size: clamp(0.98rem, 1.5vw, 1.24rem); line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.62em; padding: 0.3em 0.16em 0.26em;
  border: 1.5px solid currentColor;
}
/* Ступенька как в «ДЕ/ТЕК/ТИВЫ» — только когда букв достаточно, чтобы читалась ритмом */
.lt-box i:nth-child(even):not(:nth-child(2)) { transform: translateY(0.14em); }
.mode-btn--lt:hover .lt-box i { background: rgba(255,255,255,0.14); }
.lt-box .lt-gap { width: 0.3em; }

/* Commercial — узкий гротеск между двумя линейками (как «МИСТИКА») */
.lt-condensed {
  font-family: "Bebas Neue", var(--font-display); font-weight: 400;
  font-size: clamp(1.18rem, 1.9vw, 1.55rem); letter-spacing: 0.04em; text-transform: uppercase;
  border-top: 2px solid currentColor; border-bottom: 2px solid currentColor;
  padding: 0.1em 0.05em 0.02em; line-height: 1.05;
}

/* Branded Doc — моноширинный в уголках-скобках (как «[ДОК]») */
.lt-brackets { position: relative; padding: 0.34em 0.92em; }
.lt-brackets em {
  font-family: var(--font-mono); font-style: normal; font-weight: 700;
  font-size: clamp(0.88rem, 1.3vw, 1.08rem); text-transform: uppercase; letter-spacing: 0.14em;
}
.lt-brackets::before, .lt-brackets::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 0.42em;
  border: 2px solid currentColor;
}
.lt-brackets::before { left: 0; border-right: 0; }
.lt-brackets::after  { right: 0; border-left: 0; }

/* Brand video — «BRAND» контуром + «VIDEO» плотной заливкой: титр-вывеска */
.lt-outline {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(1rem, 1.55vw, 1.3rem); letter-spacing: -0.005em; gap: 0.3em;
}
.lt-outline em {
  /* важно: гасим заливку через -webkit-text-fill-color, а не color —
     иначе currentColor обнуляется вместе с ней и обводка тоже исчезает */
  font-style: normal; -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.6px currentColor;
  /* при прозрачной заливке text-shadow бесполезен — тень даёт .lt drop-shadow */
  text-shadow: none;
}
.lt-outline b { font-weight: 900; letter-spacing: 0.01em; }

/* Запасное начертание: контрастная антиква курсивом (как «ДРАМЫ») */
.lt-didone {
  font-family: "Playfair Display", Georgia, serif; font-style: italic; font-weight: 900;
  font-size: clamp(1.16rem, 1.95vw, 1.6rem); letter-spacing: -0.015em; text-transform: uppercase;
}

/* Travel Doc — рукописный с росчерком под словом (как «Ром-комы») */
.lt-script { position: relative; padding-bottom: 0.34em; }
.lt-script em {
  font-family: "Caveat", "Segoe Script", cursive; font-style: normal; font-weight: 700;
  font-size: clamp(1.35rem, 2.3vw, 1.9rem); letter-spacing: 0.005em;
  transform: rotate(-2.2deg); display: inline-block;
}
.lt-script .lt-swash {
  position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 0.42em;
  fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round;
  vector-effect: non-scaling-stroke; overflow: visible;
}

/* Запасное начертание для новых жанров из админки — трафаретный гротеск */
.lt-stencil {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(0.86rem, 1.35vw, 1.1rem); letter-spacing: 0.06em;
  border-left: 3px solid currentColor; border-right: 3px solid currentColor; padding: 0.12em 0.4em;
}

@media (max-width: 620px) {
  .mode-toggle { gap: 1rem 1.4rem; }
}

/* =========================================================================
   Секции
   ========================================================================= */
.section { padding: clamp(1.2rem, 2.2vw, 2.2rem) 0; position: relative; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: clamp(0.8rem, 1.5vw, 1.2rem); padding-top: 0.9rem; border-top: 1px solid var(--line); }
.section-head h2 { font-family: var(--font-display); font-weight: 900; font-size: var(--step-2); letter-spacing: -0.01em; margin: 0; text-transform: uppercase; }
.section-head .count { font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-soft); letter-spacing: 0.08em; }

/* =========================================================================
   Работы — ряды-карусели
   ========================================================================= */
#work > .wrap { max-width: 1720px; }

/* ── Ряды-карусели по направлениям (в духе стриминговых сервисов) ── */
.rows { display: flex; flex-direction: column; gap: clamp(1.1rem, 2.2vw, 1.7rem); }
.row-head { margin-bottom: 0.55rem; }
.row-head h3 {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  letter-spacing: -0.005em; font-size: var(--step-1); margin: 0; color: var(--ink);
}
.row-wrap { position: relative; }
.row-scroll {
  display: flex; gap: clamp(0.7rem, 1.6vw, 1.2rem); overflow-x: auto;
  scroll-snap-type: x proximity; scrollbar-width: none;
  /* overflow-x:auto вынуждает overflow-y стать auto — ряд обрезает тени
     карточек по своим краям. Хвост гауссова размытия тянется примерно на
     радиус блюра, поэтому запас берём по нему, а не по половине.
     Боковой вылет ограничен полем .wrap, чтобы ряд не уходил за экран. */
  --row-bleed: min(40px, var(--pad-x));
  padding: 16px var(--row-bleed) 62px;
  margin: -16px calc(var(--row-bleed) * -1) -56px;
  /* Снап выравнивает карточку по краю ряда мимо padding и отматывал бы его
     ровно на величину отступа, съедая весь запас. */
  scroll-padding-inline: var(--row-bleed);
}
.row-scroll::-webkit-scrollbar { display: none; }
.row-scroll .card { flex: 0 0 clamp(210px, 25vw, 320px); scroll-snap-align: start; }
.row-arrow {
  /* Выше вееров бэкстейджа (.bs-fan, z-index:4) — иначе раскрытая колода
     закрывает стрелку и «съедает» клик по ней */
  position: absolute; top: 38%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; z-index: 6;
  background: rgba(20,18,14,0.55);
  border: 1px solid var(--glass-brd); color: var(--ink); font-size: 1.4rem; line-height: 1;
  display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  transition: background 0.25s var(--ease), color 0.25s var(--ease), transform 0.15s var(--ease);
}
.row-arrow:hover { background: var(--ink); color: var(--bg); }
.row-arrow:active { transform: translateY(-50%) scale(0.92); }
.row-prev { left: -8px; }
.row-next { right: -8px; }
@media (max-width: 760px) { .row-arrow { display: none; } }
.cat-empty { text-align: center; font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-soft); padding: 2.4rem 1rem; }

.card { display: block; position: relative; }

/* ── Слот карточки: карточка + веер бэкстейджа поверх неё ──
   Веер — отдельная ссылка-сосед (не вложена в ссылку карточки), лежит
   внахлёст у правого края постера. Наведение — карты расходятся. */
.card-slot {
  /* isolation запирает z-index веера внутри слота: снаружи слот остаётся
     на нулевом уровне и не перекрывает стрелки ряда */
  position: relative; isolation: isolate;
}
.row-scroll .card-slot { flex: 0 0 clamp(210px, 25vw, 320px); scroll-snap-align: start; }

.bs-fan {
  /* Наклон всей колоды вправо — задаётся одним местом */
  --tilt: 11deg;
  /* Колода живёт ВНУТРИ кадра: правый отступ с запасом на поворот карт,
     нижний — над полосой с заголовком. Раскрывается влево, вдоль кадра,
     поэтому широкому 16:9-постеру всегда хватает места. */
  position: absolute; right: 7%; bottom: 25%; z-index: 4;
  width: 20%; max-width: 62px; min-width: 44px;
  display: block; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.bs-fan-deck { position: relative; display: block; aspect-ratio: 3 / 4; }
.bs-fan-card {
  position: absolute; inset: 0; overflow: hidden;
  border-radius: 9px; background: #131316;
  border: 1px solid rgba(244,243,239,0.22);
  box-shadow: 0 10px 22px -12px rgba(0,0,0,0.85);
  transform-origin: 50% 100%;
  transform: translate(calc(var(--i) * -7%), calc(var(--i) * -7%)) rotate(calc(var(--tilt) + var(--i) * -4deg)) scale(calc(1 - var(--i) * 0.05));
  transition: transform 0.5s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.bs-fan-card img, .bs-fan-card video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  pointer-events: none; filter: saturate(0.85) brightness(0.92);
}
.bs-fan-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.35), transparent 55%);
}

/* Раздвигаем колоду веером ВЛЕВО — и от наведения на сам веер, и на карточку.
   Подъём небольшой: карты не должны вылезать за верх постера. */
.card-slot:hover .bs-fan-card {
  transform: translate(calc(var(--i) * -42%), calc(var(--i) * -9%)) rotate(calc(var(--tilt) + var(--i) * -11deg)) scale(1);
}
.bs-fan:hover .bs-fan-card, .bs-fan:focus-visible .bs-fan-card {
  transform: translate(calc(var(--i) * -58%), calc(var(--i) * -12%)) rotate(calc(var(--tilt) + var(--i) * -15deg)) scale(1);
  border-color: rgba(255,138,61,0.7);
  box-shadow: 0 14px 30px -12px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,138,61,0.25);
}
.bs-fan:active .bs-fan-deck { transform: scale(0.96); transition: transform 0.15s var(--ease); }

/* Одна карта: раздвигать нечего (--i всегда 0), поэтому наведение
   отыгрываем подъёмом и лёгким доворотом — чтобы читалось как кнопка. */
.card-slot:hover .bs-fan.is-single .bs-fan-card {
  transform: translateY(-6px) rotate(calc(var(--tilt) - 2deg)) scale(1.04);
}
/* .card-slot:hover перебивает по специфичности — поэтому вложенный селектор */
.card-slot:hover .bs-fan.is-single:hover .bs-fan-card,
.bs-fan.is-single:focus-visible .bs-fan-card {
  transform: translateY(-10px) rotate(calc(var(--tilt) - 5deg)) scale(1.07);
}

/* Подпись прижата к правому краю колоды — по центру она вылезала за кадр */
.bs-fan-label {
  position: absolute; right: 0; top: calc(100% + 8px);
  display: flex; align-items: center; gap: 0.35em; white-space: nowrap;
  font-family: var(--font-mono); font-size: 0.52rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink);
  background: rgba(12,11,10,0.72); border: 1px solid var(--glass-brd);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: 0.35em 0.6em; border-radius: 999px; line-height: 1;
  opacity: 0; transform: translateY(4px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.bs-fan-label b { color: var(--c-orange); font-weight: 400; }
.card-slot:hover .bs-fan-label, .bs-fan:focus-visible .bs-fan-label { opacity: 1; transform: translateY(0); }

/* Заголовок карточки не заезжает под колоду и подпись */
.card-slot .card-body { padding-right: clamp(96px, 34%, 124px); }

@media (hover: none) {
  /* На тач-устройствах веер сразу раскрыт — иначе о нём не догадаться */
  .bs-fan-card { transform: translate(calc(var(--i) * -34%), calc(var(--i) * -8%)) rotate(calc(var(--tilt) + var(--i) * -9deg)) scale(1); }
  .bs-fan.is-single .bs-fan-card { transform: translateY(-5px) rotate(calc(var(--tilt) - 2deg)) scale(1.03); }
  .bs-fan-label { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .bs-fan-card, .bs-fan-label { transition: none; }
}

/* Плотные карточки в ряду: мельче скругления, только заголовок — без
   лишних служебных подписей, чтобы ничего не отвлекало от клика */
.row-scroll .card-media { border-radius: var(--radius); }
.row-scroll .card-title { font-size: var(--step-0); }
.row-scroll .card-body { padding: 1.1rem 0.8rem 0.7rem; border-radius: 0 0 var(--radius) var(--radius); }
.row-scroll .card-title { font-size: var(--step-0); }
.row-scroll .card-duration { font-size: 0.64rem; right: 0.6rem; top: 0.6rem; }
.row-scroll .card-play { width: 44px; height: 44px; left: 50%; top: 50%; bottom: auto; transform: translate(-50%, -50%) scale(0.9); }
.row-scroll .card:hover .card-play { transform: translate(-50%, -50%) scale(1); }
.card-media {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  aspect-ratio: 16 / 9; background: #131316;
  border: 1px solid var(--glass-brd);
  box-shadow: 0 20px 44px -14px rgba(18,7,0,0.5), 0 8px 18px -10px rgba(18,7,0,0.38);
}
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); filter: saturate(0.9); }
.card:hover .card-media img { transform: scale(1.05); }
.card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.5), transparent 50%); opacity: 0; transition: opacity 0.4s var(--ease); pointer-events: none; }
.card:hover .card-media::after { opacity: 1; }

/* Превью-проигрывание mp4 (при наведении / в кадре) */
.card-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.5s var(--ease); pointer-events: none; }
.card-preview.is-playing { opacity: 1; }

/* FEATURED — главный ролик во всю ширину */
.featured { margin-bottom: clamp(1rem, 2vw, 1.8rem); }
.featured .card-media { aspect-ratio: 21 / 9; box-shadow: 0 34px 90px -28px rgba(18,7,0,0.6); }
@media (max-width: 720px){ .featured .card-media { aspect-ratio: 16 / 11; } }
.featured .card-index { font-size: 0.78rem; }
.card-overlay {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; pointer-events: none;
  padding: clamp(1.3rem, 3.5vw, 2.6rem);
  background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0.2) 55%, transparent);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.card-overlay .ov-l { color: #fff; }
.card-overlay h3 { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; line-height: 0.95; margin: 0 0 0.5rem; font-size: clamp(1.8rem, 1rem + 4vw, 4rem); }
.card-overlay .meta { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255,255,255,0.72); }
.card-overlay .watch-pill {
  font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.05em; color: #0b0b10;
  background: rgba(255,255,255,0.92); border-radius: 999px; padding: 0.8em 1.4em; display: inline-flex; align-items: center; gap: 0.5rem;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.featured:hover .card-overlay .watch-pill { background: #fff; }

.card-index {
  position: absolute; left: 0.9rem; top: 0.9rem;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.05em;
  color: var(--ink); padding: 0.3em 0.7em; border-radius: 999px;
  background: rgba(20,18,14,0.55);
  border: 1px solid var(--glass-brd);
}
.card-duration {
  position: absolute; right: 0.9rem; top: 0.9rem;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em;
  background: rgba(0,0,0,0.6); color: #fff; padding: 0.3em 0.7em; border-radius: 999px;
}
.card-play {
  position: absolute; left: 0.9rem; bottom: 0.9rem; width: 46px; height: 46px; border-radius: 50%;
  background: rgba(20,18,14,0.6);
  border: 1px solid var(--glass-brd); color: #fff;
  display: grid; place-items: center; transform: translateY(8px); opacity: 0;
  transition: transform 0.4s var(--ease), opacity 0.4s var(--ease);
}
.card:hover .card-play { transform: translateY(0); opacity: 1; }
.card-play svg { width: 15px; height: 15px; margin-left: 2px; }

/* Название — внутри карточки, у нижнего края постера. Затемняется только
   полоса под самой подписью, поэтому кадр остаётся открытым */
.card-body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; pointer-events: none;
  padding: 1.3rem 0.95rem 0.8rem; display: flex; align-items: flex-end; gap: 0.8rem;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: linear-gradient(to top, rgba(6,6,7,0.88) 0%, rgba(6,6,7,0.68) 45%, rgba(6,6,7,0) 100%);
}
.card-title {
  font-family: var(--font-display); font-weight: 900; font-size: var(--step-1);
  line-height: 1.15; margin: 0; letter-spacing: -0.005em; color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.55);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-cat { font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-soft); white-space: nowrap; text-transform: uppercase; }
.card-year { font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-soft); margin-top: 0.2rem; }

/* Иконки с собственной подложкой — скругляем углы */
.logo-tile img.is-rounded { border-radius: 22%; }

/* =========================================================================
   Стена клиентов (логотипы)
   ========================================================================= */
.logo-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: clamp(0.7rem, 1.5vw, 1.1rem); grid-auto-rows: 1fr; align-items: stretch; }
.logo-tile { display: grid; place-items: center; aspect-ratio: 3 / 2; padding: 0.9rem; border-radius: 16px;
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd); box-shadow: var(--glass-shadow); transition: transform 0.35s var(--ease); }
.logo-tile { height: 100%; }
.logo-tile:hover { transform: translateY(-4px); }
.logo-tile img { max-height: 74px; max-width: 88%; width: auto; object-fit: contain;
  opacity: 1; transition: transform 0.35s var(--ease); }
.logo-tile:hover img { transform: scale(1.05); }
.logo-tile.more { font-family: var(--font-mono); font-size: var(--step-0); text-transform: uppercase;
  letter-spacing: 0.06em; color: rgba(255,255,255,0.82); text-align: center; }

/* Подсказка с названием бренда */
.logo-tile { position: relative; }
.logo-tile[data-name]::after {
  content: attr(data-name);
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translate(-50%, 4px);
  padding: 0.35em 0.7em; border-radius: 8px;
  background: var(--ink); color: #0b0b0c;
  font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.02em;
  white-space: nowrap; pointer-events: none; z-index: 3;
  opacity: 0; transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.logo-tile[data-name]:hover::after,
.logo-tile[data-name]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
  .logo-tile[data-name]::after { transition: none; transform: translate(-50%, 0); }
}

/* =========================================================================
   Контакт
   ========================================================================= */
/* ===== SEEDRAFT — плитка собственного продукта =====
   Живёт между рядами работ и стеной брендов. Тёмное стекло + тёплый
   градиент диагонали (как у gate/контакта), вся плитка — одна ссылка. */
.seed-tile {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  gap: clamp(0.9rem, 2vw, 1.6rem); flex-wrap: wrap;
  padding: clamp(0.95rem, 1.8vw, 1.35rem) clamp(1.1rem, 2.2vw, 1.7rem);
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--glass-brd); color: var(--ink); text-decoration: none;
  box-shadow: var(--glass-shadow);
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.seed-tile:hover { transform: translateY(-2px); border-color: rgba(255,138,61,0.4);
  box-shadow: 0 14px 36px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,138,61,0.1) inset; }

.seed-bg { position: absolute; inset: 0; z-index: 0; background: #0e0e10; }
.seed-bg::before { content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 130% at 8% 110%, rgba(255,138,61,0.34), transparent 62%),
    radial-gradient(45% 110% at 45% 120%, rgba(255,246,230,0.16), transparent 60%),
    radial-gradient(55% 120% at 96% 105%, rgba(79,184,255,0.26), transparent 60%);
  filter: blur(16px);
  transition: opacity 0.6s var(--ease); opacity: 0.85; }
.seed-tile:hover .seed-bg::before { opacity: 1; }
.seed-bg::after { content: ""; position: absolute; inset: -50%; opacity: 0.26; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 150px 150px; }

.seed-body { position: relative; z-index: 2; flex: 1 1 18rem; min-width: 0; }
.seed-eyebrow { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(244,243,239,0.5); margin: 0 0 0.45rem; }
.seed-title { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 0.15rem 0.55rem; }
/* «Создатель платформы» — тонкое светлое начертание, чтобы логотип был главным */
.seed-kicker { font-family: "Space Grotesk", var(--font-body); font-weight: 300;
  font-size: clamp(0.95rem, 0.85rem + 0.35vw, 1.18rem); letter-spacing: 0.01em; line-height: 1.2;
  color: rgba(244,243,239,0.88); }
/* Логотип SEEDRAFT: белый PNG работает маской, сквозь неё видно градиент */
.seed-logo { display: block; height: clamp(17px, 0.75rem + 0.75vw, 24px); width: auto; aspect-ratio: 1688 / 236;
  background: linear-gradient(96deg, #ffce54, #ff8a3d 26%, #fff8ec 58%, #6fd6ff);
  -webkit-mask: url("../../media/logos/seedraft-white.png") no-repeat left center / contain;
  mask: url("../../media/logos/seedraft-white.png") no-repeat left center / contain;
  filter: drop-shadow(0 4px 18px rgba(255,138,61,0.28));
  transition: filter 0.4s var(--ease); }
.seed-tile:hover .seed-logo { filter: drop-shadow(0 8px 34px rgba(255,138,61,0.45)); }
/* Само слово SEEDRAFT — тёплая заливка спектром, как почта в контактах */
.seed-desc { font-size: var(--step--1); color: rgba(244,243,239,0.62); margin: 0.4rem 0 0; }

/* Кнопка-ссылка: капсула-стекло с подсветкой на ховере всей плитки */
.seed-cta {
  position: relative; z-index: 2; flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.1em;
  padding: 0.7em 1.15em; border-radius: 999px;
  color: #0b0b0c; background: linear-gradient(100deg, #ffce54, #ff8a3d 55%, #fff3e2);
  border: 1px solid rgba(255,206,84,0.5);
  box-shadow: 0 8px 22px rgba(255,138,61,0.24);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), filter 0.4s var(--ease);
}
.seed-cta svg { width: 1.05em; height: 1.05em; }
.seed-tile:hover .seed-cta { transform: translateY(-2px); filter: brightness(1.06);
  box-shadow: 0 14px 36px rgba(255,138,61,0.4); }

@media (max-width: 640px) {
  .seed-tile { flex-direction: column; align-items: stretch; gap: 1.25rem; }
  .seed-body { flex: 0 0 auto; }
  .seed-cta { width: 100%; justify-content: center; }
}

.contact-shell { position: relative; margin: clamp(0.9rem,2vw,1.5rem) auto 0; max-width: 62rem; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--glass-brd); }
.contact { position: relative; z-index: 2; text-align: center; padding: clamp(1.9rem, 3.6vw, 3rem) clamp(1.2rem, 4vw, 2.6rem); color: #f4f3ef; }
.contact-bg { position: absolute; inset: 0; z-index: 0; background: #08080a; }
.contact-bg::before { content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(55% 85% at 20% 120%, rgba(255,138,61,0.3), transparent 62%),
    radial-gradient(48% 74% at 55% 128%, rgba(255,246,230,0.2), transparent 62%),
    radial-gradient(40% 60% at 90% 124%, rgba(79,184,255,0.24), transparent 58%);
  filter: blur(14px); }
.contact-bg::after { content: ""; position: absolute; inset: -50%; opacity: 0.3; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 150px 150px; }
/* Ряд под почтой: подпись + «скопировать» */
.contact-meta { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-top: 0.9rem; }
.mail-copy {
  font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.08em;
  color: rgba(244,243,239,0.65); cursor: pointer;
  padding: 0.55em 1em; border-radius: 999px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.mail-copy:hover { color: #fff; border-color: rgba(255,255,255,0.34); background: rgba(255,255,255,0.08); }
.mail-copy.is-done { color: #6ee7a8; border-color: rgba(110,231,168,0.45); }

.contact p.eyebrow { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.24em; text-transform: uppercase; color: rgba(244,243,239,0.6); margin: 0 0 0.8rem; }

/* Почта — тёплая заливка текста */
.contact a.mail {
  font-family: var(--font-display); font-weight: 900; letter-spacing: -0.01em;
  font-size: clamp(1.5rem, 0.8rem + 3.4vw, 3.4rem);
  display: inline-block; line-height: 1.05; max-width: 100%; word-break: break-word;
  background: var(--spectrum); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 30px rgba(255,138,61,0.25));
  transition: filter 0.4s var(--ease), transform 0.4s var(--ease);
}
.contact a.mail:hover { filter: drop-shadow(0 8px 40px rgba(255,138,61,0.4)); transform: translateY(-2px); }

/* Подпись-подсказка под почтой */
.contact .sub { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase;
  letter-spacing: 0.06em; color: rgba(244,243,239,0.4); margin: 0; }

/* Соцсети — стеклянные пилюли на тёмном */
.socials { display: flex; gap: 0.6rem; justify-content: center; margin-top: 1.2rem; flex-wrap: wrap; }
.socials a {
  font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.06em;
  color: rgba(244,243,239,0.8); border-radius: 999px; padding: 0.7em 1.3em;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.socials a:hover { color: #fff; transform: translateY(-3px); border-color: rgba(255,255,255,0.4);
  box-shadow: 0 12px 34px rgba(255,138,61,0.28); }

.site-footer { padding-block: 1.2rem 1.6rem; }
.footer-inner { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.footer-inner span { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; color: var(--ink-soft); letter-spacing: 0.05em; }

/* =========================================================================
   Страница видео (watch)
   ========================================================================= */
.watch-back { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); padding-block: clamp(1.4rem, 3vw, 2.2rem); }
.watch-back:hover { color: var(--ink); }
.watch-back svg { width: 16px; height: 16px; }

.player { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden;
  background: #06070c; border: 1px solid var(--glass-brd);
  box-shadow: 0 20px 70px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06); }
.player video { width: 100%; height: 100%; object-fit: contain; background: #06070c; }

.watch-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.watch-head h1 { font-family: var(--font-display); font-weight: 900; font-size: var(--step-2); letter-spacing: -0.01em; line-height: 0.98; margin: 0; text-transform: uppercase; }
.watch-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.03em; border-radius: 999px; padding: 0.4em 0.9em; color: var(--ink-soft);
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-brd); }
.watch-desc { font-size: var(--step-1); line-height: 1.4; color: var(--ink); max-width: 60ch; margin: 1.4rem 0 0; }
.watch-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; margin-top: 1.4rem; font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink); text-shadow: 0 1px 3px rgba(0,0,0,0.55); }
.watch-meta b { color: var(--ink); font-weight: 700; }

.making { margin-top: clamp(2.5rem, 5vw, 4rem); border-radius: var(--radius);
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-brd); box-shadow: var(--glass-shadow); }
.making summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.3rem 1.4rem; font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); }
.making summary::-webkit-details-marker { display: none; }
.making summary:hover { color: var(--ink); }
.making summary .plus { transition: transform 0.3s var(--ease); font-size: 1.5em; line-height: 1; }
.making[open] summary .plus { transform: rotate(45deg); }
.making-body { padding: 0 1.4rem 1.5rem; color: var(--ink-soft); max-width: 65ch; }
.making-body .tools { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.2rem; }

.more-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: var(--gap); }

/* Бэкстейдж — фото/видео «как снимали» рядом с роликом */
.backstage { margin-top: clamp(2.5rem, 5vw, 4rem); }
.bs-item.is-target {
  box-shadow: 0 0 0 2px rgba(255,138,61,0.75), 0 14px 40px -18px rgba(255,138,61,0.5);
  animation: bs-pulse 2.4s var(--ease);
}
@keyframes bs-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255,138,61,0.75), 0 14px 40px -18px rgba(255,138,61,0.5); }
  50% { box-shadow: 0 0 0 2px rgba(255,138,61,0.25), 0 14px 40px -18px rgba(255,138,61,0.15); }
}
/* Плитки повторяют формат исходника (--bs-ar): вертикальный файл даёт узкую
   высокую плитку, горизонтальный — широкую низкую.
   Раскладка — «выключенные» ряды, как в фотогалереях: у всех плиток одного
   ряда общая высота, ширина пропорциональна их соотношению, ряд всегда упёрт
   в оба края сетки. Достигается тем, что flex-grow и flex-basis у плитки
   пропорциональны одному и тому же --bs-ar: свободное место делится ровно в
   тех же долях, что и базовая ширина, значит все плитки ряда масштабируются
   одним коэффициентом. Дыр справа и «лесенки» не остаётся ни при каком числе
   материалов — один материал просто занимает ряд целиком.
   ВАЖНО: --bs-w (половина пиксельной ширины файла) раскладкой больше не
   управляет — от абсолютной ширины сетка рассыпалась в рваный столбец. */
.bs-grid { display: flex; flex-wrap: wrap; align-items: stretch;
  justify-content: center; gap: 0.55rem;
  --bs-row: 260px;   /* базовая высота ряда — от неё считается ширина плиток */
  --bs-cap: 520px;   /* потолок высоты: одна вертикалка 9:16 на всю ширину
                        сетки давала бы плитку в 2000+ px высотой */ }
.bs-item { margin: 0; min-width: 0;
  /* ×100 — чтобы сумма flex-grow в ряду всегда была больше 1: иначе при
     единственной плитке в ряду браузер по спецификации раздаёт ей лишь долю
     свободного места, и ряд не дотягивается до правого края. */
  flex-grow: calc(var(--bs-ar, 16 / 9) * 100);
  flex-shrink: 1;
  flex-basis: calc(var(--bs-ar, 16 / 9) * var(--bs-row));
  max-width: min(100%, calc(var(--bs-ar, 16 / 9) * var(--bs-cap))); }
.bs-item { border-radius: calc(var(--radius) * 0.6); overflow: hidden; position: relative;
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd); box-shadow: var(--glass-shadow); }
.bs-media { aspect-ratio: var(--bs-ar, 16 / 9); background: #131316; overflow: hidden; }
.bs-media img, .bs-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* На весь экран элемент растягивается под ландшафтный экран, и object-fit: cover
   обрезал бы вертикальное видео/фото. В фуллскрине всегда показываем целиком. */
.bs-media video:fullscreen,
.bs-media video:-webkit-full-screen,
.bs-media img:fullscreen,
.bs-media img:-webkit-full-screen,
:fullscreen .bs-media video,
:fullscreen .bs-media img { width: 100%; height: 100%; object-fit: contain; background: #000; }
.bs-item:hover .bs-media img { transform: scale(1.05); }
.bs-media img { transition: transform 0.7s var(--ease); }
.bs-cap { font-family: var(--font-mono); font-size: var(--step--2, 0.78rem); color: var(--ink); padding: 0.5rem 0.7rem 0.6rem; text-transform: uppercase; letter-spacing: 0.03em; text-shadow: 0 1px 3px rgba(0,0,0,0.55); }
/* На широком экране высота ряда идёт от горизонтальных кадров (три в ряд),
   на узком — от вертикальных: там ряд задирается, чтобы вертикалки вставали
   по две и не мельчили, а горизонтальные кадры просто занимают ряд целиком. */
@media (max-width: 1100px) { .bs-grid { --bs-row: 215px; --bs-cap: 460px; } }
@media (max-width: 860px)  { .bs-grid { --bs-row: 185px; --bs-cap: 400px; } }
@media (max-width: 620px)  { .bs-grid { --bs-row: 170px; --bs-cap: 380px; } }
@media (max-width: 430px)  { .bs-grid { --bs-row: 200px; --bs-cap: 330px; } }

/* =========================================================================
   ВИДЕО-МОДАЛКА — клик по карточке сразу открывает и проигрывает ролик
   поверх страницы, без перехода на отдельный экран с постером.
   ========================================================================= */
.video-modal {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.35s var(--ease), visibility 0.35s;
}
.video-modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.video-modal-backdrop { position: absolute; inset: 0; background: rgba(4,4,5,0.92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.video-modal-inner {
  position: relative; z-index: 2; width: 100%; max-width: 1180px;
  aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden;
  background: #000; box-shadow: 0 30px 100px rgba(0,0,0,0.6);
  transform: scale(0.96); transition: transform 0.35s var(--ease);
}
.video-modal.is-open .video-modal-inner { transform: none; }
.video-modal-inner video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.video-modal-close {
  position: absolute; top: 14px; right: 14px; z-index: 3; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(0,0,0,0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.2); color: #f4f3ef; font-size: 1.1rem; line-height: 1;
  display: grid; place-items: center; transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.video-modal-close:hover { background: rgba(0,0,0,0.8); }
body.modal-open { overflow: hidden; }

/* =========================================================================
   Reveal + мобилка
   ========================================================================= */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

@media (max-width: 760px) {
  .burger { display: block; }
  .nav {
    position: fixed; inset: 12px 12px auto 12px; top: 84px; flex-direction: column; align-items: flex-start;
    gap: 1.2rem; padding: 1.6rem; border-radius: var(--radius-lg);
    background: var(--glass-bg-2); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-brd); box-shadow: var(--glass-shadow);
    transform: translateY(-12px) scale(0.98); opacity: 0; visibility: hidden;
    transition: transform 0.35s var(--ease), opacity 0.35s var(--ease), visibility 0.35s; z-index: 45;
  }
  .nav.is-open { transform: none; opacity: 1; visibility: visible; }
  .nav a { font-size: 1.1rem; color: var(--ink); }
  .nav-cta { align-self: stretch; text-align: center; }
  .nav-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.4); opacity: 0; visibility: hidden; transition: opacity 0.3s; z-index: 40; }
  .nav-backdrop.is-open { opacity: 1; visibility: visible; }
  body.menu-open { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: 0.01ms !important; scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .blob { animation: none !important; }
}

/* =========================================================================
   Свечения на наведение — сдержанные, в тёплом акценте
   ========================================================================= */
.chip, .logo-tile, .making, .tag, .header-inner {
  background-image: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 42%, rgba(255,255,255,0) 62%);
}
.logo-tile { transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.logo-tile:hover { box-shadow: var(--glass-shadow), 0 16px 42px rgba(255,138,61,0.14); }

/* Карточки работ — тёплый подъём при наведении */
.card .card-media { transition: transform 0.8s var(--ease), box-shadow 0.45s var(--ease); }
.card:hover .card-media { box-shadow: 0 26px 56px -24px rgba(255,138,61,0.32), 0 12px 26px -14px rgba(18,7,0,0.5); }

/* FEATURED — тёплая аура слева, дымная справа */
.card-featured { position: relative; isolation: isolate; }
.card-featured::before {
  content: ""; position: absolute; inset: -6% -3%; z-index: -1; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(48% 62% at 0% 52%, rgba(255,150,44,0.4), transparent 70%),
    radial-gradient(30% 52% at 6% 46%, rgba(255,236,198,0.24), transparent 72%),
    radial-gradient(50% 66% at 100% 55%, rgba(79,184,255,0.3), transparent 72%);
  filter: blur(42px); opacity: 0.9;
}

/* Разделитель под шоурилом убран — блок работ идёт сразу за жанрами */

/* =========================================================================
   ХРОМАТИЧЕСКИЕ АББЕРАЦИИ
   -------------------------------------------------------------------------
   Два drop-shadow'а — холодный (циан) и тёплый (алый) — дают расщепление
   каналов, как оптическая дисперсия на срезе света в референсе.
   drop-shadow, а не text-shadow: тени рисуются ПОД глифом и не мутят
   градиентную заливку background-clip: text.
   --ab — амплитуда сдвига, её и усиливаем на hover/активности.
   ========================================================================= */
.ab, .ab-hover,
.brand, .nav a, .burger span,
.mono, .section-head h2, .section-head .count,
.card-title, .card-index, .card-duration, .watch-pill,
.mode-btn, .row-head h3,
.contact p.eyebrow, .contact a.mail, .contact .sub, .socials a,
.footer-inner span {
  --ab: 0px;          /* амплитуда сдвига каналов */
  --ab-a: 0;          /* насыщенность канта */
  filter:
    drop-shadow(calc(var(--ab) * -1) 0 rgba(111,214,255,var(--ab-a)))
    drop-shadow(var(--ab) 0 rgba(255,59,59,var(--ab-a)));
}
/* transition задаём отдельно и с сохранением того, что элемент анимировал раньше:
   общее правило выше иначе затёрло бы переходы color/transform. */
.ab, .ab-hover, .brand, .mono, .section-head h2, .section-head .count,
.card-title, .card-index, .card-duration, .watch-pill, .row-head h3,
.contact p.eyebrow, .contact .sub, .footer-inner span {
  transition: filter 0.35s var(--ease);
}
.nav a { transition: color 0.25s var(--ease), filter 0.3s var(--ease); }
.burger span { transition: transform 0.3s var(--ease), opacity 0.3s, filter 0.3s var(--ease); }
.socials a { transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease), filter 0.3s var(--ease); }

/* Утилиты для разметки: постоянное расщепление и расщепление по наведению */
.ab { --ab: 0.014em; --ab-a: 0.5; }
.ab-hover:hover, .ab-hover:focus-visible { --ab: 0.02em; --ab-a: 0.6; }

/* Заголовок на стартовом экране — статичное расщепление каналов (без анимации) */
.gate-title {
  filter: drop-shadow(-0.01em 0 rgba(111,214,255,0.4)) drop-shadow(0.01em 0 rgba(255,59,59,0.38)) !important;
}

/* ---- Шапка ------------------------------------------------------------- */
.brand:hover   { --ab: 0.03em; --ab-a: 0.6; }
.nav a:hover   { --ab: 0.022em; --ab-a: 0.5; }
/* Бургер: каждая полоса ловит свой канал — призма даже в иконке */
.burger span:nth-child(1) { --ab: 1.5px; --ab-a: 0.7; }
.burger span:nth-child(2) { --ab: 2.5px; --ab-a: 0.55; }
.burger span:nth-child(3) { --ab: 1.5px; --ab-a: 0.7; }
.burger.is-open span { --ab: 3px; --ab-a: 0.8; }

/* ---- Служебная типографика: у моно-маркеров кант постоянный, но еле уловимый */
.mono, .section-head .count, .footer-inner span { --ab: 0.6px; --ab-a: 0.4; }
.contact p.eyebrow, .contact .sub { --ab: 0.6px; --ab-a: 0.45; }

/* ---- Секции ------------------------------------------------------------ */
.section-head:hover h2 { --ab: 0.016em; --ab-a: 0.55; }
.section-head:hover .count { --ab: 1.4px; --ab-a: 0.65; }

/* ---- Карточки работ ---------------------------------------------------- */
.card-index, .card-duration { --ab: 0.5px; --ab-a: 0.4; }
.card:hover .card-title { --ab: 0.012em; --ab-a: 0.5; }
.card:hover .card-index, .card:hover .card-duration { --ab: 1.6px; --ab-a: 0.75; }
.featured:hover .watch-pill { --ab: 1.4px; --ab-a: 0.65; }

/* ---- Шоурил: переключатель и заголовки рядов --------------------------- */
.mode-btn { --ab: 0.6px; --ab-a: 0.35; }
.mode-btn:hover, .mode-btn.is-active { --ab: 1.6px; --ab-a: 0.65; }
.row-head h3 { --ab: 0.6px; --ab-a: 0.3; }
.row-head:hover h3 { --ab: 1.4px; --ab-a: 0.6; }

/* ---- Логотипы брендов: без хроматических аберраций — знаки идут как есть ---- */

/* ---- Контакт ----------------------------------------------------------- */
/* У почты фильтр тоже пишем целиком — иначе теряется её базовое свечение */
.contact a.mail {
  --ab: 0.006em; --ab-a: 0.3;
  filter:
    drop-shadow(calc(var(--ab) * -1) 0 rgba(111,214,255,var(--ab-a)))
    drop-shadow(var(--ab) 0 rgba(255,59,59,var(--ab-a)))
    drop-shadow(0 6px 30px rgba(255,138,61,0.28));
}
.contact a.mail:hover {
  --ab: 0.018em; --ab-a: 0.65;
  /* тут к расщеплению добавляется прежнее свечение — поэтому фильтр целиком */
  filter:
    drop-shadow(calc(var(--ab) * -1) 0 rgba(111,214,255,var(--ab-a)))
    drop-shadow(var(--ab) 0 rgba(255,59,59,var(--ab-a)))
    drop-shadow(0 8px 40px rgba(255,138,61,0.4));
}
.socials a:hover { --ab: 1.8px; --ab-a: 0.65; }


/* =========================================================================
   Якоря под липкой шапкой
   Любая цель прокрутки (секции, ряды работ, элементы бэкстейджа) должна
   останавливаться под шапкой, а не под ней самой.
   ========================================================================= */
html { scroll-padding-top: var(--scroll-pad); }


/* =========================================================================
   ГЛАВНАЯ: шапка внутри видео (витрина в духе Кинопоиска)
   -------------------------------------------------------------------------
   Вверху страницы шапка прозрачная и лежит прямо внутри кадра шоурила.
   Само видео остаётся карточкой со скруглениями. Как только страница
   прокручена вниз, шапка «отклеивается» от видео: возвращается стеклянная
   пилюля, и она всегда остаётся сверху.
   ========================================================================= */
body.home .site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
}
/* Шапка живёт по границам кадра шоурила (.header-reel = ширина .hero-media,
   .header-inner = внутренний .wrap): логотип встаёт ровно над подписями
   внутри кадра, а меню — над правым краем кадра. */
body.home .header-reel { width: min(1500px, calc(100% - 2 * var(--pad-x))); margin-inline: auto; }
body.home .header-inner {
  padding-inline: var(--pad-x);
  height: clamp(56px, 7.4vh, 72px); margin-top: clamp(12px, 1.8vh, 20px);
  border-radius: 0; background: transparent; border-color: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
  transition:
    height 0.4s var(--ease), margin-top 0.4s var(--ease), border-radius 0.4s var(--ease),
    background 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
/* Пока шапка «в видео» — текст ссылок светлее и с лёгкой тенью, чтобы
   читался поверх любого кадра */
body.home .site-header:not(.is-scrolled) .brand,
body.home .site-header:not(.is-scrolled) .nav a {
  color: #f4f3ef; text-shadow: 0 1px 12px rgba(0,0,0,0.55);
}
body.home .site-header:not(.is-scrolled) .nav-cta { border-color: rgba(255,255,255,0.42); }

body.home .site-header.is-scrolled .header-inner {
  height: clamp(58px, 8vh, 76px); margin-top: 14px;
  border-radius: 999px;
  background: var(--glass-bg-2);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-color: var(--glass-brd);
  box-shadow: var(--glass-shadow);
}

/* --- Шоурил остаётся «карточкой»: со скруглениями и полями по бокам,
       просто чуть крупнее. Шапка ложится поверх него, отступив от верха
       ровно настолько, чтобы попасть внутрь кадра. --- */
body.home .hero { padding-top: clamp(10px, 1.4vh, 18px); }
body.home .hero-media {
  aspect-ratio: auto; max-height: none;
  /* высота считается от экрана: под кадром помещаются только кнопки жанров,
     а ряды работ начинаются уже за первым экраном */
  height: max(420px, calc(100vh - 150px));
}
/* кнопкам жанров — воздух снизу, чтобы заголовок первого ряда («AI»)
   не выглядывал из-под сгиба */
body.home .mode-toggle {
  margin-top: clamp(0.9rem, 2vh, 1.4rem);
  margin-bottom: clamp(1.8rem, 4vh, 3rem);
}
body.home .hero-media video { object-position: 50% 32%; }
/* Затемнение только по краям кадра — сверху под шапку, снизу под кнопки.
   Середина остаётся чистой: там видно, что происходит в ролике. */
body.home .hero-scrim {
  background:
    /* мягкое пятно в левом нижнем углу — под текстовым блоком, чтобы подписи
       читались на светлых кадрах, но середина кадра осталась открытой */
    radial-gradient(72% 58% at 4% 90%, rgba(6,6,8,0.72) 0%, rgba(6,6,8,0.42) 42%, rgba(6,6,8,0.14) 68%, transparent 84%),
    linear-gradient(to bottom, rgba(6,6,8,0.7) 0%, rgba(6,6,8,0.2) 12%, transparent 26%),
    linear-gradient(to top, rgba(6,6,8,0.92) 0%, rgba(6,6,8,0.6) 14%, rgba(6,6,8,0.22) 30%, transparent 50%);
}

/* --- Раскладка как на витрине Кинопоиска: заголовок и подпись по центру
       кадра, кнопки — в нижнем левом углу. Ничего не наезжает на середину
       картинки, где обычно главный объект. --- */
body.home .hero-inner {
  align-items: stretch;
  padding-top: calc(clamp(56px, 7.4vh, 72px) + clamp(12px, 1.8vh, 20px));
  padding-bottom: clamp(1.4rem, 4vh, 2.6rem);
}
body.home .hero-content { max-width: none; width: 100%; display: flex; flex-direction: column; }
/* Блок с заголовком опущен в нижнюю (затемнённую) треть кадра и прижат
   к левому краю: середина, где обычно главный объект ролика, остаётся
   ничем не закрыта. */
body.home .hero-lead {
  margin: auto auto clamp(1.1rem, 2.6vh, 1.8rem) 0; text-align: left; max-width: 38ch;
}
body.home .hero-eyebrow { font-size: calc(var(--step--1) * 0.8); letter-spacing: 0.24em; margin-bottom: 0.55rem; color: rgba(244,243,239,0.82); }
body.home .hero-title { font-size: clamp(1.6rem, 0.9rem + 2.4vw, 2.4rem); margin-bottom: 0.55rem; }
body.home .hero-desc {
  max-width: 34ch; font-size: calc(var(--step--1) * 1.02); line-height: 1.45; margin: 0;
  color: rgba(244,243,239,0.86);
}
body.home .hero-actions { justify-content: flex-start; }
body.home .hero-cta { padding: 0.8em 1.6em; }

@media (max-width: 760px) {
  body.home .hero-media { height: min(72vh, 680px); }
  body.home .hero-lead { max-width: none; }
}
@media (max-width: 620px) {
  body.home .hero-media { aspect-ratio: auto; height: 70vh; max-height: none; }
  body.home .hero-desc { max-width: none; }
}

/* ── Ролик ещё не выпущен заказчиком ─────────────────────────────────
   Карточка видна (понятно, что работа есть), но постер размыт, стоит
   замок, курсор не «рука» — открыть страницу нельзя. */
.card-locked { cursor: default; }
.card-locked .card-media img {
  filter: blur(16px) saturate(0.55) brightness(0.62);
  transform: scale(1.12); /* скрываем размытые края */
}
.card-locked:hover .card-media img { transform: scale(1.12); }
.card-locked .card-media::after { opacity: 1; }
.card-locked:hover .card-media { box-shadow: none; }
.card-locked .card-title { color: var(--ink-soft); }

.lock-badge {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 3; display: inline-flex; align-items: center; gap: 0.45em;
  padding: 0.5em 0.9em; border-radius: 999px;
  background: rgba(12, 6, 2, 0.55); border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #fff; font-family: var(--font-mono); font-size: var(--step--1);
  text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.lock-badge svg { width: 14px; height: 14px; }
.lock-badge b { font-weight: 700; }

/* Подпись-объяснение — проявляется при наведении вместо значка */
.lock-note {
  position: absolute; inset: auto 7% 22%; z-index: 3;
  text-align: center; color: rgba(255, 255, 255, 0.92);
  font-family: var(--font-mono); font-size: var(--step--1); line-height: 1.35;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
  pointer-events: none;
}
.card-locked:hover .lock-badge { transform: translate(-50%, -170%); }
.card-locked:hover .lock-note { opacity: 1; transform: translateY(0); }

/* Крупная карточка: замок уезжает выше, чтобы не спорить с оверлеем */
.card-featured.card-locked .lock-badge { top: 38%; }
.card-featured.card-locked .lock-note { inset: auto 20% 34%; }
.watch-pill.is-locked {
  display: inline-flex; align-items: center; gap: 0.45em;
  background: rgba(255, 255, 255, 0.14); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.watch-pill.is-locked svg { width: 15px; height: 15px; }

/* Невыпущенный проект, у которого есть страница-превью: ролик по-прежнему
   закрыт (постер размыт), но карточка кликается — ведёт к материалам. */
.card-locked.is-open { cursor: pointer; }
.card-locked.is-open .card-title { color: var(--ink); }
.card-locked.is-open:hover .card-media { box-shadow: 0 18px 50px -18px rgba(0, 0, 0, 0.8); }
.card-locked.is-open:hover .card-media img { filter: blur(13px) saturate(0.7) brightness(0.72); }
/* Веер бэкстейджа занимает правый край кадра — значок и подпись уводим влево,
   чтобы колода не наезжала на текст. У featured-карточки веера нет. */
.card-locked.is-open:not(.card-featured) .lock-badge {
  left: 6px; top: 6px; transform: none;
  /* компактнее обычного: справа в кадре стоит колода бэкстейджа */
  padding: 0.34em 0.6em; font-size: 0.6rem; gap: 0.35em;
}
.card-locked.is-open:not(.card-featured) .lock-badge svg { width: 12px; height: 12px; }
@media (max-width: 760px) {
  /* Узкая карточка: места рядом с колодой мало — часы убираем, роль
     «ждёт эфира» и так держит пульсирующая точка. */
  .card-locked.is-open:not(.card-featured) .lock-badge { font-size: 0.55rem; }
  .card-locked.is-open:not(.card-featured) .lock-badge svg { display: none; }
}
.card-locked.is-open:not(.card-featured):hover .lock-badge { transform: none; }
.card-locked.is-open:not(.card-featured) .lock-note {
  inset: auto 32% 18% 7%; text-align: left;
}

/* ── Страница невыпущенного проекта: вместо плеера — «табличка» ──────── */
/* Показывать нечего — значит и место занимать незачем: плашка ниже 16/9 */
.player-locked { display: grid; place-items: center; aspect-ratio: 2.6 / 1; min-height: 220px; }
.player-locked-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: blur(26px) saturate(0.5) brightness(0.5); transform: scale(1.12);
}
.player-locked-note {
  position: relative; z-index: 2; display: flex; flex-direction: column;
  align-items: center; gap: 1rem; text-align: center;
  padding: 1.5rem clamp(1.2rem, 6vw, 4rem); max-width: 52ch;
}
/* В плашке значок стоит по месту, а не абсолютом по центру постера */
.player-locked-note .lock-badge { position: static; transform: none; }
.player-locked-note p {
  margin: 0; color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-mono); font-size: var(--step--1); line-height: 1.45;
}

@media (prefers-reduced-motion: reduce) {
  .lock-badge, .lock-note { transition: none; }
}

/* Пульсирующая точка — «в ожидании эфира», а не «закрыто на замок» */
.lock-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: #ffb347; box-shadow: 0 0 0 0 rgba(255, 179, 71, 0.6);
  animation: lock-pulse 2.4s var(--ease) infinite;
}
@keyframes lock-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 179, 71, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(255, 179, 71, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 179, 71, 0); }
}
@media (prefers-reduced-motion: reduce) { .lock-dot { animation: none; } }