/* The measured arc stays still. A quiet light rhythm gives the dial life. */
.cp-ring-alive {
  transition: stroke-dashoffset 650ms cubic-bezier(.16,1,.3,1), stroke 250ms ease;
  animation: cp-ring-breathe 5.6s ease-in-out infinite !important;
  animation-play-state: paused !important;
  filter: drop-shadow(0 2px 2px rgba(52,211,153,.16));
}
.cp-ring-alive.cp-motion-visible { animation-play-state: running !important; }
.cp-live-connection { transition: color 250ms ease, border-color 250ms ease; }
.cp-live-connection > i { position:relative; flex-shrink:0; box-shadow:none !important; }
.cp-live-connection > i::after {
  content:""; position:absolute; inset:-4px; border:1px solid currentColor;
  border-radius:50%; opacity:0; transform:scale(.6); pointer-events:none;
}
.cp-live-connection[data-connection="متصل"].cp-motion-visible > i::after {
  animation: cp-connection-wave 3.4s cubic-bezier(.16,1,.3,1) infinite;
}
@keyframes cp-ring-breathe { 0%,100% { stroke-opacity:1; } 50% { stroke-opacity:.68; } }
@keyframes cp-connection-wave {
  0% { transform:scale(.6); opacity:0; }
  15% { opacity:.55; }
  70%,100% { transform:scale(1.65); opacity:0; }
}
html.cp-motion-paused .cp-ring-alive,
html.cp-motion-paused .cp-live-connection > i::after { animation-play-state:paused !important; }
@media (prefers-reduced-motion:reduce) {
  .cp-ring-alive { animation:none !important; transition:stroke 150ms ease; filter:none; }
  .cp-live-connection > i::after { animation:none !important; }
}