/* aurora.css — a slow drifting "aurora" behind the whole page, tinted to the
 * time of day. Technique borrowed from Reader's blackout aurora: a fixed,
 * full-viewport layer of overlapping radial-gradient blobs whose positions
 * animate. The palette switches on body[data-sky=...], set each tick by
 * weather-header.js (day / dawn / dusk / night). Night is dark blue + shades.
 * pointer-events:none so it never intercepts clicks; content sits above it. */

/* Root base tint per phase — paints before the aurora layer so there's no
   light flash at load (esp. at night). */
[data-sky="night"] { background-color: #0a1024; }

.casa-aurora {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-color: transparent;
  background-size: 180% 180%, 190% 190%, 170% 170%, 200% 200%;
  animation: casa-aurora-drift 30s ease-in-out infinite alternate;
  transition: background-color 2s linear;
}

/* Keep the app content above the aurora layer. */
.admin-shell { position: relative; z-index: 1; }

@keyframes casa-aurora-drift {
  0%   { background-position:   0% 0%, 100% 100%,  50%   0%,   0% 100%; }
  50%  { background-position: 100% 60%,  10%  40%, 100% 100%, 100%  10%; }
  100% { background-position:  40% 100%, 60%   0%,   0%  50%,  50%   0%; }
}
@media (prefers-reduced-motion: reduce) { .casa-aurora { animation: none; } }

/* Day (also the default before weather resolves) — soft, airy blues. */
.casa-aurora,
[data-sky="day"] .casa-aurora {
  background-image:
    radial-gradient(50% 40% at 20% 25%, rgba(120, 180, 255, .32), transparent 70%),
    radial-gradient(48% 42% at 82% 70%, rgba(150, 210, 245, .28), transparent 70%),
    radial-gradient(46% 38% at 60% 45%, rgba(185, 220, 255, .26), transparent 72%),
    radial-gradient(44% 36% at 32% 82%, rgba(205, 232, 250, .24), transparent 72%);
}

/* Dawn — warm sunrise over cool sky. */
[data-sky="dawn"] .casa-aurora {
  background-image:
    radial-gradient(52% 40% at 22% 26%, rgba(255, 170, 120, .34), transparent 70%),
    radial-gradient(48% 42% at 80% 68%, rgba(232, 130, 160, .30), transparent 70%),
    radial-gradient(46% 40% at 58% 44%, rgba(120, 130, 210, .30), transparent 72%),
    radial-gradient(44% 36% at 34% 82%, rgba(255, 205, 150, .26), transparent 72%);
}

/* Dusk — purples + embers. */
[data-sky="dusk"] .casa-aurora {
  background-image:
    radial-gradient(52% 40% at 20% 24%, rgba(150, 90, 190, .36), transparent 70%),
    radial-gradient(48% 42% at 82% 70%, rgba(230, 110, 140, .30), transparent 70%),
    radial-gradient(46% 40% at 60% 46%, rgba(90, 90, 180, .32), transparent 72%),
    radial-gradient(44% 36% at 32% 80%, rgba(245, 160, 90, .24), transparent 72%);
}

/* Night — dark blue and shades. A deep base fills the viewport; the blobs are
   richer/darker navies + indigo so it reads as a nighttime aurora. */
[data-sky="night"] .casa-aurora {
  background-color: #0a1024;
  background-image:
    radial-gradient(54% 42% at 20% 24%, rgba(34, 66, 150, .60), transparent 70%),
    radial-gradient(50% 44% at 82% 72%, rgba(20, 40, 104, .55), transparent 70%),
    radial-gradient(48% 40% at 60% 46%, rgba(44, 84, 160, .45), transparent 72%),
    radial-gradient(46% 38% at 32% 82%, rgba(14, 24, 74, .60), transparent 72%);
}