.moon-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.moon-layer::before,
.moon-layer::after {
  position: absolute;
  inset: 0;
  content: '';
  mix-blend-mode: screen;
}

.moon-layer::before {
  background:
    radial-gradient(ellipse 302px 242px at 1059px 187px, #aaf3312e, #9ee4251c 46%, transparent 100%),
    url('assets/moon-radiance.webp') center / 100% 100% no-repeat;
  opacity: .95;
  filter: brightness(1.15);
  animation: moon-radiance 10.5s ease-in-out infinite;
}

.moon-layer::after {
  background:
    radial-gradient(ellipse 205px 322px at 1120px 390px, #96de1e3c, #80bf1810 66%, transparent),
    url('assets/moon-environment.webp') center / 100% 100% no-repeat;
  opacity: .34;
  animation: moon-reflection 10.5s ease-in-out infinite;
}

@keyframes moon-radiance {
  0%, 100% { opacity: .79; filter: brightness(1.04); }
  31% { opacity: .88; filter: brightness(1.10); }
  60% { opacity: 1; filter: brightness(1.34); }
  78% { opacity: .95; filter: brightness(1.20); }
}

@keyframes moon-reflection {
  0%, 100% { opacity: .18; }
  33% { opacity: .27; }
  63% { opacity: .64; }
  80% { opacity: .46; }
}

@media (prefers-reduced-motion: reduce) {
  .moon-layer::before,
  .moon-layer::after { animation: none; }
}