.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(255, 80, 120, 0.18), transparent 60%),
    radial-gradient(900px 500px at 80% 30%, rgba(110, 80, 255, 0.18), transparent 55%),
    radial-gradient(900px 700px at 45% 85%, rgba(60, 200, 255, 0.12), transparent 60%),
    linear-gradient(180deg, #060914, #070a12 60%, #05060d);
}
/* Stars layer */
.bg::before,
.bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: repeat;
  pointer-events: none;
  transform: translate3d(0,0,0);
}

/* Main stars */
.bg::before {
  opacity: 0.50;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1024' height='1024'%3E%3Crect width='1024' height='1024' fill='none'/%3E%3Cg fill='white'%3E%3Ccircle cx='41' cy='83' r='1' opacity='.55'/%3E%3Ccircle cx='118' cy='512' r='1' opacity='.7'/%3E%3Ccircle cx='207' cy='147' r='1' opacity='.35'/%3E%3Ccircle cx='299' cy='901' r='1' opacity='.6'/%3E%3Ccircle cx='356' cy='634' r='1' opacity='.4'/%3E%3Ccircle cx='411' cy='279' r='1' opacity='.75'/%3E%3Ccircle cx='489' cy='73' r='1' opacity='.5'/%3E%3Ccircle cx='534' cy='812' r='1' opacity='.65'/%3E%3Ccircle cx='617' cy='438' r='1' opacity='.45'/%3E%3Ccircle cx='702' cy='118' r='1' opacity='.7'/%3E%3Ccircle cx='781' cy='566' r='1' opacity='.55'/%3E%3Ccircle cx='866' cy='214' r='1' opacity='.4'/%3E%3Ccircle cx='944' cy='742' r='1' opacity='.7'/%3E%3Ccircle cx='996' cy='392' r='1' opacity='.5'/%3E%3Ccircle cx='146' cy='742' r='1' opacity='.45'/%3E%3Ccircle cx='233' cy='332' r='1' opacity='.65'/%3E%3Ccircle cx='318' cy='459' r='1' opacity='.5'/%3E%3Ccircle cx='425' cy='975' r='1' opacity='.6'/%3E%3Ccircle cx='512' cy='523' r='1' opacity='.38'/%3E%3Ccircle cx='590' cy='922' r='1' opacity='.7'/%3E%3Ccircle cx='642' cy='705' r='1' opacity='.55'/%3E%3Ccircle cx='735' cy='888' r='1' opacity='.45'/%3E%3Ccircle cx='824' cy='463' r='1' opacity='.65'/%3E%3Ccircle cx='905' cy='33' r='1' opacity='.55'/%3E%3Ccircle cx='59' cy='912' r='1' opacity='.35'/%3E%3Ccircle cx='97' cy='221' r='1' opacity='.55'/%3E%3Ccircle cx='170' cy='610' r='1' opacity='.7'/%3E%3Ccircle cx='266' cy='34' r='1' opacity='.45'/%3E%3Ccircle cx='387' cy='131' r='1' opacity='.6'/%3E%3Ccircle cx='463' cy='345' r='1' opacity='.5'/%3E%3Ccircle cx='552' cy='176' r='1' opacity='.7'/%3E%3Ccircle cx='667' cy='982' r='1' opacity='.55'/%3E%3Ccircle cx='709' cy='341' r='1' opacity='.4'/%3E%3Ccircle cx='812' cy='96' r='1' opacity='.6'/%3E%3Ccircle cx='923' cy='548' r='1' opacity='.65'/%3E%3Ccircle cx='1007' cy='958' r='1' opacity='.5'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='900'%3E%3Crect width='1400' height='900' fill='none'/%3E%3Cg fill='white'%3E%3Ccircle cx='73' cy='41' r='1' opacity='.55'/%3E%3Ccircle cx='164' cy='312' r='1' opacity='.4'/%3E%3Ccircle cx='251' cy='711' r='1' opacity='.7'/%3E%3Ccircle cx='338' cy='198' r='1' opacity='.45'/%3E%3Ccircle cx='472' cy='486' r='1' opacity='.6'/%3E%3Ccircle cx='590' cy='83' r='1' opacity='.5'/%3E%3Ccircle cx='644' cy='566' r='1' opacity='.7'/%3E%3Ccircle cx='701' cy='276' r='1' opacity='.55'/%3E%3Ccircle cx='812' cy='742' r='1' opacity='.65'/%3E%3Ccircle cx='936' cy='144' r='1' opacity='.45'/%3E%3Ccircle cx='1042' cy='521' r='1' opacity='.6'/%3E%3Ccircle cx='1188' cy='214' r='1' opacity='.55'/%3E%3Ccircle cx='1296' cy='803' r='1' opacity='.7'/%3E%3Ccircle cx='1371' cy='392' r='1' opacity='.5'/%3E%3Ccircle cx='88' cy='862' r='1' opacity='.35'/%3E%3Ccircle cx='214' cy='42' r='1' opacity='.6'/%3E%3Ccircle cx='399' cy='820' r='1' opacity='.5'/%3E%3Ccircle cx='533' cy='673' r='1' opacity='.65'/%3E%3Ccircle cx='777' cy='34' r='1' opacity='.45'/%3E%3Ccircle cx='915' cy='888' r='1' opacity='.55'/%3E%3Ccircle cx='1120' cy='74' r='1' opacity='.4'/%3E%3Ccircle cx='1251' cy='512' r='1' opacity='.6'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 1400px 1200px, 1900px 1200px;
  background-position: 0 0, 420px 260px;

  animation: stars-drift-a 240s steps(120, end) infinite;
  animation: drift-a 360s linear infinite;
}

/* Depth stars (static-ish) */
.bg::after {
  opacity: 0.18;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1600'%3E%3Crect width='1600' height='1600' fill='none'/%3E%3Cg fill='white'%3E%3Ccircle cx='120' cy='200' r='2' opacity='.20'/%3E%3Ccircle cx='440' cy='610' r='2' opacity='.18'/%3E%3Ccircle cx='760' cy='320' r='2' opacity='.16'/%3E%3Ccircle cx='1040' cy='980' r='2' opacity='.20'/%3E%3Ccircle cx='1320' cy='540' r='2' opacity='.17'/%3E%3Ccircle cx='1500' cy='1200' r='2' opacity='.19'/%3E%3Ccircle cx='300' cy='1320' r='2' opacity='.18'/%3E%3Ccircle cx='980' cy='140' r='2' opacity='.16'/%3E%3Ccircle cx='1420' cy='860' r='2' opacity='.20'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 2600px 2200px;
  background-position: 180px 40px;

  animation: stars-drift-b 420s steps(140, end) infinite;
  animation: drift-b 520s linear infinite;
}

@keyframes drift-a {
  /* Hold at A */
  0%, 28%   { transform: translate3d(0px, 0px, 0); }

  /* Glide A -> B */
  30%       { transform: translate3d(3px, 4px, 0); }
  33%       { transform: translate3d(9px, 12px, 0); }
  36%       { transform: translate3d(15px, 20px, 0); }

  /* Hold at B */
  36%, 62%  { transform: translate3d(15px, 20px, 0); }

  /* Glide B -> C */
  64%       { transform: translate3d(18px, 17px, 0); }
  67%       { transform: translate3d(24px, 10px, 0); }
  70%       { transform: translate3d(30px, 4px, 0); }

  /* Hold at C */
  70%, 88%  { transform: translate3d(30px, 4px, 0); }

  /* Glide C -> A (end) */
  90%       { transform: translate3d(22px, 3px, 0); }
  94%       { transform: translate3d(10px, 2px, 0); }
  100%      { transform: translate3d(0px, 0px, 0); }
}

@keyframes drift-b {
  /* Hold at A */
  0%, 35%   { transform: translate3d(0px, 0px, 0); }

  /* Small glide A -> B */
  37%       { transform: translate3d(-2px, 2px, 0); }
  41%       { transform: translate3d(-6px, 6px, 0); }
  45%       { transform: translate3d(-10px, 10px, 0); }

  /* Hold at B */
  45%, 72%  { transform: translate3d(-10px, 10px, 0); }

  /* Small glide B -> C */
  74%       { transform: translate3d(-7px, 12px, 0); }
  78%       { transform: translate3d(-3px, 16px, 0); }
  82%       { transform: translate3d(2px, 20px, 0); }

  /* Hold at C */
  82%, 92%  { transform: translate3d(2px, 20px, 0); }

  /* Return */
  95%       { transform: translate3d(1px, 10px, 0); }
  100%      { transform: translate3d(0px, 0px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .bg::before,
  .bg::after { animation: none !important; }
}

@media (update: slow) {
  .bg::before,
  .bg::after { animation: none !important; }
}