.zp-particles{
  position:absolute;
  inset:0;
  overflow:hidden;
}
.zp-particles::before{
  content:"";
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(1000px 480px at 14% 18%,rgba(240,255,107,.16),transparent 58%),
    radial-gradient(900px 520px at 84% 22%,rgba(199,255,0,.12),transparent 60%),
    radial-gradient(700px 540px at 60% 92%,rgba(211,30,45,.10),transparent 64%);
  filter:blur(2px);
  opacity:.95;
  animation:zp-float 6.4s ease-in-out infinite;
}
.zp-particles::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle at 12% 18%,rgba(255,255,255,.12) 0 1px,transparent 2px),
    radial-gradient(circle at 22% 64%,rgba(255,255,255,.10) 0 1px,transparent 2px),
    radial-gradient(circle at 48% 28%,rgba(255,255,255,.08) 0 1px,transparent 2px),
    radial-gradient(circle at 66% 46%,rgba(255,255,255,.10) 0 1px,transparent 2px),
    radial-gradient(circle at 82% 74%,rgba(255,255,255,.08) 0 1px,transparent 2px),
    radial-gradient(circle at 92% 24%,rgba(255,255,255,.10) 0 1px,transparent 2px);
  opacity:.28;
  mix-blend-mode:screen;
  animation:zp-grad-drift 18s ease-in-out infinite;
}
.zp-particles canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:.55;
  filter:saturate(1.06);
}
@media (prefers-reduced-motion:reduce){
  .zp-particles::before,
  .zp-particles::after{animation:none}
  .zp-particles canvas{display:none}
}