/* Pure-CSS abyss background. Three star layers at different depths
   drifting at different rates — fakes parallax without images. */

.zb-abyss {
  position: relative;
  background: var(--zb-grad-abyss, radial-gradient(circle at 50% 60%, #001a14 0%, #050509 40%, #000 100%));
  overflow: hidden;
}

.zb-abyss::before,
.zb-abyss::after,
.zb-abyss > .zb-starlayer {
  content: '';
  position: absolute;
  inset: -10%;
  background-repeat: repeat;
  pointer-events: none;
}

/* Deep stars — small, dim, slow */
.zb-abyss::before {
  background-image:
    radial-gradient(1px 1px at 23px 17px,  rgba(255,255,255,.65), transparent 50%),
    radial-gradient(1px 1px at 87px 142px, rgba(0,255,204,.45),   transparent 50%),
    radial-gradient(1px 1px at 211px 76px, rgba(255,255,255,.55), transparent 50%),
    radial-gradient(1px 1px at 311px 230px,rgba(0,217,255,.40),   transparent 50%);
  background-size: 380px 280px;
  animation: zb-starfield-deep 120s linear infinite;
  opacity: .8;
}

/* Mid stars — bioluminescent dust */
.zb-abyss::after {
  background-image:
    radial-gradient(1.5px 1.5px at 55px 88px,  rgba(0,255,204,.85), transparent 50%),
    radial-gradient(1.5px 1.5px at 188px 24px, rgba(255,0,110,.45), transparent 50%),
    radial-gradient(2px 2px at 270px 190px,    rgba(255,255,255,.95),transparent 50%);
  background-size: 320px 240px;
  animation: zb-starfield-mid 60s linear infinite;
  opacity: .7;
}

/* Near sparks — slot a div with class zb-starlayer */
.zb-starlayer {
  background-image:
    radial-gradient(2.5px 2.5px at 40px 60px,  var(--zb-primary), transparent 60%),
    radial-gradient(2px 2px at 200px 200px,    rgba(255,255,255,1), transparent 60%);
  background-size: 260px 220px;
  animation: zb-starfield-near 28s linear infinite;
  opacity: .5;
  mix-blend-mode: screen;
}

@keyframes zb-starfield-deep { to { transform: translateY(-280px); } }
@keyframes zb-starfield-mid  { to { transform: translateY(-240px); } }
@keyframes zb-starfield-near { to { transform: translateY(-220px); } }