/* css/backdrop.css */
.backdrop-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  overflow: hidden;
  background: #000000;
}

.pixel-backdrop-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.sun-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: radial-gradient(ellipse at 78% 22%, 
    rgba(255, 215, 0, 0.12) 0%, 
    rgba(255, 180, 0, 0.05) 30%, 
    transparent 60%);
}

.theme-smooth-white .sun-layer {
  background: radial-gradient(ellipse at 78% 22%, 
    rgba(255, 200, 0, 0.08) 0%, 
    rgba(255, 160, 0, 0.03) 30%, 
    transparent 60%);
}