:root {
  --animation-duration-long: 400ms;
  --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),
    text-decoration-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);
}

/* Почти нулевая opacity заставляет браузер подготовить слой, не показывая фото. */
.is-animation-reveal-pending.is-animation-rasterizing {
  opacity: .001;
  will-change: opacity, 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;
}

/* Animate: обратимое появление и исчезновение */
.animate {
  opacity: 1;
  scale: 1;
  transition:
    opacity var(--animation-duration-long) var(--animation-ease),
    scale var(--animation-duration-long) var(--animation-ease);
}

.animate.hidden {
  opacity: 0;
  scale: var(--animation-start-scale);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .animate {
    transition: none;
  }

  .is-animation-reveal-pending {
    opacity: 1;
    scale: 1;
  }

  .is-animation-revealing {
    animation: 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: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Не растягиваем постер на высоту .browser вместе с шапкой:
   иначе object-fit: cover увеличивает его, и при старте видео заметен скачок масштаба. */
.browser > .video-poster-overlay {
  inset: 0 0 auto;
  height: auto;
}

.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;
}