/* ============================================
   Particles Background Animation
   Theme-aware particle animation using CSS variables
   ============================================ */

/* Particle Float Animations */
@keyframes particleFloat1 {
  0%, 100% {
    transform: translateY(0px) translateX(0px);
    opacity: 0.3;
  }
  25% {
    transform: translateY(-20px) translateX(10px);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-10px) translateX(-15px);
    opacity: 0.5;
  }
  75% {
    transform: translateY(-30px) translateX(5px);
    opacity: 0.7;
  }
}

@keyframes particleFloat2 {
  0%, 100% {
    transform: translateY(0px) translateX(0px);
    opacity: 0.2;
  }
  33% {
    transform: translateY(-25px) translateX(-20px);
    opacity: 0.6;
  }
  66% {
    transform: translateY(-15px) translateX(25px);
    opacity: 0.4;
  }
}

/* Particle background layer 1 */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(2px 2px at 20px 30px, var(--color-red), transparent),
    radial-gradient(2px 2px at 40px 70px, var(--color-red), transparent),
    radial-gradient(1px 1px at 90px 40px, var(--color-blue), transparent),
    radial-gradient(1px 1px at 130px 80px, var(--color-red), transparent),
    radial-gradient(2px 2px at 160px 30px, var(--color-red), transparent),
    radial-gradient(1px 1px at 200px 60px, var(--color-blue), transparent),
    radial-gradient(2px 2px at 240px 20px, var(--color-red), transparent),
    radial-gradient(1px 1px at 280px 50px, var(--color-red), transparent),
    radial-gradient(1px 1px at 320px 80px, var(--color-blue), transparent),
    radial-gradient(2px 2px at 360px 40px, var(--color-red), transparent);
  background-repeat: repeat;
  background-size: 400px 100px;
  animation: particleFloat1 8s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
  opacity: 0.3;
}

/* Particle background layer 2 */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(1px 1px at 50px 20px, var(--color-blue), transparent),
    radial-gradient(2px 2px at 100px 60px, var(--color-red), transparent),
    radial-gradient(1px 1px at 150px 10px, var(--color-red), transparent),
    radial-gradient(2px 2px at 200px 70px, var(--color-blue), transparent),
    radial-gradient(1px 1px at 250px 30px, var(--color-red), transparent),
    radial-gradient(1px 1px at 300px 80px, var(--color-red), transparent),
    radial-gradient(2px 2px at 350px 15px, var(--color-blue), transparent),
    radial-gradient(1px 1px at 400px 55px, var(--color-red), transparent);
  background-repeat: repeat;
  background-size: 450px 90px;
  animation: particleFloat2 12s ease-in-out infinite reverse;
  pointer-events: none;
  z-index: -1;
  opacity: 0.2;
}