/**
 * Avenue78 Hero Neural Network Animation
 * Quantum synaptic connections with particle network
 * Colors adapted to Avenue78 brand palette
 */

/* ============================================
   PARTICLES CONTAINER
   ============================================ */

.particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

/* Neural Network Canvas for Connections */
.neural-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* ============================================
   QUANTUM PARTICLES
   ============================================ */

.particle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  opacity: 0;
  animation: quantumFloat 10s infinite ease-in-out, quantumGlow 3s infinite ease-in-out;
  /* Default: Brand blue */
  background: var(--brand);
  box-shadow:
    0 0 10px var(--brand),
    0 0 20px rgba(46, 91, 255, 0.5),
    0 0 30px rgba(46, 91, 255, 0.3);
}

/* Quantum Floating Animation */
@keyframes quantumFloat {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.6;
  }
  25% {
    transform: translate(25px, -30px) scale(1.2);
    opacity: 0.8;
  }
  50% {
    transform: translate(-15px, 20px) scale(0.9);
    opacity: 0.7;
  }
  75% {
    transform: translate(30px, 15px) scale(1.1);
    opacity: 0.75;
  }
}

/* Quantum Glow Pulse */
@keyframes quantumGlow {
  0%, 100% {
    box-shadow:
      0 0 10px var(--brand),
      0 0 20px rgba(46, 91, 255, 0.5),
      0 0 30px rgba(46, 91, 255, 0.3);
  }
  50% {
    box-shadow:
      0 0 15px var(--brand),
      0 0 30px rgba(46, 91, 255, 0.6),
      0 0 45px rgba(46, 91, 255, 0.4);
  }
}

/* ============================================
   PARTICLE POSITIONS & COLOR VARIANTS
   ============================================ */

.particle:nth-child(1) {
  top: 15%;
  left: 8%;
  animation-delay: 0s, 0s;
  animation-duration: 9s, 2.5s;
}

.particle:nth-child(2) {
  top: 35%;
  left: 20%;
  animation-delay: 1.5s, 0.4s;
  animation-duration: 11s, 2.8s;
  /* Purple variant */
  background: var(--brand-2);
  box-shadow:
    0 0 10px var(--brand-2),
    0 0 20px rgba(123, 97, 255, 0.5),
    0 0 30px rgba(123, 97, 255, 0.3);
}

.particle:nth-child(3) {
  top: 55%;
  left: 12%;
  animation-delay: 3s, 0.8s;
  animation-duration: 10s, 3s;
  /* Cyan variant */
  background: var(--accent);
  box-shadow:
    0 0 10px var(--accent),
    0 0 20px rgba(0, 212, 255, 0.5),
    0 0 30px rgba(0, 212, 255, 0.3);
}

.particle:nth-child(4) {
  top: 25%;
  left: 75%;
  animation-delay: 0.8s, 1.2s;
  animation-duration: 12s, 2.6s;
}

.particle:nth-child(5) {
  top: 65%;
  left: 65%;
  animation-delay: 2.5s, 1.6s;
  animation-duration: 9.5s, 2.9s;
  /* Purple variant */
  background: var(--brand-2);
  box-shadow:
    0 0 10px var(--brand-2),
    0 0 20px rgba(123, 97, 255, 0.5),
    0 0 30px rgba(123, 97, 255, 0.3);
}

.particle:nth-child(6) {
  top: 45%;
  left: 88%;
  animation-delay: 4s, 0.6s;
  animation-duration: 10.5s, 3.2s;
  /* Cyan variant */
  background: var(--accent);
  box-shadow:
    0 0 10px var(--accent),
    0 0 20px rgba(0, 212, 255, 0.5),
    0 0 30px rgba(0, 212, 255, 0.3);
}

.particle:nth-child(7) {
  top: 10%;
  left: 45%;
  animation-delay: 2s, 1s;
  animation-duration: 11.5s, 2.7s;
}

.particle:nth-child(8) {
  top: 75%;
  left: 35%;
  animation-delay: 5s, 1.4s;
  animation-duration: 12.5s, 3s;
  /* Cyan variant */
  background: var(--accent);
  box-shadow:
    0 0 10px var(--accent),
    0 0 20px rgba(0, 212, 255, 0.5),
    0 0 30px rgba(0, 212, 255, 0.3);
}

.particle:nth-child(9) {
  top: 30%;
  left: 55%;
  animation-delay: 1s, 0.5s;
  animation-duration: 10s, 2.5s;
  /* Purple variant */
  background: var(--brand-2);
  box-shadow:
    0 0 10px var(--brand-2),
    0 0 20px rgba(123, 97, 255, 0.5),
    0 0 30px rgba(123, 97, 255, 0.3);
}

.particle:nth-child(10) {
  top: 80%;
  left: 80%;
  animation-delay: 3.5s, 1.8s;
  animation-duration: 11s, 2.8s;
}

/* ============================================
   QUANTUM FIELD BACKGROUND
   ============================================ */

.quantum-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.2;
  background:
    radial-gradient(circle at 15% 25%, rgba(46, 91, 255, 0.2) 0%, transparent 35%),
    radial-gradient(circle at 85% 55%, rgba(123, 97, 255, 0.15) 0%, transparent 35%),
    radial-gradient(circle at 50% 85%, rgba(0, 212, 255, 0.18) 0%, transparent 40%);
  animation: quantumFieldPulse 6s infinite ease-in-out;
}

@keyframes quantumFieldPulse {
  0%, 100% {
    opacity: 0.18;
    transform: scale(1);
  }
  50% {
    opacity: 0.28;
    transform: scale(1.03);
  }
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
  .particle {
    width: 5px;
    height: 5px;
  }

  .quantum-field {
    opacity: 0.15;
  }
}

/* ============================================
   ACCESSIBILITY - Reduced Motion
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .particle,
  .quantum-field {
    animation: none;
  }

  .particle {
    opacity: 0.4;
  }

  .quantum-field {
    opacity: 0.12;
  }
}

/* ============================================
   PERFORMANCE OPTIMIZATION
   ============================================ */

.particles,
.neural-canvas,
.quantum-field,
.particle {
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}