#smoke-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.smoke-elem {
  position: absolute;
  width: 10px;
  height: 10px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.8) 0%, rgba(139, 92, 246, 0.5) 30%, rgba(0, 0, 0, 0) 80%);
  pointer-events: none;
  animation: smokeRipple 2.5s ease-out forwards;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.4);
}

@keyframes smokeRipple {
  0% {
    transform: scale(1) translateY(0);
    opacity: 0.9;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    transform: scale(20) translateY(-30px);
    opacity: 0;
  }
}

.smoke-elem-auto {
  position: absolute;
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.5) 0%, rgba(139, 92, 246, 0.3) 40%, rgba(0, 0, 0, 0) 80%);
  pointer-events: none;
  animation: smokeRippleAuto 3.5s ease-out infinite;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.3);
}

@keyframes smokeRippleAuto {
  0% {
    transform: scale(0.5) translateY(0);
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    transform: scale(12) translateY(-30px);
    opacity: 0;
  }
}