/* Движение сайта. Работает вместе с ad-motion.js; без скрипта страница статична и полностью читается.
   Использует свойство translate, а не transform: оно не конфликтует с наведением и прочими transform страницы. */

/* --- Таймлайн: десять засечек, одна засечка = одна секунда. Засечки отступают от скругления линии --- */
.rail{position:relative;height:56px;margin-top:clamp(28px,5vw,56px);color:#fff;display:grid;grid-template-columns:repeat(10,1fr);align-items:end}
.rail b{display:block;width:12px;height:40px;margin-left:10px;border-radius:6px 6px 0 0;background:currentColor;opacity:.32;transform-origin:50% 100%}
.rail b:nth-child(-n+6){opacity:1}
.rail i{position:absolute;left:0;right:0;bottom:0;height:16px;border-radius:8px;background:currentColor}
.ad-js .rail b{opacity:.32;animation:ad-lit 12s cubic-bezier(.2,.7,.2,1) infinite}
.ad-js .rail b:nth-child(1){animation-delay:.2s}.ad-js .rail b:nth-child(2){animation-delay:.8s}
.ad-js .rail b:nth-child(3){animation-delay:1.4s}.ad-js .rail b:nth-child(4){animation-delay:2s}
.ad-js .rail b:nth-child(5){animation-delay:2.6s}.ad-js .rail b:nth-child(6){animation-delay:3.2s}
.ad-js .rail b:nth-child(7){animation-delay:3.8s}.ad-js .rail b:nth-child(8){animation-delay:4.4s}
.ad-js .rail b:nth-child(9){animation-delay:5s}.ad-js .rail b:nth-child(10){animation-delay:5.6s}
@keyframes ad-lit{
  0%{opacity:.32;transform:scaleY(.55)}
  3%{opacity:1;transform:scaleY(1.12)}
  6%{opacity:1;transform:scaleY(1)}
  86%{opacity:1;transform:scaleY(1)}
  93%,100%{opacity:.32;transform:scaleY(.55)}
}

/* --- Вход первого экрана: слова выезжают по очереди, панель следом --- */
@keyframes ad-up{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
.ad-js .hero-copy>*,.ad-js .hero .hero-grid>div:first-child>*{animation:ad-up .85s cubic-bezier(.2,.7,.2,1) both}
.ad-js .hero-copy>*:nth-child(1),.ad-js .hero .hero-grid>div:first-child>*:nth-child(1){animation-delay:.05s}
.ad-js .hero-copy>*:nth-child(2),.ad-js .hero .hero-grid>div:first-child>*:nth-child(2){animation-delay:.16s}
.ad-js .hero-copy>*:nth-child(3),.ad-js .hero .hero-grid>div:first-child>*:nth-child(3){animation-delay:.27s}
.ad-js .hero-copy>*:nth-child(4),.ad-js .hero .hero-grid>div:first-child>*:nth-child(4){animation-delay:.38s}
.ad-js .hero-copy>*:nth-child(5),.ad-js .hero .hero-grid>div:first-child>*:nth-child(5){animation-delay:.49s}
.ad-js .hero-copy>*:nth-child(n+6),.ad-js .hero .hero-grid>div:first-child>*:nth-child(n+6){animation-delay:.6s}
.ad-js .hero .hero-grid>*:last-child{animation:ad-up 1s cubic-bezier(.2,.7,.2,1) .3s both}

/* --- Появление блоков при прокрутке (классы ставит ad-motion.js, после показа снимает) --- */
.ad-js .ad-r{opacity:0;translate:0 30px;transition:opacity .85s cubic-bezier(.2,.7,.2,1) var(--ad-d,0ms),translate .85s cubic-bezier(.2,.7,.2,1) var(--ad-d,0ms)}
.ad-js .ad-r.ad-in{opacity:1;translate:0 0}

/* --- Кнопки и ссылки: живое наведение --- */
.btn{transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s ease,background-color .2s ease,color .2s ease,border-color .2s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 26px -14px rgba(11,16,38,.5)}
.btn:active{transform:translateY(0) scale(.98);box-shadow:none}
details>div{animation:ad-up .4s cubic-bezier(.2,.7,.2,1) both}
details:not([open])>div{animation:none}

/* --- Полоса прокрутки сверху --- */
.ad-progress{position:fixed;left:0;top:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--ad-bar,#fff);z-index:300;pointer-events:none;will-change:transform}

@media (prefers-reduced-motion:reduce){
  .rail b,.ad-js .rail b{animation:none}
  .ad-js .hero-copy>*,.ad-js .hero .hero-grid>div:first-child>*,.ad-js .hero .hero-grid>*:last-child{animation:none}
  .btn,.btn:hover,.btn:active{transition:none;transform:none}
}