/* ─────────────────────────────────────────────────────────────────────────
   sky.css — fullscreen canvas nieba + fallback CSS (brak WebGL / reduced-motion).
   Canvas trzyma się jako fixed tło. Fallback to gradient zbliżony do shadera,
   themowany przez prefers-color-scheme oraz [data-theme].
   ───────────────────────────────────────────────────────────────────────── */

#sky-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 0;
}

/* Dopóki shader nie wstał (lub padł), tło rodzica daje sensowny kolor.
   .sky-on -> shader rysuje, gradient fallbacku można wygasić.
   .no-sky -> WebGL niedostępny, fallback widoczny. */

/* Fallback DARK (Mars / zachód) — domyślny */
.sky-fallback {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 110%, #ff7a25 0%, #b34508 14%, #5a1a05 32%, #1a0604 60%, #0a0403 100%),
    linear-gradient(to bottom, #050207 0%, #0a0504 60%, #1a0805 100%);
}

/* Gdy shader działa, fallback znika (canvas i tak go zasłania, ale oszczędza GPU repaint) */
.sky-on .sky-fallback { opacity: 0; }

/* Fallback LIGHT (stonowany, neutralny szary z odrobina ciepla) */
@media (prefers-color-scheme: light) {
  .sky-fallback {
    background:
      radial-gradient(130% 100% at 50% 14%, #f4f3f1 0%, #e2e1e1 38%, #d2d1d2 70%, #c6c5c7 100%),
      linear-gradient(to bottom, #cdcccd 0%, #dcdbdb 55%, #ececeb 100%);
  }
}
[data-theme="light"] .sky-fallback {
  background:
    radial-gradient(130% 100% at 50% 14%, #f4f3f1 0%, #e2e1e1 38%, #d2d1d2 70%, #c6c5c7 100%),
    linear-gradient(to bottom, #cdcccd 0%, #dcdbdb 55%, #ececeb 100%);
}
[data-theme="dark"] .sky-fallback {
  background:
    radial-gradient(120% 90% at 50% 110%, #ff7a25 0%, #b34508 14%, #5a1a05 32%, #1a0604 60%, #0a0403 100%),
    linear-gradient(to bottom, #050207 0%, #0a0504 60%, #1a0805 100%);
}