/* ===== ADVANCED PARTICLE SYSTEMS & PHYSICS EFFECTS ===== */

/* Quantum Particle Effects */
@keyframes quantumFluctuation {
  0%, 100% { 
    transform: scale(1) rotate(0deg);
    opacity: 0.8;
    filter: blur(0px) hue-rotate(0deg);
  }
  25% { 
    transform: scale(1.2) rotate(90deg);
    opacity: 0.4;
    filter: blur(2px) hue-rotate(90deg);
  }
  50% { 
    transform: scale(0.8) rotate(180deg);
    opacity: 1;
    filter: blur(1px) hue-rotate(180deg);
  }
  75% { 
    transform: scale(1.1) rotate(270deg);
    opacity: 0.6;
    filter: blur(3px) hue-rotate(270deg);
  }
}

@keyframes particleStream {
  0% {
    transform: translateX(-100vw) translateY(0) scale(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
    transform: translateX(-80vw) translateY(-20px) scale(0.5);
  }
  50% {
    transform: translateX(0) translateY(-100px) scale(1);
    opacity: 0.8;
  }
  90% {
    transform: translateX(80vw) translateY(-200px) scale(0.3);
    opacity: 0.2;
  }
  100% {
    transform: translateX(100vw) translateY(-300px) scale(0);
    opacity: 0;
  }
}

@keyframes electroMagnetic {
  0% {
    transform: rotate(0deg) translateX(50px) rotate(0deg);
    box-shadow: 0 0 20px #00ffff, inset 0 0 20px #ff00ff;
  }
  25% {
    transform: rotate(90deg) translateX(75px) rotate(-90deg);
    box-shadow: 0 0 40px #ff00ff, inset 0 0 40px #ffff00;
  }
  50% {
    transform: rotate(180deg) translateX(100px) rotate(-180deg);
    box-shadow: 0 0 60px #ffff00, inset 0 0 60px #00ff00;
  }
  75% {
    transform: rotate(270deg) translateX(75px) rotate(-270deg);
    box-shadow: 0 0 40px #00ff00, inset 0 0 40px #00ffff;
  }
  100% {
    transform: rotate(360deg) translateX(50px) rotate(-360deg);
    box-shadow: 0 0 20px #00ffff, inset 0 0 20px #ff00ff;
  }
}

@keyframes plasmaBall {
  0%, 100% {
    border-radius: 50%;
    transform: scale(1) rotate(0deg);
    background: radial-gradient(circle, #ff0080 0%, #8000ff 50%, #0080ff 100%);
    box-shadow: 0 0 50px #ff0080, inset 0 0 50px rgba(255,255,255,0.3);
  }
  33% {
    border-radius: 60% 40% 60% 40%;
    transform: scale(1.2) rotate(120deg);
    background: radial-gradient(circle, #8000ff 0%, #0080ff 50%, #00ff80 100%);
    box-shadow: 0 0 80px #8000ff, inset 0 0 80px rgba(255,255,255,0.5);
  }
  66% {
    border-radius: 40% 60% 40% 60%;
    transform: scale(0.8) rotate(240deg);
    background: radial-gradient(circle, #0080ff 0%, #00ff80 50%, #ff0080 100%);
    box-shadow: 0 0 100px #0080ff, inset 0 0 100px rgba(255,255,255,0.7);
  }
}

@keyframes gravityWell {
  0% {
    transform: scale(1) rotate(0deg);
    border-radius: 50%;
    background: conic-gradient(from 0deg, #000 0%, #333 25%, #666 50%, #999 75%, #000 100%);
  }
  50% {
    transform: scale(1.5) rotate(180deg);
    border-radius: 30%;
    background: conic-gradient(from 180deg, #000 0%, #444 25%, #777 50%, #aaa 75%, #000 100%);
  }
  100% {
    transform: scale(1) rotate(360deg);
    border-radius: 50%;
    background: conic-gradient(from 360deg, #000 0%, #333 25%, #666 50%, #999 75%, #000 100%);
  }
}

/* Advanced Particle Swarm Effects */
@keyframes swarmBehavior {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(100px, -50px) rotate(90deg);
  }
  50% {
    transform: translate(50px, -100px) rotate(180deg);
  }
  75% {
    transform: translate(-50px, -50px) rotate(270deg);
  }
  100% {
    transform: translate(0, 0) rotate(360deg);
  }
}

@keyframes flockMovement {
  0%, 100% {
    transform: translateX(0) translateY(0) rotate(0deg);
  }
  20% {
    transform: translateX(80px) translateY(-30px) rotate(45deg);
  }
  40% {
    transform: translateX(120px) translateY(-80px) rotate(90deg);
  }
  60% {
    transform: translateX(80px) translateY(-120px) rotate(135deg);
  }
  80% {
    transform: translateX(20px) translateY(-80px) rotate(180deg);
  }
}

/* Energy Field Effects */
@keyframes energyField {
  0% {
    background: radial-gradient(ellipse at center, 
      rgba(0,255,255,0.8) 0%, 
      rgba(0,255,255,0.4) 30%, 
      rgba(0,255,255,0.1) 60%, 
      transparent 100%);
    transform: scale(1) rotate(0deg);
  }
  50% {
    background: radial-gradient(ellipse at center, 
      rgba(255,0,255,0.8) 0%, 
      rgba(255,0,255,0.4) 30%, 
      rgba(255,0,255,0.1) 60%, 
      transparent 100%);
    transform: scale(1.3) rotate(180deg);
  }
  100% {
    background: radial-gradient(ellipse at center, 
      rgba(0,255,255,0.8) 0%, 
      rgba(0,255,255,0.4) 30%, 
      rgba(0,255,255,0.1) 60%, 
      transparent 100%);
    transform: scale(1) rotate(360deg);
  }
}

@keyframes forceField {
  0%, 100% {
    box-shadow: 
      0 0 20px rgba(0,255,0,0.5),
      0 0 40px rgba(0,255,0,0.3),
      0 0 60px rgba(0,255,0,0.1),
      inset 0 0 20px rgba(255,255,255,0.1);
  }
  50% {
    box-shadow: 
      0 0 40px rgba(0,255,0,0.8),
      0 0 80px rgba(0,255,0,0.5),
      0 0 120px rgba(0,255,0,0.3),
      inset 0 0 40px rgba(255,255,255,0.3);
  }
}

/* Molecular Animation Effects */
@keyframes molecularBond {
  0%, 100% {
    transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
  25% {
    transform: translateX(20px) rotate(90deg);
    opacity: 0.7;
  }
  50% {
    transform: translateX(0) rotate(180deg);
    opacity: 0.5;
  }
  75% {
    transform: translateX(-20px) rotate(270deg);
    opacity: 0.7;
  }
}

@keyframes atomicOrbital {
  0% {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  25% {
    transform: rotateX(90deg) rotateY(45deg) rotateZ(90deg);
  }
  50% {
    transform: rotateX(180deg) rotateY(90deg) rotateZ(180deg);
  }
  75% {
    transform: rotateX(270deg) rotateY(135deg) rotateZ(270deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(180deg) rotateZ(360deg);
  }
}

/* Utility Classes */
.particle-quantum {
  animation: quantumFluctuation 3s infinite ease-in-out;
  position: relative;
  display: inline-block;
}

.particle-stream {
  animation: particleStream 4s infinite linear;
  position: absolute;
  width: 4px;
  height: 4px;
  background: radial-gradient(circle, #fff 0%, transparent 70%);
  border-radius: 50%;
}

.electromagnetic-field {
  animation: electroMagnetic 6s infinite linear;
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle, #00ffff 0%, #ff00ff 100%);
}

.plasma-effect {
  animation: plasmaBall 4s infinite ease-in-out;
  width: 100px;
  height: 100px;
  position: relative;
  display: inline-block;
}

.gravity-well {
  animation: gravityWell 8s infinite linear;
  width: 200px;
  height: 200px;
  position: relative;
  display: inline-block;
}

.particle-swarm {
  animation: swarmBehavior 5s infinite ease-in-out;
  position: absolute;
  width: 6px;
  height: 6px;
  background: #ffff00;
  border-radius: 50%;
  box-shadow: 0 0 10px #ffff00;
}

.flock-particle {
  animation: flockMovement 7s infinite ease-in-out;
  position: absolute;
  width: 8px;
  height: 8px;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  border-radius: 50%;
}

.energy-field {
  animation: energyField 5s infinite ease-in-out;
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  pointer-events: none;
}

.force-field {
  animation: forceField 3s infinite ease-in-out;
  border: 2px solid rgba(0,255,0,0.5);
  border-radius: 10px;
  position: relative;
}

.molecular-bond {
  animation: molecularBond 2s infinite ease-in-out;
  position: relative;
  display: inline-block;
}

.atomic-orbital {
  animation: atomicOrbital 10s infinite linear;
  position: relative;
  display: inline-block;
  transform-style: preserve-3d;
}

/* Staggered Particle Effects */
.particle-system .particle:nth-child(1) { animation-delay: 0s; }
.particle-system .particle:nth-child(2) { animation-delay: 0.2s; }
.particle-system .particle:nth-child(3) { animation-delay: 0.4s; }
.particle-system .particle:nth-child(4) { animation-delay: 0.6s; }
.particle-system .particle:nth-child(5) { animation-delay: 0.8s; }
.particle-system .particle:nth-child(6) { animation-delay: 1s; }
.particle-system .particle:nth-child(7) { animation-delay: 1.2s; }
.particle-system .particle:nth-child(8) { animation-delay: 1.4s; }
.particle-system .particle:nth-child(9) { animation-delay: 1.6s; }
.particle-system .particle:nth-child(10) { animation-delay: 1.8s; }

/* Performance Optimizations */
.particle-container {
  will-change: transform, opacity;
  backface-visibility: hidden;
  perspective: 1000px;
}

.particle-container * {
  will-change: transform;
  transform-style: preserve-3d;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .energy-field {
    width: 200px;
    height: 200px;
  }
  
  .gravity-well {
    width: 150px;
    height: 150px;
  }
  
  .plasma-effect {
    width: 80px;
    height: 80px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .particle-quantum,
  .particle-stream,
  .electromagnetic-field,
  .plasma-effect,
  .gravity-well,
  .particle-swarm,
  .flock-particle,
  .energy-field,
  .force-field,
  .molecular-bond,
  .atomic-orbital {
    animation-duration: 10s;
    animation-iteration-count: 1;
  }
}