/* Anti-Gravity Particles Effect - Optimized */

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

/* Individual Particle */
.particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
  animation: float-up linear infinite;
}

/* Particle Variants */
.particle-1 {
  width: 4px;
  height: 4px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.8), transparent);
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
}

.particle-2 {
  width: 6px;
  height: 6px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.8), transparent);
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.5);
}

.particle-3 {
  width: 3px;
  height: 3px;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.8), transparent);
  box-shadow: 0 0 8px rgba(6, 182, 212, 0.5);
}

.particle-4 {
  width: 5px;
  height: 5px;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.7), transparent);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
}

.particle-5 {
  width: 4px;
  height: 4px;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.7), transparent);
  box-shadow: 0 0 10px rgba(236, 72, 153, 0.4);
}

/* Float Up Animation */
@keyframes float-up {
  0% {
    transform: translateY(100vh) translateX(0) scale(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100vh) translateX(var(--drift)) scale(1);
    opacity: 0;
  }
}

/* Glow Pulse Animation */
@keyframes glow-pulse {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.5);
  }
}

/* Interactive Particles (on hover areas) */
.particle.interactive {
  animation: float-up linear infinite, glow-pulse 2s ease-in-out infinite;
}

/* Particle Trail Effect */
.particle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: inherit;
  transform: translate(-50%, -50%);
  opacity: 0.3;
  filter: blur(2px);
}

/* Performance Optimizations */
@media (prefers-reduced-motion: reduce) {
  .particle {
    animation: none;
    opacity: 0.3;
  }
}

/* Disable on mobile for performance */
@media (max-width: 768px) {
  .particles-container {
    display: none !important;
  }
}

/* IMPORTANT: Force show on desktop */
@media (min-width: 769px) {
  .particles-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* Hero Section Particles Enhancement */
.hero .particles-container {
  z-index: 2;
}

.hero .particles-container .particle {
  filter: brightness(1.2);
}

/* Section-specific particle colors */
.section.light-background .particles-container .particle {
  opacity: 0.6;
}

/* Particle Density Control */
.particles-container.density-low .particle:nth-child(n+20) {
  display: none;
}

.particles-container.density-medium .particle:nth-child(n+40) {
  display: none;
}

/* High performance mode */
.particles-container.performance-mode .particle {
  animation-duration: 15s !important;
  will-change: auto;
}

.particles-container.performance-mode .particle::after {
  display: none;
}

/* Cursor Interaction Effect */
.particle.near-cursor {
  animation-play-state: paused;
  transform: scale(1.5);
  filter: brightness(1.5);
  transition: all 0.3s ease;
}

/* Constellation Lines (Optional) */
.particle-line {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(99, 102, 241, 0.2), 
    transparent
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.particle-line.active {
  opacity: 1;
}

/* Particle Clusters */
.particle-cluster {
  position: absolute;
  width: 100px;
  height: 100px;
  pointer-events: none;
}

.particle-cluster .particle {
  position: absolute;
}

/* Starburst Effect */
@keyframes starburst {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: scale(3) rotate(360deg);
    opacity: 0;
  }
}

.particle.starburst {
  animation: starburst 1s ease-out forwards;
}

/* Magnetic Effect */
.particle.magnetic {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Color Shift Animation */
@keyframes color-shift {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

.particle.color-shift {
  animation: float-up linear infinite, color-shift 10s linear infinite;
}

/* Particle Size Variants */
.particle.size-tiny { width: 2px; height: 2px; }
.particle.size-small { width: 4px; height: 4px; }
.particle.size-medium { width: 6px; height: 6px; }
.particle.size-large { width: 8px; height: 8px; }

/* Opacity Variants */
.particle.opacity-low { opacity: 0.3; }
.particle.opacity-medium { opacity: 0.6; }
.particle.opacity-high { opacity: 0.9; }

/* Speed Variants */
.particle.speed-slow { animation-duration: 20s; }
.particle.speed-medium { animation-duration: 15s; }
.particle.speed-fast { animation-duration: 10s; }

/* Particle Glow Intensity */
.particle.glow-soft {
  box-shadow: 0 0 5px currentColor;
}

.particle.glow-medium {
  box-shadow: 0 0 10px currentColor;
}

.particle.glow-strong {
  box-shadow: 0 0 20px currentColor, 0 0 30px currentColor;
}

/* Twinkle Effect */
@keyframes twinkle {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

.particle.twinkle {
  animation: float-up linear infinite, twinkle 2s ease-in-out infinite;
}

/* Spiral Movement */
@keyframes spiral {
  0% {
    transform: translateY(100vh) rotate(0deg) translateX(0);
  }
  100% {
    transform: translateY(-100vh) rotate(720deg) translateX(100px);
  }
}

.particle.spiral {
  animation: spiral 20s linear infinite;
}

/* Zigzag Movement */
@keyframes zigzag {
  0%, 100% { transform: translateY(100vh) translateX(0); }
  25% { transform: translateY(75vh) translateX(50px); }
  50% { transform: translateY(50vh) translateX(-50px); }
  75% { transform: translateY(25vh) translateX(50px); }
}

.particle.zigzag {
  animation: zigzag 15s ease-in-out infinite;
}

/* Particle Trails */
.particle.trail::before {
  content: '';
  position: absolute;
  width: 2px;
  height: 20px;
  background: linear-gradient(to bottom, currentColor, transparent);
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0.5;
}

/* Shooting Star Effect */
@keyframes shooting-star {
  0% {
    transform: translateX(-100px) translateY(100px) rotate(-45deg);
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: translateX(1000px) translateY(-1000px) rotate(-45deg);
    opacity: 0;
  }
}

.particle.shooting-star {
  width: 2px;
  height: 2px;
  animation: shooting-star 3s ease-out infinite;
  animation-delay: var(--delay);
}

.particle.shooting-star::before {
  content: '';
  position: absolute;
  width: 50px;
  height: 1px;
  background: linear-gradient(to right, currentColor, transparent);
  top: 0;
  right: 100%;
}

/* Bubble Effect */
@keyframes bubble {
  0% {
    transform: translateY(100vh) scale(0.5);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100vh) scale(1.5);
    opacity: 0;
  }
}

.particle.bubble {
  animation: bubble 15s ease-in-out infinite;
  background: radial-gradient(circle at 30% 30%, 
    rgba(255, 255, 255, 0.8), 
    rgba(99, 102, 241, 0.4)
  );
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Firefly Effect */
@keyframes firefly {
  0%, 100% { 
    opacity: 0.2;
    transform: translateY(100vh) translateX(0);
  }
  25% { 
    opacity: 1;
    transform: translateY(75vh) translateX(30px);
  }
  50% { 
    opacity: 0.5;
    transform: translateY(50vh) translateX(-20px);
  }
  75% { 
    opacity: 1;
    transform: translateY(25vh) translateX(40px);
  }
}

.particle.firefly {
  animation: firefly 12s ease-in-out infinite;
  background: radial-gradient(circle, rgba(245, 158, 11, 1), transparent);
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.8);
}

/* Performance: GPU Acceleration */
.particle {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Disable on low-end devices */
@media (max-width: 768px), (prefers-reduced-motion: reduce) {
  .particles-container {
    display: none !important;
  }
}

/* Force show on desktop even if other CSS tries to hide */
@media (min-width: 769px) {
  .particles-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }
}

/* Print: Hide particles */
@media print {
  .particles-container {
    display: none;
  }
}