/**
 * Day/night celestials — sun-b + NASA romantic C-crescent
 * ----------------------------------------------------
 * Sun: pale cream-gold core, peachy haze, 6s breathe, SVG grain.
 * Moon: assets/moon-full.webp — NASA SVS #5187 Moon Phase & Libration 2024
 * frame ~0175 (thin left-lit / C-shaped waning crescent, public domain).
 * Lit sliver only; dark side fully transparent; warm drop-shadow along lit edge.
 * Mechanics live in index.html.
 */

/* ── Sun (sun-b) ── */
.daynight-sun {
  --set: 0;
  width: min(70vw, 700px);
  height: min(70vw, 700px);
  top: -6vh;
  right: -4vw;
}

.daynight-sun-haze,
.daynight-sun-halo,
.daynight-sun-halo2,
.daynight-sun-core,
.daynight-sun-grain {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.daynight-sun-haze {
  inset: 0;
  background: radial-gradient(
    circle,
    rgba(255, 214, 150, 0.55) 0%,
    rgba(255, 200, 150, 0.28) 22%,
    rgba(255, 190, 160, 0.1) 45%,
    rgba(255, 190, 160, 0) 70%
  );
  animation: daynight-sun-breathe 6s ease-in-out infinite;
  animation-delay: -1.5s;
  filter: hue-rotate(calc(var(--set) * -24deg)) saturate(calc(1 + var(--set) * 1.6));
}

.daynight-sun-grain {
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.18;
  mix-blend-mode: soft-light;
  -webkit-mask: radial-gradient(circle, #000 0%, transparent 60%);
  mask: radial-gradient(circle, #000 0%, transparent 60%);
  border-radius: 0;
}

.daynight-sun-halo {
  left: 36.25%;
  top: 36.25%;
  width: 27.5%;
  height: 27.5%;
  background: radial-gradient(
    circle,
    rgba(255, 236, 190, 0.95) 0%,
    rgba(255, 214, 140, 0.75) 30%,
    rgba(255, 190, 120, 0.25) 55%,
    rgba(255, 190, 120, 0) 72%
  );
  filter: blur(6px) hue-rotate(calc(var(--set) * -24deg)) saturate(calc(1 + var(--set) * 1.6));
  animation: daynight-sun-breathe 6s ease-in-out infinite;
}

.daynight-sun-halo2 {
  left: 33.75%;
  top: 33.75%;
  width: 32.5%;
  height: 32.5%;
  background: radial-gradient(
    circle,
    rgba(255, 150, 90, 0.75) 0%,
    rgba(255, 120, 100, 0.35) 38%,
    rgba(255, 120, 100, 0) 70%
  );
  filter: blur(8px);
  opacity: calc(var(--set) * 1.8);
}

.daynight-sun-core {
  left: 44.375%;
  top: 44.375%;
  width: 11.25%;
  height: 11.25%;
  background: radial-gradient(circle at 46% 44%, #fffbee 0%, #ffeab0 35%, #ffcf72 75%, #ffb95a 100%);
  box-shadow: 0 0 22px 6px rgba(255, 236, 190, 0.9);
  filter: blur(0.6px) hue-rotate(calc(var(--set) * -24deg)) saturate(calc(1 + var(--set) * 1.6));
}

.daynight-sun-core::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: radial-gradient(circle at 46% 44%, #ffd08a 0%, #ff9a52 55%, #ff7445 100%);
  opacity: calc(var(--set) * 1.6);
  filter: blur(1px);
}

@keyframes daynight-sun-breathe {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.92;
  }
  50% {
    transform: scale(1.06);
    opacity: 1;
  }
}

/* ── Moon (NASA SVS romantic C-crescent) ── */
.daynight-moon {
  width: clamp(48px, 6vw, 64px);
  height: clamp(48px, 6vw, 64px);
  /* No box-shadow — a round shadow reads as an eclipse ring */
  border-radius: 0;
  overflow: visible;
}

@media (max-width: 400px) {
  .daynight-moon {
    width: 40px;
    height: 40px;
  }
}

.daynight-moon-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Warm silver + soft glow along lit crescent alpha only.
     Static filters (no per-frame animation) — safe; avoid animating filter. */
  filter:
    contrast(1.04) saturate(0.86) brightness(1.14)
    drop-shadow(0 0 5px rgba(245, 230, 200, 0.6))
    drop-shadow(0 0 14px rgba(230, 220, 200, 0.32));
  will-change: auto;
}

/* Pause breathe + SVG grain while tab hidden (class toggled from index.html) */
html.daynight-paused .daynight-sun-haze,
html.daynight-paused .daynight-sun-halo {
  animation-play-state: paused;
}
html.daynight-paused .daynight-sun-grain animate {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .daynight-sun-haze,
  .daynight-sun-halo {
    animation: none;
  }
  .daynight-sun-grain animate {
    display: none;
  }
}