@keyframes pulseRing {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

.pulsing-button-wrapper {
  position: relative;
  display: inline-block;
}

.pulsing-ring {
  position: absolute;
  inset: 0;
  border: 2px solid currentColor;
  border-radius: 9999px;
  animation: pulseRing 1.2s ease-out infinite;
  pointer-events: none;
}

.pulsing-button {
  position: relative;
  z-index: 10;
  padding: 0.5rem 1.5rem;
  background-color: #4f46e5;
  color: white;
  border-radius: 9999px;
  font-weight: bold;
  border: none;
}


/*
body {
 color: #e5e7eb;
 background-color: #111827;
 display: flex;
 align-items: center;
 justify-content: center;
}

div {
 text-align: center;
 margin-bottom: 2rem;
}

/* container you want to glow * /
.breathing-card {
  background: #111;
  color: #fafafa;
  padding: 1.5rem;
  border-radius: 1rem;
  box-shadow: 0 0 8px 2px #00ffc855; /* starting glow * /
  animation: breathe 6s ease-in-out infinite;
  transition: box-shadow 0.2s;
}

/* pause motion on user intent * /
.breathing-card:hover,
.breathing-card:focus-visible {
  animation-play-state: paused;
}

@keyframes breathe {
  0%,
  100% {
    box-shadow: 0 0 8px 2px #00ffc855;
  }
  50% {
    box-shadow: 0 0 20px 8px #00ffc8aa;
  }
}

/* motion-sensitive users * /
@media (prefers-reduced-motion: reduce) {
  .breathing-card {
    animation: none;
  }
}

*/