/* Space canvas sits behind everything */
#space-canvas {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: -1;
  display: block;
  transform-origin: center center;
}

/* Particle canvas above the starfield but below UI/logo */
#particle-canvas {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* Blob container behind everything */
.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}

/* Each blob */
.blob {
  position: absolute;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle at center, rgba(0,200,255,0.6), rgba(0,0,0,0));
  filter: blur(120px);   /* main soft glow effect */
  border-radius: 50%;
  opacity: 0.7;
  animation: float 20s ease-in-out infinite alternate;
}

/* Blob positions and colors */
.blob1 {
  top: 10%;
  left: 15%;
  background: radial-gradient(circle at center, rgba(0,255,200,0.7), rgba(0,0,0,0));
}

.blob2 {
  bottom: 10%;
  right: 20%;
  background: radial-gradient(circle at center, rgba(255,0,200,0.6), rgba(0,0,0,0));
  animation-delay: 3s;
}

.blob3 {
  top: 50%;
  left: 60%;
  background: radial-gradient(circle at center, rgba(0,100,255,0.7), rgba(0,0,0,0));
  animation-delay: 6s;
}

/* Floating animation for depth */
@keyframes float {
  0%   { transform: translateY(0) translateX(0) scale(1); }
  50%  { transform: translateY(-50px) translateX(30px) scale(1.1); }
  100% { transform: translateY(50px) translateX(-30px) scale(0.9); }
}