/* bg-effects.css */

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(ellipse at center, #0d001f 0%, #1a001f 80%);
  overflow-x: hidden;
  color: var(--text);
  font-family: inherit;
  /* Make sure body fills the viewport */
}

/* Create multiple star layers */
body::before,
body::after {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: -1;
  background-repeat: repeat;
  background-size: contain;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* Small stars, slower movement */
body::before {
  background-image:
    radial-gradient(2px 2px at 10% 20%, white, transparent),
    radial-gradient(2px 2px at 30% 40%, white, transparent),
    radial-gradient(2px 2px at 70% 60%, white, transparent),
    radial-gradient(2px 2px at 90% 80%, white, transparent),
    radial-gradient(1.5px 1.5px at 50% 10%, white, transparent),
    radial-gradient(1.5px 1.5px at 20% 75%, white, transparent),
    radial-gradient(1.5px 1.5px at 80% 25%, white, transparent);
  background-size: 100% 100%;
  animation-name: moveStarsSlow;
  animation-duration: 120s;
}

/* Larger stars, faster movement */
body::after {
  background-image:
    radial-gradient(3px 3px at 15% 30%, #fff, transparent),
    radial-gradient(3px 3px at 35% 50%, #fff, transparent),
    radial-gradient(3px 3px at 75% 70%, #fff, transparent),
    radial-gradient(2.5px 2.5px at 85% 90%, #fff, transparent),
    radial-gradient(2.5px 2.5px at 55% 20%, #fff, transparent),
    radial-gradient(2.5px 2.5px at 25% 85%, #fff, transparent),
    radial-gradient(2.5px 2.5px at 65% 35%, #fff, transparent);
  background-size: 100% 100%;
  animation-name: moveStarsFast;
  animation-duration: 60s;
}

@keyframes moveStarsSlow {
  0% {
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
  }
  100% {
    background-position: 10000px 10000px, 10000px 10000px, 10000px 10000px, 10000px 10000px, 10000px 10000px, 10000px 10000px, 10000px 10000px;
  }
}

@keyframes moveStarsFast {
  0% {
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
  }
  100% {
    background-position: 20000px 20000px, 20000px 20000px, 20000px 20000px, 20000px 20000px, 20000px 20000px, 20000px 20000px, 20000px 20000px;
  }
}

/* Optional: add subtle glow on stars */
body::before, body::after {
  filter: drop-shadow(0 0 1px #fff);
}