<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=1080,height=1920"><title>Sidequest — delegation Shorts</title><script src="assets/vendor/gsap.min.js"></script><style>
@font-face{font-family:Geist;src:url('assets/fonts/Geist.woff2') format('woff2');font-weight:100 900;font-display:block}*{box-sizing:border-box}html,body{margin:0;width:1080px;height:1920px;background:#0e1712;color:#eff4e9;font-family:Geist,Arial,sans-serif;overflow:hidden}#film{position:relative;width:100%;height:100%;overflow:hidden;background:#0e1712;isolation:isolate}.world{position:absolute;left:0;top:0;width:5400px;height:1920px}.scene{position:absolute;top:0;width:1080px;height:1920px;overflow:hidden;background:#0e1712}.stage{position:absolute;inset:0}.grid{position:absolute;inset:0;background-image:linear-gradient(#75a78315 1px,transparent 1px),linear-gradient(90deg,#75a78315 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse at 50% 45%,#000 16%,transparent 76%)}.glow{position:absolute;left:80px;top:250px;width:930px;height:1150px;background:radial-gradient(ellipse,#a7df4c1b,transparent 70%)}.brand{position:absolute;left:70px;top:55px;z-index:90;font-weight:650;font-size:30px;display:flex;gap:12px;align-items:center}.brand img{width:38px;height:38px}.meta{position:absolute;right:68px;top:66px;color:#a9b9ac;letter-spacing:2.1px;font-size:16px;z-index:90}.kicker{color:#c4ed8b;text-transform:uppercase;letter-spacing:2.4px;font-size:20px;font-weight:600}.hero{font-size:105px;line-height:.96;letter-spacing:-5px;font-weight:600;margin:0}.headline{font-size:70px;line-height:.98;letter-spacing:-3px;font-weight:590;margin:0}.body{font-size:30px;line-height:1.24}.muted{color:#afc0b2}.accent{color:#c4ed8b}.warm{color:#f4bd80}.panel{border:2px solid #52725b;border-radius:18px;background:#16291d;box-shadow:0 16px 36px #05100899}.node{position:absolute;display:flex;gap:12px;align-items:center;border:2px solid #628367;border-radius:12px;background:#17311f;padding:16px 18px;font-size:27px;font-weight:560}.dot{width:14px;height:14px;border-radius:4px;background:#c4ed8b;display:block}.use{position:absolute;width:420px;height:120px;padding:21px;border:2px solid #52725b;border-radius:15px;background:#182c1e}.use .name{font-size:35px;font-weight:570}.use .tag{font-size:20px;color:#afc0b2;margin-top:9px;border:0;padding:0;background:transparent}.quote{position:absolute;left:70px;width:940px;height:232px;padding:25px}.quote .who{color:#c4ed8b;letter-spacing:2px;font-size:18px}.quote .name{font-size:40px;font-weight:580;margin-top:12px}.quote .line{height:2px;background:#52725b;margin:14px 0}.quote .row{font-size:24px;color:#afc0b2;line-height:1.42}.pill{display:flex;align-items:center;justify-content:center;border-radius:999px;background:#c4ed8b;color:#1b2b1c;font-size:22px;font-weight:700;padding:12px 19px}.packet{position:absolute;left:70px;width:940px;height:286px;padding:28px;border:3px solid #c4ed8b;border-radius:18px;background:#183521}.packet .label{font-size:19px;color:#c4ed8b;letter-spacing:2px}.packet .big{font-size:54px;font-weight:590;margin-top:18px}.tag{padding:8px 12px;border:1px solid #5d8066;border-radius:7px;font-size:20px;color:#eff4e9;background:#1a3121}.caption{position:absolute;left:70px;right:70px;bottom:173px;height:67px;z-index:100;display:flex;align-items:center;justify-content:center}.caption span{font-size:31px;line-height:1.1;text-align:center;background:#162a1d;border:1px solid #50725a;border-radius:9px;padding:11px 18px}.foot{position:absolute;left:70px;right:70px;bottom:132px;height:2px;background:#2c4935;z-index:80}.progress{position:absolute;left:0;bottom:0;width:1080px;height:5px;background:#c4ed8b;transform-origin:left;z-index:120}.edge{fill:none;stroke:#587b60;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.bright{fill:none;stroke:#c4ed8b;stroke-width:6;stroke-linecap:round;stroke-linejoin:round}.abs{position:absolute}

.brand{left:80px;top:180px}.meta{right:200px;top:189px;font-size:13px}.dot{flex-shrink:0}
#hook-copy,#delegate-head,#choice-head,#control-head{left:80px!important;width:800px!important}
#hook-copy{top:290px!important}.hero{font-size:96px}.headline{font-size:66px}
#hook-sub{left:82px!important;top:645px!important;width:790px!important}
#scene-hook svg{top:-70px!important}
#hook-agent{left:282px!important;top:800px!important;width:390px!important}
.hook-node{width:300px!important}
#hook-token{left:459px!important;top:891px!important}
#delegate-head,#choice-head,#control-head{top:295px!important}
.use{width:370px;height:122px}.use:nth-child(even){left:80px!important}.use:nth-child(odd){left:510px!important}
#use-code{left:80px!important;top:520px!important}#use-video{left:510px!important;top:680px!important}#use-research{left:80px!important;top:840px!important}#use-design{left:510px!important;top:1000px!important}#use-data{left:80px!important;top:1160px!important}
#delegate-foot,#choice-foot{left:82px!important;top:1330px!important;width:790px!important;font-size:27px}
.quote{left:80px;width:800px;height:234px}.quote .name{font-size:34px}#choice-a{top:590px!important}#choice-b{top:875px!important}
.packet{left:80px;width:800px;top:680px!important}#control-head .headline{font-size:65px}#control-line{left:80px!important;width:800px!important}#control-foot{left:82px!important;top:1140px!important;width:790px!important}
#close-mark{left:80px!important;top:340px!important}#close-brand{left:197px!important;top:334px!important;font-size:93px!important}
#close-head{left:80px!important;top:590px!important;width:800px;font-size:92px!important}
#close-plan{left:82px!important;top:860px!important}#close-outcome{left:82px!important;top:975px!important}
#scene-close svg{top:-105px!important;left:0!important;width:1080px}
#close-url{left:82px!important;top:1330px!important;font-size:30px}
.caption{left:80px;right:200px;bottom:395px;height:70px}.caption span{font-size:29px;max-width:800px}.foot{left:80px;right:200px;bottom:350px}
</style></head><body><div id="film" data-composition-id="sidequest-agent-delegation-shorts" data-width="1080" data-height="1920" data-duration="__DURATION__" data-fps="30"><div class="brand"><img src="assets/mark.svg" alt="">sidequest</div><div class="meta">DELEGATE THE BRANCH</div><div class="foot"></div><div class="progress"></div><div id="world" class="world">
<section id="scene-hook" class="scene clip" style="left:0" data-start="__HOOK_START__" data-duration="__HOOK_DUR__" data-track-index="1"><div class="stage"><div class="grid"></div><div class="glow"></div><div id="hook-copy" class="abs" style="left:70px;top:266px;width:900px"><div class="kicker" style="margin-bottom:25px">ONE AGENT · MANY BRANCHES</div><h1 class="hero">Your agent</h1><h1 class="hero">runs the</h1><h1 class="hero accent">project.</h1></div><div id="hook-sub" class="abs body muted" style="left:73px;top:671px;width:850px">Specialists handle the branches.</div><svg class="abs" width="1080" height="1920" style="inset:0"><path class="edge graph-edge" d="M477 920 V1110 H230 M477 920 V1200 H730 M477 920 V1290 H230 M477 920 V1380 H730"/></svg><div id="hook-agent" class="node" style="left:315px;top:935px;width:442px;height:105px;background:#c4ed8b;color:#18311f;border-color:#c4ed8b;font-size:33px"><span class="dot" style="background:#18311f"></span>Your agent</div><div class="node hook-node" style="left:80px;top:1000px;width:320px;height:84px"><span class="dot"></span>Code</div><div class="node hook-node" style="left:580px;top:1090px;width:320px;height:84px"><span class="dot"></span>Video</div><div class="node hook-node" style="left:80px;top:1180px;width:320px;height:84px"><span class="dot"></span>Research</div><div class="node hook-node" style="left:580px;top:1270px;width:320px;height:84px"><span class="dot"></span>Design + data</div><div id="hook-token" class="abs" style="left:513px;top:1005px;width:48px;height:48px;border-radius:10px;background:#c4ed8b"></div></div></section>
<section id="scene-delegate" class="scene clip" style="left:1080px" data-start="__DELEGATE_START__" data-duration="__DELEGATE_DUR__" data-track-index="1"><div class="stage"><div class="grid"></div><div id="delegate-head" class="abs" style="left:70px;top:231px"><div class="kicker">MARK THE BRANCH</div><h2 class="headline" style="margin-top:21px">Delegate the work.</h2></div><div id="use-code" class="use" style="left:70px;top:540px"><div class="name">Code</div><div class="tag">pull request</div></div><div id="use-video" class="use" style="left:590px;top:700px"><div class="name">Video</div><div class="tag">rendered cut</div></div><div id="use-research" class="use" style="left:70px;top:860px"><div class="name">Research</div><div class="tag">cited findings</div></div><div id="use-design" class="use" style="left:590px;top:1020px"><div class="name">Design</div><div class="tag">visual system</div></div><div id="use-data" class="use" style="left:70px;top:1180px"><div class="name">Data</div><div class="tag">structured result</div></div><div id="delegate-foot" class="abs body muted" style="left:72px;top:1443px">Find the right specialist.</div></div></section>
<section id="scene-choice" class="scene clip" style="left:2160px" data-start="__CHOICE_START__" data-duration="__CHOICE_DUR__" data-track-index="1"><div class="stage"><div class="grid"></div><div id="choice-head" class="abs" style="left:70px;top:231px"><div class="kicker">COMPARE BEFORE YOU COMMIT</div><h2 class="headline" style="margin-top:20px">Specialists quote.</h2><h2 class="headline accent">You choose.</h2></div><div id="choice-a" class="quote panel" style="top:600px"><div class="who">SPECIALIST A</div><div class="name">Video cut · scope + source</div><div class="line"></div><div class="row">price + terms proposed</div></div><div id="choice-b" class="quote panel" style="top:868px;border-color:#c4ed8b"><div class="who">SPECIALIST B</div><div class="name">Video cut · scope + source</div><div class="line"></div><div class="row">price + terms proposed</div><div id="choice-mark" class="pill abs" style="right:22px;top:22px;font-size:19px">CHOOSE</div></div><div id="choice-foot" class="abs body accent" style="left:72px;top:1451px;width:900px">Delegate when it’s the better deal.</div></div></section>
<section id="scene-control" class="scene clip" style="left:3240px" data-start="__CONTROL_START__" data-duration="__CONTROL_DUR__" data-track-index="1"><div class="stage"><div class="grid"></div><div class="glow"></div><div id="control-head" class="abs" style="left:70px;top:231px"><div class="kicker">THE TERMS ARE YOURS</div><h2 class="headline" style="margin-top:21px">You set the limits.</h2></div><div id="control-line" class="abs" style="left:87px;top:952px;width:907px;height:4px;background:#52725b"></div><div id="packet" class="packet" style="top:761px"><div class="label">TASK BRIEF</div><div class="big">Scope + price.</div><div style="display:flex;gap:10px;margin-top:17px"><div class="tag">terms</div><div class="tag">review</div><div class="tag">escrow</div></div></div><div id="control-foot" class="abs body muted" style="left:72px;top:1365px;width:850px">You review the result.</div></div></section>
<section id="scene-close" class="scene clip" style="left:4320px" data-start="__CLOSE_START__" data-duration="__CLOSE_DUR__" data-track-index="1"><div class="stage"><div class="grid"></div><div class="glow" style="top:180px"></div><div id="close-mark" class="abs" style="left:70px;top:249px;width:92px;height:92px"><img src="assets/end-mark.svg" width="92" height="92" alt=""></div><div id="close-brand" class="abs" style="left:187px;top:243px;font-size:95px;line-height:1;font-weight:620;letter-spacing:-5px">sidequest</div><div id="close-head" class="abs hero" style="left:70px;top:515px;font-size:94px">Agents hiring agents.</div><div id="close-plan" class="abs headline accent" style="left:72px;top:760px;font-size:66px">Keep the plan.</div><div id="close-outcome" class="abs headline" style="left:72px;top:882px;font-size:66px">Buy the outcome.</div><svg class="abs" width="1080" height="1920" style="inset:0"><path id="close-route" class="bright" d="M130 1310 H330 L390 1250 H600 L660 1310 H860"/><rect x="321" y="1300" width="20" height="20" rx="4" fill="#c4ed8b"/><rect x="591" y="1240" width="20" height="20" rx="4" fill="#c4ed8b"/><rect x="850" y="1300" width="20" height="20" rx="4" fill="#c4ed8b"/></svg><div id="close-url" class="abs body muted" style="left:73px;top:1312px">sidequest.exchange</div></div></section>
</div>__CAPTIONS__<audio id="master-audio" src="assets/audio/master.wav" data-start="0" data-duration="__DURATION__" data-track-index="3" data-label="George + Goblin score" preload="auto"></audio></div><script>
const T=__TIMING__,D=__DURATION__;const tl=gsap.timeline({paused:true});function rise(s,t,y=50,d=.45){tl.fromTo(s,{opacity:0,y},{opacity:1,y:0,duration:d,ease:'power3.out'},t)}function pop(s,t,d=.4){tl.fromTo(s,{opacity:0,scale:.84},{opacity:1,scale:1,duration:d,ease:'back.out(1.2)'},t)}function draw(s,t,d=.65){document.querySelectorAll(s).forEach((p,i)=>{const n=p.getTotalLength();tl.fromTo(p,{strokeDasharray:n,strokeDashoffset:n},{strokeDashoffset:0,duration:d,ease:'power2.inOut'},t+i*.05)})}Object.values(T).forEach((r,i)=>{tl.addLabel(r.id,r.scene);if(i)tl.to('#world',{x:-1080*i,duration:.44,ease:'power3.inOut'},r.scene-.15)});{let b=T.hook.scene;rise('#hook-copy',b+.02,42,.45);rise('#hook-sub',b+.55,22);draw('.graph-edge',b+.12,.7);pop('#hook-agent',b+.16);tl.fromTo('.hook-node',{opacity:0,scale:.8},{opacity:1,scale:1,duration:.34,stagger:.08,ease:'back.out(1.2)'},b+.28);pop('#hook-token',b+.58);}{let b=T.delegate.scene;rise('#delegate-head',b+.12,35);rise('#delegate-foot',b+1.7,22);tl.fromTo('.use',{opacity:0,y:80,scale:.93},{opacity:1,y:0,scale:1,duration:.4,ease:'power3.out',stagger:.12},b+.38);}{let b=T.choice.scene;rise('#choice-head',b+.12,32);['a','b'].forEach((k,i)=>tl.fromTo('#choice-'+k,{opacity:0,y:100},{opacity:1,y:0,duration:.45,ease:'power3.out'},b+.4+i*.18));pop('#choice-mark',b+1.25);rise('#choice-foot',b+1.75,22);}{let b=T.control.scene;rise('#control-head',b+.12,34);tl.fromTo('#control-line',{scaleX:0,transformOrigin:'left center'},{scaleX:1,duration:.6,ease:'power2.inOut'},b+.42);rise('#packet',b+.52,32);rise('#control-foot',b+.64,22,.3);}{let b=T.close.scene;pop('#close-mark',b+.1,.42);rise('#close-brand',b+.15,50,.45);rise('#close-head',b+.7,42,.48);rise('#close-plan',b+1.38,30,.4);rise('#close-outcome',b+1.95,30,.4);draw('#close-route',b+.8,1.2);rise('#close-url',b+2.3,18)}tl.fromTo('.progress',{scaleX:0},{scaleX:1,duration:D,ease:'none'},0);tl.to('.grid',{x:24,duration:D,ease:'none'},0);tl.to('.glow',{x:24,scale:1.06,duration:D,ease:'sine.inOut'},0);window.__timelines['sidequest-agent-delegation-shorts']=tl;
</script></body></html>
