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="M212.73 144.85 C210.74 152.25 163.84 141.21 152.53 152.53 C141.21 163.84 152.25 210.74 144.85 212.73 C137.44 214.71 123.55 168.57 108.09 164.43 C92.64 160.29 57.54 193.30 52.12 187.88 C46.70 182.46 79.71 147.36 75.57 131.91 C71.43 116.45 25.29 102.56 27.27 95.15 C29.26 87.75 76.16 98.79 87.47 87.47 C98.79 76.16 87.75 29.26 95.15 27.27 C102.56 25.29 116.45 71.43 131.91 75.57 C147.36 79.71 182.46 46.70 187.88 52.12 C193.30 57.54 160.29 92.64 164.43 108.09 C168.57 123.55 214.71 137.44 212.73 144.85Z",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={smooth:{points:Number(q("#points").value),redraw:q("#redraw").checked,persist:q("#persist").checked}};
morphTweens=paths.map((path,i)=>gsap.to(path,{paused:true,duration:1.8,ease:'none',morphSVG:{shape:DESTINATION,...(i?configured:{})},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();});
for(const selector of ["#points","#redraw","#persist"])listen(q(selector),"change",rebuild);
applyMode=()=>{rebuild();reading(isStatic()?'정적 보기 · 채운 시작 윤곽과 점선 도착 윤곽':'진행 0%');};
studyCleanup.push(()=>morphTweens.forEach(t=>t.kill()));applyMode();