/* ============================================================
   Starfed: Animated Starfield Background
   A lightweight CSS-only starfield for page backgrounds.
   Drop into any page: <div class="sf-starfield"></div>
   ============================================================ */

.sf-starfield {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 120%, #1A0578 0%, #0B0E1A 60%, #05060F 100%);
}

.sf-starfield::before,
.sf-starfield::after {
  content: "";
  position: absolute;
  inset: -50%;
  background-repeat: repeat;
  animation: sf-drift 120s linear infinite;
}

/* Layer 1: small distant stars */
.sf-starfield::before {
  background-image:
    radial-gradient(1px 1px at 20px 30px,   #ffffff80, transparent),
    radial-gradient(1px 1px at 90px 130px,  #c5cbdf60, transparent),
    radial-gradient(1.5px 1.5px at 160px 60px, #ffffff90, transparent),
    radial-gradient(1px 1px at 220px 180px, #ff7eb640, transparent),
    radial-gradient(1px 1px at 300px 90px,  #ffffff70, transparent),
    radial-gradient(2px 2px at 380px 220px,  #e85d9e50, transparent),
    radial-gradient(1px 1px at 450px 40px,  #ffffff80, transparent),
    radial-gradient(1px 1px at 50px 250px,  #60a5fa40, transparent);
  background-size: 500px 300px;
  opacity: 0.7;
}

/* Layer 2: larger near stars, slower */
.sf-starfield::after {
  background-image:
    radial-gradient(2px 2px at 100px 200px, #ffffff, transparent),
    radial-gradient(2.5px 2.5px at 350px 50px, #ff7eb6cc, transparent),
    radial-gradient(2px 2px at 500px 300px, #c94b9eaa, transparent),
    radial-gradient(1.5px 1.5px at 250px 350px, #ffffffcc, transparent);
  background-size: 600px 400px;
  opacity: 0.5;
  animation-duration: 180s;
  animation-direction: reverse;
}

@keyframes sf-drift {
  from { transform: translate(0, 0); }
  to   { transform: translate(500px, 300px); }
}

/* Twinkle overlay: individual stars that pulse */
.sf-twinkle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ffffff;
  animation: sf-twinkle 3s ease-in-out infinite;
}

@keyframes sf-twinkle {
  0%, 100% { opacity: 0.2; transform: scale(0.6); }
  50%      { opacity: 1;   transform: scale(1.2); }
}