:root {
  --animation-duration-long: 500ms;
  --animation-duration-fast: 200ms;
  --animation-ease: cubic-bezier(.2, .6, .2, 1);
  --animation-scale-factor: .95;
  --animation-start-scale: 1 var(--animation-scale-factor);
}

a {
  transition:
    color var(--animation-duration-fast) var(--animation-ease);
}

a:hover {
  transition: color 0ms, text-decoration-color 0ms;
}

/* Relax: проявление с масштабированием от верхнего, центра или нижнего края */
@keyframes animation-relax {
  from {
    opacity: 0;
    scale: var(--animation-start-scale);
  }

  to {
    opacity: 1;
    scale: 1;
  }
}

.is-animation-reveal-pending {
  opacity: 0;
  scale: var(--animation-start-scale);
}

.is-animation-origin-top {
  transform-origin: center top;
}

.is-animation-origin-center {
  --animation-start-scale: var(--animation-scale-factor);
  transform-origin: center center;
}

.is-animation-origin-bottom {
  transform-origin: center bottom;
}

.is-animation-revealing {
  animation:
    animation-relax
    var(--animation-duration-long)
    var(--animation-ease)
    both;
}

/* Раскрытие точек слайдера из центра */
@keyframes animation-expand {
  from {
    opacity: 0;
    inline-size: 0;
  }

  to {
    opacity: 1;
    inline-size: var(--animation-width);
  }
}

.slider-dots.is-animation-expand-pending {
  opacity: 0;
  box-sizing: border-box;
  inline-size: 0;
  justify-content: center;
  transition: none;
}

.slider-dots.is-animation-expanding {
  box-sizing: border-box;
  justify-content: center;
  animation:
    animation-expand
    var(--animation-duration-long)
    var(--animation-ease)
    both;
}

@media (prefers-reduced-motion: reduce) {
  .is-animation-reveal-pending {
    opacity: 1;
    scale: 1;
  }

  .is-animation-revealing,
  .slider-dots.is-animation-expanding {
    animation: none;
  }

  .slider-dots.is-animation-expand-pending {
    opacity: 1;
    inline-size: auto;
    transition: none;
  }
}

/* Лоадер видео */
/* Скрываем нативный спинер */
video::-webkit-media-controls {
  visibility: hidden;
}

video::-webkit-media-controls-enclosure {
  visibility: visible;
}

/* Анимация загрузки */
.loading {
  position: relative;
}

.has-video-poster-overlay {
  position: relative;
}

.video-poster-overlay {
  position: absolute;
  z-index: 0;
  display: block;
  pointer-events: none;
}

.loading:after {
  content: "";
  position: absolute;
  z-index: 2;
  display: block;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(90deg,
      rgb(255 255 255 / 0%) 0%,
      rgb(255 255 255 / 8%) 50%,
      rgb(255 255 255 / 0%) 100%);
  animation: loader 800ms linear infinite;
  pointer-events: none;
  mix-blend-mode: difference;
}

@keyframes loader {
  0% {
    transform: translate(-100%, 0%);
  }

  100% {
    transform: translate(100vw, 0%);
  }
}

/* Блок для анимаций (не добавляются вертикальные отступы) */
.animation {
  position: relative;
}