/* capa de fondo */
#spark-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* base spark */
.spark,
.big-spark {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;

  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.4s ease, transform 0.4s ease;
}



.spark {
  opacity: 0;
  width: 6px;
  height: 6px;
  background: radial-gradient(circle, #00ff78 0%, #00ff7800 70%);
}


.big-spark {
  opacity: 0;
  width: 14px;
  height: 14px;
  background: radial-gradient(circle, #00ff78 0%, #00ff7800 70%);
  filter: blur(2px);
}


.spark {
  animation: fadeInOut 2.5s ease-out forwards;
}


.big-spark {
  animation: fadeInOut 3.5s ease-out forwards;
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
    transform: scale(1);
  }

  40%{
    opacity: 1;
    transform: scale(3);
  }

  60%{
    opacity: 1;
    transform: scale(3);
  }


  100% {
    opacity: 0;
    transform: scale(1);
  }
}