gsap.registerPlugin(MorphSVGPlugin);

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 SOURCE="M198.00 120.00 C197.17 145.11 181.67 177.74 161.00 191.01 C140.33 204.29 93.83 211.51 74.00 199.67 C54.17 187.84 41.17 145.11 42.00 120.00 C42.83 94.89 58.33 62.26 79.00 48.99 C99.67 35.71 146.17 28.49 166.00 40.33 C185.83 52.16 198.83 94.89 198.00 120.00Z",DESTINATION="M168.00 203.14 C149.25 209.63 120.50 172.83 97.50 158.97 C74.50 145.11 34.25 140.35 30.00 120.00 C25.75 99.65 53.25 43.36 72.00 36.86 C90.75 30.37 119.50 67.17 142.50 81.03 C165.50 94.89 205.75 99.65 210.00 120.00 C214.25 140.35 186.75 196.64 168.00 203.14Z",paths=qa('.morph-path');
let morphTweens=[];
const inspect=()=>{q('#progress').value=Math.round((morphTweens[0]?.progress()||0)*100);reading('진행 '+q('#progress').value+'% · 경로 문자열 길이 '+paths.map(path=>path.getAttribute('d').length).join(' / '));};
function rebuild(){morphTweens.forEach(t=>t.kill());paths.forEach(path=>path.setAttribute('d',SOURCE));
const configured={curveMode:true};
morphTweens=paths.map((path,i)=>gsap.to(path,{paused:true,duration:1.6,ease:'none',morphSVG:{shape:DESTINATION,...(i?configured:{curveMode:false})},onUpdate:()=>{if(i===0)inspect();}}));inspect();}
listen(q('#play'),'click',()=>{rebuild();morphTweens.forEach(t=>isStatic()?t.progress(1,true):t.play());inspect();});
listen(q('#reverse'),'click',()=>{morphTweens.forEach(t=>isStatic()?t.progress(0,true):t.reverse());inspect();});
listen(q('#reset'),'click',rebuild);
listen(q('#progress'),'input',e=>{morphTweens.forEach(t=>t.pause().progress(Number(e.target.value)/100,true));inspect();});

applyMode=()=>{rebuild();reading(isStatic()?'정적 보기 · 채운 시작 윤곽과 점선 도착 윤곽':'진행 0%');};
studyCleanup.push(()=>morphTweens.forEach(t=>t.kill()));applyMode();