:root {
  --sky: #050608;
  --gold: #77694f;
  --gold-bright: #d9bf8a;
  --star-flash: #b8a074;
}

/* Only the page root gets the sky colour. The body must stay transparent:
   a body background would paint over the fixed sky wherever there is page content. */
html {
  background: var(--sky);
}

body {
  margin: 0;
  min-height: 100%;
}

/* ---------- Background ---------- */

.night-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--sky);
}

/* The artwork is 1200x896. The stage covers the viewport like `object-fit: cover`,
   but sits 18% from the top so wide screens keep the moon and trim extra sage instead. */
.night-bg__stage {
  --vh: 100vh;
  position: absolute;
  left: 50%;
  top: 18%;
  width: max(100vw, var(--vh) * 1200 / 896);
  height: max(var(--vh), 100vw * 896 / 1200);
  transform: translate(-50%, -18%);
}

@supports (height: 100lvh) {
  .night-bg__stage { --vh: 100lvh; }
}

.night-bg__landscape,
.night-bg__sway,
.night-bg__sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.night-bg__sway {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.night-bg__sway.is-ready { opacity: 1; }

/* ---------- Moon ---------- */

.moon-glow {
  animation: moon-breathe 7s ease-in-out infinite;
}

@keyframes moon-breathe {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* ---------- Stars ---------- */

.star {
  transform-box: fill-box;
  transform-origin: center;
  animation: twinkle var(--dur, 5s) ease-in-out var(--delay, 0s) infinite;
}

.star-halo {
  animation: halo var(--dur, 5s) ease-in-out var(--delay, 0s) infinite;
}

@keyframes twinkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; fill: var(--gold); }
  45%      { transform: scale(0.92) rotate(0deg); opacity: 0.75; fill: var(--gold); }
  60%      { transform: scale(1.12) rotate(3deg); opacity: 1; fill: var(--star-flash); }
  72%      { transform: scale(1.02) rotate(0deg); opacity: 1; fill: var(--gold); }
}

@keyframes halo {
  0%, 100% { opacity: 0.12; }
  45%      { opacity: 0.1; }
  60%      { opacity: 0.55; }
}

.dot {
  animation: dot-flicker var(--dur, 4s) ease-in-out var(--delay, 0s) infinite;
}

.dot--shimmer {
  transform-box: fill-box;
  transform-origin: center;
  animation-name: dot-shimmer;
}

@keyframes dot-shimmer {
  0%, 100% { opacity: 0.2; transform: scale(0.85); }
  40%      { opacity: 0.55; transform: scale(1); }
  55%      { opacity: 1; transform: scale(1.35); }
  70%      { opacity: 0.5; transform: scale(1); }
}

@keyframes dot-flicker {
  0%, 100% { opacity: 0.9; }
  50%      { opacity: 0.3; }
}

/* ---------- Reduced motion: keep the art, drop the movement ---------- */

@media (prefers-reduced-motion: reduce) {
  .moon-glow,
  .star,
  .star-halo,
  .dot {
    animation: none;
  }
}