.hero-desktop-video-layer { display: none; }

@media (min-width: 768px) {
  .home-page .hero {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
  }
  .home-page .hero-inner {
    flex: 1 0 auto;
    min-height: calc(100vh - 104px);
    min-height: calc(100svh - 104px);
  }
  .home-page .hero-proof { flex: 0 0 auto; }
  .home-page .hero-desktop-video-layer {
    display: block;
    position: absolute;
    inset: -4%;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    filter: saturate(.9) contrast(1.05) brightness(.9);
    transform: translate(-3.4%, -2.2%) scale(1.025);
    transition: opacity 1s ease, visibility 0s 1s;
  }
  .hero-desktop-video {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
  }
  .hero-desktop-video-layer::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg, rgba(2,8,14,.94) 0%, rgba(2,8,14,.88) 30%, rgba(2,8,14,.68) 45%, rgba(2,8,14,.18) 70%, rgba(2,8,14,.34) 100%),
      linear-gradient(180deg, rgba(2,8,14,.22) 0%, rgba(2,8,14,.03) 52%, rgba(2,8,14,.74) 100%);
  }
  .home-page .desktop-film-active .hero-desktop-video-layer {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }
  .home-page .hero :is(.hero-emc-field, .hero-device-leds) { transition: opacity 1s ease; }
  .home-page .hero.desktop-film-active :is(.hero-emc-field, .hero-device-leds) { opacity: 0; }
}

@media (min-width: 768px) and (max-width: 980px) {
  .hero-desktop-video { object-position: 65% center; }
}