/* ---------------------------------------------------------------------------
   Fondo de chispas de DKARD
   ---------------------------------------------------------------------------
   Nació en el asistente del Dkard Chispa y ahora lo comparten también el
   ingreso y la recuperación de cuenta. Vive acá y no en chispa-wizard.css para
   no tener dos copias que se desincronicen al ajustar tonos o velocidad.

   Uso: un contenedor con .dk-fondo-chispas y dk-particulas.js, que le inyecta
   la capa de partículas.
   --------------------------------------------------------------------------- */

.dk-fondo-chispas {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background:
        radial-gradient(circle at 15% 10%, rgba(242, 96, 12, .22), transparent 45%),
        radial-gradient(circle at 85% 85%, rgba(255, 145, 66, .16), transparent 50%),
        linear-gradient(160deg, #1b100c 0%, #2a1710 45%, #3d2114 100%);
}

/* Todo el contenido queda por encima de la capa de partículas, salvo la capa
   misma: se excluye acá para que la regla no le quite su `position: absolute`
   (con `relative` colapsa a alto 0 y las chispas se dibujan fuera de vista). */
.dk-fondo-chispas > *:not(.dk-particulas) { position: relative; z-index: 1; }

/* Selector con el contenedor por delante a propósito: sube la especificidad
   para que una regla `.loquesea > *` de una hoja cargada despues no vuelva a
   romper el posicionamiento de la capa. */
.dk-fondo-chispas > .dk-particulas,
.dk-particulas {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    /* Decorativas: no deben robar clics a los campos que tienen encima. */
    pointer-events: none;
}

.dk-particulas span {
    position: absolute;
    bottom: -20px;
    width: var(--dkp-tam, 6px);
    height: var(--dkp-tam, 6px);
    border-radius: 50%;
    background: var(--dkp-color, #f2600c);
    opacity: 0;
    /* Sin `filter: blur(.4px)`: el box-shadow difuminado de abajo ya resuelve el
       halo visualmente, y el filtro obligaba a un paso de filtrado por nodo
       —multiplicado por todas las chispas— para un efecto que no se distingue. */
    box-shadow: 0 0 8px 1px var(--dkp-color, #f2600c);
    animation: dkp-subir var(--dkp-dur, 14s) linear var(--dkp-delay, 0s) infinite;
}

@keyframes dkp-subir {
    0%   { transform: translate3d(0, 0, 0) scale(.6);                opacity: 0; }
    10%  {                                                           opacity: .75; }
    50%  { transform: translate3d(var(--dkp-desvio, 20px), -50vh, 0) scale(1); }
    90%  {                                                           opacity: .35; }
    100% { transform: translate3d(0, -102vh, 0) scale(.5);           opacity: 0; }
}

/* Quien pidió menos movimiento no ve las chispas animadas. */
@media (prefers-reduced-motion: reduce) {
    .dk-particulas { display: none; }
}