.particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}

.particle {
  border-radius: 50%;
  position: absolute;
}

.particle:nth-child(even) {
  animation-direction: reverse !important;
}

.top-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 150px;
  overflow: hidden;
  z-index: 0;
}

.top-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--primary-purple);
  opacity: 0.2;
  animation: topFloat 20s infinite linear;
}

.top-particle:nth-child(even) {
  animation-direction: reverse !important;
}

@keyframes float {
  0% { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(-100vh) rotate(360deg); }
}

@keyframes topFloat {
  0% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(50px, 25px) rotate(180deg); }
  100% { transform: translate(0, 0) rotate(360deg); }
}