@property --value{syntax:"<angle>";inherits:true;initial-value:0deg}@property --width-ratio{syntax:"<number>";inherits:true;initial-value:0}@property --scale{syntax:"<number>";inherits:true;initial-value:0}:root{--width:22vmin;--duration:10s;--size:56vmin}.rings{aspect-ratio:1;border-radius:50%;filter:url(#blurFilter);perspective:var(--size);position:relative;width:var(--size)}.rings:after,.rings:before{background:red;border-radius:50%;content:"";inset:0;position:absolute;--width-ratio:1;animation:ring linear;animation-timeline:scroll();background:conic-gradient(from calc(var(--value)*3),hsl(var(--primary-bg-h),var(--primary-bg-s),calc(var(--primary-bg-l) + 10%)),transparent,hsl(var(--primary-bg-h),var(--primary-bg-s),calc(var(--primary-bg-l) - 10%)),hsl(var(--primary-bg-h),var(--primary-bg-s),calc(var(--primary-bg-l) + 10%)),hsl(var(--primary-bg-h),var(--primary-bg-s),calc(var(--primary-bg-l) + 20%)),transparent,transparent,hsl(var(--primary-bg-h),var(--primary-bg-s),calc(var(--primary-bg-l) - 15%)),transparent,hsl(var(--primary-bg-h),var(--primary-bg-s),calc(var(--primary-bg-l) + 10%)),hsl(var(--primary-bg-h),var(--primary-bg-s),calc(var(--primary-bg-l) + 10%)),hsl(var(--primary-bg-h),var(--primary-bg-s),calc(var(--primary-bg-l) - 10%)),transparent,transparent,transparent) border-box;border:calc(var(--width)*var(--width-ratio)) solid transparent;-webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;--start:180deg;--value:var(--start);--scale:1;transform:rotateY(var(--value)) rotateX(var(--value)) rotate(var(--value)) scale(var(--scale))}.rings:before{--start:120deg}.rings:after{--start:30deg}.rings>.rings:before{--start:300deg}.rings>.rings:after{--start:210deg}@keyframes ring{0%{--value:var(--start);--scale:1}50%{--scale:1.4;--width-ratio:1.5}70%{--scale:1.2;--value:calc(var(--start) + 180deg);--width-ratio:1}80%{--scale:1.4;--width-ratio:1.5}to{--value:calc(var(--start) + 360deg);--scale:1;--width-ratio:1}}.p-test-page{background-color:var(--primary-bg-color);overflow:clip}