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 methodMarks=qa('.method-mark');let methodTweens=[];
function inspect(){reading(['to','from','fromTo'].map((name,i)=>name+': '+Number(gsap.getProperty(methodMarks[i],'x')).toFixed(0)+'px').join(' / '));if(methodTweens[0])q('#progress').value=Math.round(methodTweens[0].progress()*100);}
function rest(){methodTweens.forEach(t=>t.kill());methodTweens=[];gsap.set(methodMarks,{x:80});q('#progress').value=0;inspect();}
function buildMethods(){rest();const options={duration:1,ease:'power1.inOut',paused:true,onUpdate:inspect};methodTweens=[gsap.to(methodMarks[0],{...options,x:160}),gsap.from(methodMarks[1],{...options,x:0}),gsap.fromTo(methodMarks[2],{x:0},{...options,x:160})];inspect();}
listen(q('#play'),'click',()=>{buildMethods();methodTweens.forEach(t=>isStatic()?t.progress(1,true):t.play());inspect();});listen(q('#rest'),'click',rest);listen(q('#progress'),'input',e=>{const progress=Number(e.target.value)/100;if(!methodTweens.length)buildMethods();methodTweens.forEach(t=>t.pause().progress(progress,true));inspect();});applyMode=rest;studyCleanup.push(()=>methodTweens.forEach(t=>t.kill()));rest();