.device-frame {
  display: block;
}

.device-frame.device-frame-updated .card {
  animation: device-frame-updated 0.8s ease-in-out;
}

/* A single pulse, so a triggered action or new status stands out */
@keyframes device-frame-updated {
  0%, 100% {
    box-shadow: 0 0 0 1px rgba(var(--bs-info-rgb), 0), 0 0 18px rgba(var(--bs-info-rgb), 0);
    background-color: rgba(var(--bs-info-rgb), 0);
  }
  30% {
    box-shadow: 0 0 0 1px rgba(var(--bs-info-rgb), 0.8), 0 0 18px rgba(var(--bs-info-rgb), 0.6);
    background-color: rgba(var(--bs-info-rgb), 0.15);
  }
}