/* Activity dots: small status dots that show state through motion.
   - pulse: live / available (a ring grows out of the dot and fades)
   - glow:  coming soon / needs attention (soft breathing halo)
   - shake: something went wrong (a gentle wiggle on loop)
   Colour comes from --dot-rgb (r, g, b) so the ring matches the dot.
   Inspired by Framer's ActivityBadge, rebuilt in plain CSS. */

@keyframes activity-pulse {
  0%        { box-shadow: 0 0 0 0 rgba(var(--dot-rgb), var(--dot-alpha, .55)); }
  70%, 100% { box-shadow: 0 0 0 var(--dot-ring, 7px) rgba(var(--dot-rgb), 0); }
}
@keyframes activity-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--dot-rgb), .15), 0 0 2px 0 rgba(var(--dot-rgb), .3); }
  50%      { box-shadow: 0 0 0 3px rgba(var(--dot-rgb), .18), 0 0 10px 2px rgba(var(--dot-rgb), .5); }
}
/* Same rhythm as the Framer badge: a 0.9s wiggle, then a 0.4s rest, on loop. */
@keyframes activity-shake {
  0%        { transform: translateX(0); }
  12.5%     { transform: translateX(-1.5px); }
  25%       { transform: translateX(1.5px); }
  37.5%     { transform: translateX(-1.5px); }
  50%       { transform: translateX(1.5px); }
  69%, 100% { transform: translateX(0); }
}

.activity-pulse { animation: activity-pulse 1.8s ease-out infinite; }
.activity-glow  { animation: activity-glow 2.6s ease-in-out infinite; }
.activity-shake { animation: activity-shake 1.3s ease-in-out infinite; }

.dot-green  { --dot-rgb: 45, 184, 75;  background: #2db84b; }
.dot-orange { --dot-rgb: 245, 166, 35; background: #f5a623; }
.dot-red    { --dot-rgb: 217, 79, 61;  background: #d94f3d; }
.dot-whatsapp { --dot-rgb: 37, 211, 102; background: #25d366; }

@media (prefers-reduced-motion: reduce) {
  .activity-pulse, .activity-glow, .activity-shake { animation: none; }
}