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 panel=q('.orchestrated-panel'),items=qa('.orchestrated-panel li'),bars=qa('.icon-bars span');let orchestrated=null,desiredOpen=true;
const selectedEase=selector=>q('#reverse-enabled').checked?q(selector).value:false;
function reflect(){q('#toggle-label').textContent=desiredOpen?'닫기':'열기';q('#toggle').setAttribute('aria-expanded',String(desiredOpen));panel.setAttribute('aria-hidden',String(!desiredOpen));reading('역재생 · 패널 '+selectedEase('#panel-ease')+' / 항목 '+selectedEase('#item-ease')+' / 아이콘 '+selectedEase('#icon-ease'));}
function buildOrchestration(open=false){orchestrated?.kill();desiredOpen=open;gsap.set(panel,{x:0,autoAlpha:1});gsap.set(items,{y:0,autoAlpha:1});gsap.set(bars,{y:0,rotation:0});
orchestrated=gsap.timeline({paused:true})
.fromTo(panel,{x:-100,autoAlpha:0},{x:0,autoAlpha:1,duration:.65,ease:'back.out(1.4)',easeReverse:selectedEase('#panel-ease')},0)
.fromTo(items,{y:30,autoAlpha:0},{y:0,autoAlpha:1,duration:.4,stagger:.08,ease:'power2.out',easeReverse:selectedEase('#item-ease')},.2)
.fromTo(bars[0],{y:0,rotation:0},{y:3.5,rotation:45,duration:.3,ease:'power1.inOut',easeReverse:selectedEase('#icon-ease')},0)
.fromTo(bars[1],{y:0,rotation:0},{y:-3.5,rotation:-45,duration:.3,ease:'power1.inOut',easeReverse:selectedEase('#icon-ease')},0);
orchestrated.progress(open?1:0,true).pause();reflect();}
listen(q('#toggle'),'click',()=>{desiredOpen=!desiredOpen;if(isStatic())orchestrated.pause().progress(desiredOpen?1:0,true);else desiredOpen?orchestrated.play():orchestrated.reverse();reflect();});
for(const selector of ['#reverse-enabled','#panel-ease','#item-ease','#icon-ease'])listen(q(selector),'change',()=>buildOrchestration(false));listen(q('#reset'),'click',()=>buildOrchestration(false));applyMode=()=>buildOrchestration(true);studyCleanup.push(()=>orchestrated?.kill());applyMode();