gsap.registerPlugin();

const q=selector=>document.querySelector(selector),qa=selector=>Array.from(document.querySelectorAll(selector));
const studyAbort=new AbortController(),studyCleanup=[];
const listen=(target,type,handler)=>target.addEventListener(type,handler,{signal:studyAbort.signal});
const preference=matchMedia('(prefers-reduced-motion: reduce)'),staticControl=q('#static-mode');
staticControl.checked=preference.matches;staticControl.disabled=preference.matches;
const isStatic=()=>staticControl.checked||preference.matches;
let applyMode=()=>{};
listen(staticControl,'change',()=>applyMode());
listen(preference,'change',()=>{staticControl.checked=preference.matches;staticControl.disabled=preference.matches;applyMode();});
listen(window,'pagehide',()=>{studyCleanup.forEach(cleanup=>cleanup());studyAbort.abort();});
const reading=text=>q('#reading').textContent=text;

let directionTween=null;
function inspect(){if(!directionTween)return;q('#progress').value=Math.round(directionTween.progress()*100);reading('방향: '+(directionTween.reversed()?'시작 쪽':'끝 쪽')+' · '+(directionTween.paused()?'정지':'재생')+' · '+q('#progress').value+'%');}
gsap.set('#direction-mark',{x:0});directionTween=gsap.to('#direction-mark',{x:160,duration:1.2,ease:'power1.inOut',paused:true,onUpdate:inspect});
function reset(){directionTween.pause().progress(0,true).reversed(true);inspect();}
listen(q('#toggle'),'click',()=>{directionTween.reversed(!directionTween.reversed());if(isStatic())directionTween.pause().progress(directionTween.reversed()?0:1,true);else directionTween.resume();inspect();});listen(q('#pause'),'click',()=>{if(!isStatic())directionTween.paused(!directionTween.paused());inspect();});listen(q('#reset'),'click',reset);listen(q('#progress'),'input',e=>{directionTween.pause().progress(Number(e.target.value)/100,true);inspect();});applyMode=reset;studyCleanup.push(()=>directionTween.kill());reset();