/* =========================================
   VELVET – WINTER SALE
   Nevada: copos SVG de 8 brazos, blanco perlado #f5f6f7
   Todo el movimiento vive acá (keyframes CSS). El JS solo
   crea los nodos con las variables randomizadas.
   ========================================= */

.velvet-snow-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 900;
}

/* Pausa global (visibilitychange / VelvetSnow.stop) */
.velvet-snow-layer--paused .velvet-snow-flake,
.velvet-snow-layer--paused .velvet-snow-flake > i,
.velvet-snow-layer--paused .velvet-snow-flake svg {
  animation-play-state: paused;
}

/* Nivel 1: caída vertical + deriva de viento horneada */
.velvet-snow-flake {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--size, 10px);
  height: var(--size, 10px);
  opacity: var(--opacity, 0.7);
  will-change: transform;
  animation: velvetSnowFall var(--duration, 16s) linear var(--delay, 0s) infinite;
}

/* Nivel 2: balanceo lateral */
.velvet-snow-flake > i {
  display: block;
  width: 100%;
  height: 100%;
  color: #f5f6f7;
  animation: velvetSnowDrift var(--driftDur, 5s) ease-in-out var(--driftDelay, 0s) infinite alternate;
}

/* Nivel 3: rotación suave */
.velvet-snow-flake svg {
  display: block;
  width: 100%;
  height: 100%;
  stroke-width: var(--stroke, 1.4);
  /* el drop-shadow los despega de los fondos claros (venía del efecto original) */
  filter: blur(var(--blur, 0px)) drop-shadow(0 0 2px rgba(0, 0, 0, 0.18));
  animation: velvetSnowSpin var(--spinDur, 24s) linear infinite;
}

@keyframes velvetSnowFall {
  from {
    transform: translate3d(0, -12vh, 0);
  }
  to {
    transform: translate3d(var(--wind, 0px), 112vh, 0);
  }
}

@keyframes velvetSnowDrift {
  from {
    transform: translateX(calc(-1 * var(--drift, 20px)));
  }
  to {
    transform: translateX(var(--drift, 20px));
  }
}

@keyframes velvetSnowSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(var(--spin, 360deg));
  }
}

@media (prefers-reduced-motion: reduce) {
  .velvet-snow-layer {
    display: none;
  }
}

@media print {
  .velvet-snow-layer {
    display: none;
  }
}