.zp-particles{ position:absolute; inset:0; overflow:hidden; contain:layout style paint; } .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} }