.home-hero_atf .esp-hero-system {
  width: 100%;
  height: 100%;
  aspect-ratio: 1915 / 821;
  position: relative;
  overflow: hidden;
  background: #0f3a6a;
  transform: translateZ(0);
  will-change: transform, opacity;
}

.home-hero_atf .esp-hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #0f3a6a;
}

.home-hero_atf
  .esp-hero-system[data-image-error="true"]
  .esp-hero-media {
  background: #0f3a6a url("hero-security-system.svg") center / contain no-repeat;
}

.home-hero_atf
  .esp-hero-system[data-image-error="true"]
  .esp-hero-image {
  display: none;
}

.home-hero_atf .esp-hero-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  transform-origin: 66% 50%;
  user-select: none;
  pointer-events: none;
}

.home-hero_atf .esp-hero-scan {
  position: absolute;
  z-index: 2;
  top: 10%;
  right: 4%;
  left: 34%;
  height: 1px;
  background: #d5c7b4;
  opacity: 0;
  pointer-events: none;
}

.home-hero_atf .esp-hero-led {
  position: absolute;
  z-index: 3;
  width: clamp(5px, 0.56vw, 9px);
  aspect-ratio: 1;
  border-radius: 999px;
  background: #e30613;
  box-shadow: 0 0 0 4px rgb(227 6 19 / 12%);
  opacity: 0.66;
  transform: scale(0.88);
  pointer-events: none;
}

.home-hero_atf .esp-hero-led--one {
  top: 47.8%;
  left: 48.1%;
}

.home-hero_atf .esp-hero-led--two {
  top: 69.1%;
  left: 40.8%;
}

.home-hero_atf .esp-hero-led--three {
  top: 69.2%;
  left: 93.7%;
}

.home-hero_atf .esp-hero-system[data-ready="true"] .esp-hero-image {
  animation: esp-hero-breathe 26s ease-in-out infinite alternate;
}

.home-hero_atf .esp-hero-system[data-ready="true"] .esp-hero-scan {
  animation: esp-hero-scan 12s linear 1.4s infinite;
}

.home-hero_atf .esp-hero-system[data-ready="true"] .esp-hero-led {
  animation: esp-hero-led 4.8s ease-in-out infinite;
}

.home-hero_atf .esp-hero-system[data-ready="true"] .esp-hero-led--two {
  animation-delay: 1.35s;
}

.home-hero_atf .esp-hero-system[data-ready="true"] .esp-hero-led--three {
  animation-delay: 2.7s;
}

@keyframes esp-hero-breathe {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.035) translate3d(-0.45%, -0.25%, 0);
  }
}

@keyframes esp-hero-scan {
  0%,
  8% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }

  14% {
    opacity: 0.22;
  }

  72% {
    opacity: 0.14;
  }

  82%,
  100% {
    opacity: 0;
    transform: translate3d(0, 530px, 0);
  }
}

@keyframes esp-hero-led {
  0%,
  62%,
  100% {
    opacity: 0.5;
    transform: scale(0.88);
  }

  72% {
    opacity: 0.92;
    transform: scale(1.22);
  }
}

@media (max-width: 767px) {
  .home-hero_atf .esp-hero-image {
    object-position: 72% center;
    transform-origin: 72% 50%;
  }

  .home-hero_atf
    .esp-hero-system[data-image-error="true"]
    .esp-hero-media {
    background-image: url("hero-security-system-mobile.svg");
  }

  .home-hero_atf .esp-hero-scan {
    left: 8%;
  }

  .home-hero_atf .esp-hero-led--one {
    left: 37%;
  }

  .home-hero_atf .esp-hero-led--two {
    left: 24%;
  }

  .home-hero_atf .esp-hero-led--three {
    left: 87%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero_atf .esp-hero-system {
    will-change: auto;
  }

  .home-hero_atf .esp-hero-image,
  .home-hero_atf .esp-hero-scan,
  .home-hero_atf .esp-hero-led {
    animation: none !important;
    transition: none !important;
  }

  .home-hero_atf .esp-hero-image {
    transform: none !important;
  }

  .home-hero_atf .esp-hero-scan {
    display: none;
  }
}