@supports (background:paint(ring-particles)){.hero-particles{--ring-radius:100;--ring-thickness:600;--particle-count:80;--particle-rows:25;--particle-size:2;--particle-color:26,107,60;--particle-min-alpha:0.05;--particle-max-alpha:0.6;--seed:200;background-image:paint(ring-particles)}@property --animation-tick{syntax:"<number>";inherits:false;initial-value:0}@property --ring-radius{syntax:"<number> | auto";inherits:false;initial-value:auto}@keyframes hero-ripple{0%{--animation-tick:0}to{--animation-tick:1}}@keyframes hero-ring{0%{--ring-radius:150}to{--ring-radius:280}}.hero-particles{animation:hero-ripple 6s linear infinite,hero-ring 6s ease-in-out infinite alternate}@property --ring-x{syntax:"<number>";inherits:false;initial-value:50}@property --ring-y{syntax:"<number>";inherits:false;initial-value:50}@property --ring-interactive{syntax:"<number>";inherits:false;initial-value:0}.hero-particles,.hero-particles.particles-interactive{transition:--ring-x 3s ease,--ring-y 3s ease}}