/* Парный CSS к motion.js. Значения тянутся из design-tokens.css */

.js-motion [data-reveal]{
  opacity:0; transform:translateY(28px);
  transition:opacity var(--dur-4,600ms) var(--ease-out,cubic-bezier(.16,1,.3,1)),
             transform var(--dur-4,600ms) var(--ease-out,cubic-bezier(.16,1,.3,1));
}
.js-motion [data-reveal="left"]{transform:translateX(-32px)}
.js-motion [data-reveal="right"]{transform:translateX(32px)}
.js-motion [data-reveal="scale"]{transform:scale(.96)}
.js-motion [data-reveal="mask"]{
  opacity:1; transform:none; clip-path:inset(0 0 100% 0);
  transition:clip-path var(--dur-4,700ms) var(--ease-out,cubic-bezier(.16,1,.3,1));
}
.js-motion [data-reveal].is-in{opacity:1; transform:none; clip-path:inset(0 0 0 0)}

/* Заголовок по строкам: <h1><span class="line"><i>СТРОКА</i></span>...</h1> */
.line{display:block; overflow:hidden}
.js-motion .line > i{
  display:block; font-style:inherit; transform:translateY(105%);
  transition:transform 800ms var(--ease-out,cubic-bezier(.16,1,.3,1));
}
.line.is-in > i,
[data-reveal].is-in .line > i{transform:none}
h1 .line:nth-child(2) > i{transition-delay:80ms}
h1 .line:nth-child(3) > i{transition-delay:160ms}

[data-progress]{transform-origin:0 50%; transform:scaleX(0); will-change:transform}

[data-marquee]{overflow:hidden; white-space:nowrap}
[data-marquee] > *{display:inline-flex; gap:var(--sp-6,32px); will-change:transform}
@keyframes mq{to{transform:translate3d(calc(var(--mq-w) * -1),0,0)}}

[data-magnetic]{transition:transform 240ms var(--ease-snap,cubic-bezier(.2,.9,.25,1.1))}

[data-step]{opacity:.38; transition:opacity 320ms var(--ease-out,ease)}
[data-step].is-active{opacity:1}

/* Нативный scroll-driven вариант там, где он поддержан */
@supports (animation-timeline: view()){
  .reveal-native{
    animation:revealNative linear both;
    animation-timeline:view();
    animation-range:entry 0% cover 28%;
  }
}
@keyframes revealNative{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion: reduce){
  [data-reveal]{transform:none !important; transition-duration:150ms !important; clip-path:none !important}
  .line > i{transform:none !important}
  [data-marquee] > *{animation:none !important}
  .reveal-native{animation:none}
}