Signal CSS waves

<div class="waves" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><article><span>EXPERIMENT NO. 010</span><h1>Find your frequency.</h1><p>Quiet signals. Infinite directions.</p></article>

*{box-sizing:border-box}body{margin:0;min-height:100vh;display:grid;place-items:center;font-family:system-ui,sans-serif;background:#0b1020;color:#eaf0ff;padding:35px}button,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #63dbea;outline-offset:4px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}body{padding:0;background:#080d1e;overflow:hidden}.waves{position:absolute;inset:0;display:grid;place-items:center}.waves i{position:absolute;width:510px;height:170px;border:1px solid #7489e638;border-radius:50%;transform:rotate(calc(var(--n)*7deg - 45deg));animation:drift 12s ease-in-out infinite alternate}.waves i:nth-child(1){--n:1}.waves i:nth-child(2){--n:2}.waves i:nth-child(3){--n:3}.waves i:nth-child(4){--n:4}.waves i:nth-child(5){--n:5}.waves i:nth-child(6){--n:6}.waves i:nth-child(7){--n:7}.waves i:nth-child(8){--n:8}.waves i:nth-child(9){--n:9}.waves i:nth-child(10){--n:10}.waves i:nth-child(11){--n:11}.waves i:nth-child(12){--n:12}article{text-align:center;position:relative;background:radial-gradient(ellipse,#080d1e 20%,#080d1e00 75%);padding:60px}article>span{font-size:7px;letter-spacing:4px;color:#8997ce}h1{font-size:32px;letter-spacing:-1px;font-weight:400;margin:20px 0}p{font-size:10px;letter-spacing:1px;color:#70809f}@keyframes drift{to{transform:rotate(calc(var(--n)*7deg - 15deg)) scale(1.1)}}