/* Общие анимации: «барабан» текста на ховере (.roll), появления при прокрутке ([data-reveal], [data-rise], [data-roll]), шкалы прогресса; reduced motion */

/* текст-барабан на ховере */
.roll {
  display: inline-block;
  overflow: hidden;
  height: 1.2em;
  line-height: 1.2;
  vertical-align: top;
  white-space: nowrap;
}

.roll>span {
  display: block;
  transition: transform .55s var(--e1);
}

.roll>span::after {
  content: attr(data-t);
  content: attr(data-t) / "";
  display: block;
}

@media (hover:hover) and (pointer:fine) {
  a:hover .roll>span,
  button:hover .roll>span {
    transform: translateY(-50%);
  }
}

/* появления: скрыто только то, что ниже первого экрана */
[data-reveal][data-pending] {
  opacity: 0;
  transform: translate3d(0,28px,0);
}

[data-reveal][data-in] {
  animation: rv .95s var(--e3) both;
}

[data-reveal][data-in][data-d="1"] {
  animation-delay: .08s;
}

[data-reveal][data-in][data-d="2"] {
  animation-delay: .16s;
}

[data-reveal][data-in][data-d="3"] {
  animation-delay: .24s;
}

@keyframes rv {
  from {
    opacity: 0;
    transform: translate3d(0,28px,0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

[data-rise] {
  display: block;
  overflow: hidden;
  padding: .13em 0 .08em;
  margin: -.13em 0 -.08em;
}

[data-rise]>.ri {
  display: block;
}

[data-rise][data-pending]>.ri {
  transform: translate3d(0,115%,0);
}

[data-rise][data-in]>.ri {
  animation: riseIn 1.1s var(--e2) both;
}

[data-rise][data-in][data-d="1"]>.ri {
  animation-delay: .07s;
}

[data-rise][data-in][data-d="2"]>.ri {
  animation-delay: .14s;
}

[data-rise][data-in][data-d="3"]>.ri {
  animation-delay: .21s;
}

[data-rise][data-in][data-d="4"]>.ri {
  animation-delay: .28s;
}

[data-rise][data-in][data-d="5"]>.ri {
  animation-delay: .35s;
}

[data-rise][data-in][data-d="6"]>.ri {
  animation-delay: .42s;
}

@keyframes riseIn {
  from {
    transform: translate3d(0,115%,0);
  }
  to {
    transform: none;
  }
}

.lm {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: .1em 0 .13em;
  margin: -.1em 0 -.13em;
}

.lt {
  display: inline-block;
  transform-origin: 50% 0;
}

[data-roll][data-pending] .lt {
  transform: translate3d(0,125%,0);
}

[data-roll][data-in] .lt {
  animation: slIn .95s both;
  animation-delay: calc(var(--i) * 45ms + .1s);
}

@keyframes prog {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes slIn {
  0% {
    transform: translate3d(0,112%,0) scaleY(1.25);
    animation-timing-function: cubic-bezier(.3,.7,.3,1);
  }
  55% {
    transform: translate3d(0,-6%,0) scaleY(.99);
    animation-timing-function: cubic-bezier(.45,0,.35,1);
  }
  100% {
    transform: translate3d(0,0,0) scaleY(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  html {
    scroll-behavior: auto;
  }
}