.particle{--angle:(5*var(--index));--radius:30;--x:calc(sin(var(--angle))*var(--radius)*1vmin);--y:calc(cos(var(--angle))*var(--radius)*1vmin);--angle2:calc(var(--index)*1turn/var(--total));--x2:calc(sin(var(--angle2))*var(--radius)*1vmin);--y2:calc(cos(var(--angle2))*var(--radius)*1vmin);--size:5;--speed:3s;--delay:calc(var(--index)*var(--speed)/var(--total)*4);--hue-angle:10;--hue-range:50;--hue-start:210;animation:animation var(--speed)ease-out infinite alternate var(--delay);transform:translate3d(var(--x),var(--y),0);opacity:0;color:oklch(75% .1 calc(sin(var(--hue-angle)*var(--index))*var(--hue-range) + var(--hue-start)));width:calc(var(--size)*.1vmin);height:calc(var(--size)*.1vmin);contain:strict;background:currentColor;border-radius:50%;position:absolute}@keyframes animation{to{transform:translate3d(var(--x2),var(--y2),0);opacity:1}}