.facility-animation {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: #061832;
  isolation: isolate;
}

.facility-animation img {
  display: block;
  width: 100%;
  transform: scale(1.025);
  animation: facility-camera 14s ease-in-out infinite alternate;
}

.scan-line {
  position: absolute;
  z-index: 2;
  top: -12%;
  left: 0;
  width: 100%;
  height: 16%;
  opacity: .42;
  background: linear-gradient(180deg, transparent, rgba(86, 166, 230, .24), transparent);
  animation: facility-scan 7s linear infinite;
  pointer-events: none;
}

.pulse {
  position: absolute;
  z-index: 3;
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #1478cf;
  box-shadow: 0 0 0 0 rgba(76, 159, 230, .65);
  animation: facility-pulse 2.4s ease-out infinite;
}

.p1 { left: 28%; top: 38%; }
.p2 { left: 56%; top: 22%; animation-delay: .6s; }
.p3 { left: 71%; top: 62%; animation-delay: 1.2s; }
.p4 { left: 45%; top: 76%; animation-delay: 1.8s; }

.moving-signal {
  position: absolute;
  z-index: 3;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 13px 4px rgba(66, 151, 224, .8);
  offset-rotate: 0deg;
  animation: facility-route 6s linear infinite;
}

.s1 {
  offset-path: path("M 80 320 C 280 340 360 230 600 250 S 850 340 1060 230");
}

.s2 {
  offset-path: path("M 310 110 C 470 180 560 420 920 430");
  animation-delay: -2s;
}

.s3 {
  offset-path: path("M 220 470 C 430 420 690 520 1040 390");
  animation-delay: -4s;
}

.system-label {
  position: absolute;
  z-index: 4;
  padding: 6px 10px;
  opacity: 0;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 6px;
  color: #fff;
  background: rgba(4, 24, 51, .82);
  backdrop-filter: blur(7px);
  font-size: 12px;
  font-weight: 700;
  animation: facility-label 9s ease-in-out infinite;
}

.l1 { left: 34%; top: 29%; }
.l2 { left: 66%; top: 52%; animation-delay: 3s; }
.l3 { left: 18%; top: 62%; animation-delay: 6s; }

.device-stage > .facility-animation {
  border-radius: 13px;
}

.device-stage > .facility-animation + .device-note {
  z-index: 6;
}

@keyframes facility-camera {
  0% { transform: scale(1.025) translate3d(0, 0, 0); }
  50% { transform: scale(1.065) translate3d(-.7%, -.4%, 0); }
  100% { transform: scale(1.045) translate3d(.5%, -.2%, 0); }
}

@keyframes facility-scan {
  from { transform: translateY(-20%); }
  to { transform: translateY(760%); }
}

@keyframes facility-pulse {
  0% { box-shadow: 0 0 0 0 rgba(76, 159, 230, .7); }
  70% { box-shadow: 0 0 0 22px rgba(76, 159, 230, 0); }
  100% { box-shadow: 0 0 0 0 rgba(76, 159, 230, 0); }
}

@keyframes facility-route {
  from { offset-distance: 0%; }
  to { offset-distance: 100%; }
}

@keyframes facility-label {
  0%, 16%, 100% { opacity: 0; transform: translateY(7px); }
  25%, 55% { opacity: 1; transform: translateY(0); }
  65% { opacity: 0; transform: translateY(-5px); }
}

@media (prefers-reduced-motion: reduce) {
  .facility-animation img,
  .scan-line,
  .pulse,
  .moving-signal,
  .system-label {
    animation: none !important;
  }

  .system-label {
    display: none;
  }
}

@media (max-width: 620px) {
  .system-label,
  .moving-signal {
    display: none;
  }
}