.radar{position:relative;width:46px;height:46px;background:repeating-radial-gradient(transparent,transparent 9%,hsla(0,0%,100%,.75) 10%,transparent 11%) content-box,linear-gradient(transparent 49.7%,hsla(0,0%,50%,.2) 49.9%,hsla(0,0%,50%,.2) 50.1%,transparent 50.3%) content-box,linear-gradient(90deg,transparent 49.7%,hsla(0,0%,50%,.2) 49.9%,hsla(0,0%,50%,.2) 50.1%,transparent 50.3%) content-box;border:2px solid #fff;background-color:hsla(0,0%,100%,.2);backdrop-filter:blur(1vmin);border-radius:50%;box-sizing:border-box;overflow:hidden;transition:border .3s ease-out,width .3s ease-out,height .3s ease-out,background-color .3s ease-out}@media (min-width:768px){.radar{width:74px;height:74px}}.radar:hover{background-color:hsla(0,0%,100%,.4)}.radar:after{content:"";inset:0;background-image:conic-gradient(transparent 90%,hsla(0,0%,100%,.55));animation:spin 2s linear infinite}.radar:after,.radar__dot{position:absolute;border-radius:50%}.radar__dot{width:3%;height:3%;transform:translate(-50%,-50%);animation:blink2 2s ease-out infinite}.radar__dot:first-of-type{top:24%;left:76%;animation-delay:.25s}.radar__dot:nth-of-type(2){top:70%;left:20%;animation-delay:1.25s}.radar__dot:last-of-type{top:36%;left:36%;animation-delay:1.75s}@keyframes spin{to{transform:rotate(1turn)}}@keyframes blink2{2%,20%{background-color:hsla(0,0%,100%,.85);box-shadow:0 0 1vmin hsla(0,0%,100%,.6)}90%{background-color:transparent}}