.darkveil-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.darkveil-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
  /* Immediate gradient background that appears instantly */
  background: radial-gradient(ellipse at center, #1a0f80 0%, #090040 40%, #000000 100%);
  /* Add subtle animation to the gradient */
  background-size: 200% 200%;
  animation: gradientFlow 20s ease-in-out infinite;
}

@keyframes gradientFlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Hide canvas initially until WebGL loads */
.darkveil-canvas {
  opacity: 0;
  transition: opacity 0.5s ease-in;
  width: 100%;
  height: 100%;
  display: block;
}

/* Show canvas when loaded */
.darkveil-canvas.loaded {
  opacity: 1;
}

.darkveil-background canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: cover;
}

/* Ensure background is always visible and behind content */
.darkveil-background {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none;
}

/* Mobile optimizations for DarkVeil */
@media (max-width: 768px) {
  .darkveil-background {
    /* Optimize for mobile performance */
    will-change: auto;
    transform: translateZ(0);
    backface-visibility: hidden;
  }
  
  .darkveil-canvas {
    /* Reduce quality on small screens for better performance */
    image-rendering: auto;
    image-rendering: optimizeSpeed;
  }
}

/* Reduce motion for accessibility and battery life */
@media (prefers-reduced-motion: reduce) {
  .darkveil-background {
    /* Could disable or reduce animations */
    animation-play-state: paused;
  }
}

/* High-performance mode for high-end devices */
@media (min-resolution: 2dppx) and (min-width: 1200px) {
  .darkveil-canvas {
    image-rendering: crisp-edges;
    image-rendering: -webkit-optimize-contrast;
  }
}