/* Floating astronaut: stacked-alpha clip drawn over the original still (tugan-astronaut-motion.js). */
.zone__el-1 .tugan-astro { position: relative; }
.zone__el-1 .tugan-astro > img { display: block; width: 100%; height: auto; }
/* Crop of the clip relative to grr1.webp's box, measured from the generated frames. */
.tugan-astro__canvas {
  position: absolute; left: 2.345%; top: 2.378%; width: 98.030%; height: auto;
  visibility: hidden; pointer-events: none;
}
.tugan-astro__source { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* Картинку и клип меняем перекрёстным затуханием. Раньше видимость переключалась мгновенно,
   и на стыке успевал проскочить кадр, где не видно ни того, ни другого - это и было моргание. */
.zone__el-1 .tugan-astro > img { opacity: 1; transition: opacity .2s linear; }
.tugan-astro__canvas { opacity: 0; transition: opacity .2s linear; }
.tugan-astro.is-motion-ready > img { visibility: visible; opacity: 0; }
.tugan-astro.is-motion-ready .tugan-astro__canvas { visibility: visible; opacity: 1; }

/* Move the whole astronaut independently of its positioned transform and WOW entrance. */
body.home #vr-games > .zone__el-1 {
  --tugan-astro-drift: clamp(14px, 1.3vw, 24px);
  animation: tugan-astronaut-drift 7s ease-in-out infinite;
}

@keyframes tugan-astronaut-drift {
  0%, 100% { translate: 0 0; }
  50% { translate: calc(-1 * var(--tugan-astro-drift)) 0; }
}

@media (prefers-reduced-motion: reduce) {
  body.home #vr-games > .zone__el-1 {
    animation: none;
    translate: none;
  }
}

/* Появление космонавта ведёт наш скрипт, а не общая библиотека анимаций: она прячет свои
   элементы только в момент инициализации и запускает появление с нуля, из-за чего он
   успевал показаться, исчезнуть и появиться снова. Здесь один переход и никаких стыков. */
body.home #vr-games .tugan-astro--managed { visibility: hidden; opacity: 0; }
body.home #vr-games .tugan-astro--managed.is-entered {
  visibility: visible;
  animation: tugan-astro-enter .9s cubic-bezier(.2, .7, .2, 1) forwards;
}
@keyframes tugan-astro-enter {
  from { opacity: 0; transform: translateX(42px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.home #vr-games .tugan-astro--managed { visibility: visible; opacity: 1; }
  body.home #vr-games .tugan-astro--managed.is-entered { animation: none; }
}