/* Particle Background System */

.particles-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.particle {
  position: absolute;
  background: var(--primary-cyan);
  border-radius: 50%;
  opacity: 0;
  animation: float-particle 20s infinite linear;
}

/* Round particles */
.particle-1 { width: 4px; height: 4px; top: 20%; left: 10%; animation-delay: 0s; animation-duration: 25s; }
.particle-2 { width: 6px; height: 6px; top: 60%; left: 80%; animation-delay: 2s; animation-duration: 30s; background: rgba(0, 229, 204, 0.6); }
.particle-3 { width: 3px; height: 3px; top: 80%; left: 20%; animation-delay: 4s; animation-duration: 22s; }
.particle-4 { width: 5px; height: 5px; top: 30%; left: 70%; animation-delay: 6s; animation-duration: 28s; background: rgba(0, 229, 204, 0.4); }
.particle-5 { width: 4px; height: 4px; top: 70%; left: 40%; animation-delay: 8s; animation-duration: 24s; }
.particle-6 { width: 6px; height: 6px; top: 10%; left: 60%; animation-delay: 10s; animation-duration: 26s; background: rgba(0, 229, 204, 0.7); }
.particle-7 { width: 3px; height: 3px; top: 50%; left: 30%; animation-delay: 12s; animation-duration: 23s; }
.particle-8 { width: 5px; height: 5px; top: 90%; left: 80%; animation-delay: 14s; animation-duration: 27s; background: rgba(0, 229, 204, 0.5); }
.particle-9 { width: 4px; height: 4px; top: 40%; left: 90%; animation-delay: 16s; animation-duration: 25s; }
.particle-10 { width: 6px; height: 6px; top: 15%; left: 50%; animation-delay: 18s; animation-duration: 29s; background: rgba(0, 229, 204, 0.6); }
.particle-11 { width: 4px; height: 4px; top: 25%; left: 85%; animation-delay: 1s; animation-duration: 24s; }
.particle-12 { width: 5px; height: 5px; top: 75%; left: 15%; animation-delay: 3s; animation-duration: 26s; background: rgba(0, 229, 204, 0.5); }
.particle-13 { width: 3px; height: 3px; top: 45%; left: 95%; animation-delay: 5s; animation-duration: 23s; }
.particle-14 { width: 6px; height: 6px; top: 85%; left: 60%; animation-delay: 7s; animation-duration: 28s; background: rgba(0, 229, 204, 0.6); }
.particle-15 { width: 4px; height: 4px; top: 5%; left: 25%; animation-delay: 9s; animation-duration: 25s; }
.particle-16 { width: 5px; height: 5px; top: 95%; left: 75%; animation-delay: 11s; animation-duration: 27s; background: rgba(0, 229, 204, 0.4); }
.particle-17 { width: 3px; height: 3px; top: 35%; left: 5%; animation-delay: 13s; animation-duration: 22s; }
.particle-18 { width: 6px; height: 6px; top: 65%; left: 90%; animation-delay: 15s; animation-duration: 29s; background: rgba(0, 229, 204, 0.7); }
.particle-19 { width: 4px; height: 4px; top: 55%; left: 35%; animation-delay: 17s; animation-duration: 24s; }
.particle-20 { width: 5px; height: 5px; top: 15%; left: 75%; animation-delay: 19s; animation-duration: 26s; background: rgba(0, 229, 204, 0.5); }

/* Square particles */
.particle-square {
  position: absolute;
  background: var(--primary-cyan);
  opacity: 0;
  animation: float-particle-square 25s infinite linear;
}

.particle-sq-1 { width: 8px; height: 8px; top: 15%; left: 85%; animation-delay: 0s; animation-duration: 28s; border-radius: 0; background: rgba(0, 229, 204, 0.3); }
.particle-sq-2 { width: 6px; height: 6px; top: 75%; left: 25%; animation-delay: 2s; animation-duration: 32s; border-radius: 0; }
.particle-sq-3 { width: 10px; height: 10px; top: 45%; left: 95%; animation-delay: 4s; animation-duration: 26s; border-radius: 0; background: rgba(0, 229, 204, 0.4); }
.particle-sq-4 { width: 4px; height: 4px; top: 85%; left: 65%; animation-delay: 6s; animation-duration: 30s; border-radius: 0; }
.particle-sq-5 { width: 7px; height: 7px; top: 25%; left: 15%; animation-delay: 8s; animation-duration: 27s; border-radius: 0; background: rgba(0, 229, 204, 0.3); }
.particle-sq-6 { width: 5px; height: 5px; top: 65%; left: 85%; animation-delay: 10s; animation-duration: 29s; border-radius: 0; }
.particle-sq-7 { width: 9px; height: 9px; top: 35%; left: 55%; animation-delay: 12s; animation-duration: 31s; border-radius: 0; background: rgba(0, 229, 204, 0.4); }
.particle-sq-8 { width: 6px; height: 6px; top: 95%; left: 45%; animation-delay: 14s; animation-duration: 25s; border-radius: 0; }

/* Diamond particles */
.particle-diamond {
  position: absolute;
  background: var(--primary-cyan);
  opacity: 0;
  animation: float-particle-diamond 20s infinite linear;
}

.particle-dia-1 { width: 8px; height: 8px; top: 10%; left: 40%; animation-delay: 0s; animation-duration: 25s; transform: rotate(45deg); background: rgba(0, 229, 204, 0.4); }
.particle-dia-2 { width: 6px; height: 6px; top: 50%; left: 20%; animation-delay: 2s; animation-duration: 29s; transform: rotate(45deg); }
.particle-dia-3 { width: 10px; height: 10px; top: 90%; left: 70%; animation-delay: 4s; animation-duration: 23s; transform: rotate(45deg); background: rgba(0, 229, 204, 0.5); }
.particle-dia-4 { width: 5px; height: 5px; top: 30%; left: 80%; animation-delay: 6s; animation-duration: 27s; transform: rotate(45deg); }
.particle-dia-5 { width: 7px; height: 7px; top: 60%; left: 50%; animation-delay: 8s; animation-duration: 31s; transform: rotate(45deg); background: rgba(0, 229, 204, 0.3); }

/* Hex particles */
.particle-hex {
  position: absolute;
  background: var(--primary-cyan);
  opacity: 0;
  animation: float-particle-hex 18s infinite linear;
}

.particle-hex-1 { width: 12px; height: 12px; top: 25%; left: 75%; animation-delay: 1s; animation-duration: 22s; border-radius: 50%; background: rgba(0, 229, 204, 0.4); }
.particle-hex-2 { width: 8px; height: 8px; top: 65%; left: 35%; animation-delay: 3s; animation-duration: 26s; border-radius: 50%; }
.particle-hex-3 { width: 14px; height: 14px; top: 85%; left: 15%; animation-delay: 5s; animation-duration: 24s; border-radius: 50%; background: rgba(0, 229, 204, 0.5); }
.particle-hex-4 { width: 6px; height: 6px; top: 45%; left: 95%; animation-delay: 7s; animation-duration: 28s; border-radius: 50%; }

/* Star particles */
.particle-star {
  position: absolute;
  background: var(--primary-cyan);
  opacity: 0;
  animation: float-particle-star 16s infinite linear;
}

.particle-star-1 { width: 10px; height: 10px; top: 15%; left: 55%; animation-delay: 0s; animation-duration: 20s; background: rgba(0, 229, 204, 0.3); }
.particle-star-2 { width: 8px; height: 8px; top: 75%; left: 25%; animation-delay: 2s; animation-duration: 18s; }
.particle-star-3 { width: 12px; height: 12px; top: 35%; left: 85%; animation-delay: 4s; animation-duration: 22s; background: rgba(0, 229, 204, 0.4); }

/* Line animations */
.line {
  position: absolute;
  height: 1px;
  opacity: 0;
  animation: float-line 15s infinite linear;
  background: linear-gradient(90deg, transparent, var(--primary-cyan), transparent);
}

.line-1 { width: 200px; top: 25%; left: -200px; animation-delay: 0s; animation-duration: 20s; }
.line-2 { width: 150px; top: 45%; left: -150px; animation-delay: 3s; animation-duration: 18s; }
.line-3 { width: 180px; top: 65%; left: -180px; animation-delay: 6s; animation-duration: 22s; }
.line-4 { width: 120px; top: 85%; left: -120px; animation-delay: 9s; animation-duration: 16s; }
.line-5 { width: 160px; top: 35%; left: -160px; animation-delay: 12s; animation-duration: 19s; }
.line-6 { width: 140px; top: 55%; left: -140px; animation-delay: 15s; animation-duration: 17s; }
.line-7 { width: 170px; top: 75%; left: -170px; animation-delay: 18s; animation-duration: 21s; }
.line-8 { width: 130px; top: 95%; left: -130px; animation-delay: 21s; animation-duration: 19s; }

/* Animations */
@keyframes float-particle {
  0% {
    transform: translateY(0px) translateX(0px);
    opacity: 0;
  }
  25% {
    opacity: 0.6;
  }
  50% {
    opacity: 0.3;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    transform: translateY(-100px) translateX(50px);
    opacity: 0;
  }
}

@keyframes float-particle-square {
  0% {
    transform: translateY(0px) translateX(0px) rotate(0deg);
    opacity: 0;
  }
  25% {
    opacity: 0.15;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 0.12;
  }
  100% {
    transform: translateY(-120px) translateX(60px) rotate(360deg);
    opacity: 0;
  }
}

@keyframes float-particle-diamond {
  0% {
    transform: translateY(0px) translateX(0px) rotate(45deg);
    opacity: 0;
  }
  25% {
    opacity: 0.14;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 0.11;
  }
  100% {
    transform: translateY(-110px) translateX(50px) rotate(405deg);
    opacity: 0;
  }
}

@keyframes float-particle-hex {
  0% {
    transform: translateY(0px) translateX(0px) scale(1);
    opacity: 0;
  }
  25% {
    opacity: 0.12;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 0.08;
  }
  100% {
    transform: translateY(-90px) translateX(30px) scale(0.8);
    opacity: 0;
  }
}

@keyframes float-particle-star {
  0% {
    transform: translateY(0px) translateX(0px) rotate(0deg);
    opacity: 0;
  }
  25% {
    opacity: 0.1;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 0.07;
  }
  100% {
    transform: translateY(-80px) translateX(45px) rotate(720deg);
    opacity: 0;
  }
}

@keyframes float-line {
  0% {
    transform: translateX(0px);
    opacity: 0;
  }
  10% {
    opacity: 0.05;
  }
  90% {
    opacity: 0.05;
  }
  100% {
    transform: translateX(calc(100vw + 200px));
    opacity: 0;
  }
}

/* Subtle grid pattern overlay */
.particles-grid {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(rgba(0, 229, 204, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 204, 0.02) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
  z-index: -2;
}

/* Enhanced glow effect for some particles */
.particle-glow {
  box-shadow: 0 0 10px var(--primary-cyan);
}