Awaitable programmatic scrolling

<div class="v await"><header>AWAIT SCROLL <span id="status">moving</span></header><div class="stage await-stage"><div class="await-window" id="window"><div>Row 1</div><div>Row 2</div><div>Row 3</div><div id="target">Target row</div></div><div class="await-flow"><span id="move">scroll()</span><span>↓</span><span id="done">Promise done</span><span>↓</span><span id="glow">highlight</span></div></div><div class="muted">finish motion → run next step</div></div>

.v{width:min(94vw,760px);height:min(88vh,320px);padding:clamp(9px,2.4vmin,18px);border:1px solid var(--line);border-radius:12px;background:var(--surface);font:500 clamp(12px,2.4vmin,16px)/1.3 var(--font-sans,system-ui,sans-serif);display:flex;flex-direction:column;gap:clamp(5px,1.4vmin,10px);overflow:hidden}.v header{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--accent);font-weight:700}.v header span{color:var(--muted);font-weight:500}.v .stage{flex:1;min-height:0;position:relative}.v .muted{color:var(--muted)}.v .active{background:color-mix(in srgb,var(--accent) 18%,var(--surface));border-color:var(--accent)!important;color:var(--fg)}.v button{font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:5px 8px;cursor:pointer}.await-stage{display:flex;justify-content:center;gap:12px;align-items:center}.await-window{width:45%;height:86%;overflow:auto;border:2px solid var(--line);border-radius:8px;scroll-behavior:smooth}.await-window div{height:55%;display:grid;place-items:center;border-bottom:1px solid var(--line);background:var(--bg)}.await-window #target{color:var(--accent);font-weight:700;transition:background .3s}.await-window #target.glow{background:color-mix(in srgb,var(--accent) 25%,var(--surface))}.await-flow{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted);font-size:clamp(12px,2.2vmin,13px)}.await-flow span.on{color:var(--accent);font-weight:700}

const win=document.getElementById("window"),target=document.getElementById("target"),status=document.getElementById("status");async function run(){target.classList.remove("glow");win.scrollTop=0;document.getElementById("move").classList.add("on");document.getElementById("done").classList.remove("on");document.getElementById("glow").classList.remove("on");status.textContent="moving";await new Promise(r=>setTimeout(r,180));const result=win.scrollTo({top:win.scrollHeight,behavior:"smooth"});if(result&&typeof result.then==="function")await result;else await new Promise(r=>{let done=false;const finish=()=>{if(done)return;done=true;r()};win.addEventListener("scrollend",finish,{once:true});setTimeout(finish,650)});document.getElementById("move").classList.remove("on");document.getElementById("done").classList.add("on");target.classList.add("glow");document.getElementById("glow").classList.add("on");status.textContent="highlighted"}run();let timer=setInterval(run,2300);win.addEventListener("pointerdown",()=>clearInterval(timer))