/* Общие анимации: появление блоков при прокрутке, вращение, движение по орбите; reduced motion */

/* появления: прячем только то, что ниже экрана, — первый кадр всегда полный.
   Текст первого экрана (data-intro) проявляется чистым CSS-интро с первого кадра, без IntersectionObserver:
   иначе Chrome успевает нарисовать его до первого колбэка наблюдателя, и тот запускает анимацию с нуля — текст мигает */
[data-reveal][data-pending] {
  opacity: 0;
  transform: translate3d(0,28px,0);
}

[data-reveal][data-in],
[data-intro] {
  animation: rv 1s var(--ease) both;
}

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

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

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

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

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

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes wsat {
  from {
    offset-distance: 0%;
  }
  to {
    offset-distance: 100%;
  }
}

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