Cursor-follow zoom

<div class="stage" id="stage"><div class="surface" id="surface">
  <div class="gridline"></div><div class="card one"><b>01</b><i></i><i></i></div><div class="card two"><b>02</b><i></i></div><div class="button">CONTINUE</div>
</div><div class="cursor" id="cursor"></div><div class="hint">MOVE THE POINTER</div></div>

.stage{position:absolute;inset:0;overflow:hidden;background:var(--bg);touch-action:none}
.surface{position:absolute;inset:0;transform:scale(1);transform-origin:50% 50%;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.gridline{position:absolute;inset:15%;border:1px solid var(--line);background:linear-gradient(90deg,transparent 49.8%,var(--line) 50%,transparent 50.2%),linear-gradient(transparent 49.8%,var(--line) 50%,transparent 50.2%);opacity:.5}
.card{position:absolute;width:25%;height:33%;padding:3%;background:var(--surface);border:1px solid var(--line);box-shadow:0 4px 15px #0001}
.card b{font:700 18px ui-monospace,monospace;color:var(--accent)}.card i{display:block;height:2px;width:85%;margin-top:12%;background:var(--line)}
.one{left:18%;top:25%}.two{right:18%;top:42%}
.button{position:absolute;left:59%;top:70%;padding:9px 14px;border:1px solid var(--fg);background:var(--surface);font:9px ui-monospace,monospace}
.cursor{position:absolute;width:13px;height:17px;background:var(--fg);clip-path:polygon(0 0,100% 70%,58% 75%,74% 100%,59% 100%,43% 77%,20% 94%);filter:drop-shadow(0 1px 1px #fff);transition:left .5s,top .5s;pointer-events:none}
.hint{position:absolute;left:12px;bottom:12px;padding:5px 8px;background:var(--surface);border:1px solid var(--line);font:9px ui-monospace,monospace;color:var(--muted)}

const stage=document.getElementById('stage'),surface=document.getElementById('surface'),cursor=document.getElementById('cursor');
let x=.27,y=.38,t=0,manualUntil=0,zoomed=true;
function move(nx,ny){x=Math.max(.05,Math.min(.95,nx));y=Math.max(.08,Math.min(.9,ny));surface.style.transformOrigin=(x*100)+'% '+(y*100)+'%';cursor.style.left=(x*stage.clientWidth)+'px';cursor.style.top=(y*stage.clientHeight)+'px';surface.style.transform='scale('+(zoomed?'1.48':'1')+')'}
stage.addEventListener('pointermove',e=>{const r=stage.getBoundingClientRect();manualUntil=performance.now()+2600;zoomed=true;move((e.clientX-r.left)/r.width,(e.clientY-r.top)/r.height)});
stage.addEventListener('click',()=>{manualUntil=performance.now()+2600;zoomed=!zoomed;move(x,y)});
function loop(now){if(now>manualUntil){t+=.012;zoomed=.5+.5*Math.sin(t*1.2)>.32;move(.5+.34*Math.cos(t),.5+.23*Math.sin(t*1.45))}requestAnimationFrame(loop)}
move(x,y);requestAnimationFrame(loop);