/* Видео с производства на первом экране (hero-video.js).
   Лежит поверх фото; фото остаётся в потоке и держит размер рамки, чтобы раскладка не прыгала.
   Кадр режется по cover: рамка уже исходника и на телефоне (1/1.32), и на десктопе (2/3). */

[data-mv-hero-video] {
  position: relative;
}

video[data-mv-hero-video] {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  border-radius: 0.5rem;
  background: #090808;
  opacity: 0;
  transition: opacity 700ms ease;
  pointer-events: none;
}

[data-mv-hero-video="ready"] > video[data-mv-hero-video] {
  opacity: 1;
}

/* Фото не убираем из потока: visibility сохраняет высоту рамки. */
[data-mv-hero-video="ready"] > img {
  visibility: hidden;
}

/* На телефоне рамка без скруглений и со скримами сверху/снизу из mv-hero-v2.css —
   они лежат на ::before/::after рамки с z-index 1 и накрывают видео так же, как фото. */
@media (max-width: 767px) {
  html.mv-hero-v2 video[data-mv-hero-video] {
    border-radius: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  video[data-mv-hero-video] {
    transition: none;
  }
}