.spark {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e8ffd0;
  pointer-events: none;
  animation: spark-pop 0.9s ease-out forwards;
}

@keyframes spark-pop {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(0.2);
  }
}

.glow-burst {
  position: absolute;
  left: 50%;
  top: 38%;
  width: clamp(120px, 28vmin, 200px);
  height: clamp(120px, 28vmin, 200px);
  margin: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(180, 255, 140, 0.55), transparent 64%);
  opacity: 0;
  pointer-events: none;
  z-index: 7;
}

.glow-burst.is-on {
  animation: glow 0.9s ease-out;
}

.btn-shine::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.45) 48%, transparent 66%);
  transform: translateX(-120%);
  animation: shine 2.8s ease-in-out infinite;
}

@keyframes shine {
  0%,
  55% {
    transform: translateX(-120%);
  }
  80%,
  100% {
    transform: translateX(120%);
  }
}