.dot-container{--width:36px;--dots-color:#00051133;--speed:2s;--dot-size:calc(var(--width)*.1);width:var(--width);height:var(--dot-size);justify-content:space-between;align-items:center;display:flex;position:relative}.dot{top:calc(50% - var(--dot-size)/2);left:calc(0px - var(--dot-size)/2);height:var(--dot-size);width:var(--dot-size);background-color:var(--dots-color);animation:moving-dots var(--speed)linear infinite both;border-radius:50%;transition:background-color .3s;display:block;position:absolute}.dot:nth-child(2){animation-delay:calc(var(--speed)*-.2)}.dot:nth-child(3){animation-delay:calc(var(--speed)*-.4)}.dot:nth-child(4){animation-delay:calc(var(--speed)*-.6)}.dot:nth-child(5){animation-delay:calc(var(--speed)*-.8)}@keyframes moving-dots{0%,to{transform:translate(0)scale(0)}50%{transform:translate(calc(var(--width)*.5))scale(1)}99%{transform:translate(calc(var(--width)))scale(0)}}.dot-matrix{--height:140px;top:0;max-width:250px;height:var(--height,140px);z-index:-1;background:radial-gradient(circle,#00051111 1px,#0000 1px) 0 5px/6px 6px;border-radius:5px;margin-inline:auto;position:absolute;inset-inline:0;overflow:hidden;-webkit-mask-image:radial-gradient(#fff,#0000 80%);mask-image:radial-gradient(#fff,#0000 80%)}