/* Hybrid Particle System Component */

/* Canvas for connection lines only */
.particles-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* Behind content but above background */
  pointer-events: none; /* Allow clicks through to content */
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

/* Fade in animation on load */
.particles-canvas.loading {
  opacity: 0;
}

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

/* Individual CSS Particles */
.css-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(0, 163, 255, 0.8);
  box-shadow: 0 0 6px rgba(0, 163, 255, 0.3);
  pointer-events: none;
  will-change: transform;
  transition: transform 0.1s ease-out;
}

/* CSS Floating Animations for different particles */
.css-particle:nth-child(1) {
  top: 15%;
  left: 10%;
  animation: float-1 12s ease-in-out infinite;
  animation-delay: 0s;
}

.css-particle:nth-child(2) {
  top: 25%;
  left: 80%;
  animation: float-2 10s ease-in-out infinite;
  animation-delay: -2s;
}

.css-particle:nth-child(3) {
  top: 35%;
  left: 20%;
  animation: float-3 14s ease-in-out infinite;
  animation-delay: -4s;
}

.css-particle:nth-child(4) {
  top: 45%;
  left: 70%;
  animation: float-1 11s ease-in-out infinite;
  animation-delay: -1s;
}

.css-particle:nth-child(5) {
  top: 55%;
  left: 40%;
  animation: float-2 13s ease-in-out infinite;
  animation-delay: -3s;
}

.css-particle:nth-child(6) {
  top: 20%;
  left: 50%;
  animation: float-3 9s ease-in-out infinite;
  animation-delay: -5s;
}

.css-particle:nth-child(7) {
  top: 60%;
  left: 15%;
  animation: float-1 15s ease-in-out infinite;
  animation-delay: -6s;
}

.css-particle:nth-child(8) {
  top: 30%;
  left: 85%;
  animation: float-2 8s ease-in-out infinite;
  animation-delay: -1.5s;
}

.css-particle:nth-child(9) {
  top: 70%;
  left: 60%;
  animation: float-3 12s ease-in-out infinite;
  animation-delay: -4.5s;
}

.css-particle:nth-child(10) {
  top: 40%;
  left: 30%;
  animation: float-1 10s ease-in-out infinite;
  animation-delay: -2.5s;
}

.css-particle:nth-child(11) {
  top: 10%;
  left: 65%;
  animation: float-2 14s ease-in-out infinite;
  animation-delay: -3.5s;
}

.css-particle:nth-child(12) {
  top: 65%;
  left: 25%;
  animation: float-3 11s ease-in-out infinite;
  animation-delay: -5.5s;
}

.css-particle:nth-child(13) {
  top: 50%;
  left: 75%;
  animation: float-1 13s ease-in-out infinite;
  animation-delay: -0.5s;
}

.css-particle:nth-child(14) {
  top: 75%;
  left: 45%;
  animation: float-2 9s ease-in-out infinite;
  animation-delay: -7s;
}

.css-particle:nth-child(15) {
  top: 22%;
  left: 35%;
  animation: float-3 16s ease-in-out infinite;
  animation-delay: -8s;
}

.css-particle:nth-child(16) {
  top: 80%;
  left: 10%;
  animation: float-1 7s ease-in-out infinite;
  animation-delay: -1.2s;
}

.css-particle:nth-child(17) {
  top: 12%;
  left: 90%;
  animation: float-2 12s ease-in-out infinite;
  animation-delay: -6.5s;
}

.css-particle:nth-child(18) {
  top: 58%;
  left: 55%;
  animation: float-3 10s ease-in-out infinite;
  animation-delay: -3.8s;
}

.css-particle:nth-child(19) {
  top: 33%;
  left: 8%;
  animation: float-1 14s ease-in-out infinite;
  animation-delay: -4.2s;
}

.css-particle:nth-child(20) {
  top: 85%;
  left: 80%;
  animation: float-2 11s ease-in-out infinite;
  animation-delay: -7.5s;
}

/* CSS Animation Keyframes */
@keyframes float-1 {
  0%, 100% { 
    transform: translateY(0px) translateX(0px) rotate(0deg);
  }
  25% {
    transform: translateY(-15px) translateX(5px) rotate(90deg);
  }
  50% { 
    transform: translateY(-25px) translateX(-3px) rotate(180deg);
  }
  75% {
    transform: translateY(-10px) translateX(8px) rotate(270deg);
  }
}

@keyframes float-2 {
  0%, 100% { 
    transform: translateY(0px) translateX(0px) rotate(0deg);
  }
  33% {
    transform: translateY(-20px) translateX(-8px) rotate(120deg);
  }
  66% { 
    transform: translateY(-12px) translateX(6px) rotate(240deg);
  }
}

@keyframes float-3 {
  0%, 100% { 
    transform: translateY(0px) translateX(0px) rotate(0deg);
  }
  20% {
    transform: translateY(-8px) translateX(4px) rotate(72deg);
  }
  40% {
    transform: translateY(-18px) translateX(-2px) rotate(144deg);
  }
  60% {
    transform: translateY(-22px) translateX(7px) rotate(216deg);
  }
  80% {
    transform: translateY(-5px) translateX(-5px) rotate(288deg);
  }
}

/* Mouse interaction enhancement class */
.css-particle.attracted {
  animation-play-state: paused;
}

/* Accessibility: Hide for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .particles-canvas,
  .particles-container {
    display: none !important;
  }
}

/* Performance optimizations for different screen sizes */
@media (max-width: 768px) {
  .particles-canvas,
  .particles-container {
    /* Reduce complexity on mobile for better performance */
    opacity: 0.7;
  }
  
  /* Show fewer particles on mobile */
  .css-particle:nth-child(n+11) {
    display: none;
  }
}

/* High performance mode for modern browsers */
@supports (backdrop-filter: blur(1px)) {
  .particles-canvas,
  .css-particle {
    /* Better performance on modern browsers */
    will-change: auto;
  }
}

/* Ensure particles don't interfere with other elements */
.hero .particles-canvas,
.hero .particles-container {
  /* Specifically positioned within hero section */
  z-index: 1;
}

.hero__container {
  /* Ensure hero content stays above particles */
  position: relative;
  z-index: 2;
}

/* Fallback for browsers without canvas support */
.no-canvas .particles-canvas {
  display: none;
}

/* Print styles - hide particles in print */
@media print {
  .particles-canvas,
  .particles-container {
    display: none !important;
  }
}