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;

const KEYFRAMES=[{x:120,y:0,duration:.6,ease:'power1.inOut'},{x:120,y:80,rotation:90,duration:.4,ease:'power1.inOut'},{x:0,y:0,rotation:180,duration:.8,ease:'power1.inOut'}];let keyTween=null;
function inspect(){if(!keyTween)return;const time=keyTween.time();let elapsed=0,segment=KEYFRAMES.length;for(let i=0;i<KEYFRAMES.length;i++){elapsed+=KEYFRAMES[i].duration;if(time<elapsed-.00001){segment=i+1;break;}}q('#progress').value=Math.round(keyTween.progress()*100);reading(time.toFixed(2)+' / '+keyTween.duration().toFixed(2)+'초 · '+segment+'단계');}
gsap.set('#key-mark',{x:0,y:0,rotation:0,scale:1});keyTween=gsap.to('#key-mark',{paused:true,keyframes:KEYFRAMES,onUpdate:inspect});
listen(q('#play'),'click',()=>{if(isStatic())keyTween.pause().progress(1,true);else keyTween.paused(!keyTween.paused());inspect();});listen(q('#restart'),'click',()=>{if(isStatic())keyTween.pause().progress(0,true);else keyTween.restart();inspect();});listen(q('#progress'),'input',e=>{keyTween.pause().progress(Number(e.target.value)/100,true);inspect();});applyMode=()=>{keyTween.pause().progress(0,true);inspect();};studyCleanup.push(()=>keyTween.kill());applyMode();