/* ═══════════════════════════════════════════════════════════
   АВАНДОК.ПУЛЬС · визуальный слой концепции, вариант А «Портал»
   Натягивается поверх согласованной структуры.
   Блоки и порядок не меняются — меняется только оформление.

   МИГРИРОВАНО: NAV · 01 HERO
   ОЖИДАЮТ:     02–16 (пока держим светлыми карточками на тёмном)
   ═══════════════════════════════════════════════════════════ */

@font-face{
  font-family:'ONDER';
  src:url('assets/ONDER-REGULAR.TTF') format('truetype');
  font-weight:400;font-display:swap;
}

:root{
  --x-blue:#3054FF;
  --x-red:#F9423A;
  --x-navy:#070715;
  --x-light:#EEF4FA;
  --x-bg:#070715;

  --x-ink:#EEF4FA;
  --x-dim:rgba(238,244,250,.62);
  --x-faint:rgba(238,244,250,.34);
  --x-hair:rgba(238,244,250,.14);

  /* ── геометрическая система ──
     Ось композиции — световой шов, а не центр экрана.
     Все блоки выравниваются по --x-col: это левый край
     слова «АВАНДОК», а его правый край упирается в шов. */
  --x-seam:44.2vw;   /* вертикальная ось = портал в кадре */
  --x-col:6vw;       /* левая колонка, считает skin.js */
  --x-obj:50%;
  --x-bevel:15px;    /* скос плоскости — один угол на весь проект */

  --x-pad:clamp(20px,4.4vw,64px);
  --x-ease:cubic-bezier(.22,.61,.36,1);

  /* ── типографическая шкала ──
     Четыре ступени с шагом 1.22, а не семь случайных кеглей.
     Базовая ступень — t-m, от неё считается всё остальное. */
  --t-xs:clamp(12.5px,1.02vw,15px);   /* капитель, метки   */
  --t-s: clamp(15px,1.26vw,18px);     /* кнопки, мелкий    */
  --t-m: clamp(17.5px,1.55vw,22px);   /* основной текст    */
  --t-l: clamp(22px,2.15vw,31px);     /* подзаголовок      */
  --t-h: clamp(29px,3.3vw,50px);      /* заголовок секции  */
  --t-n: clamp(40px,4.6vw,72px);      /* крупные числа     */

  /* трекинг капители — умеренный, не разряженный */
  --tr:.15em;
}

/* глушим унаследованные глобальные правила исходного макета */
label{margin-bottom:0!important}
form{display:block;gap:0;max-width:none}
input,select,textarea{border-radius:0}
details{border:0;border-radius:0;padding:0;margin:0}
summary{font-weight:inherit}

/* ── тёмная сцена вместо белой ── */
body{
  background:var(--x-bg)!important;
  font-family:'Montserrat',-apple-system,'Segoe UI',Roboto,Arial,sans-serif!important;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
.wrap{
  max-width:none!important;
  background:transparent!important;
  box-shadow:none!important;
}
/* ещё не мигрированные блоки остаются светлыми карточками */
.sec{
  max-width:1120px;margin:0 auto;background:#fff;
  border-bottom:1px solid var(--line);
}

/* ═══════════ ПРОЛОГ ═══════════ */
.pre{position:fixed;inset:0;z-index:300;background:var(--x-bg);overflow:hidden;pointer-events:none}
.pre__plane{position:absolute;top:0;bottom:0;width:calc(50% - 1px)}
.pre__plane--red{left:0;background:var(--x-red);z-index:1;transform:translateX(-101%);
  animation:xInL .52s var(--x-ease) .08s both, xOutL .5s var(--x-ease) 1.02s both}
.pre__plane--blue{right:0;background:var(--x-blue);z-index:2;transform:translateX(101%);
  animation:xInR .52s var(--x-ease) .08s both, xOutR .5s var(--x-ease) 1.02s both}
.pre__seam{position:absolute;top:0;bottom:0;left:50%;width:2px;z-index:3;background:#fff;
  transform:translateX(-50%) scaleY(0);box-shadow:0 0 24px 5px rgba(255,255,255,.55);
  animation:xOpen .34s var(--x-ease) .58s both, xBeat .26s ease-out .94s both, xFlood .46s var(--x-ease) 1.06s both}
@keyframes xInL{to{transform:translateX(0)}}
@keyframes xInR{to{transform:translateX(0)}}
@keyframes xOutL{from{transform:translateX(0)}to{transform:translateX(-101%)}}
@keyframes xOutR{from{transform:translateX(0)}to{transform:translateX(101%)}}
@keyframes xOpen{from{transform:translateX(-50%) scaleY(0)}to{transform:translateX(-50%) scaleY(1)}}
@keyframes xBeat{0%{box-shadow:0 0 24px 5px rgba(255,255,255,.55);width:2px}
  45%{box-shadow:0 0 70px 22px rgba(255,255,255,.95);width:4px}
  100%{box-shadow:0 0 24px 5px rgba(255,255,255,.55);width:2px}}
@keyframes xFlood{0%{width:4px;opacity:1}55%{width:60vw;opacity:.5}100%{width:110vw;opacity:0}}
.pre.is-done{opacity:0;transition:opacity .3s linear}
.pre.is-hidden{display:none}

/* ═══════════ ШАПКА ═══════════ */
nav.nav-x{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;gap:24px;
  padding:16px var(--x-pad);
  background:transparent;backdrop-filter:none;border:0;
  transform:translateY(-120%);
  transition:background .4s linear,backdrop-filter .4s linear,border-color .4s linear;
}
nav.nav-x.is-in{animation:xHdr .7s var(--x-ease) forwards}
@keyframes xHdr{to{transform:translateY(0)}}
nav.nav-x.is-stuck{
  background:rgba(7,7,21,.74);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--x-hair);
}
.nav-x__logo{display:flex;align-items:center;gap:11px;margin-right:auto;text-decoration:none}
.nav-x__word{font-size:var(--t-xs);font-weight:700;letter-spacing:var(--tr);color:var(--x-ink)}
.nav-x__word em{color:var(--x-red);font-style:normal}
/* знак: красная плоскость сзади, синяя спереди */
.mark{position:relative;display:block;width:22px;height:22px;flex:none}
.mark i{position:absolute;display:block;width:15px;height:15px}
.mark i:first-child{left:0;top:0;background:var(--x-red)}
.mark i:last-child{right:0;bottom:0;background:var(--x-blue);box-shadow:-1.5px -1.5px 0 0 var(--x-bg)}
.nav-x__links{display:flex;gap:26px}
.nav-x__links a{font-size:var(--t-s);color:var(--x-dim);text-decoration:none;letter-spacing:.01em;transition:color .25s}
.nav-x__links a:hover{color:var(--x-ink)}

/* ═══════════ КНОПКИ ═══════════
   Основная кнопка построена по логике знака: синяя
   плоскость спереди, красная выглядывает сзади.
   При наведении плоскости расходятся — как в прологе.
   Вторичное действие боксом не оформляем вовсе. */
.btn-x{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding:clamp(20px,2.5vh,27px) calc(clamp(34px,3.2vw,50px) + var(--x-bevel))
          clamp(20px,2.5vh,27px) clamp(34px,3.2vw,50px);
  border:0;border-radius:0;text-decoration:none;
  font-family:inherit;font-size:var(--t-s);font-weight:600;letter-spacing:.035em;line-height:1;
  color:#fff;background:var(--x-blue);
  text-shadow:none;cursor:pointer;
  /* плоскость со скосом — не прямоугольник */
  clip-path:polygon(0 0, 100% 0, calc(100% - var(--x-bevel)) 100%, 0 100%);
  /* красная плоскость сзади повторяет силуэт скоса */
  filter:drop-shadow(5px 5px 0 var(--x-red));
  transition:transform .42s var(--x-ease),filter .42s var(--x-ease);
}
.btn-x:hover{transform:translate(-3px,-3px);filter:drop-shadow(11px 11px 0 var(--x-red))}
.btn-x:active{transform:translate(0,0);filter:drop-shadow(3px 3px 0 var(--x-red))}

/* вторичное — не коробка, а связка «текст + стрелка» */
.btn-x--ghost{
  background:none;box-shadow:none;filter:none;clip-path:none;color:var(--x-ink);
  padding:clamp(20px,2.5vh,27px) 2px;font-weight:400;letter-spacing:.02em;
}
.btn-x--ghost::after{
  content:'';position:absolute;left:2px;right:2px;bottom:clamp(17px,2.2vh,24px);height:1px;
  background:currentColor;opacity:.3;transform-origin:right;
  transition:opacity .4s var(--x-ease),transform .4s var(--x-ease);
}
/* filter здесь обязателен. `.btn-x--ghost` гасит красную
   плоскость, но `.btn-x:hover` весит больше и на наведении
   возвращал drop-shadow: под словом проявлялась красная копия
   со сдвигом 11px — её и принимали за поломанную анимацию. */
.btn-x--ghost:hover,
.btn-x--ghost:active{transform:none;box-shadow:none;filter:none}
.btn-x--ghost:hover::after{opacity:.95;transform:scaleX(1.06)}

/* Расхождение цвета на первом экране — тот же жест, что и в прологе:
   белое слово остаётся сверху и читается, из-под него расходятся
   две плоскости — красная влево-вниз, синяя вправо-вверх.

   Первая версия расходилась на 3px при кегле 16: получалось не
   расхождение, а тройное изображение — глаз читал слово трижды,
   и подчёркивание проходило ровно между белой и красной копией.
   Теперь смещение вдвое меньше кегельной доли и копии тише:
   по краям букв идёт цветная кромка, а слово остаётся одно. */
.hero-x .btn-x--ghost{
  text-shadow:0 0 0 rgba(249,66,58,0), 0 0 0 rgba(48,84,255,0);
  transition:transform .42s var(--x-ease),filter .42s var(--x-ease),
             text-shadow .34s var(--x-ease);
}
.hero-x .btn-x--ghost:hover{
  text-shadow:-.11em .055em 0 rgba(249,66,58,.34),
               .11em -.055em 0 rgba(48,84,255,.34);
}
.hero-x .btn-x--ghost:active{
  text-shadow:-.05em .025em 0 rgba(249,66,58,.26),
               .05em -.025em 0 rgba(48,84,255,.26);
}
/* Подчёркивание расходится вместе с текстом — иначе линия
   стоит на месте между разъехавшимися копиями и выдаёт приём. */
.hero-x .btn-x--ghost::after{
  transition:opacity .4s var(--x-ease),transform .4s var(--x-ease),
             box-shadow .34s var(--x-ease)}
.hero-x .btn-x--ghost:hover::after{
  box-shadow:-.11em .055em 0 rgba(249,66,58,.28),
              .11em -.055em 0 rgba(48,84,255,.28)}

/* в шапке — та же плоскость, но тише */
.btn-x--sm{padding:12px calc(20px + var(--x-bevel)) 12px 20px;font-size:12px;
  filter:drop-shadow(3px 3px 0 var(--x-red))}
.btn-x--sm:hover{transform:translate(-2px,-2px);filter:drop-shadow(6px 6px 0 var(--x-red))}

/* ═══════════ 01 · ГЕРОЙ ═══════════ */
/* Герой НЕ залипает. Раньше он был sticky внутри искусственно
   высокой сцены и после перехода ещё экран уезжал пустым —
   это и был чёрный экран. Теперь это обычная секция, а эффекты
   привязаны к её собственному уходу из вида (view-timeline). */
.scene-x{position:relative}
/* Высота не фиксированная: экран, но растёт под контент,
   если тот не помещается. Ничего не обрезается и не прячется. */
.hero-x{position:relative;min-height:max(620px,100svh);
  overflow:hidden;display:grid;place-items:center;
  padding-block:clamp(96px,12vh,140px) clamp(56px,8vh,90px)}
/* Постоянное растворение нижнего края в фон страницы.
   Виньетка гасла к концу перехода и оголяла обрез кадра —
   получалась граница слайда. Эта заливка не анимируется. */
.hero-x::after{content:'';position:absolute;left:0;right:0;bottom:0;
  height:38vh;z-index:4;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(7,7,21,0) 0%, rgba(7,7,21,.45) 46%,
    rgba(7,7,21,.88) 78%, var(--x-bg) 100%)}

/* Свет, вырывающийся из шва при проходе. Раньше здесь
   открывался ещё один тёмный кадр — из-за него экран
   и проваливался в черноту. */
/* Кадр «Лужников» стоит в том же слое, что и свет, но выше него:
   свет работает ореолом вокруг кровли, а не заливает её. Кадр
   крупный намеренно — это единственное место, где логотип
   компании появляется в натуральную величину. */
.reveal-x__shot{position:absolute;inset:0;z-index:0;opacity:0;
  overflow:hidden;pointer-events:none}
/* Кадр выравнивается не по центру экрана, а по световому шву:
   половины расходятся именно от него, и логотип на кровле
   должен встать в просвет, а не в край. */
.reveal-x__shot img{width:100%;height:100%;object-fit:cover;
  object-position:46% 66%}
/* лёгкое затемнение по краям, чтобы кадр не спорил с текстом
   первого экрана, пока тот ещё на месте */
.reveal-x__shot::after{content:'';position:absolute;inset:0;
  background:
    radial-gradient(78% 86% at var(--x-seam) 56%,transparent 0%,
      transparent 44%,rgba(7,7,21,.42) 82%,rgba(7,7,21,.72) 100%),
    linear-gradient(180deg,rgba(7,7,21,.5) 0%,rgba(7,7,21,0) 26%,
      rgba(7,7,21,0) 64%,rgba(7,7,21,.62) 100%)}

.reveal-x{position:absolute;inset:0;z-index:0;opacity:0;
  background:
    radial-gradient(26% 150% at var(--x-seam) 50%,
      rgba(255,255,255,1) 0%, rgba(232,240,255,.92) 12%,
      rgba(150,180,255,.62) 30%, rgba(48,84,255,.32) 52%,
      rgba(7,7,21,0) 78%),
    linear-gradient(180deg,rgba(7,7,21,.34),rgba(7,7,21,0) 28%,
      rgba(7,7,21,0) 72%,rgba(7,7,21,.34))}

/* Полотна растворяются к низу маской: заливка поверх не всегда
   перекрывает кадр, а маска убирает пиксели гарантированно —
   границы слайда не остаётся ни при каком порядке слоёв. */
/* Маска отсюда снята: на движущемся слое она пересчитывается
   на каждом кадре. Низ кадра растворяет .hero-x::after —
   обычная заливка, она ничего не стоит. */
.hero-x__half{position:absolute;inset:0;z-index:1}
.hero-x__half img{width:100%;height:100%;object-fit:cover;object-position:var(--x-obj) center}
.hero-x__half--l{clip-path:inset(0 calc(100% - var(--x-seam)) 0 0)}
.hero-x__half--r{clip-path:inset(0 0 0 var(--x-seam))}

/* Кадр яркий именно в центре, где стоит текст, — поэтому
   затемняем НЕ края, а середину: тёмная подложка под
   текстовой колонкой, по краям стекло остаётся видимым */
.hero-x__vig{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(86% 70% at 50% 47%,
      rgba(7,7,21,.90) 0%, rgba(7,7,21,.78) 34%,
      rgba(7,7,21,.44) 66%, rgba(7,7,21,.12) 88%, transparent 100%),
    linear-gradient(180deg,
      rgba(7,7,21,.88) 0%, rgba(7,7,21,.30) 20%,
      rgba(7,7,21,.30) 58%, rgba(7,7,21,.94) 100%),
    rgba(7,7,21,.30);
}
/* Ось стоит в середине настоящего просвета кадра, а не на кромке
   стены. Свечение по ширине равно просвету, внутри него — тонкое
   ядро; в этот же зазор попадает стык «АВАНДОК.» | «ПУЛЬС» */
.hero-x__glow{position:absolute;top:0;bottom:0;z-index:3;pointer-events:none;
  left:var(--x-cor-l,44%);
  width:calc(var(--x-cor-r,58%) - var(--x-cor-l,44%));
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.09) 34%,
             rgba(255,255,255,.15) 48%,rgba(255,255,255,.09) 66%,transparent);
  /* mix-blend-mode снят: наложение на движущемся слое
     заставляет пересчитывать композицию каждый кадр */
  animation:xBreathe 4s ease-in-out infinite}
.hero-x__seam{position:absolute;top:0;bottom:0;left:var(--x-seam);z-index:4;width:1px;
  transform:translateX(-50%);pointer-events:none;
  background:linear-gradient(180deg,
    transparent 0%, rgba(255,255,255,.5) 16%,
    rgba(255,255,255,.72) 46%, rgba(255,255,255,.5) 74%,
    transparent 100%);
  animation:xBreathe 4s ease-in-out infinite}
@keyframes xBreathe{
  0%,100%{opacity:.3;box-shadow:0 0 12px 1px rgba(255,255,255,.2)}
  8%{opacity:.95;box-shadow:0 0 34px 5px rgba(255,255,255,.6)}
  16%{opacity:.48;box-shadow:0 0 16px 2px rgba(255,255,255,.28)}
  24%{opacity:.8;box-shadow:0 0 26px 4px rgba(255,255,255,.45)}
  40%{opacity:.3;box-shadow:0 0 12px 1px rgba(255,255,255,.2)}
}

/* Две колонки, разделённые тем же швом:
   слева — заявление и действие, справа — факты.
   Ширина левой колонки = расстояние от поля до шва. */
.hero-x__content{position:relative;z-index:5;width:100%;text-align:left;
  display:grid;
  grid-template-columns:calc(var(--x-seam) - var(--x-col)) 1fr;
  column-gap:clamp(26px,2.6vw,52px);
  align-items:start;
  padding-left:var(--x-col);padding-right:clamp(20px,4vw,64px);
  text-shadow:0 1px 26px rgba(7,7,21,.92),0 0 60px rgba(7,7,21,.7)}
.facts,/* Вордмарк — официальная отрисовка бренда, а не набор шрифтом.
   Красная точка запечена в файле на 59.38% ширины; поверх неё
   кладём живую точку, чтобы сохранить пульсацию и свечение. */
.title-x{position:relative;display:block;margin:0;line-height:0}
.title-x__img{display:block;width:100%;height:auto}
.title-x__dot{position:absolute;top:50%;left:59.38%;
  width:.115em;height:.115em;border-radius:50%;
  transform:translate(-50%,-50%);
  background:var(--x-red);font-size:inherit;
  animation:xDot 4s ease-in-out infinite}
@keyframes xDot{
  0%,100%{transform:translate(-50%,-50%) scale(1);box-shadow:0 0 18px 3px rgba(249,66,58,.65)}
  8%{transform:translate(-50%,-50%) scale(1.34);box-shadow:0 0 54px 14px rgba(249,66,58,1)}
  16%{transform:translate(-50%,-50%) scale(1.05);box-shadow:0 0 22px 4px rgba(249,66,58,.7)}
  24%{transform:translate(-50%,-50%) scale(1.22);box-shadow:0 0 40px 9px rgba(249,66,58,.9)}
  40%{transform:translate(-50%,-50%) scale(1);box-shadow:0 0 18px 3px rgba(249,66,58,.65)}
}


.facts,.title-x{grid-column:1 / -1}
.hx-left{grid-column:1;padding-top:clamp(26px,5vh,58px)}
.hx-right{grid-column:2;padding-top:clamp(26px,5vh,58px)}

/* Никаких точек-разделителей: пункты разводятся волосяной линией */
.facts{list-style:none;display:flex;flex-wrap:wrap;
  margin:0 0 clamp(20px,3.8vh,44px);padding:0}
.facts li{font-size:var(--t-xs);letter-spacing:var(--tr);text-transform:uppercase;
  color:rgba(238,244,250,.84);padding:1px clamp(13px,1.3vw,20px);line-height:1.4}
.facts li:first-child{padding-left:0}
.facts li+li{border-left:1px solid rgba(238,244,250,.24)}

.title-x__l{display:block}

.sub-x{margin:0;font-size:var(--t-l);
  font-weight:300;color:rgba(238,244,250,.96);letter-spacing:.005em;line-height:1.22;
  text-wrap:balance}
.lead-x{margin:clamp(14px,2vh,22px) 0 0;font-size:var(--t-m);
  font-weight:300;line-height:1.6;color:rgba(238,244,250,.84);text-wrap:pretty}

/* Правая колонка героя: три панели на волосяных линиях */
.panel{padding:clamp(15px,2.1vh,24px) 0}
.panel+.panel{border-top:1px solid rgba(238,244,250,.16)}
.panel:first-child{padding-top:0}
.panel__k{margin:0 0 clamp(9px,1.3vh,14px);font-size:var(--t-xs);
  letter-spacing:var(--tr);text-transform:uppercase;color:rgba(238,244,250,.46)}

.hours{display:flex;flex-wrap:wrap;margin:0}
.hours>div{padding:0 clamp(15px,1.5vw,24px)}
.hours>div:first-child{padding-left:0}
.hours>div+div{border-left:1px solid rgba(238,244,250,.2)}
.hours dt{font-size:var(--t-l);font-weight:600;letter-spacing:-.005em;line-height:1.1;
  color:rgba(238,244,250,.97);font-variant-numeric:tabular-nums}
.hours dd{margin:6px 0 0;font-size:var(--t-xs);letter-spacing:var(--tr);text-transform:uppercase;
  color:rgba(238,244,250,.52)}
.hours--sx{margin:0}

.place__v{margin:0;font-size:var(--t-l);font-weight:600;letter-spacing:-.005em;line-height:1.1;
  color:rgba(238,244,250,.97)}
.place__a{margin:7px 0 0;font-size:var(--t-s);font-weight:300}
.place__a a{display:inline-block;position:relative;color:rgba(238,244,250,.66);
  text-decoration:none;padding-bottom:3px;transition:color .3s var(--x-ease)}
.place__a a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;opacity:.32;transform-origin:right;
  transition:opacity .35s var(--x-ease),transform .35s var(--x-ease)}
.place__a a:hover{color:rgba(238,244,250,.98)}
.place__a a:hover::after{opacity:.95;transform:scaleX(1.03)}

.pulse-x{margin:0;display:grid;justify-items:stretch;gap:clamp(10px,1.4vh,16px)}
.pulse-x__svg{width:100%;height:clamp(30px,4vh,46px);overflow:visible;display:block}
.pulse-x__svg path{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.pulse-x__base{stroke:rgba(238,244,250,.2);stroke-width:1.2}
.pulse-x__live{stroke:#fff;stroke-width:2;filter:drop-shadow(0 0 6px rgba(255,255,255,.9));
  stroke-dasharray:64 456;stroke-dashoffset:520;animation:xTravel 4s linear infinite}
@keyframes xTravel{to{stroke-dashoffset:-64}}
.pulse-x__val{margin:0}
.pulse-x__val b{font-size:var(--t-l);font-weight:600;letter-spacing:-.005em;line-height:1.1;
  color:rgba(238,244,250,.97);font-variant-numeric:tabular-nums}

.cta-x{margin:clamp(26px,4.2vh,46px) 0 0;display:flex;align-items:center;
  gap:clamp(14px,1.8vw,28px);justify-content:flex-start;flex-wrap:wrap}

@media (max-width:760px){
  .title-x{flex-direction:column;align-items:center;line-height:.88}
}
@media (max-width:560px){
  .cta-x{flex-direction:column;align-items:stretch}
  .btn-x{text-align:center}
}

/* ═══════════ ДОСТУПНОСТЬ ═══════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .pre{display:none}
  nav.nav-x{transform:none}
  .hero-x__content>*{opacity:1;transform:none;filter:none}
  .reveal-x{display:none}
}
:focus-visible{outline:2px solid var(--x-blue);outline-offset:3px}

/* ═══════════════════════════════════════════════
   МЯГКОЕ ПОЯВЛЕНИЕ ПРИ ПРОКРУТКЕ
   Каждый элемент оживает на входе в кадр. Всё на нативном
   view-timeline: ни одного обработчика скролла, ни одной
   библиотеки. Соседи в сетке идут с лёгким сдвигом фазы.
   ═══════════════════════════════════════════════ */
@supports (animation-timeline:view()){
  .sx__t,.sx__l,.sx__sub,
  .gx>*,.rows li,.nums>div,.quotes figure,.spk figure,
  .logos-x .slot,.faq details,.band,
  .loc__map,.loc__info,.reg__side,.reg__form,
  .sig-x__in>*,.fin__in>*,.ft>*{
    animation:xIn linear forwards;
    animation-timeline:view();
    animation-range:entry 4% cover 22%;
  }
  /* фазовый сдвиг внутри рядов — элементы не выпрыгивают разом */
  .gx>*:nth-child(2n),.nums>div:nth-child(2n),
  .quotes figure:nth-child(2n),.spk figure:nth-child(2n),
  .logos-x .slot:nth-child(2n){animation-range:entry 4% cover 27%}
  .gx>*:nth-child(3n),.spk figure:nth-child(3n),
  .logos-x .slot:nth-child(3n){animation-range:entry 4% cover 32%}
  .gx>*:nth-child(4n),.spk figure:nth-child(4n),
  .logos-x .slot:nth-child(4n){animation-range:entry 4% cover 37%}

  /* кадры внутри секций едут медленнее страницы */
  .band img,.loc__map img{animation:xPar linear forwards;
    animation-timeline:view();animation-range:cover 0% cover 100%}
}
/* Блюр отсюда убран намеренно: это правило висит на шести
   десятках элементов, и каждый из них перерисовывался с
   размытием на каждом кадре прокрутки. Осталось то, что
   браузер отдаёт видеокарте. */
@keyframes xIn{
  from{opacity:0;transform:translate3d(0,30px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes xPar{from{transform:scale(1.1) translateY(-2.2%)}to{transform:scale(1.1) translateY(2.2%)}}

/* Ничего из этого не должно мешать тем, кто отключил движение */
@media (prefers-reduced-motion:reduce){
  .sx__t,.sx__l,.sx__sub,.gx>*,.rows li,.nums>div,.quotes figure,
  .spk figure,.logos-x .slot,.faq details,.band,.loc__map,.loc__info,
  .reg__side,.reg__form,.sig-x__in>*,.fin__in>*,.ft>*{
    animation:none!important;opacity:1!important;transform:none!important;filter:none!important}
  .band img,.loc__map img{animation:none!important;transform:none!important}
}

/* ═══════════ РЕЖИМ СЪЁМКИ ═══════════
   ?still=1 — устоявшийся кадр без вступительных анимаций.
   Нужен, потому что headless не доигрывает их под
   виртуальным временем и снимок выходит пустым. */
.is-still .pre{display:none}
.is-still nav.nav-x{transform:none;animation:none}
.is-still .hero-x__content>*{opacity:1!important;transform:none!important;filter:none!important;animation:none!important}

/* ═══════════════════════════════════════════════
   ДВИЖЕНИЕ: ШТОРКА, ОТКЛИК, СЧЁТ
   Заголовки не просто проявляются, а открываются
   шторкой снизу вверх. Ячейки отвечают на курсор.
   ═══════════════════════════════════════════════ */
@supports (animation-timeline:view()){
  .sx__t,.sig-x__t,.fin__t,.reg__ok__t{
    animation:xWipe linear forwards;
    animation-timeline:view();
    animation-range:entry 6% cover 26%;
    will-change:clip-path,transform;
  }
}
@keyframes xWipe{
  from{clip-path:inset(0 0 106% 0);transform:translateY(16px)}
  to{clip-path:inset(0 0 -12% 0);transform:none}
}

/* ячейки сетки отвечают на курсор: подсветка от края к центру */
.gx>*{position:relative;transition:background .45s var(--x-ease)}
.gx>*:not(.gx--empty)::before{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;
  background:var(--x-red);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--x-ease)}
.gx>*:not(.gx--empty):hover{background:rgba(238,244,250,.035)}
.gx>*:not(.gx--empty):hover::before{transform:scaleX(1)}

/* строки «зачем идти» подтягиваются к курсору */
.rows li{transition:background .4s var(--x-ease)}
.rows li:hover{background:rgba(238,244,250,.03)}
.rows li h3{transition:transform .5s var(--x-ease)}
.rows li:hover h3{transform:translateX(10px)}

/* пункты программы — то же движение */
#agenda .agenda-item{transition:background .4s var(--x-ease)}
#agenda .agenda-item:hover{background:rgba(238,244,250,.03)}
#agenda .agenda-block{transition:transform .5s var(--x-ease)}
#agenda .agenda-item:hover .agenda-block{transform:translateX(10px)}

/* портреты спикеров выходят из серого при наведении */
.spk__ph img{transition:filter .6s var(--x-ease),transform .8s var(--x-ease)}
.spk figure:hover .spk__ph img{filter:grayscale(.3) brightness(.62) contrast(1.05);transform:scale(1.05)}

/* слоты логотипов дышат */
.slot{transition:background .4s var(--x-ease)}
.slot:hover{background:rgba(238,244,250,.04)}

/* числа, пока считаются, держат ширину и не дёргают верстку */
.nums b,.reg__cap b,.pulse-x__val b{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  .sx__t,.sig-x__t,.fin__t,.reg__ok__t{animation:none!important;clip-path:none!important;transform:none!important}
  .rows li:hover h3,#agenda .agenda-item:hover .agenda-block{transform:none}
  .spk figure:hover .spk__ph img{transform:none}
}

/* ═══════════════════════════════════════════════
   ФИРМЕННЫЕ АССЕТЫ
   ═══════════════════════════════════════════════ */
/* логотип «Среды» вместо набранного заголовка премьеры */
.sig-x__k{margin:0 0 clamp(16px,2.4vh,26px);font-size:var(--t-xs);
  letter-spacing:var(--tr);text-transform:uppercase;color:rgba(238,244,250,.55)}
.sig-x__logo{display:block;width:min(100%,clamp(260px,34vw,520px));height:auto}

/* ── ПРОДУКТОВЫЕ НАПРАВЛЕНИЯ ────────────────────────────────
   Было: три логотипа, под каждым абзац в две строки. Полоса
   выглядела перегруженной, а описания читал мало кто. Теперь
   в кадре только знаки — вдвое крупнее прежнего, — а описание
   приходит по наведению на тот продукт, который заинтересовал.
   На тач-устройствах наведения нет, поэтому там текст стоит
   на месте: см. mobile.css. */
/* Три колонки зажимали знак: лого продукта — широкий локап
   6:1, в ячейке 375px он не поднимался выше 43px. Строками во
   всю полосу знак становится вдвое крупнее, а описание встаёт
   справа от него и не спорит с ним за место. */
.prods{display:grid;grid-template-columns:1fr;
  gap:1px;background:rgba(238,244,250,.2)}
.prod{position:relative;display:grid;
  grid-template-columns:minmax(0,46%) minmax(0,1fr);
  align-items:center;gap:clamp(20px,3vw,48px);overflow:hidden;
  background:var(--x-bg);text-decoration:none;
  padding:clamp(26px,3.6vh,44px) clamp(20px,2vw,34px);
  transition:background .45s var(--x-ease)}
.prod::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--x-red);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--x-ease)}
.prod:hover{background:rgba(48,84,255,.28)}
.prod:hover::before{transform:scaleX(1)}
.prod__logo{display:block;justify-self:start;line-height:0}
.prods img{display:block;height:clamp(34px,5vw,72px);width:auto;max-width:100%;
  opacity:.92;transition:opacity .4s var(--x-ease),transform .5s var(--x-ease)}
.prod:hover img{opacity:1;transform:translateX(clamp(4px,.6vw,10px))}

/* описание живёт во второй колонке и выезжает справа */
.prod__t{font-size:var(--t-s);font-weight:300;line-height:1.55;
  color:rgba(238,244,250,.94);max-width:52ch;
  padding-right:clamp(22px,2.4vw,40px);
  opacity:0;transform:translateX(14px);
  transition:opacity .42s var(--x-ease),transform .42s var(--x-ease)}
.prod:hover .prod__t,.prod:focus-visible .prod__t{opacity:1;transform:none}

/* реальный логотип в слоте партнёра */
.slot__logo{max-width:min(74%,180px);height:auto;
  opacity:.72;filter:grayscale(1) brightness(1.9);
  transition:opacity .4s var(--x-ease),filter .4s var(--x-ease)}
.slot:hover .slot__logo{opacity:1;filter:grayscale(0) brightness(1)}

/* логотип в футере */
.ft__logo{height:clamp(20px,2vw,26px);width:auto}

/* кадр над блоком, а не под ним */
.band--top{margin-top:0;margin-bottom:clamp(34px,5vh,64px)}

/* видео-атмосфера в финале */
.fin__video{width:100%;height:100%;object-fit:cover;display:block}
@media (prefers-reduced-motion:reduce){
  .fin__video{display:none}
  .fin__bg{background:#040410}
}

/* Кадры в полосах обязаны укладываться в ширину полосы:
   новые снимки приходили в натуральную величину и рвали страницу */
.band{overflow:hidden}
.band img{display:block;width:100%;max-width:100%;
  height:clamp(220px,34vh,420px);object-fit:cover}
.band--top img{height:clamp(200px,30vh,380px)}

/* Ни одна картинка не шире своего контейнера — общий предохранитель */
.wrap img{max-width:100%}
body{overflow-x:clip}