/* Pre-generated animations for particles */

/* Float particle animation */
@keyframes floatParticle {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(-5px, -10px) rotate(5deg);
  }
  50% {
    transform: translate(-10px, -15px) rotate(10deg);
  }
  75% {
    transform: translate(-5px, -7px) rotate(5deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

/* Secondary float animation for variation */
@keyframes floatParticle2 {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(8px, -12px) rotate(-8deg);
  }
  50% {
    transform: translate(15px, -20px) rotate(-15deg);
  }
  75% {
    transform: translate(8px, -10px) rotate(-8deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

/* Tertiary float animation for more variation */
@keyframes floatParticle3 {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(-10px, -5px) rotate(3deg);
  }
  50% {
    transform: translate(-20px, -10px) rotate(6deg);
  }
  75% {
    transform: translate(-10px, -5px) rotate(3deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

/* Fade out up animation */
@keyframes fadeOutUp {
  0% {
    opacity: 0.7;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}

/* Particle container */
.particle-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

/* Base particle style */
.particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

/* Add variation to duration and delays */
.particle:nth-child(3n) {
  animation-name: floatParticle;
  animation-duration: 15s;
}

.particle:nth-child(3n+1) {
  animation-name: floatParticle2;
  animation-duration: 18s;
}

.particle:nth-child(3n+2) {
  animation-name: floatParticle3;
  animation-duration: 20s;
}

/* Add animation delay variation */
.particle:nth-child(5n) { animation-delay: 0s; }
.particle:nth-child(5n+1) { animation-delay: 1s; }
.particle:nth-child(5n+2) { animation-delay: 2s; }
.particle:nth-child(5n+3) { animation-delay: 3s; }
.particle:nth-child(5n+4) { animation-delay: 4s; }

/* All particles have infinite animation */
.particle {
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}