/* =========================
   IMOON Stars / Particles (subtle)
   - fixed overlay
   - 2 layers (depth)
   - low opacity, violet tint
   ========================= */

body{
  /* Safety: falls irgendwo wieder weiß reinkommt */
  background: var(--wp--preset--gradient--imoon-night) !important;
  color: var(--wp--preset--color--moon);
  position: relative;
  z-index: 0;
  overflow-x: hidden;
}

/* Layer 1: small stars */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;

  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(234,240,255,0.55) 40%, transparent 41%),
    radial-gradient(1px 1px at 30% 80%, rgba(234,240,255,0.35) 40%, transparent 41%),
    radial-gradient(1px 1px at 55% 35%, rgba(109,94,252,0.40) 40%, transparent 41%),
    radial-gradient(1px 1px at 70% 60%, rgba(234,240,255,0.28) 40%, transparent 41%),
    radial-gradient(1px 1px at 90% 25%, rgba(61,44,242,0.35) 40%, transparent 41%),

    radial-gradient(1px 1px at 15% 55%, rgba(234,240,255,0.20) 40%, transparent 41%),
    radial-gradient(1px 1px at 45% 15%, rgba(234,240,255,0.22) 40%, transparent 41%),
    radial-gradient(1px 1px at 85% 75%, rgba(234,240,255,0.18) 40%, transparent 41%);

  opacity: 0.35;
  transform: translateZ(0);
  animation: imoon-stars-drift 140s linear infinite;
}

/* Layer 2: bigger glow dust */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;

  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(109,94,252,0.22) 35%, transparent 36%),
    radial-gradient(2px 2px at 60% 70%, rgba(45,226,230,0.12) 35%, transparent 36%),
    radial-gradient(2px 2px at 80% 40%, rgba(234,240,255,0.12) 35%, transparent 36%);

  opacity: 0.22;
  filter: blur(0.2px);
  mix-blend-mode: screen;
  animation: imoon-stars-twinkle 9s ease-in-out infinite;
}

@keyframes imoon-stars-drift{
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(-2%, 3%, 0) scale(1.02); }
}

@keyframes imoon-stars-twinkle{
  0%,100% { opacity: 0.18; }
  50%     { opacity: 0.28; }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  body::before, body::after { animation: none; }
}