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 primitiveSvg=q('#primitives'),PRIMITIVES="<rect class=\"primitive\" x=\"36\" y=\"32\" width=\"112\" height=\"82\" rx=\"18\"/><circle class=\"primitive\" cx=\"296\" cy=\"72\" r=\"46\"/><ellipse class=\"primitive\" cx=\"496\" cy=\"72\" rx=\"65\" ry=\"38\"/><line class=\"primitive\" x1=\"38\" y1=\"210\" x2=\"148\" y2=\"165\"/><polyline class=\"primitive\" points=\"242 220 268 162 300 217 346 158\"/><polygon class=\"primitive\" points=\"490 154 550 210 490 250 436 207\"/>";let originals=[],converted=[],morphTween=null;
function reset(){morphTween?.kill();primitiveSvg.innerHTML=PRIMITIVES;originals=qa('.primitive');converted=[];q('#morph').disabled=true;q('#convert').disabled=false;q('#inspection').textContent=originals.map(node=>node.tagName).join(' · ');reading('변환 전 · 여섯 기본 요소');}
listen(q('#convert'),'click',()=>{converted=MorphSVGPlugin.convertToPath(originals,q('#swap').checked);q('#convert').disabled=true;q('#morph').disabled=!q('#swap').checked;q('#inspection').textContent=converted.map((node,i)=>originals[i].tagName+' → '+node.tagName+' / 연결: '+node.isConnected+' / d 길이: '+node.getAttribute('d').length).join('\n');reading(q('#swap').checked?'원래 노드는 교체되고 새 경로가 연결되었습니다.':'원래 도형은 유지되고 반환 경로는 분리되어 있습니다.');});
listen(q('#morph'),'click',()=>{if(!converted[0]?.isConnected)return;morphTween?.kill();morphTween=gsap.to(converted[0],{duration:isStatic()?0:1,ease:'power1.inOut',morphSVG:'M92 24 152 72 92 122 30 72Z'});});
listen(q('#reset'),'click',reset);listen(q('#swap'),'change',reset);applyMode=()=>{morphTween?.kill();};studyCleanup.push(()=>morphTween?.kill());reset();