/* ═══════════════════════════════════════════════════════════
   ПУЛЬС СОБЫТИЯ
   То, что было подсмотрено у второй версии и не взято сразу.
   Правило файла то же, что в motion.css: анимируются только
   transform и opacity.

   Отдельно про то, чего здесь НЕТ. У них линии двигаются через
   stroke-dashoffset, а свечение логотипа — через drop-shadow.
   Оба свойства не композитятся: браузер перерисовывает слой на
   каждом кадре. Рисунок тот же, механика другая — рисунок
   продублирован встык и едет transform'ом, а свечение вынесено
   отдельным слоем, у которого дышит прозрачность.
   ═══════════════════════════════════════════════════════════ */

/* ── ВОЛНЫ ВО ВСЮ ШИРИНУ ──────────────────────────────────── */
/* z-index 5: ниже виньетки волны глохли, а нижний градиент
   героя (::after) их дорисовывал в фон. Текст стоит выше,
   пересечения с ним нет — волны идут по самой кромке. */
/* Маски здесь нет намеренно. Она стояла на контейнере, внутри
   которого едут линии, и браузер пересчитывал её на каждом
   кадре — проход первого экрана терял по 38 кадров. Края
   гасим обычными градиентными шторками: это простые слои,
   они рисуются один раз. */
.waves{position:absolute;left:0;right:0;bottom:0;z-index:5;overflow:hidden;
  height:clamp(140px,22vh,220px);pointer-events:none;opacity:.72}
.waves::before,.waves::after{content:'';position:absolute;top:0;bottom:0;
  width:14%;z-index:2;pointer-events:none}
.waves::before{left:0;background:linear-gradient(90deg,var(--x-bg),transparent)}
.waves::after{right:0;background:linear-gradient(270deg,var(--x-bg),transparent)}
.waves svg{width:200%;height:100%;display:block}
.waves path{fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.waves__g{animation:waveRun linear infinite}
@keyframes waveRun{to{transform:translate3d(-50%,0,0)}}

.waves__g--1 path{stroke:rgba(48,84,255,.6)}
.waves__g--1{animation-duration:26s}
.waves__g--2 path{stroke:rgba(249,66,58,.5)}
.waves__g--2{animation-duration:38s;animation-direction:reverse}
.waves__g--3 path{stroke:rgba(238,244,250,.18)}
.waves__g--3{animation-duration:52s}

/* при проходе волны уходят вместе с кадром */
@supports (animation-timeline:scroll()){
  .waves{animation:wavesOut linear both;
    animation-timeline:scroll(root block);animation-range:0 60vh}
}
@keyframes wavesOut{to{opacity:0}}

/* ── СВЕЧЕНИЕ ЗНАКА В ТАКТ ──────────────────────────────────
   Аура убрана: поверх вордмарка она давала вокруг точки
   грязный тёмно-красный ореол вместо свечения. Точка светит
   сама — чистым тугим ядром, без второго слоя. */
.title-x{position:relative}
.title-x__aura{display:none}

/* ── ПОЛНЫЙ ОБРАТНЫЙ ОТСЧЁТ ───────────────────────────────── */
/* Четыре величины обязаны стоять одной строкой: в две они
   разваливаются и перестают читаться как один отсчёт.
   Отсюда компактные поля и подписи мельче обычной капители. */
.cd{display:flex;flex-wrap:nowrap;margin:clamp(9px,1.3vh,14px) 0 0}
.cd>div{padding:0 clamp(9px,.9vw,15px);min-width:0}
.cd>div:first-child{padding-left:0}
.cd>div+div{border-left:1px solid rgba(238,244,250,.2)}
.cd b{display:block;font-size:var(--t-m);font-weight:600;line-height:1.1;
  letter-spacing:-.01em;color:rgba(238,244,250,.98);
  font-variant-numeric:tabular-nums}
.cd span{display:block;margin-top:5px;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(238,244,250,.46);white-space:nowrap}
/* секунды тикают — гасим их на тон, чтобы не дёргали глаз */
.cd>div:last-child b{color:rgba(238,244,250,.72)}

/* ── КАСКАДНЫЙ ВХОД ПЕРВОГО ЭКРАНА ────────────────────────── */
.hero-x__content>*{animation:heroIn .9s cubic-bezier(.2,.65,.2,1) both}
.hero-x__content>*:nth-child(1){animation-delay:.06s}
.hero-x__content>*:nth-child(2){animation-delay:.2s}
.hero-x__content>*:nth-child(3){animation-delay:.36s}
.hero-x__content>*:nth-child(4){animation-delay:.5s}
@keyframes heroIn{
  from{opacity:0;transform:translate3d(0,26px,0)}
  to  {opacity:1;transform:translate3d(0,0,0)}
}
/* внутри правой колонки панели тоже приходят по очереди */
.hx-right .panel{animation:heroIn .9s cubic-bezier(.2,.65,.2,1) both}
.hx-right .panel:nth-of-type(1){animation-delay:.56s}
.hx-right .panel:nth-of-type(2){animation-delay:.66s}
.hx-right .panel:nth-of-type(3){animation-delay:.76s}
.waves,.cue{animation-delay:.9s}

/* ── СКВОЗНОЙ СВЕТОВОЙ СЛОЙ ───────────────────────────────── */
.orbs{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  contain:strict}
.orb{position:absolute;display:block;border-radius:50%;
  width:min(58vw,760px);aspect-ratio:1}
.orb--blue{left:-14vw;top:24vh;
  background:radial-gradient(circle,rgba(48,84,255,.14) 0%,rgba(48,84,255,.05) 42%,transparent 70%);
  animation:orbA 46s ease-in-out infinite alternate}
.orb--red{right:-16vw;top:52vh;
  background:radial-gradient(circle,rgba(249,66,58,.11) 0%,rgba(249,66,58,.04) 42%,transparent 70%);
  animation:orbB 58s ease-in-out infinite alternate}
@keyframes orbA{
  from{transform:translate3d(0,0,0) scale(1)}
  to  {transform:translate3d(12vw,-16vh,0) scale(1.18)}
}
@keyframes orbB{
  from{transform:translate3d(0,0,0) scale(1)}
  to  {transform:translate3d(-14vw,14vh,0) scale(1.12)}
}
/* содержимое страницы стоит над слоем */
.scene-x,.sx,.sig-x,.fin,.ft,nav.nav-x,.mcta{position:relative;z-index:1}

@media (prefers-reduced-motion:reduce){
  .waves__g,.title-x__aura,.orb,
  .hero-x__content>*,.hx-right .panel{animation:none!important;
    opacity:1!important;transform:none!important}
  .title-x__aura{transform:translateY(-50%)!important}
}

/* ═══════════════════════════════════════════════════════════
   ЦИФРЫ НА КАДРЕ ГОРОДА
   Раньше числа стояли отдельной строкой, а фотография — под
   ними. Теперь числа лежат прямо на кадре, а подписи вынесены
   под него отдельной строкой в тех же колонках: крупное число
   работает на фоне, мелкий текст не спорит с фотографией.
   ═══════════════════════════════════════════════════════════ */
.numsx{position:relative;margin-top:clamp(30px,4.6vh,56px);
  border-top:1px solid rgba(238,244,250,.13)}
.numsx__bg{position:absolute;left:0;right:0;top:0;
  height:clamp(150px,22vh,240px);overflow:hidden;z-index:0}
.numsx__bg img{width:100%;height:100%;object-fit:cover;object-position:center 46%}
.numsx__bg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,7,21,.72) 0%,rgba(7,7,21,.5) 40%,
    rgba(7,7,21,.72) 78%,var(--x-bg) 100%)}
.numsx__seam{position:absolute;top:0;left:var(--x-seam);width:1px;z-index:2;
  height:clamp(150px,22vh,240px);transform:translateX(-50%);pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.4) 40%,transparent);
  animation:xPulseGlow var(--x-beat) ease-in-out infinite}

.numsx__row{position:relative;z-index:2;
  display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));
  height:clamp(150px,22vh,240px);align-items:center}
.numsx__row>div{padding:0 clamp(18px,1.8vw,30px)}
/* Опору числу даёт затемнение кадра, а не двойная тень на
   72-пиксельном шрифте: размытие в 70px пересчитывается при
   каждой перерисовке блока. */
.numsx__row b{display:block;font-size:var(--t-n);font-weight:300;line-height:1;
  letter-spacing:-.03em;color:#fff;
  text-shadow:0 1px 12px rgba(7,7,21,.9)}

.numsx__cap{position:relative;z-index:2;
  display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));
  gap:1px;background:rgba(238,244,250,.13)}
.numsx__cap>div{background:var(--x-bg);
  padding:clamp(16px,2.2vh,24px) clamp(18px,1.8vw,30px)}
.numsx__cap span{display:block;font-size:var(--t-xs);letter-spacing:var(--tr);
  text-transform:uppercase;color:rgba(238,244,250,.5)}

/* ═══════════════════════════════════════════════════════════
   ПОРТРЕТЫ
   ═══════════════════════════════════════════════════════════ */
/* аватар в цитате: круг, ровно под подпись */
img.ava{width:clamp(48px,3.6vw,60px);height:clamp(48px,3.6vw,60px);
  border-radius:50%;object-fit:cover;object-position:center 22%;flex:none;
  background:#040410;filter:grayscale(.35) contrast(1.03)}

/* карточка спикера с настоящим портретом: общий фильтр
   рассчитан на тёмные рендеры-заглушки и живое лицо гасит */
.spk--real .spk__ph img{filter:grayscale(.5) brightness(.92) contrast(1.04)}
.spk--real:hover .spk__ph img{filter:grayscale(0) brightness(1) contrast(1.02)}
.spk--real .spk__ph::after{
  background:linear-gradient(180deg,transparent 46%,rgba(7,7,21,.6) 82%,rgba(7,7,21,.9))}
.spk--real .spk__ph img{object-position:center 12%}

/* ═══════════════════════════════════════════════════════════
   СИММЕТРИЯ ПОЛЕЙ
   Левое поле привязано к световому шву — так точка вордмарка
   попадает на ось. Правое было фиксированным, и на широком
   экране слева оставалось под 480px пустоты против 64 справа.
   Равняем правое поле по левому: ось сохраняется, пустота
   перестаёт валиться на одну сторону.
   ═══════════════════════════════════════════════════════════ */
.sx,.sig-x,.fin{padding-right:var(--x-col)}
.mq{margin-right:calc(-1 * var(--x-col))}

/* ═══════════════════════════════════════════════════════════
   ЦИФРЫ НА КАДРЕ — НА ТЕЛЕФОНЕ
   Живёт здесь, а не в mobile.css: pulse.css подключён позже,
   и десктопные правила этого блока иначе перебивают мобильные.
   Три колонки в 390px превращают подписи в узкие столбики.
   Фото уходит полосой наверх, число и подпись встают парами
   в один столбец.
   ═══════════════════════════════════════════════════════════ */
@media (max-width:900px){
  .numsx{display:flex;flex-direction:column}
  .numsx__bg{position:relative;order:-1;height:clamp(140px,20vh,190px);
    margin-bottom:clamp(16px,2.4vh,24px)}
  .numsx__seam{display:none}
  .numsx__row,.numsx__cap{display:contents}
  .numsx__row>div,.numsx__cap>div{padding:0}
  .numsx__row>div{order:1}
  .numsx__cap>div{order:2;background:none;
    padding:0 0 clamp(18px,2.6vh,26px);
    border-bottom:1px solid rgba(238,244,250,.13);
    margin-bottom:clamp(18px,2.6vh,26px)}
  .numsx__row>div:nth-child(1){order:1}  .numsx__cap>div:nth-child(1){order:2}
  .numsx__row>div:nth-child(2){order:3}  .numsx__cap>div:nth-child(2){order:4}
  .numsx__row>div:nth-child(3){order:5}  .numsx__cap>div:nth-child(3){order:6}
  .numsx__row b{text-shadow:none}
  .numsx__cap>div:last-child{border-bottom:0;margin-bottom:0}
}

/* ═══════════════════════════════════════════════════════════
   ВЫРЕЗАННАЯ ФИГУРА ПОВЕРХ КАДРА
   Портрет с прозрачным фоном стоит на фирменном рендере —
   том же, что в карточках-заглушках. Ряд остаётся единым:
   у всех один фон, а у реального спикера поверх него фигура.
   ═══════════════════════════════════════════════════════════ */
.spk--real .spk__ph{background:#040410}
/* фон под фигурой остаётся приглушённым, как у заглушек */
.spk--real .spk__ph img:not(.spk__cut){
  filter:grayscale(1) brightness(.34) contrast(1.1)}
.spk__cut{position:absolute;inset:0;z-index:2;
  width:100%;height:100%;object-fit:contain;object-position:center bottom;
  filter:grayscale(.42) brightness(.96) contrast(1.05);
  transition:filter .6s var(--x-ease),transform .8s var(--x-ease)}
.spk--real:hover .spk__cut{filter:grayscale(0) brightness(1);transform:scale(1.03)}
.spk--real .spk__ph::after{z-index:3;
  background:linear-gradient(180deg,transparent 52%,rgba(7,7,21,.5) 84%,rgba(7,7,21,.88))}

/* ═══════════════════════════════════════════════════════════
   МЕСТО ПОД ПУЛЬС
   Контент первого экрана центрировался по всей высоте и
   ложился на волны. Нижнее поле равно их высоте — контент
   поднимается, полоса пульса открывается целиком.
   ═══════════════════════════════════════════════════════════ */
.hero-x{padding-bottom:clamp(170px,26vh,260px)}