/* ═══════════════════════════════════════════════
   STARFIELD BACKGROUND
═══════════════════════════════════════════════ */
.starfield {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at 50% 50%, #1a1520 0%, #0a0806 100%);
  z-index: -2;
  pointer-events: none;
}

.starfield::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-image:
    radial-gradient(2px 2px at 10% 20%, rgba(255,255,255,0.8), transparent),
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 50% 50%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 80% 10%, rgba(255,255,255,0.5), transparent),
    radial-gradient(2px 2px at 90% 60%, rgba(201,168,76,0.4), transparent),
    radial-gradient(1px 1px at 30% 80%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 60% 70%, rgba(56,178,172,0.3), transparent),
    radial-gradient(2px 2px at 15% 60%, rgba(255,255,255,0.5), transparent);
  background-size:
    200% 200%, 150% 150%, 180% 180%, 220% 220%,
    170% 170%, 190% 190%, 210% 210%, 230% 230%;
  animation: twinkle 8s ease-in-out infinite, twinkle2 6s ease-in-out 2s infinite;
}

@keyframes twinkle {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.7; }
}

@keyframes twinkle2 {
  0%, 100% { opacity: 0.7; }
  50%       { opacity: 1; }
}