/* Sun & moon — compact SVG bodies that drift through the sky based on
   body[data-phase]. Moon shows real lunar phase from celestial.js. */

.sky-bodies {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;     /* above scene/atmosphere, below main content */
}

.sun-wrap, .moon-wrap {
  position: absolute;
  opacity: 0;
  transition: opacity 30s ease-in-out,
              top 30s ease-in-out,
              left 30s ease-in-out,
              right 30s ease-in-out,
              color 30s ease-in-out;
}

.sun-wrap  {
  color: #ffd86c;
  filter: drop-shadow(0 0 22px currentColor)
          drop-shadow(0 0 44px rgba(255, 200, 100, 0.35));
}
.moon-wrap {
  filter: drop-shadow(0 0 18px rgba(220, 230, 255, 0.55));
}

/* SUN positions per phase — dawn rises east, midday on top, dusk west */
body[data-phase="dawn"]   .sun-wrap {
  opacity: 0.9; top: 50%; left: 8%; color: #ff9858;
}
body[data-phase="day"] .sun-wrap {
  opacity: 1; top: 16%; left: 22%; color: #ffd86c;
}
body[data-phase="midday"] .sun-wrap {
  opacity: 1; top: 8%; left: calc(50% - 40px); color: #fff8a0;
}
body[data-phase="dusk"] .sun-wrap {
  opacity: 0.9; top: 50%; left: auto; right: 8%; color: #ff7a30;
}

/* MOON positions — rises around late-dusk, peaks at night */
body[data-phase="late-dusk"] .moon-wrap {
  opacity: 0.85; top: 38%; left: auto; right: 14%;
}
body[data-phase="night"] .moon-wrap {
  opacity: 1; top: 14%; left: auto; right: 26%;
}

@media (max-width: 640px) {
  .sun-wrap, .moon-wrap { transform: scale(0.7); transform-origin: center; }
}