/* =========================================================
   Author: Arif
   Date: 2026-04-27
   Purpose: Reusable pulse animation for small live/status
            dots built with a GenerateBlocks container.
            The dot's size, shape, and base color can be set
            in the GB editor. This CSS only handles the pulse.
   ========================================================= */

/* ---------------------------------------------------------
   Base pulse class
   - Use ke-pulse CSS class on the dot element to get the pulsing effect
   - Use on a small round container
   - Best for live dots, status indicators, tiny markers
   --------------------------------------------------------- */
.ke-pulse {
  position: relative;
  display: inline-block;
  border-radius: 999px; /* keeps the dot circular */
  transform-origin: center;
  will-change: transform, box-shadow, opacity;

  /* Main pulse animation */
  animation: ke-pulse-dot 1.8s ease-out infinite;
}

/* ---------------------------------------------------------
   Pulse animation
   - Expands a soft outer ring
   - Keeps the center dot visible
   - Designed for KE green live dots
   --------------------------------------------------------- */
@keyframes ke-pulse-dot {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 166, 94, 0.32);
    opacity: 1;
  }

  70% {
    transform: scale(1.03);
    box-shadow: 0 0 0 10px rgba(0, 166, 94, 0);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 166, 94, 0);
    opacity: 1;
  }
}

/* ---------------------------------------------------------
   Tablet
   - Slightly slower so the motion feels softer
   --------------------------------------------------------- */
@media (max-width: 1024px) {
  .ke-pulse {
    animation-duration: 1.9s;
  }
}

/* ---------------------------------------------------------
   Mobile
   - Slightly slower again for tighter layouts
   --------------------------------------------------------- */
@media (max-width: 768px) {
  .ke-pulse {
    animation-duration: 2s;
  }
}

/* ---------------------------------------------------------
   Accessibility
   - Respect reduced motion preference
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ke-pulse {
    animation: none;
    box-shadow: none;
  }
}