/* ============================================================================
   Senator Media - премиум-движение (motion.css)
   ----------------------------------------------------------------------------
   Подключается ПОСЛЕ site.css и переопределяет/дополняет его анимации; парный
   файл - static/js/site.js (разделы 2, 8, 8а, 9, 11, 16, 17, 19). Правила:
     - анимируем только transform / opacity / filter (композитор), без layout;
     - всё, что прячет контент, включается ТОЛЬКО классами, которые вешает JS
       (.rv, .sm-split, .od...); без JS страница полностью видна;
     - исключение - h1/заголовки с CSS-анимацией появления: пока JS не разрезал
       заголовок, они проявляются сами через 1.1 с (страховка smFail);
     - prefers-reduced-motion: reduce - никаких движений (см. конец файла);
     - единая кривая: --sm-ease = cubic-bezier(.22,1,.36,1).
   Разделы:  1. токены  2. reveal  3. заголовки  4. одометр  5. кнопки
             6. карточки  7. шапка и прогресс  8. вступление  9. reduced-motion
   ============================================================================ */

/* 1. ТОКЕНЫ */
:root{--sm-ease:cubic-bezier(.22,1,.36,1);--sm-ease-io:cubic-bezier(.65,0,.35,1)}

/* Визуально скрытый текст для скринридеров (финальное значение одометра) */
.sm-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (prefers-reduced-motion:no-preference){

/* ============================================================================
   2. REVEAL (.rv / .in - контракт site.js, разметка data-rv задаёт тип)
   Состояние «до» - opacity:0 (site.css); состояние «после» - без transform, а
   путь между ними рисует анимация с fill-mode:backwards. Поэтому hover-эффекты
   карточек и transition самих элементов не затрагиваются, а задержка --d (она
   считается в JS каскадом) применяется только к появлению.
   ============================================================================ */
.rv{transform:none}
.rv.in{transition-delay:0s;animation:smRise 1s var(--sm-ease) var(--d,0s) backwards}
.rv[data-rv="card"].in{animation-name:smCard;animation-duration:1.15s}
.rv[data-rv="row"].in{animation-name:smRow;animation-duration:.95s}
.rv[data-rv="text"].in{animation-name:smText;animation-duration:.9s}
.rv[data-rv="fade"].in{animation-name:smFade;animation-duration:.8s}
.rv[data-rv="media"].in{animation-name:smMedia;animation-duration:1.3s;animation-timing-function:var(--sm-ease-io)}
@keyframes smRise{from{opacity:0;transform:translate3d(0,30px,0)}}
@keyframes smCard{from{opacity:0;transform:translate3d(0,42px,0) scale(.965);filter:blur(6px)}}
@keyframes smRow{from{opacity:0;transform:translate3d(0,26px,0)}}
@keyframes smText{from{opacity:0;transform:translate3d(0,16px,0)}}
@keyframes smFade{from{opacity:0}}
@keyframes smMedia{from{opacity:0;clip-path:inset(0 0 100% 0);transform:scale(1.04)}to{opacity:1;clip-path:inset(0 0 0 0);transform:none}}

/* ============================================================================
   3. ЗАГОЛОВКИ: маска + выезд снизу по словам (JS режет h1/h2 на .w > .wi)
   .w - окно-маска (clip-path с запасом под выносные элементы и курсив),
   .wi - слово, едет translateY(125%) -> 0. --wd (задержка) считает JS по строкам.
   ============================================================================ */
.sm-split .w{display:inline-block;clip-path:inset(-.14em -.16em -.26em -.16em)}
.sm-split .wi{display:inline-block;transform:translate3d(0,125%,0);transition:transform 1.05s var(--sm-ease) var(--wd,0s)}
.sm-split.sm-in .wi{transform:none}
/* градиентные слова (em, .ht-l2): каждое слово рисует градиент предка само,
   положение градиента выставляет JS (mapGradient) - получается единый градиент */
.sm-split .sm-grad{background:none!important;-webkit-text-fill-color:currentColor}
.sm-split .sm-grad .wi{background:var(--gd);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* прежняя CSS-анимация строк hero/ptitle заменена масками */
.hero-title.sm-split>span,.ptitle.sm-split{animation:none}
/* страховка: пока JS не разрезал заголовок, он проявляется сам (JS не загрузился) */
.hero-title:not(.sm-split)>span,.ptitle:not(.sm-split){animation:smFail .4s linear 1.1s backwards}
@keyframes smFail{from{opacity:0}}

/* ============================================================================
   4. ОДОМЕТР (.js-count): колонки цифр. Итоговая цифра .od-n лежит в потоке и
   задаёт ширину/базовую линию; бегунок .od-s (20 ячеек: два оборота 0-9)
   накладывается сверху и едет по transform (WAAPI из site.js).
   ============================================================================ */
.sm-odo{font-variant-numeric:tabular-nums}
.sm-odo .od{position:relative;display:inline-block;overflow:hidden;clip-path:inset(-.04em -.03em)}
.sm-odo .od-s{position:absolute;left:0;top:0;width:100%;text-align:center;pointer-events:none}
.sm-odo .od-s .od-d{display:block;font:inherit;line-height:inherit;letter-spacing:inherit;color:inherit}
.sm-odo .od.is-roll .od-n{visibility:hidden}
/* градиентные числа: background-clip:text родителя не рисует вложенные слои,
   поэтому градиент у каждого знака свой (читается как единый золотой тон) */
.js-count.sm-odo-grad{background:none!important}
.sm-odo-grad .od-c,.sm-odo-grad .od-n,.sm-odo-grad .od-s .od-d{background:var(--gd);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ============================================================================
   5. КНОПКИ: блик золотой кнопки на transform (а не left), без вечного will-change
   ============================================================================ */
.btn-g,.btn-o{will-change:auto}
.btn-g::after{left:0;width:55%;transform:translate3d(-130%,0,0) skewX(-20deg);transition:transform .95s var(--sm-ease)}
.btn-g:hover::after,.btn-g:focus-visible::after{left:0;transform:translate3d(260%,0,0) skewX(-20deg)}
.btn-g{transition:box-shadow .5s var(--sm-ease),border-color .3s,color .3s,background .3s,transform .6s var(--sm-ease)}
.btn-g:hover{box-shadow:0 22px 54px -16px rgba(212,180,74,.65),0 0 0 1px rgba(236,208,106,.35)}

/* ============================================================================
   6. КАРТОЧКИ: наклон за курсором (.sm-tilt, только мышь - классы вешает JS)
   Переменные --rx/--ry пишет JS; прежний подъём .cc:hover включён в transform.
   ============================================================================ */
.sm-tilt{transition:transform .7s var(--sm-ease),border-color .3s,box-shadow .5s var(--sm-ease),background .3s}
.sm-tilt.is-tilt{transform:perspective(1000px) translate3d(0,-4px,0) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease-out,border-color .3s,box-shadow .5s var(--sm-ease),background .3s}

/* ============================================================================
   7. ШАПКА: прячется при скролле вниз, возвращается при скролле вверх
   (is-hidden ставит site.js). Полоса прогресса выступает на 2px за нижнюю
   границу шапки, поэтому остаётся видимой у верха экрана и в спрятанном состоянии.
   ============================================================================ */
.nav{transition:transform .55s var(--sm-ease),background .4s,border-color .4s}
.nav.is-hidden{transform:translate3d(0,-100%,0)}
.nav.is-scrolled{background:rgba(6,6,8,.72);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%)}
.progress{height:2px;bottom:-2px;overflow:visible}
.progress span{background:var(--gd);box-shadow:0 0 10px rgba(236,208,106,.55);transition:transform .12s linear}

/* ============================================================================
   8. ВСТУПЛЕНИЕ: логотип и пункты шапки мягко появляются (до 0.9 с, чистый CSS,
   конечное состояние - обычное, ничего не блокирует и не прячет при сбое)
   ============================================================================ */
.n-logo{animation:smNavIn .8s var(--sm-ease) .05s backwards}
.n-links,.n-right{animation:smNavIn .8s var(--sm-ease) .2s backwards}
@keyframes smNavIn{from{opacity:0;transform:translate3d(0,-10px,0)}}

}/* /prefers-reduced-motion:no-preference */

/* ============================================================================
   9. REDUCED MOTION: всё видно сразу и стоит на месте
   (JS в этом режиме вообще не режет заголовки, не вешает .rv, не строит одометр)
   ============================================================================ */
@media (prefers-reduced-motion:reduce){
  .nav{transition:none}
  .nav.is-hidden{transform:none}
  .btn-g::after{transition:none}
  .sm-tilt,.sm-tilt.is-tilt{transform:none;transition:none}
}