/* ???????????????????????????????????????????????????????????????????????????????
   LIFESTREAM 3D WIREFRAME BACKGROUND
   Container for Vanta.js NET effect - 3D WebGL animated network mesh
   Powered by Three.js and Vanta.js
   ??????????????????????????????????????????????????????????????????????????????? */

/* Main background container for Vanta.js */
#vanta-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  /* Fallback gradient if Vanta.js fails to load */
  background: radial-gradient(ellipse at center, rgba(0, 255, 255, 0.03) 0%, transparent 70%);
}

/* Legacy class support - maps to new Vanta container */
.lifestream-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

/* Hide legacy stream elements - no longer needed with Vanta.js */
.lifestream-stream,
.lifestream-stream-1,
.lifestream-stream-2,
.lifestream-stream-3,
.lifestream-particles {
  display: none;
}

/* ???????????????????????????????????????????????????????????????????????????????
   ACCESSIBILITY: Reduced Motion Support
   Falls back to subtle static gradient when user prefers reduced motion
   ??????????????????????????????????????????????????????????????????????????????? */

@media (prefers-reduced-motion: reduce) {
  #vanta-background {
    /* Static subtle gradient fallback */
    background: 
      radial-gradient(ellipse at 30% 20%, rgba(0, 255, 255, 0.08) 0%, transparent 50%),
      radial-gradient(ellipse at 70% 60%, rgba(0, 255, 200, 0.06) 0%, transparent 40%),
      radial-gradient(ellipse at 50% 80%, rgba(0, 255, 255, 0.04) 0%, transparent 60%);
  }
  
  /* Ensure canvas doesn't render */
  #vanta-background canvas {
    display: none !important;
  }
}

/* ???????????????????????????????????????????????????????????????????????????????
   MOBILE OPTIMIZATION
   Slightly reduced opacity for better battery life and readability
   ??????????????????????????????????????????????????????????????????????????????? */

@media (max-width: 768px) {
  #vanta-background {
    opacity: 0.7;
  }
  
  #vanta-background canvas {
    /* Vanta.js handles mobile scaling internally */
  }
}

/* Extra small screens - more subtle effect */
@media (max-width: 480px) {
  #vanta-background {
    opacity: 0.5;
  }
}