/* Epic Animated Starfield Background */
#particle-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.85; /* Increased from 0.2 for more visible, impressive stars */
}

/* Atmospheric gradient overlay for depth */
.bg-gradient-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.4;
  background: 
    radial-gradient(
      ellipse at 20% 30%, 
      rgba(30, 203, 225, 0.08) 0%, 
      transparent 40%
    ),
    radial-gradient(
      ellipse at 80% 60%, 
      rgba(227, 102, 247, 0.06) 0%, 
      transparent 40%
    ),
    radial-gradient(
      ellipse at top center,
      rgba(46, 236, 184, 0.05) 0%,
      transparent 50%
    );
  animation: atmosphericShift 20s ease-in-out infinite alternate;
}

/* Subtle atmospheric movement */
@keyframes atmosphericShift {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-2%, 1%) scale(1.02);
  }
  100% {
    transform: translate(1%, -1%) scale(0.98);
  }
}/* Add the overlay to the page if it doesn't exist */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.25;
  background: 
    radial-gradient(
      circle at 30% 40%, 
      rgba(30, 203, 225, 0.06) 0%, 
      transparent 30%
    ),
    radial-gradient(
      circle at 70% 70%, 
      rgba(227, 102, 247, 0.05) 0%, 
      transparent 30%
    );
  animation: nebulaPulse 15s ease-in-out infinite;
}

@keyframes nebulaPulse {
  0%, 100% {
    opacity: 0.25;
    transform: scale(1);
  }
  50% {
    opacity: 0.35;
    transform: scale(1.1);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  #particle-canvas {
    opacity: 0.7; /* Slightly reduced for mobile */
  }
  
  body::before {
    opacity: 0.2;
  }
}

@media (max-width: 480px) {
  #particle-canvas {
    opacity: 0.6; /* Even more subtle on small screens */
  }
  
  body::before {
    opacity: 0.15;
  }
}

/* Ensure canvas renders smoothly */
#particle-canvas {
  image-rendering: auto;
  image-rendering: crisp-edges;
  image-rendering: -webkit-optimize-contrast;
}