/* public/css/nebula.css — Time-based nebula gradients */

/* Applied by JS based on Ethiopia time (EAT = UTC+3) */

#nebula-layer {
  position: fixed; inset: 0; z-index: 0;
  transition: background 4s ease, opacity 2s ease;
}

/* ── Time periods ──────────────────────────────────────────────────────────── */
.nebula-morning {
  /* 05:00–08:00  warm sunrise */
  background:
    radial-gradient(ellipse at 30% 70%, rgba(255,120,50,0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 30%, rgba(255,200,80,0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(10,22,40,0.95) 0%, rgba(2,4,8,1) 80%);
}

.nebula-day {
  /* 08:00–16:00  deep space blue */
  background:
    radial-gradient(ellipse at 20% 40%, rgba(0,80,180,0.14) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 60%, rgba(0,150,200,0.09) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(6,13,26,0.97) 0%, rgba(2,4,8,1) 80%);
}

.nebula-golden {
  /* 16:00–18:00  golden hour */
  background:
    radial-gradient(ellipse at 60% 60%, rgba(240,165,0,0.14) 0%, transparent 55%),
    radial-gradient(ellipse at 25% 40%, rgba(200,100,20,0.10) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(8,16,28,0.96) 0%, rgba(2,4,8,1) 80%);
}

.nebula-sunset {
  /* 18:00–20:00  purple/pink */
  background:
    radial-gradient(ellipse at 40% 65%, rgba(155,93,229,0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 35%, rgba(247,37,133,0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 30%, rgba(0,100,200,0.10) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 50%, rgba(8,12,24,0.96) 0%, rgba(2,4,8,1) 80%);
}

.nebula-night {
  /* 20:00–05:00  deep purple/indigo */
  background:
    radial-gradient(ellipse at 65% 35%, rgba(80,40,160,0.16) 0%, transparent 55%),
    radial-gradient(ellipse at 25% 70%, rgba(30,10,80,0.20) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 20%, rgba(0,50,120,0.08) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 50%, rgba(4,8,20,0.98) 0%, rgba(2,4,8,1) 80%);
}

/* ── Animated nebula wisps ─────────────────────────────────────────────────── */
.nebula-wisp {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  animation: wisp-drift 20s ease-in-out infinite;
  opacity: 0.06;
}
.nebula-wisp:nth-child(1) {
  width: 400px; height: 300px;
  background: radial-gradient(var(--purple), transparent);
  top: 10%; left: 5%;
  animation-duration: 25s;
}
.nebula-wisp:nth-child(2) {
  width: 300px; height: 400px;
  background: radial-gradient(var(--cyan), transparent);
  top: 50%; right: 8%;
  animation-duration: 32s; animation-delay: -10s;
}
.nebula-wisp:nth-child(3) {
  width: 500px; height: 200px;
  background: radial-gradient(var(--gold), transparent);
  bottom: 15%; left: 30%;
  animation-duration: 28s; animation-delay: -18s;
}

@keyframes wisp-drift {
  0%,100% { transform: translate(0,0) scale(1); }
  25%      { transform: translate(30px,-20px) scale(1.05); }
  50%      { transform: translate(-15px,35px) scale(0.95); }
  75%      { transform: translate(20px,10px) scale(1.02); }
}