/* Root options (BLANCO por defecto) */
:root{
  --wrb-spark-count: 14;                 /* número de chispas */
  --wrb-spark-colors: #ffffff;           /* BLANCO por defecto */
  --wrb-spark-size-min: 3px;
  --wrb-spark-size-max: 7px;
  --wrb-spark-spread: 100px;             /* radio de expansión */
  --wrb-spark-duration: 700ms;
  --wrb-spark-shape: circle;             /* circle|square */
  --wrb-spark-z: 999999;                 /* z-index de la capa */
}

/* Capa fija para las chispas */
#wrb-spark-layer{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: var(--wrb-spark-z);
}

/* Chispa */
.wrb-spark{
  position: absolute;
  left: 0; top: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: currentColor;
  opacity: 0;
  animation: wrb-spark-pop var(--dur, 700ms) ease-out forwards;
}

.wrb-spark--circle{ border-radius: 999px; }
.wrb-spark--square{ border-radius: 3px; }

@keyframes wrb-spark-pop {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px))) scale(0.5); }
}