@charset "utf-8";

.particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.particle {
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  will-change: transform, opacity, filter;
  transform: translate(var(--baseTx, 0), var(--baseTy, 0));
  animation-name: particleBlink;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

@keyframes particleBlink {
  0%   { opacity: var(--blinkLow, 0.5); }
  100% { opacity: var(--blinkHigh, 1); }
}

@media (prefers-reduced-motion: reduce) {
  .particle { animation: none; }
}