/* Background canvas container styles */
#bg-root {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1; /* Behind all content */
  overflow: hidden;
}

/* Ensure the canvas doesn't create scrollbars */
#bg-root canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Optional: Quality data attributes for external styling hooks */
#bg-root[data-quality="low"] canvas {
  filter: blur(1px) saturate(0.9);
}

#bg-root[data-quality="med"] canvas {
  filter: blur(0.5px) saturate(1.1);
}

#bg-root[data-quality="high"] canvas {
  filter: blur(0px) saturate(1.2);
}

#bg-root {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
  background: linear-gradient(-45deg, #0a1116, #006b58, black, darkgreen);
  background-size: 400% 400%;
  animation: gradientShift 10s ease infinite;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 75% 50%; }
  100% { background-position: 0% 50%; }
}