Files
presentation-html/dist/animejs-gallery-0.7.0/examples/assemble-explode.html
T

1377 lines
167 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<!-- Generated from catalog metadata by scripts/build-gallery.py. -->
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Separate, inspect, reassemble — Motion that explains</title><style>*{box-sizing:border-box}body{margin:0;background:#101823;color:#eef5ff;font:16px/1.5 system-ui,sans-serif}header,main,footer{max-width:1300px;margin:auto;padding:24px}h1{font-size:2.2rem;margin:0}h2{font-size:1.3rem}header p,article p{color:#bfcede}article{padding:22px;border:1px solid #425065;border-radius:12px;background:#182333}svg{width:100%;display:block;background:#111c2b;border-radius:8px}svg{font-family:system-ui,sans-serif;font-size:14px;fill:#eef5ff}.industry svg{font-size:18px}.guide{fill:none;stroke:#425065;stroke-width:5}.trace{fill:none;stroke:#69ded2;stroke-width:4}.cell{fill:#2a6d82;stroke:#85e7df;stroke-width:2}.packet{fill:#ffd787;stroke:#101823;stroke-width:2}.controls,.beats{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px}button{font:inherit;border:1px solid #8da4be;background:#263b52;color:#fff;border-radius:5px;padding:6px 12px;cursor:pointer}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #ffd787;outline-offset:3px}label{display:flex;align-items:center;gap:6px}input{width:160px}output{display:block;color:#bfcede;font-size:.85rem;margin-top:8px}footer{color:#bfcede}summary{cursor:pointer}pre{white-space:pre-wrap}a{color:#85e7df;text-underline-offset:3px}nav{margin-bottom:18px;color:#bfcede}.registry-nav{display:flex;flex-wrap:wrap;gap:10px}.registry-nav a{padding:8px 14px;background:#203248;border:1px solid #425065;border-radius:6px}.preview-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,510px),1fr));gap:22px}section{margin-bottom:36px}.preview-grid article{padding:0;overflow:hidden;container-type:inline-size}iframe{width:100%;height:calc(56.25cqw + 150px);min-height:360px;border:0;display:block}.open-example{display:block;padding:16px 22px;border-top:1px solid #425065}body[data-example] main{max-width:1120px}body[data-example] article h2{display:none}.guidance{border-top:1px solid #425065;margin:24px 0 0;padding-top:12px}.guidance h3{font-size:1rem;margin-bottom:4px}.guidance p{margin-top:0}.beats button{font-size:.9rem}.embedded header,.embedded footer,.embedded .guidance,.embedded .beats,.embedded .controls label,.embedded article>p{display:none}.embedded .controls{margin-top:10px}.embedded main{padding:8px}.embedded article{padding:8px;border:0}body[data-example].embedded article h2{display:block;margin:0 0 8px;font-size:1rem}.embedded svg{max-height:none}@media(max-width:500px){header,main,footer{padding:16px}h1{font-size:1.8rem}article{padding:12px}.controls label{width:100%}}@media print{.controls,.beats,output{display:none}article{break-inside:avoid}}
</style></head>
<body data-example="assemble-explode"><header><nav aria-label="Breadcrumb"><a href="../index.html">All examples</a> / <a href="../compositions/index.html">Compositions</a> / <span aria-current="page">Separate, inspect, reassemble</span></nav><h1>Separate, inspect, reassemble</h1><p>Scenes start complete. Play or replay; seek a named beat to inspect a phase. Reduced motion keeps the scene complete.</p></header><main aria-label="Animation examples"></main><footer><p>Original conceptual examples · Anime.js 4.5.0 · Offline library 0.7.0. Not operational, clinical or engineering advice.</p><details><summary>Anime.js license</summary><pre>The MIT License
Copyright (c) 2025 Julian Garnier
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the &quot;Software&quot;), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED &quot;AS IS&quot;, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
</pre></details></footer>
<script>/**
* Anime.js - UMD minified bundle
* @version v4.5.0
* @license MIT
* @copyright 2026 - Julian Garnier
*/
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).anime={})}(this,function(t){"use strict";const e="undefined"!=typeof window,s=e?window:null,i=e?document:null,r={replace:0,none:1,blend:2},n=Symbol(),o=Symbol(),a=Symbol(),l=Symbol(),h=Symbol(),d=1e-11,c=1e12,u=1e3,p="",m=[],f=(()=>{const t=new Map;return t.set("x","translateX"),t.set("y","translateY"),t.set("z","translateZ"),t})(),g=["perspective","translateX","translateY","translateZ","rotate","rotateX","rotateY","rotateZ","scale","scaleX","scaleY","scaleZ","skew","skewX","skewY"],y=g.reduce((t,e)=>({...t,[e]:e+"("}),{}),_=()=>{},b=/\)\s*[-.\d]/,v=/(^#([\da-f]{3}){1,2}$)|(^#([\da-f]{4}){1,2}$)/i,T=/rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/i,x=/rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(-?\d+|-?\d*.\d+)\s*\)/i,S=/hsl\(\s*(-?\d+|-?\d*.\d+)\s*,\s*(-?\d+|-?\d*.\d+)%\s*,\s*(-?\d+|-?\d*.\d+)%\s*\)/i,w=/hsla\(\s*(-?\d+|-?\d*.\d+)\s*,\s*(-?\d+|-?\d*.\d+)%\s*,\s*(-?\d+|-?\d*.\d+)%\s*,\s*(-?\d+|-?\d*.\d+)\s*\)/i,$=/[-+]?\d*\.?\d+(?:e[-+]?\d)?/gi,C=/^([-+]?\d*\.?\d+(?:e[-+]?\d+)?)([a-z]+|%)$/i,E=/([a-z])([A-Z])/g,k=/(\*=|\+=|-=)/,N=/var\(\s*(--[\w-]+)(?:\s*,\s*([^)]+))?\s*\)/,D={id:null,keyframes:null,playbackEase:null,playbackRate:1,frameRate:240,loop:0,reversed:!1,alternate:!1,autoplay:!0,persist:!1,duration:u,delay:0,loopDelay:0,ease:"out(2)",composition:r.replace,modifier:t=>t,onBegin:_,onBeforeUpdate:_,onUpdate:_,onLoop:_,onPause:_,onComplete:_,onRender:_},A={current:null,root:i},I={defaults:D,precision:4,timeScale:1,tickThreshold:200,editor:null},R={version:"4.5.0",engine:null};e&&(s.AnimeJS||(s.AnimeJS=[]),s.AnimeJS.push(R));const L=t=>t.replace(E,"$1-$2").toLowerCase(),B=(t,e)=>0===t.indexOf(e),P=Date.now,F=Array.isArray,M=t=>t&&t.constructor===Object,V=t=>"number"==typeof t&&!isNaN(t),O=t=>"string"==typeof t,z=t=>"function"==typeof t,H=t=>void 0===t,X=t=>H(t)||null===t,Y=t=>e&&t instanceof SVGElement,W=t=>v.test(t),U=t=>B(t,"rgb"),q=t=>B(t,"hsl"),j=t=>!I.defaults.hasOwnProperty(t),G=["opacity","rotate","overflow","color"],Z=t=>O(t)?parseFloat(t):t,Q=Math.pow,J=Math.sqrt,K=Math.sin,tt=Math.cos,et=Math.abs,st=Math.exp,it=Math.ceil,rt=Math.floor,nt=Math.asin,ot=Math.max,at=Math.atan2,lt=Math.PI,ht=Math.round,dt=(t,e,s)=>t<e?e:t>s?s:t,ct=(t,e)=>{if(e<0)return t;if(!e)return ht(t);const s=10**e;return ht(t*s)/s},ut=(t,e)=>F(e)?e.reduce((e,s)=>et(s-t)<et(e-t)?s:e):e?ht(t/e)*e:t,pt=(t,e,s)=>1===s?e:0===s?t:t+(e-t)*s,mt=t=>t===1/0?c:t===-1/0?-c:t,ft=t=>t<=d?d:mt(ct(t,11)),gt=t=>F(t)?[...t]:t,yt=(t,e)=>{const s={...t};for(let i in e){const r=t[i];s[i]=H(r)?e[i]:r}return s},_t=(t,e,s,i="_prev",r="_next")=>{let n=t._head,o=r;for(s&&(n=t._tail,o=i);n;){const t=n[o];e(n),n=t}},bt=(t,e,s="_prev",i="_next")=>{const r=e[s],n=e[i];r?r[i]=n:t._head=n,n?n[s]=r:t._tail=r,e[s]=null,e[i]=null},vt=(t,e,s,i="_prev",r="_next")=>{let n=t._tail;for(;n&&s&&s(n,e);)n=n[i];const o=n?n[r]:t._head;n?n[r]=e:t._head=e,o?o[i]=e:t._tail=e,e[i]=n,e[r]=o},Tt=t=>{let e=p;for(let s=0,i=g.length;s<i;s++){const i=g[s],r=t[i];if(void 0!==r){if("translateX"===i){const i=t.translateY;if(void 0!==i){const n=t.translateZ;void 0!==n?(e+=`translate3d(${r},${i},${n}) `,s+=2):(e+=`translate(${r},${i}) `,s+=1);continue}}if("scaleX"===i&&void 0===t.scale){const i=t.scaleY;if(void 0!==i){const n=t.scaleZ;void 0!==n?(e+=`scale3d(${r},${i},${n}) `,s+=2):(e+=`scale(${r},${i}) `,s+=1);continue}}e+=`${y[i]}${r}) `}"rotateZ"===i&&void 0!==t.rotate3d&&(e+=`rotate3d(${t.rotate3d}) `)}return void 0!==t.matrix&&(e+=`matrix(${t.matrix}) `),void 0!==t.matrix3d&&(e+=`matrix3d(${t.matrix3d}) `),e},xt=[];function St(t,e){if(!t)return null;const s=xt.length;t:for(let i=0;i<s;i++){const s=xt[i];if(s.detect&&!s.detect(t))continue;const r=s.targetAdapters;for(let s=0,i=r.length;s<i;s++){const i=r[s];if(i.detect(t)){const s=i.props[e];if(s&&(!s.gate||s.gate(t)))return s;break t}}}for(let i=0;i<s;i++){const s=xt[i];if(s.detect&&!s.detect(t))continue;const r=s.propertyResolvers;for(let s=0,i=r.length;s<i;s++){const i=r[s](t,e);if(i)return i}}return null}const wt=(t,e,s)=>(s<0&&(s+=1),s>1&&(s-=1),s<1/6?t+6*(e-t)*s:s<.5?e:s<2/3?t+(e-t)*(2/3-s)*6:t),$t=(t,e)=>H(t)?e:t,Ct=(t,e)=>{const s=t.match(N),i=e[o]?e:document.documentElement;let r=getComputedStyle(i)?.getPropertyValue(s[1]);return r&&r.trim()!==p||!s[2]||(r=s[2].trim()),r||0},Et=(t,e,s,i,r,n)=>{if(z(t)){if(!r){const r=t(e,s,i,n);return isNaN(+r)?r||0:+r}const o=()=>{const r=t(e,s,i,n);return isNaN(+r)?r||0:+r};return r.func=o,o()}if(O(t)&&B(t,"var(")){if(!r)return Ct(t,e);const s=()=>Ct(t,e);return r.func=s,s()}return t},kt=(t,e)=>t[o]?t[a]&&((t,e)=>{if(G.includes(e))return!1;if(t.getAttribute(e)||e in t){if("scale"===e){const e=t.parentNode;return e&&"filter"===e.tagName}return!0}})(t,e)?1:g.includes(e)||f.get(e)?3:B(e,"--")?4:e in t.style?2:e in t?0:1:0,Nt=(t,e,s)=>{const i=t.style[e];i&&s&&(s[e]=i);const r=i||getComputedStyle(t[h]||t).getPropertyValue(e);return"auto"===r?"0":r},Dt=(t,e,s,i)=>{const r=H(s)?kt(t,e):s,n=St(t,e);if(n){const s=n.get(t);return s&&i&&(i[e]=s),null==s?0:s}if(0===r){const s=t[e];return s&&i&&(i[e]=s),s||0}if(1===r){const s=t.getAttribute(e);return s&&i&&(i[e]=s),s}return 3===r?((t,e,s)=>{const i=t.style.transform;if(i){const r=t[l];let n=0;const o=i.length;let a;for(;n<o;){for(;n<o&&32===i.charCodeAt(n);)n++;if(n>=o)break;const t=n;for(;n<o&&40!==i.charCodeAt(n);)n++;if(n>=o)break;const e=i.substring(t,n);let s=1;const l=n+1;let h=-1,d=-1;for(n++;n<o&&s>0;){const t=i.charCodeAt(n);40===t?s++:41===t?s--:44===t&&1===s&&(-1===h?h=n:-1===d&&(d=n)),n++}const c=n-1;"translate"===e||"translate3d"===e?(-1===h?r.translateX=i.substring(l,c).trim():(r.translateX=i.substring(l,h).trim(),-1===d?r.translateY=i.substring(h+1,c).trim():(r.translateY=i.substring(h+1,d).trim(),r.translateZ=i.substring(d+1,c).trim())),a=i.substring(l,c)):"scale"===e||"scale3d"===e?-1===h?r.scale=i.substring(l,c).trim():(r.scaleX=i.substring(l,h).trim(),-1===d?r.scaleY=i.substring(h+1,c).trim():(r.scaleY=i.substring(h+1,d).trim(),r.scaleZ=i.substring(d+1,c).trim())):r[e]=i.substring(l,c)}if("translate3d"===e&&a)return s&&(s[e]=a),a;const h=r[e];if(!H(h))return s&&(s[e]=h),h}return"translate3d"===e?"0px, 0px, 0px":"rotate3d"===e?"0, 0, 0, 0deg":B(e,"scale")?"1":B(e,"rotate")||B(e,"skew")?"0deg":"0px"})(t,e,i):4===r?Nt(t,e,i).trimStart():Nt(t,e,i)},At=(t,e,s)=>"-"===s?t-e:"+"===s?t+e:t*e,It=(t,e)=>{if(e.t=0,e.n=0,e.u=null,e.o=null,e.d=null,e.s=null,!t)return e;const s=+t;if(!isNaN(s))return e.n=s,e;let i=t;"="===i[1]&&(e.o=i[0],i=i.slice(2));const r=!i.includes(" ")&&C.exec(i);if(r)return e.t=1,e.n=+r[1],e.u=r[2],e;if(e.o)return e.n=+i,e;if(W(o=i)||(U(o)||q(o))&&(")"===o[o.length-1]||!b.test(o)))return e.t=2,e.d=U(n=i)?(t=>{const e=T.exec(t)||x.exec(t),s=H(e[4])?1:+e[4];return[+e[1],+e[2],+e[3],s]})(n):W(n)?(t=>{const e=t.length,s=4===e||5===e;return[+("0x"+t[1]+t[s?1:2]),+("0x"+t[s?2:3]+t[s?2:4]),+("0x"+t[s?3:5]+t[s?3:6]),5===e||9===e?+(+("0x"+t[s?4:7]+t[s?4:8])/255).toFixed(3):1]})(n):q(n)?(t=>{const e=S.exec(t)||w.exec(t),s=+e[1]/360,i=+e[2]/100,r=+e[3]/100,n=H(e[4])?1:+e[4];let o,a,l;if(0===i)o=a=l=r;else{const t=r<.5?r*(1+i):r+i-r*i,e=2*r-t;o=ct(255*wt(e,t,s+1/3),0),a=ct(255*wt(e,t,s),0),l=ct(255*wt(e,t,s-1/3),0)}return[o,a,l,n]})(n):[0,0,0,1],e;var n,o;{const t=i.match($);return e.t=3,e.d=t?t.map(Number):[],e.s=i.split($)||[],e}},Rt=(t,e)=>(e.t=t._valueType,e.n=t._toNumber,e.u=t._unit,e.o=null,e.d=gt(t._toNumbers),e.s=gt(t._strings),e),Lt={t:0,n:0,u:null,o:null,d:null,s:null},Bt=(t,e,s)=>{const i=t._modifier,r=t._fromNumbers,n=t._toNumbers,o=t._strings;let a=o[0];for(let l=0,h=n.length;l<h;l++){const h=i(ct(pt(r[l],n[l],e),s)),d=o[l+1];a+=`${d?h+d:h}`,t._numbers[l]=h}return a},Pt=(t,e,s,i,n)=>{const o=t.parent,a=t.duration,h=t.completed,c=t.iterationDuration,u=t.iterationCount,p=t._currentIteration,m=t._loopDelay,f=t._reversed,g=t._alternate,y=t._hasChildren,_=t._delay,b=t._currentTime,v=_+c,T=e-_,x=dt(b,-_,a),S=dt(T,-_,a),w=T-b,$=S>0,C=S>=a,E=a<=d,k=2===n;let N=0,D=T,A=0;if(u>1){const e=c+(C?0:m),s=~~(S/e);t._currentIteration=dt(s,0,u),C&&t._currentIteration--,N=t._currentIteration%2,D=S-s*e||0}const R=f^(g&&N),L=t._ease;let B=C?R?0:a:R?c-D:D;L&&(B=c*L(B/c)||0);const P=(o?o.backwards:T<b)?!R:!!R;if(t._currentTime=T,t._iterationTime=B,t.backwards=P,$&&!t.began?(t.began=!0,s||o&&(P||!o.began)||t.onBegin(t)):T<=0&&(t.began=!1),s||y||!$||t._currentIteration===p||t.onLoop(t),k||1===n&&(e>=(o&&_>0?0:_)&&e<=v||e<=_&&x>_||e>=v&&x!==a)||B>=v&&x!==a||B<=_&&x>0&&!C||e<=x&&x===a&&h||C&&!h&&E){if($&&(t.computeDeltaTime(x),s||t.onBeforeUpdate(t)),!y){const e=k||(P?-1*w:w)>=I.tickThreshold,n=ct(t._offset+(o?o._offset:0)+_+B,12);let a,h,d,c,u=t._head,p=0;for(;u;){const t=u._composition,s=u._currentTime,o=u._changeDuration,m=u._absoluteStartTime+u._changeDuration,f=u._nextRep,g=u._prevRep,y=t!==r.none,_=g?g._absoluteStartTime+g._changeDuration:0,b=g&&g.parent!==u.parent,v=!f||f._isOverridden?m:f.parent===u.parent?m+f._delay:f._absoluteStartTime<f._absoluteUpdateStartTime?f._absoluteStartTime:f._absoluteUpdateStartTime;if((e||(s!==o||n<=v||g&&!b&&(!f||f.parent!==u.parent))&&(0!==s||n>=u._absoluteStartTime||b&&!u._hasFromValue&&!g._isOverridden&&n>=_||f&&!f._isOverridden&&f.parent===u.parent&&0!==f._currentTime&&B<f._startTime))&&(!g||b||B>=u._startTime)&&(!y||!u._isOverridden&&(!u._isOverlapped||n<=m)&&(!f||f._isOverridden||n<=v)&&(!g||g._isOverridden||(b?n>=u._absoluteStartTime||!u._hasFromValue&&n>=_:n>=_+u._delay)))){const e=u._currentTime=dt(B-u._startTime,0,o),s=u._ease(e/u._updateDuration),n=u._modifier,m=u._valueType,f=u._tweenType,g=0===f,_=0===m,b=_&&g||0===s||1===s?-1:I.precision;let v,T;if(_)v=T=n(ct(pt(u._fromNumber,u._toNumber,s),b));else if(1===m)T=n(ct(pt(u._fromNumber,u._toNumber,s),b)),v=`${T}${u._unit}`;else if(2===m){const t=u._numbers,e=u._fromNumbers,r=u._toNumbers,o=1-s,a=e[0],l=e[1],h=e[2],d=r[0],c=r[1],p=r[2];t[0]=n(Math.sqrt(a*a*o+d*d*s)),t[1]=n(Math.sqrt(l*l*o+c*c*s)),t[2]=n(Math.sqrt(h*h*o+p*p*s)),t[3]=n(pt(e[3],r[3],s)),u._setter&&!i||(v=`rgba(${ct(t[0],0)},${ct(t[1],0)},${ct(t[2],0)},${t[3]})`)}else 3===m&&(v=Bt(u,s,b));if(y&&(u._number=T),i||t===r.blend)u._value=v;else{const t=u.property;a=u.target,u._setter?u._setter(a,T,u):g?a[t]=v:1===f?a.setAttribute(t,v):(h=a.style,3===f?(a!==d&&(d=a,c=a[l]),c[t]=v,p=1):2===f?h[t]=v:4===f&&h.setProperty(t,v)),$&&(A=1)}}else s&&g&&!b&&B<u._startTime&&(u._currentTime=0);p&&u._renderTransforms&&(h.transform=Tt(c),p=0),u=u._next}!s&&A&&t.onRender(t)}!s&&$&&t.onUpdate(t)}return o&&E?!s&&(o.began&&!P&&T>0&&!h||P&&T<=d&&h)&&(t.onComplete(t),t.completed=!P):$&&C?u===1/0?t._startTime+=t.duration:t._currentIteration>=u-1&&(t.paused=!0,h||y||(t.completed=!0,s||o&&(P||!o.began)||(t.onComplete(t),t._resolve(t)))):t.completed=!1,A},Ft=(t,e,s,i,r)=>{const n=t._currentIteration;if(Pt(t,e,s,i,r),t._hasChildren){const o=t,a=o.backwards,l=i?e:o._iterationTime,h=P();let c=0,u=!0;if(!i&&o._currentIteration!==n){const t=o.iterationDuration;_t(o,e=>{if(a){const i=e.duration,r=e._offset+e._delay;s||!(i<=d)||r&&r+i!==t||e.onComplete(e)}else!e.completed&&!e.backwards&&e._currentTime<e.iterationDuration&&Pt(e,t,s,1,2),e.began=!1,e.completed=!1}),s||o.onLoop(o)}_t(o,t=>{const e=ct((l-t._offset)*t._speed,12);if(a&&e>t._delay+t.duration)return;const n=t._fps<o._fps?t.requestTick(h):r;c+=Pt(t,e,s,i,n),!t.completed&&u&&(u=!1)},a),!s&&c&&o.onRender(o),(u||a)&&o._currentTime>=o.duration&&(o.paused=!0,o.completed||(o.completed=!0,s||(o.onComplete(o),o._resolve(o))))}},Mt={},Vt=(t,e,s)=>{if(3===s)return f.get(t)||t;if(2===s||1===s&&Y(e)&&t in e.style){const e=Mt[t];if(e)return e;{const e=t?L(t):t;return Mt[t]=e,e}}return t},Ot=(t,e=!1)=>{if(t._hasChildren)_t(t,t=>Ot(t,e),!0);else{const s=t;s.pause(),_t(s,t=>{const i=t.property,r=t.target,n=t._tweenType,a=t._inlineValue,h=X(a)||a===p;if(t._setter){if(!e&&!h){if(It(a,Lt),Lt.d){const e=Lt.d,s=t._numbers;for(let t=0,i=e.length;t<i;t++)s[t]=e[t]}else t._number=Lt.n;t._setter(t.target,t._number,t)}}else if(0===n)e||h||(r[i]=a);else if(r[o])if(1===n)e||(h?r.removeAttribute(i):r.setAttribute(i,a));else{const e=r.style;if(3===n){const s=r[l];h?delete s[i]:s[i]=a,t._renderTransforms&&(Object.keys(s).length?e.transform=Tt(s):e.removeProperty("transform"))}else h?e.removeProperty(L(i)):e[i]=a}r[o]&&s._tail===t&&s.targets.forEach(t=>{t.getAttribute&&t.getAttribute("style")===p&&t.removeAttribute("style")})})}return t},zt=t=>Ot(t,!0);class Ht{constructor(t=0){this.deltaTime=0,this._currentTime=t,this._lastTickTime=t,this._startTime=t,this._lastTime=t,this._frameDuration=u/240,this._fps=240,this._speed=1,this._hasChildren=!1,this._head=null,this._tail=null}get fps(){return this._fps}set fps(t){const e=+t,s=e<d?d:e,i=u/s;s>D.frameRate&&(D.frameRate=s),this._fps=s,this._frameDuration=i}get speed(){return this._speed}set speed(t){const e=+t;this._speed=e<d?d:e}requestTick(t){const e=this._frameDuration,s=t-this._lastTickTime,i=.25*e;return s+(i<4?i:4)<e?0:(this._lastTickTime=s>=e?t-s%e:t,1)}computeDeltaTime(t){const e=t-this._lastTime;return this.deltaTime=e,this._lastTime=t,e}}const Xt={animation:null,update:_},Yt=(()=>e?requestAnimationFrame:setImmediate)(),Wt=(()=>e?cancelAnimationFrame:clearImmediate)();class Ut extends Ht{constructor(t){super(t),this.useDefaultMainLoop=!0,this.pauseOnDocumentHidden=!0,this.defaults=D,this.paused=!0,this.reqId=0}update(){const t=this._currentTime=P();if(this.requestTick(t)){this.computeDeltaTime(t);const e=this._speed,s=this._fps;let i=this._head;for(;i;){const r=i._next;i.paused?(bt(this,i),this._hasChildren=!!this._tail,i._running=!1,i.completed&&!i._cancelled&&i.cancel()):Ft(i,(t-i._startTime)*i._speed*e,0,0,i._fps<s?i.requestTick(t):1),i=r}Xt.update()}}wake(){return this.useDefaultMainLoop&&!this.reqId&&(this.requestTick(P()),this.reqId=Yt(jt)),this}pause(){if(this.reqId)return this.paused=!0,Gt()}resume(){if(this.paused)return this.paused=!1,_t(this,t=>t.resetTime()),this.wake()}get speed(){return this._speed*(1===I.timeScale?1:u)}set speed(t){const e=t*I.timeScale;this._speed!==e&&(this._speed=e,_t(this,t=>t.speed=t._speed))}get timeUnit(){return 1===I.timeScale?"ms":"s"}set timeUnit(t){const e="s"===t,s=e?.001:1;if(I.timeScale!==s){I.timeScale=s,I.tickThreshold=200*s;const t=e?.001:u;this.defaults.duration*=t,this._speed*=t}}get precision(){return I.precision}set precision(t){I.precision=t}}const qt=(()=>{const t=new Ut(P());return e&&(R.engine=t,i.addEventListener("visibilitychange",()=>{t.pauseOnDocumentHidden&&(i.hidden?t.pause():t.resume())})),t})(),jt=()=>{qt._head?(qt.reqId=Yt(jt),qt.update()):qt.reqId=0},Gt=()=>(Wt(qt.reqId),qt.reqId=0,qt),Zt={_rep:new WeakMap,_add:new Map},Qt=(t,e,s="_rep")=>{const i=Zt[s];let r=i.get(t);return r||(r={},i.set(t,r)),r[e]?r[e]:r[e]={_head:null,_tail:null}},Jt=(t,e)=>t._isOverridden||t._absoluteStartTime>e._absoluteStartTime,Kt=t=>{t._isOverlapped=1,t._isOverridden=1,t._changeDuration=d,t._currentTime=d},te=(t,e)=>{const s=t._composition;if(s===r.replace){const s=t._absoluteStartTime;vt(e,t,Jt,"_prevRep","_nextRep");const i=t._prevRep;if(i){const e=i.parent,r=i._absoluteEndTime;if(t.parent.id!==e.id&&e.iterationCount>1&&r+(e.duration-e.iterationDuration)>s){Kt(i);let t=i._prevRep;for(;t&&t.parent.id===e.id;)Kt(t),t=t._prevRep}const n=t._absoluteUpdateStartTime;if(r>n){const t=i._startTime,e=r-(t+i._updateDuration),s=ct(n-e-t,12);i._changeDuration=s,i._currentTime=s,i._isOverlapped=1,s<d&&Kt(i)}const o=t.parent.parent;if(!o||o!==e.parent){let t=!0;if(_t(e,e=>{e._isOverlapped||(t=!1)}),t){const t=e.parent;if(t){let s=!0;_t(t,t=>{t!==e&&_t(t,t=>{t._isOverlapped||(s=!1)})}),s&&t.cancel()}else e.cancel()}}}}else if(s===r.blend){const e=Qt(t.target,t.property,"_add"),s=(t=>{let e=Xt.animation;return e||(e={duration:d,computeDeltaTime:_,_offset:0,_delay:0,_head:null,_tail:null},Xt.animation=e,Xt.update=()=>{t.forEach(t=>{for(let e in t){const s=t[e],i=s._head;if(i){const t=i._valueType,e=3===t||2===t?gt(i._fromNumbers):null;let r=i._fromNumber,n=s._tail;for(;n&&n!==i;){if(e)for(let t=0,s=n._numbers.length;t<s;t++)e[t]+=n._numbers[t];else r+=n._number;n=n._prevAdd}i._toNumber=r,i._toNumbers=e}}}),Pt(e,1,1,0,2)}),e})(Zt._add);let i=e._head;i||(i={...t},i._composition=r.replace,i._updateDuration=d,i._startTime=0,i._numbers=gt(t._fromNumbers),i._number=0,i._next=null,i._prev=null,vt(e,i),vt(s,i));const n=t._toNumber;if(t._fromNumber=i._fromNumber-n,t._toNumber=0,t._numbers=gt(t._fromNumbers),t._number=0,i._fromNumber=n,t._toNumbers.length){const e=gt(t._toNumbers);e.forEach((e,s)=>{t._fromNumbers[s]=i._fromNumbers[s]-e,t._toNumbers[s]=0}),i._fromNumbers=e}vt(e,t,null,"_prevAdd","_nextAdd")}return t},ee=t=>{const e=t._composition;if(e!==r.none){const s=t.target,i=t.property,n=Zt._rep.get(s)[i];if(bt(n,t,"_prevRep","_nextRep"),e===r.blend){const e=Zt._add,r=e.get(s);if(!r)return;const n=r[i],o=Xt.animation;bt(n,t,"_prevAdd","_nextAdd");const a=n._head;if(a&&a===n._tail){bt(n,a,"_prevAdd","_nextAdd"),bt(o,a);let t=!0;for(let e in r)if(r[e]._head){t=!1;break}t&&e.delete(s)}}}return t},se=(t,e,s)=>{let i=!1;return _t(e,r=>{const n=r.target;if(t.includes(n)){const t=r.property,o=r._tweenType,a=Vt(s,n,o);(!a||a&&a===t)&&(r.parent._tail===r&&3===r._tweenType&&r._prev&&3===r._prev._tweenType&&(r._prev._renderTransforms=1),bt(e,r),ee(r),i=!0)}},!0),i},ie=(t,e,s)=>{const i=e||qt;let r;if(i._hasChildren){let e=0;_t(i,n=>{if(!n._hasChildren)if(r=se(t,n,s),r&&!n._head)n.cancel(),bt(i,n);else{const t=n._offset+n._delay+n.duration;t>e&&(e=t)}n._head?ie(t,n,s):n._hasChildren=!1},!0),H(i.iterationDuration)||(i.iterationDuration=e)}else r=se(t,i,s);r&&!i._head&&(i._hasChildren=!1,i.cancel&&i.cancel())},re=t=>(t.paused=!0,t.began=!1,t.completed=!1,t),ne=t=>t._cancelled?(t._hasChildren?_t(t,ne):_t(t,t=>{t._composition!==r.none&&te(t,Qt(t.target,t.property))}),t._cancelled=0,t):t;let oe=0;const ae=(t,e)=>t._priority>e._priority;class le extends Ht{constructor(t={},e=null,s=0){super(0),++oe;const{id:i,delay:r,duration:n,reversed:o,alternate:a,loop:l,loopDelay:h,autoplay:c,frameRate:u,playbackRate:p,priority:m,onComplete:f,onLoop:g,onPause:y,onBegin:b,onBeforeUpdate:v,onUpdate:T}=t;A.current&&A.current.register(this);const x=e?0:qt._lastTickTime,S=e?e.defaults:I.defaults,w=z(r)||H(r)?S.delay:+r,$=z(n)||H(n)?1/0:+n,C=$t(l,S.loop),E=$t(h,S.loopDelay);let k=!0===C||C===1/0||C<0?1/0:C+1,N=0;e?N=s:(qt.reqId||qt.requestTick(P()),N=(qt._lastTickTime-qt._startTime)*I.timeScale),this.id=H(i)?oe:i,this.parent=e,this.duration=mt(($+E)*k-E)||d,this.backwards=!1,this.paused=!0,this.began=!1,this.completed=!1,this.onBegin=b||S.onBegin,this.onBeforeUpdate=v||S.onBeforeUpdate,this.onUpdate=T||S.onUpdate,this.onLoop=g||S.onLoop,this.onPause=y||S.onPause,this.onComplete=f||S.onComplete,this.iterationDuration=$,this.iterationCount=k,this._autoplay=!e&&$t(c,S.autoplay),this._offset=N,this._delay=w,this._loopDelay=E,this._iterationTime=0,this._currentIteration=0,this._resolve=_,this._running=!1,this._reversed=+$t(o,S.reversed),this._reverse=this._reversed,this._cancelled=0,this._alternate=$t(a,S.alternate),this._prev=null,this._next=null,this._lastTickTime=x,this._startTime=x,this._lastTime=x,this._fps=$t(u,S.frameRate),this._speed=$t(p,S.playbackRate),this._priority=+$t(m,1)}get cancelled(){return!!this._cancelled}set cancelled(t){t?this.cancel():this.reset(!0).play()}get currentTime(){return dt(ct(this._currentTime,I.precision),-this._delay,this.duration)}set currentTime(t){const e=this.paused;this.pause().seek(+t),e||this.resume()}get iterationCurrentTime(){return dt(ct(this._iterationTime,I.precision),0,this.iterationDuration)}set iterationCurrentTime(t){this.currentTime=this.iterationDuration*this._currentIteration+t}get progress(){return dt(ct(this._currentTime/this.duration,10),0,1)}set progress(t){this.currentTime=this.duration*t}get iterationProgress(){return dt(ct(this._iterationTime/this.iterationDuration,10),0,1)}set iterationProgress(t){const e=this.iterationDuration;this.currentTime=e*this._currentIteration+e*t}get currentIteration(){return this._currentIteration}set currentIteration(t){this.currentTime=this.iterationDuration*dt(+t,0,this.iterationCount-1)}get reversed(){return!!this._reversed}set reversed(t){t?this.reverse():this.play()}get speed(){return super.speed}set speed(t){super.speed=t,this.resetTime()}reset(t=!1){return ne(this),this._reversed&&!this._reverse&&(this.reversed=!1),this._iterationTime=this.iterationDuration,Ft(this,0,1,~~t,2),re(this),this._hasChildren&&_t(this,re),this}init(t=!1){this.fps=this._fps,this.speed=this._speed,!t&&this._hasChildren&&Ft(this,this.duration,1,~~t,2),this.reset(t);const e=this._autoplay;return!0===e?this.resume():e&&!H(e.linked)&&e.link(this),this}resetTime(){const t=1/(this._speed*qt._speed);return this._startTime=P()-(this._currentTime+this._delay)*t,this}pause(){return this.paused||(this.paused=!0,this.onPause(this)),this}resume(){return this.paused?(this.paused=!1,this.duration<=d&&!this._hasChildren?Ft(this,d,0,0,2):(this._running||(vt(qt,this,ae),qt._hasChildren=!0,this._running=!0),this.resetTime(),this._startTime-=12,qt.wake()),this):this}restart(){return this.reset().resume()}seek(t,e=0,s=0){ne(this),this.completed=!1;const i=this.paused;return this.paused=!0,Ft(this,t+this._delay,~~e,~~s,1),i?this:this.resume()}alternate(){const t=this._reversed,e=this.iterationCount,s=this.iterationDuration,i=e===1/0?rt(c/s):e;return this._reversed=+(!this._alternate||i%2?!t:t),e===1/0?this.iterationProgress=this._reversed?1-this.iterationProgress:this.iterationProgress:this.seek(s*i-this._currentTime),this.resetTime(),this}play(){return this._reversed&&this.alternate(),this.resume()}reverse(){return this._reversed||this.alternate(),this.resume()}cancel(){return this._hasChildren?_t(this,t=>t.cancel(),!0):_t(this,ee),this._cancelled=1,this.pause()}stretch(t){const e=this.duration,s=ft(t);if(e===s)return this;const i=t/e,r=t<=d;return this.duration=r?d:s,this.iterationDuration=r?d:ft(this.iterationDuration*i),this._offset*=i,this._delay*=i,this._loopDelay*=i,this}revert(){Ft(this,0,1,0,1);const t=this._autoplay;return t&&t.linked&&t.linked===this&&t.revert(),this.cancel()}complete(t=0){return this.seek(this.duration,t).cancel()}then(t=_){const e=this.then,s=()=>{this.then=null,t(this),this.then=e,this._resolve=_};return new Promise(t=>(this._resolve=()=>t(s()),this.completed&&this._resolve(),this))}}function he(t){const e=O(t)?A.root.querySelectorAll(t):t;if(e instanceof NodeList||e instanceof HTMLCollection)return e}function de(t){if(X(t))return[];if(!e)return F(t)&&t.flat(1/0)||[t];if(F(t)){const e=t.flat(1/0),s=[];for(let t=0,i=e.length;t<i;t++){const i=e[t];if(!X(i)){const t=he(i);if(t)for(let e=0,i=t.length;e<i;e++){const i=t[e];if(!X(i)){let t=!1;for(let e=0,r=s.length;e<r;e++)if(s[e]===i){t=!0;break}t||s.push(i)}}else{let t=!1;for(let e=0,r=s.length;e<r;e++)if(s[e]===i){t=!0;break}t||s.push(i)}}}return s}const s=he(t);return s?Array.from(s):[t]}function ce(t){const e=de(t),s=e.length;for(let t=0;t<s;t++){const s=e[t];if(!s[n]){s[n]=!0;const t=Y(s);(s.nodeType||t)&&(s[o]=!0,s[a]=t,s[l]={})}}return e}const ue={deg:1,rad:180/lt,turn:360},pe={},me=(t,e,s,r=!1)=>{const n=e.u,o=e.n;if(1===e.t&&n===s)return e;const a=o+n+s,l=pe[a];if(H(l)||r){let r;if(n in ue)r=o*ue[n]/ue[s];else{const e=100,a=t.cloneNode(),l=t.parentNode,h=l&&l!==i?l:i.body;h.appendChild(a);const d=a.style;d.width=e+n;const c=a.offsetWidth||e;d.width=e+s;const u=c/(a.offsetWidth||e);h.removeChild(a),r=u*o}e.n=r,pe[a]=r}else e.n=l;return e.t,e.u=s,e},fe=t=>t,ge=(t=1.68)=>e=>Q(e,+t),ye={in:t=>e=>t(e),out:t=>e=>1-t(1-e),inOut:t=>e=>e<.5?t(2*e)/2:1-t(-2*e+2)/2,outIn:t=>e=>e<.5?(1-t(1-2*e))/2:(t(2*e-1)+1)/2},_e=lt/2,be=2*lt,ve={[p]:ge,Quad:ge(2),Cubic:ge(3),Quart:ge(4),Quint:ge(5),Sine:t=>1-tt(t*_e),Circ:t=>1-J(1-t*t),Expo:t=>t?Q(2,10*t-10):0,Bounce:t=>{let e,s=4;for(;t<((e=Q(2,--s))-1)/11;);return 1/Q(4,3-s)-7.5625*Q((3*e-2)/22-t,2)},Back:(t=1.7)=>e=>(+t+1)*e*e*e-+t*e*e,Elastic:(t=1,e=.3)=>{const s=dt(+t,1,10),i=dt(+e,d,2),r=i/be*nt(1/s),n=be/i;return t=>0===t||1===t?t:-s*Q(2,-10*(1-t))*K((1-t-r)*n)}},Te=(()=>{const t={linear:fe,none:fe};for(let e in ye)for(let s in ve){const i=ve[s],r=ye[e];t[e+s]=s===p||"Back"===s||"Elastic"===s?(t,e)=>r(i(t,e)):r(i)}return t})(),xe={linear:fe,none:fe},Se=t=>{if(xe[t])return xe[t];if(t.indexOf("(")<=-1){const e=ye[t]||t.includes("Back")||t.includes("Elastic")?Te[t]():Te[t];return e?xe[t]=e:fe}{const e=t.slice(0,-1).split("("),s=Te[e[0]];return s?xe[t]=s(...e[1].split(",")):fe}},we=["steps(","irregular(","linear(","cubicBezier("],$e=t=>{if(O(t))for(let e=0,s=we.length;e<s;e++)if(B(t,we[e]))return console.warn(`String syntax for \`ease: "${t}"\` has been removed from the core and replaced by importing and passing the easing function directly: \`ease: ${t}\``),fe;return z(t)?t:O(t)?Se(t):fe},Ce={t:0,n:0,u:null,o:null,d:null,s:null},Ee={t:0,n:0,u:null,o:null,d:null,s:null},ke={},Ne={func:null},De={func:null},Ae=[null],Ie=[null,null],Re={to:null};let Le,Be,Pe=0,Fe=0;class Me extends le{constructor(t,e,s,i,n=!1,o=0,a){super(e,s,i),this._head,this._tail,++Fe;const l=ce(t),h=l.length,c=e.keyframes,p=c?yt(((t,e)=>{const s={};if(F(t)){const e=[].concat(...t.map(t=>Object.keys(t))).filter(j);for(let i=0,r=e.length;i<r;i++){const r=e[i],n=t.map(t=>{const e={};for(let s in t){const i=t[s];j(s)?s===r&&(e.to=i):e[s]=i}return e});s[r]=n}}else{const i=$t(e.duration,I.defaults.duration),r=Object.keys(t).map(e=>({o:parseFloat(e)/100,p:t[e]})).sort((t,e)=>t.o-e.o);r.forEach(t=>{const e=t.o,r=t.p;for(let t in r)if(j(t)){let n=s[t];n||(n=s[t]=[]);const o=e*i;let a=n.length,l=n[a-1];const h={to:r[t]};let d=0;for(let t=0;t<a;t++)d+=n[t].duration;1===a&&(h.from=l.to),r.ease&&(h.ease=r.ease),h.duration=o-(a?d:0),n.push(h)}return t});for(let t in s){const e=s[t];let i;for(let t=0,s=e.length;t<s;t++){const s=e[t],r=s.ease;s.ease=i||void 0,i=r}e[0].duration||e.shift()}}return s})(c,e),e):e,{id:f,delay:g,duration:y,ease:_,playbackEase:b,modifier:v,composition:T,onRender:x}=p,S=s?s.defaults:I.defaults,w=$t(_,S.ease),$=$t(b,S.playbackEase),C=$?$e($):null,E=!H(w.ease),k=E?w.ease:$t(_,C?"linear":S.ease),N=E?w.settlingDuration:$t(y,S.duration),D=$t(g,S.delay),A=v||S.modifier,R=H(T)&&h>=u?r.none:H(T)?S.composition:T,L=this._offset+(s?s._offset:0);E&&(w.parent=this);let B=NaN,P=NaN,Y=0,W=0;for(let t=0;t<h;t++){const e=l[t],i=o||t,h=a||l;let c=NaN,u=NaN;for(let t in p)if(j(t)){const o=kt(e,t),a=St(e,t),l=Vt(t,e,o);let f=p[t];const g=F(f);if(n&&!g&&(Ie[0]=f,Ie[1]=f,f=Ie),g){const t=f.length,e=!M(f[0]);2===t&&e?(Re.to=f,Ae[0]=Re,Le=Ae):t>2&&e?(Le=[],f.forEach((t,e)=>{e?1===e?(Ie[1]=t,Le.push(Ie)):Le.push(t):Ie[0]=t})):Le=f}else Ae[0]=f,Le=Ae;let y=null,_=null,b=NaN,v=0,T=0;for(let t=Le.length;T<t;T++){const n=Le[T];M(n)?Be=n:(Re.to=n,Be=Re),Ne.func=null,De.func=null;const c=Et($t(Be.composition,R),e,i,h,null,null),u=V(c)?c:r[c];y||u===r.none||(y=Qt(e,l));const p=y?y._tail:null,f=s&&p&&p.parent.parent===s?p:_,g=Et(Be.to,e,i,h,Ne,f);let x;M(g)&&!H(g.to)?(Be=g,x=g.to):x=g;const S=Et(Be.from,e,i,h,De,f),w=Be.ease||k,$=Et(w,e,i,h,null,f),C=z($)||O($)?$:w,E=!H(C)&&!H(C.ease),I=E?C.ease:C,B=E?C.settlingDuration:Et($t(Be.duration,t>1?Et(N,e,i,h,null,f)/t:N),e,i,h,null,f),P=Et($t(Be.delay,T?0:D),e,i,h,null,f),U=Be.modifier||A,q=!H(S),j=!H(x),G=F(x),Z=G||q&&j,Q=_?v:0,J=_?v+P:P,K=ct(L+J,12),tt=ct(L+Q,12);W||!q&&!G||(W=1);let et=_;if(u!==r.none){let t=y._head;for(;t&&t._absoluteStartTime<=K;)if(t._isOverridden||(et=t),t=t._nextRep,t&&t._absoluteStartTime>=K)for(;t;)Kt(t),t=t._nextRep}if(Z){It(G?Et(x[0],e,i,h,De,f):S,Ce),It(G?Et(x[1],e,i,h,Ne,f):x,Ee);const t=Dt(e,l,o,ke);0===Ce.t&&(et?1===et._valueType&&(Ce.t=1,Ce.u=et._unit):(It(t,Lt),1===Lt.t&&(Ce.t=1,Ce.u=Lt.u)))}else j?It(x,Ee):_?Rt(_,Ee):It(s&&et&&et.parent.parent===s?et._value:Dt(e,l,o,ke),Ee),q?It(S,Ce):_?Rt(_,Ce):It(s&&et&&et.parent.parent===s?et._value:Dt(e,l,o,ke),Ce);if(Ce.o&&(Ce.n=At(et?et._toNumber:It(Dt(e,l,o,ke),Lt).n,Ce.n,Ce.o)),Ee.o&&(Ee.n=At(Ce.n,Ee.n,Ee.o)),Ce.t!==Ee.t)if(3===Ce.t||3===Ee.t){const t=3===Ce.t?Ce:Ee,e=3===Ce.t?Ee:Ce;e.t=3,e.s=gt(t.s),e.d=t.d.map(()=>e.n)}else if(1===Ce.t||1===Ee.t){const t=1===Ce.t?Ce:Ee,e=1===Ce.t?Ee:Ce;e.t=1,e.u=t.u}else if(2===Ce.t||2===Ee.t){const t=2===Ce.t?Ce:Ee,e=2===Ce.t?Ee:Ce;e.t=2,e.d=t.d.map(()=>0)}if(Ce.u!==Ee.u){let t=Ee.u?Ce:Ee;t=me(e,t,Ee.u?Ee.u:Ce.u,!1)}if(Ee.d&&Ce.d&&Ee.d.length!==Ce.d.length){const t=Ce.d.length>Ee.d.length?Ce:Ee,e=t===Ce?Ee:Ce;e.d=t.d.map((t,s)=>H(e.d[s])?0:e.d[s]),e.s=gt(t.s)}const st=ct(+B||d,12);let it=ke[l];X(it)||(ke[l]=null);const rt=a?a.set:null;v=ct(J+st,12);const nt=Ce.d,ot=Ee.d,at=Ee.s,lt={parent:this,id:Pe++,property:l,target:e,_value:null,_toFunc:Ne.func,_fromFunc:De.func,_ease:$e(I),_fromNumbers:nt?gt(nt):m,_toNumbers:ot?gt(ot):m,_strings:at?gt(at):m,_fromNumber:Ce.n,_toNumber:Ee.n,_numbers:nt?gt(nt):m,_number:Ce.n,_unit:Ee.u,_modifier:U,_currentTime:0,_startTime:J,_delay:+P,_updateDuration:st,_changeDuration:st,_absoluteStartTime:K,_absoluteUpdateStartTime:tt,_absoluteEndTime:ct(L+v,12),_hasFromValue:q||G?1:0,_tweenType:o,_setter:rt,_valueType:Ee.t,_composition:u,_isOverlapped:0,_isOverridden:0,_renderTransforms:0,_inlineValue:it,_prevRep:null,_nextRep:null,_prevAdd:null,_nextAdd:null,_prev:null,_next:null};u!==r.none&&te(lt,y);const ht=lt._valueType;if(3===ht)lt._value=Bt(lt,1,-1);else if(1===ht)lt._value=`${U(lt._toNumber)}${lt._unit}`;else if(2===ht){const t=Ee.d;lt._value=`rgba(${ct(t[0],0)},${ct(t[1],0)},${ct(t[2],0)},${t[3]})`}else lt._value=U(lt._toNumber);isNaN(b)&&(b=lt._startTime),_=lt,Y++,vt(this,lt)}(isNaN(P)||b<P)&&(P=b),(isNaN(B)||v>B)&&(B=v),3===o&&(c=Y-T,u=Y)}if(!isNaN(c)){let t=0;_t(this,e=>{t>=c&&t<u&&(e._renderTransforms=1,e._composition===r.blend&&_t(Xt.animation,t=>{t.id===e.id&&(t._renderTransforms=1)})),t++})}}h||console.warn("No target found. Make sure the element you're trying to animate is accessible before creating your animation."),P?(_t(this,t=>{t._startTime-t._delay||(t._delay-=P),t._startTime-=P}),B-=P):P=0,B||(B=d,this.iterationCount=0),this.targets=l,this.id=H(f)?Fe:f,this.duration=B===d?d:mt((B+this._loopDelay)*this.iterationCount-this._loopDelay)||d,this.onRender=x||S.onRender,this._ease=C,this._delay=P,this.iterationDuration=B,!this._autoplay&&W&&this.onRender(this)}stretch(t){const e=this.duration;if(e===ft(t))return this;const s=t/e;return _t(this,t=>{t._updateDuration=ft(t._updateDuration*s),t._changeDuration=ft(t._changeDuration*s),t._currentTime*=s,t._delay*=s,t._startTime*=s,t._absoluteStartTime*=s,t._absoluteUpdateStartTime*=s,t._absoluteEndTime*=s}),super.stretch(t)}refresh(){return _t(this,t=>{const e=t._toFunc,s=t._fromFunc;(e||s)&&(s?(It(s(),Ce),Ce.u!==t._unit&&t.target[o]&&me(t.target,Ce,t._unit,!0),t._fromNumbers=gt(Ce.d),t._fromNumber=Ce.n):e&&(It(Dt(t.target,t.property,t._tweenType),Lt),t._fromNumbers=gt(Lt.d),t._fromNumber=Lt.n),e&&(It(e(),Ee),t._toNumbers=gt(Ee.d),t._strings=gt(Ee.s),t._toNumber=Ee.o?At(t._fromNumber,Ee.n,Ee.o):Ee.n))}),this.duration===d&&this.restart(),this}revert(){return super.revert(),Ot(this)}then(t){return super.then(t)}}const Ve=(t,e)=>{let s=t.iterationDuration;if(s===d&&(s=0),H(e))return s;if(V(+e))return+e;const i=e,r=t?t.labels:null,n=!X(r),o=((t,e)=>{if(B(e,"<")){const s="<"===e[1],i=t._tail,r=i?i._offset+i._delay:0;return s?r:r+i.duration}})(t,i),a=!H(o),l=k.exec(i);if(l){const t=l[0],e=i.split(t),h=n&&e[0]?r[e[0]]:s,d=a?o:n?h:s,c=+e[1];return At(d,c,t[0])}return a?o:n?H(r[i])?s:r[i]:s};function Oe(t,e,s,i,r,n){const o=V(t.duration)&&t.duration<=d?s-d:s;e.composition&&Ft(e,o,1,1,1);const a=i?new Me(i,t,e,o,!1,r,n):new le(t,e,o);return e.composition&&a.init(!0),vt(e,a),_t(e,t=>{const s=t._offset+t._delay+t.duration;s>e.iterationDuration&&(e.iterationDuration=s)}),e.duration=function(t){return mt((t.iterationDuration+t._loopDelay)*t.iterationCount-t._loopDelay)||d}(e),e}let ze=0;class He extends le{constructor(t={}){super(t,null,0),++ze,this.id=H(t.id)?ze:t.id,this.duration=0,this.labels={};const e=t.defaults,s=I.defaults;this.defaults=e?yt(e,s):s,this.composition=$t(t.composition,!0),this.onRender=t.onRender||s.onRender;const i=$t(t.playbackEase,s.playbackEase);this._ease=i?$e(i):null,this.iterationDuration=0}add(t,e,s){const i=M(e),r=M(t);if(i||r){if(this._hasChildren=!0,i){const i=e,r=I.editor&&I.editor.addTimelineChild,n=s&&"Stagger"===s.type&&I.editor,o=z(s)?s:null;if(o||n){const e=de(t),n=this.duration,a=this.iterationDuration,l=i.id;let h=0;const d=e.length,c=r?r(t,i,this.id,s,d):null,u=o||I.editor.resolveStagger(s.defaultValue);e.forEach(t=>{const s={...c||i};this.duration=n,this.iterationDuration=a,H(l)||(s.id=l+"-"+h),Oe(s,this,Ve(this,u(t,h,e,null,this)),t,h,e),h++})}else{const e=r?r(t,i,this.id,s):i,n=s&&s.type?s.defaultValue:s;Oe(e,this,Ve(this,n),t)}}else Oe(t,this,Ve(this,e));return this.composition&&this.init(!0),this}}sync(t,e){if(H(t)||t&&H(t.pause))return this;t.pause();const s=+(t.effect?t.effect.getTiming().duration:t.duration);H(t)||H(t.persist)||(t.persist=!0);const i=I.editor,r=i&&i.addTimelineChild;i&&i.addTimelineSync&&(e=i.addTimelineSync(t,e,this.id),i.addTimelineChild=null);const n=this.add(t,{currentTime:[0,s],duration:s,delay:0,ease:"linear",playbackEase:"linear"},e);return i&&(i.addTimelineChild=r),n}set(t,e,s){return H(e)?this:(e.duration=d,e.composition=r.replace,this.add(t,e,s))}call(t,e){return H(t)||t&&!z(t)?this:(I.editor&&I.editor.addTimelineCall&&(e=I.editor.addTimelineCall(t,e,this.id)),this.add({duration:0,delay:0,onComplete:()=>t(this)},e))}label(t,e){return H(t)||t&&!O(t)||(I.editor&&I.editor.addTimelineLabel&&(e=I.editor.addTimelineLabel(t,e,this.id)),this.labels[t]=Ve(this,e)),this}remove(t,e){return ie(de(t),this,e),this}stretch(t){const e=this.duration;if(e===ft(t))return this;const s=t/e,i=this.labels;_t(this,t=>t.stretch(t.duration*s));for(let t in i)i[t]*=s;return super.stretch(t)}refresh(){return _t(this,t=>{t.refresh&&t.refresh()}),this}revert(){return super.revert(),_t(this,t=>t.revert,!0),Ot(this)}then(t){return super.then(t)}}const Xe=t=>I.editor?I.editor.addTimeline(t):new He(t).init();class Ye{constructor(t,e){A.current&&A.current.register(this);const s=()=>{if(this.callbacks.completed)return;let t=!0;for(let e in this.animations)if(!this.animations[e].paused&&t){t=!1;break}t&&this.callbacks.complete()},i={onBegin:()=>{this.callbacks.completed&&this.callbacks.reset(),this.callbacks.play()},onComplete:s,onPause:s},n={v:1,autoplay:!1},o={};if(this.targets=[],this.animations={},this.callbacks=null,!H(t)&&!H(e)){for(let t in e){const s=e[t];j(t)?o[t]=s:B(t,"on")?n[t]=s:i[t]=s}this.callbacks=new Me({v:0},n);for(let e in o){const s=o[e],n=M(s);let a={},l="+=0";if(n){const t=s.unit;O(t)&&(l+=t)}else a.duration=s;a[e]=n?yt({to:l},s):l;const h=yt(i,a);h.composition=r.replace,h.autoplay=!1;const d=this.animations[e]=new Me(t,h,null,0,!1).init();this.targets.length||this.targets.push(...d.targets),this[e]=(t,e,s)=>{const i=d._head;if(H(t)&&i){const t=i._numbers;return t&&t.length?t:i._modifier(i._number)}return _t(d,e=>{if(F(t))for(let s=0,i=t.length;s<i;s++)H(e._numbers[s])||(e._fromNumbers[s]=e._modifier(e._numbers[s]),e._toNumbers[s]=t[s]);else e._fromNumber=e._modifier(e._number),e._toNumber=t;H(s)||(e._ease=$e(s)),e._currentTime=0}),H(e)||d.stretch(e),d.reset(!0).resume(),this}}}}revert(){for(let t in this.animations)this[t]=_,this.animations[t].revert();return this.animations={},this.targets.length=0,this.callbacks&&this.callbacks.revert(),this}}const We=(t,e,s,i,r)=>i+(t-e)/(s-e)*(r-i);var Ue=Object.freeze({__proto__:null,clamp:dt,damp:(t,e,s,i)=>i?1===i?e:pt(t,e,1-Math.exp(-i*s*.1)):t,degToRad:t=>t*Math.PI/180,lerp:pt,mapRange:We,padEnd:(t,e,s)=>`${t}`.padEnd(e,s),padStart:(t,e,s)=>`${t}`.padStart(e,s),radToDeg:t=>180*t/Math.PI,round:ct,roundPad:(t,e)=>(+t).toFixed(e),snap:ut,wrap:(t,e,s)=>((t-e)%(s-e)+(s-e))%(s-e)+e});const qe=10*u;class je{constructor(t={}){const e=!H(t.bounce)||!H(t.duration);this.timeStep=.02,this.restThreshold=5e-4,this.restDuration=200,this.maxDuration=6e4,this.maxRestSteps=this.restDuration/this.timeStep/u,this.maxIterations=this.maxDuration/this.timeStep/u,this.bn=dt($t(t.bounce,.5),-1,1),this.pd=dt($t(t.duration,628),10*I.timeScale,qe*I.timeScale),this.m=dt($t(t.mass,1),1,qe),this.s=dt($t(t.stiffness,100),d,qe),this.d=dt($t(t.damping,10),d,qe),this.v=dt($t(t.velocity,0),-1e4,qe),this.w0=0,this.zeta=0,this.wd=0,this.b=0,this.completed=!1,this.solverDuration=0,this.settlingDuration=0,this.parent=null,this.onComplete=t.onComplete||_,e&&this.calculateSDFromBD(),this.compute(),this.ease=t=>{const e=t*this.settlingDuration,s=this.completed,i=this.pd;return e>=i&&!s&&(this.completed=!0,this.onComplete(this.parent)),e<i&&s&&(this.completed=!1),0===t||1===t?t:this.solve(t*this.solverDuration)}}solve(t){const{zeta:e,w0:s,wd:i,b:r}=this;let n=t;return n=e<1?st(-n*e*s)*(1*tt(i*n)+r*K(i*n)):1===e?(1+r*n)*st(-n*s):((1+r)*st((-e*s+i)*n)+(1-r)*st((-e*s-i)*n))/2,1-n}calculateSDFromBD(){const t=1===I.timeScale?this.pd/u:this.pd;this.m=1,this.v=0,this.s=Q(2*lt/t,2),this.bn>=0?this.d=4*(1-this.bn)*lt/t:this.d=4*lt/(t*(1+this.bn)),this.s=ct(dt(this.s,d,qe),3),this.d=ct(dt(this.d,d,300),3)}calculateBDFromSD(){const t=2*lt/J(this.s);this.pd=t*(1===I.timeScale?u:1);const e=this.d/(2*J(this.s));this.bn=e<=1?1-this.d*t/(4*lt):4*lt/(this.d*t)-1,this.bn=ct(dt(this.bn,-1,1),3),this.pd=ct(dt(this.pd,10*I.timeScale,qe*I.timeScale),3)}compute(){const{maxRestSteps:t,maxIterations:e,restThreshold:s,timeStep:i,m:r,d:n,s:o,v:a}=this,l=this.w0=dt(J(o/r),d,u),h=this.zeta=n/(2*J(o*r));h<1?(this.wd=l*J(1-h*h),this.b=(h*l-a)/this.wd):1===h?(this.wd=0,this.b=-a+l):(this.wd=l*J(h*h-1),this.b=(h*l-a)/this.wd);let c=0,p=0,m=0;for(;p<=t&&m<=e;)et(1-this.solve(c))<s?p++:p=0,this.solverDuration=c,c+=i,m++;this.settlingDuration=ct(this.solverDuration*u,0)*I.timeScale}get bounce(){return this.bn}set bounce(t){this.bn=dt($t(t,1),-1,1),this.calculateSDFromBD(),this.compute()}get duration(){return this.pd}set duration(t){this.pd=dt($t(t,1),10*I.timeScale,qe*I.timeScale),this.calculateSDFromBD(),this.compute()}get stiffness(){return this.s}set stiffness(t){this.s=dt($t(t,100),d,qe),this.calculateBDFromSD(),this.compute()}get damping(){return this.d}set damping(t){this.d=dt($t(t,10),d,qe),this.calculateBDFromSD(),this.compute()}get mass(){return this.m}set mass(t){this.m=dt($t(t,1),1,qe),this.compute()}get velocity(){return this.v}set velocity(t){this.v=dt($t(t,0),-1e4,qe),this.compute()}}const Ge=t=>new je(t),Ze=t=>(console.warn("createSpring() is deprecated use spring() instead"),new je(t)),Qe={_head:null,_tail:null},Je=(t,e,s)=>{let i,r=Qe._head;for(;r;){const n=r._next,o=r.$el===t,a=!e||r.property===e,l=!s||r.parent===s;if(o&&a&&l){i=r.animation;try{i.commitStyles()}catch{}i.cancel(),bt(Qe,r);const t=r.parent;t&&(t._completed++,t.animations.length===t._completed&&(t.completed=!0,t.paused=!0,t.muteCallbacks||(t.onComplete(t),t._resolve(t))))}r=n}return i},Ke=(t,e,s,i,r)=>{const n=e.animate(i,r),o=r.delay+ +r.duration*r.iterations;n.playbackRate=t._speed,t.paused&&n.pause(),t.duration<o&&(t.duration=o,t.controlAnimation=n),t.animations.push(n),Je(e,s),vt(Qe,{parent:t,animation:n,$el:e,property:s,_next:null,_prev:null});const a=()=>Je(e,s,t);return n.oncancel=a,n.onremove=a,t.persist||(n.onfinish=a),n};function ts(t,e,s){const i=ce(t);if(!i.length)return;const[r]=i,n=kt(r,e),o=Vt(e,r,n);let a=Dt(r,o);if(H(s))return a;if(It(a,Lt),0===Lt.t||1===Lt.t){if(!1===s)return Lt.n;{const t=me(r,Lt,s,!1);return`${ct(t.n,I.precision)}${t.u}`}}}const es=(t,e)=>{if(!H(e))return I.editor&&I.editor.addSet?I.editor.addSet(t,e):(e.duration=d,e.composition=$t(e.composition,r.none),new Me(t,e,null,0,!0).resume())},ss=(t,e,s)=>{const i=de(t);for(let t=0,r=i.length;t<r;t++)Je(i[t],s,e&&e.controlAnimation&&e);return ie(i,e,s),i},is=t=>{t.cancelable&&t.preventDefault()};class rs{constructor(t){this.el=t,this.zIndex=0,this.parentElement=null,this.classList={add:_,remove:_}}get x(){return this.el.x||0}set x(t){this.el.x=t}get y(){return this.el.y||0}set y(t){this.el.y=t}get width(){return this.el.width||0}set width(t){this.el.width=t}get height(){return this.el.height||0}set height(t){this.el.height=t}getBoundingClientRect(){return{top:this.y,right:this.x,bottom:this.y+this.height,left:this.x+this.width}}}class ns{constructor(t){this.$el=t,this.inlineTransforms=[],this.point=new DOMPoint,this.inversedMatrix=this.getMatrix().inverse()}normalizePoint(t,e){return this.point.x=t,this.point.y=e,this.point.matrixTransform(this.inversedMatrix)}traverseUp(t){let e=this.$el.parentElement,s=0;for(;e&&e!==i;)t(e,s),e=e.parentElement,s++}getMatrix(){const t=new DOMMatrix;return this.traverseUp(e=>{const s=getComputedStyle(e).transform;if(s){const e=new DOMMatrix(s);t.preMultiplySelf(e)}}),t}remove(){this.traverseUp((t,e)=>{this.inlineTransforms[e]=t.style.transform,t.style.transform="none"})}revert(){this.traverseUp((t,e)=>{const s=this.inlineTransforms[e];""===s?t.style.removeProperty("transform"):t.style.transform=s})}}const os=(t,e)=>t&&z(t)?t(e):t;let as=0;class ls{constructor(t,e={}){if(!t)return;A.current&&A.current.register(this);const r=e.x,n=e.y,o=e.trigger,a=e.modifier,l=e.releaseEase,h=l&&$e(l),d=!H(l)&&!H(l.ease),u=M(r)&&!H(r.mapTo)?r.mapTo:"translateX",p=M(n)&&!H(n.mapTo)?n.mapTo:"translateY",m=os(e.container,this);this.containerArray=F(m)?m:null,this.$container=m&&!this.containerArray?de(m)[0]:i.body,this.useWin=this.$container===i.body,this.$scrollContainer=this.useWin?s:this.$container,this.$target=M(t)?new rs(t):de(t)[0],this.$trigger=de(o||t)[0],this.fixed="fixed"===ts(this.$target,"position"),this.isFinePointer=!0,this.containerPadding=[0,0,0,0],this.containerFriction=0,this.releaseContainerFriction=0,this.snapX=0,this.snapY=0,this.scrollSpeed=0,this.scrollThreshold=0,this.dragSpeed=0,this.dragThreshold=3,this.maxVelocity=0,this.minVelocity=0,this.velocityMultiplier=0,this.cursor=!1,this.releaseXSpring=d?l:Ge({mass:$t(e.releaseMass,1),stiffness:$t(e.releaseStiffness,80),damping:$t(e.releaseDamping,20)}),this.releaseYSpring=d?l:Ge({mass:$t(e.releaseMass,1),stiffness:$t(e.releaseStiffness,80),damping:$t(e.releaseDamping,20)}),this.releaseEase=h||Te.outQuint,this.hasReleaseSpring=d,this.onGrab=e.onGrab||_,this.onDrag=e.onDrag||_,this.onRelease=e.onRelease||_,this.onUpdate=e.onUpdate||_,this.onSettle=e.onSettle||_,this.onSnap=e.onSnap||_,this.onResize=e.onResize||_,this.onAfterResize=e.onAfterResize||_,this.disabled=[0,0];const f={};if(a&&(f.modifier=a),H(r)||!0===r)f[u]=0;else if(M(r)){const t=r,e={};t.modifier&&(e.modifier=t.modifier),t.composition&&(e.composition=t.composition),f[u]=e}else!1===r&&(f[u]=0,this.disabled[0]=1);if(H(n)||!0===n)f[p]=0;else if(M(n)){const t=n,e={};t.modifier&&(e.modifier=t.modifier),t.composition&&(e.composition=t.composition),f[p]=e}else!1===n&&(f[p]=0,this.disabled[1]=1);this.animate=new Ye(this.$target,f),this.xProp=u,this.yProp=p,this.destX=0,this.destY=0,this.deltaX=0,this.deltaY=0,this.scroll={x:0,y:0},this.coords=[this.x,this.y,0,0],this.snapped=[0,0],this.pointer=[0,0,0,0,0,0,0,0],this.scrollView=[0,0],this.dragArea=[0,0,0,0],this.containerBounds=[-c,c,c,-c],this.scrollBounds=[0,0,0,0],this.targetBounds=[0,0,0,0],this.window=[0,0],this.velocityStack=[0,0,0],this.velocityStackIndex=0,this.velocityTime=P(),this.velocity=0,this.angle=0,this.cursorStyles=null,this.triggerStyles=null,this.bodyStyles=null,this.targetStyles=null,this.touchActionStyles=null,this.transforms=new ns(this.$target),this.overshootCoords={x:0,y:0},this.overshootTicker=new le({autoplay:!1,onUpdate:()=>{this.updated=!0,this.manual=!0,this.disabled[0]||this.animate[this.xProp](this.overshootCoords.x,1),this.disabled[1]||this.animate[this.yProp](this.overshootCoords.y,1)},onComplete:()=>{this.manual=!1,this.disabled[0]||this.animate[this.xProp](this.overshootCoords.x,0),this.disabled[1]||this.animate[this.yProp](this.overshootCoords.y,0)}},null,0).init(),this.updateTicker=new le({autoplay:!1,onUpdate:()=>this.update()},null,0).init(),this.contained=!H(m),this.manual=!1,this.grabbed=!1,this.dragged=!1,this.updated=!1,this.released=!1,this.canScroll=!1,this.enabled=!1,this.initialized=!1,this.activeProp=this.disabled[1]?u:p,this.animate.callbacks.onRender=()=>{const t=this.updated,e=!(this.grabbed&&t)&&this.released,s=this.x,i=this.y,r=s-this.coords[2],n=i-this.coords[3];this.deltaX=r,this.deltaY=n,this.coords[2]=s,this.coords[3]=i,t&&(r||n)&&this.onUpdate(this),e?(this.computeVelocity(r,n),this.angle=at(n,r)):this.updated=!1},this.animate.callbacks.onComplete=()=>{!this.grabbed&&this.released&&(this.released=!1),this.manual||(this.deltaX=0,this.deltaY=0,this.velocity=0,this.velocityStack[0]=0,this.velocityStack[1]=0,this.velocityStack[2]=0,this.velocityStackIndex=0,this.onSettle(this))},this.resizeTicker=new le({autoplay:!1,duration:150*I.timeScale,onComplete:()=>{this.onResize(this),this.refresh(),this.onAfterResize(this)}}).init(),this.parameters=e,this.resizeObserver=new ResizeObserver(()=>{this.initialized?this.resizeTicker.restart():this.initialized=!0}),this.enable(),this.refresh(),this.resizeObserver.observe(this.$container),M(t)||this.resizeObserver.observe(this.$target)}computeVelocity(t,e){const s=this.velocityTime,i=P(),r=i-s;if(r<17)return this.velocity;this.velocityTime=i;const n=this.velocityStack,o=this.velocityMultiplier,a=this.minVelocity,l=this.maxVelocity,h=this.velocityStackIndex;n[h]=ct(dt(J(t*t+e*e)/r*o,a,l),5);const d=ot(n[0],n[1],n[2]);return this.velocity=d,this.velocityStackIndex=(h+1)%3,d}setX(t,e=!1){if(this.disabled[0])return;const s=ct(t,5);return this.overshootTicker.pause(),this.manual=!0,this.updated=!e,this.destX=s,this.snapped[0]=ut(s,this.snapX),this.animate[this.xProp](s,0),this.manual=!1,this}setY(t,e=!1){if(this.disabled[1])return;const s=ct(t,5);return this.overshootTicker.pause(),this.manual=!0,this.updated=!e,this.destY=s,this.snapped[1]=ut(s,this.snapY),this.animate[this.yProp](s,0),this.manual=!1,this}get x(){return ct(this.animate[this.xProp](),I.precision)}set x(t){this.setX(t,!1)}get y(){return ct(this.animate[this.yProp](),I.precision)}set y(t){this.setY(t,!1)}get progressX(){return We(this.x,this.containerBounds[3],this.containerBounds[1],0,1)}set progressX(t){this.setX(We(t,0,1,this.containerBounds[3],this.containerBounds[1]),!1)}get progressY(){return We(this.y,this.containerBounds[0],this.containerBounds[2],0,1)}set progressY(t){this.setY(We(t,0,1,this.containerBounds[0],this.containerBounds[2]),!1)}updateScrollCoords(){const t=ct(this.useWin?s.scrollX:this.$container.scrollLeft,0),e=ct(this.useWin?s.scrollY:this.$container.scrollTop,0),[i,r,n,o]=this.containerPadding,a=this.scrollThreshold;this.scroll.x=t,this.scroll.y=e,this.scrollBounds[0]=e-this.targetBounds[0]+i-a,this.scrollBounds[1]=t-this.targetBounds[1]-r+a,this.scrollBounds[2]=e-this.targetBounds[2]-n+a,this.scrollBounds[3]=t-this.targetBounds[3]+o-a}updateBoundingValues(){const t=this.$container;if(!t)return;const e=this.x,r=this.y,n=this.coords[2],o=this.coords[3];this.coords[2]=0,this.coords[3]=0,this.setX(0,!0),this.setY(0,!0),this.transforms.remove();const a=this.window[0]=s.innerWidth,l=this.window[1]=s.innerHeight,h=this.useWin,d=t.scrollWidth,c=t.scrollHeight,u=this.fixed,p=t.getBoundingClientRect(),[m,f,g,y]=this.containerPadding;this.dragArea[0]=h?0:p.left,this.dragArea[1]=h?0:p.top,this.scrollView[0]=h?dt(d,a,d):d,this.scrollView[1]=h?dt(c,l,c):c,this.updateScrollCoords();const{width:_,height:b,left:v,top:T,right:x,bottom:S}=t.getBoundingClientRect();this.dragArea[2]=ct(h?dt(_,a,a):_,0),this.dragArea[3]=ct(h?dt(b,l,l):b,0);const w=ts(t,"overflow"),$="visible"===w,C="hidden"===w;if(this.canScroll=!u&&this.contained&&(t===i.body&&$||!C&&!$)&&(d>this.dragArea[2]+y-f||c>this.dragArea[3]+m-g)&&(!this.containerArray||this.containerArray&&!F(this.containerArray)),this.contained){const e=this.scroll.x,s=this.scroll.y,i=this.canScroll,r=this.$target.getBoundingClientRect(),n=i?h?0:t.scrollLeft:0,o=i?h?0:t.scrollTop:0,d=i?this.scrollView[0]-n-_:0,c=i?this.scrollView[1]-o-b:0;this.targetBounds[0]=ct(r.top+s-(h?0:T),0),this.targetBounds[1]=ct(r.right+e-(h?a:x),0),this.targetBounds[2]=ct(r.bottom+s-(h?l:S),0),this.targetBounds[3]=ct(r.left+e-(h?0:v),0),this.containerArray?(this.containerBounds[0]=this.containerArray[0]+m,this.containerBounds[1]=this.containerArray[1]-f,this.containerBounds[2]=this.containerArray[2]-g,this.containerBounds[3]=this.containerArray[3]+y):(this.containerBounds[0]=-ct(r.top-(u?dt(T,0,l):T)+o-m,0),this.containerBounds[1]=-ct(r.right-(u?dt(x,0,a):x)-d+f,0),this.containerBounds[2]=-ct(r.bottom-(u?dt(S,0,l):S)-c+g,0),this.containerBounds[3]=-ct(r.left-(u?dt(v,0,a):v)+n-y,0))}this.transforms.revert(),this.coords[2]=n,this.coords[3]=o,this.setX(e,!0),this.setY(r,!0)}isOutOfBounds(t,e,s){if(!this.contained)return 0;const[i,r,n,o]=t,[a,l]=this.disabled,h=!a&&e<o||!a&&e>r,d=!l&&s<i||!l&&s>n;return h&&!d?1:!h&&d?2:h&&d?3:0}refresh(){const t=this.parameters,e=t.x,r=t.y,n=os(t.container,this),o=os(t.containerPadding,this)||0,a=F(o)?o:[o,o,o,o],l=this.x,h=this.y,d=os(t.cursor,this),c={onHover:"grab",onGrab:"grabbing"};if(d){const{onHover:t,onGrab:e}=d;t&&(c.onHover=t),e&&(c.onGrab=e)}const u=os(t.dragThreshold,this),p={mouse:3,touch:7};if(V(u))p.mouse=u,p.touch=u;else if(u){const{mouse:t,touch:e}=u;H(t)||(p.mouse=t),H(e)||(p.touch=e)}this.containerArray=F(n)?n:null,this.$container=n&&!this.containerArray?de(n)[0]:i.body,this.useWin=this.$container===i.body,this.$scrollContainer=this.useWin?s:this.$container,this.isFinePointer=matchMedia("(pointer:fine)").matches,this.containerPadding=$t(a,[0,0,0,0]),this.containerFriction=dt($t(os(t.containerFriction,this),.8),0,1),this.releaseContainerFriction=dt($t(os(t.releaseContainerFriction,this),this.containerFriction),0,1),this.snapX=os(M(e)&&!H(e.snap)?e.snap:t.snap,this),this.snapY=os(M(r)&&!H(r.snap)?r.snap:t.snap,this),this.scrollSpeed=$t(os(t.scrollSpeed,this),1.5),this.scrollThreshold=$t(os(t.scrollThreshold,this),20),this.dragSpeed=$t(os(t.dragSpeed,this),1),this.dragThreshold=this.isFinePointer?p.mouse:p.touch,this.minVelocity=$t(os(t.minVelocity,this),0),this.maxVelocity=$t(os(t.maxVelocity,this),50),this.velocityMultiplier=$t(os(t.velocityMultiplier,this),1),this.cursor=!1!==d&&c,this.updateBoundingValues();const[m,f,g,y]=this.containerBounds;this.setX(dt(l,y,f),!0),this.setY(dt(h,m,g),!0)}update(){if(this.updateScrollCoords(),this.canScroll){const[t,e,s,i]=this.containerPadding,[r,n]=this.scrollView,o=this.dragArea[2],a=this.dragArea[3],l=this.scroll.x,h=this.scroll.y,d=this.$container.scrollWidth,c=this.$container.scrollHeight,u=this.useWin?dt(d,this.window[0],d):d,p=this.useWin?dt(c,this.window[1],c):c,m=r-u,f=n-p;this.dragged&&m>0&&(this.coords[0]-=m,this.scrollView[0]=u),this.dragged&&f>0&&(this.coords[1]-=f,this.scrollView[1]=p);const g=10*this.scrollSpeed,y=this.scrollThreshold,[_,b]=this.coords,[v,T,x,S]=this.scrollBounds,w=ct(dt((b-v+t)/y,-1,0)*g,0),$=ct(dt((_-T-e)/y,0,1)*g,0),C=ct(dt((b-x-s)/y,0,1)*g,0),E=ct(dt((_-S+i)/y,-1,0)*g,0);if(w||C||E||$){const[t,e]=this.disabled;let s=l,i=h;t||(s=ct(dt(l+(E||$),0,r-o),0),this.coords[0]-=l-s),e||(i=ct(dt(h+(w||C),0,n-a),0),this.coords[1]-=h-i),this.useWin?this.$scrollContainer.scrollBy(-(l-s),-(h-i)):this.$scrollContainer.scrollTo(s,i)}}const[t,e,s,i]=this.containerBounds,[r,n,o,a,l,h]=this.pointer;this.coords[0]+=(r-l)*this.dragSpeed,this.coords[1]+=(n-h)*this.dragSpeed,this.pointer[4]=r,this.pointer[5]=n;const[d,c]=this.coords,[u,p]=this.snapped,m=(1-this.containerFriction)*this.dragSpeed;this.setX(d>e?e+(d-e)*m:d<i?i+(d-i)*m:d,!1),this.setY(c>s?s+(c-s)*m:c<t?t+(c-t)*m:c,!1),this.computeVelocity(r-l,n-h),this.angle=at(n-a,r-o);const[f,g]=this.snapped;(f!==u&&this.snapX||g!==p&&this.snapY)&&this.onSnap(this)}stop(){this.updateTicker.pause(),this.overshootTicker.pause();for(let t in this.animate.animations)this.animate.animations[t].pause();return ie([this],null,"x"),ie([this],null,"y"),ie([this],null,"progressX"),ie([this],null,"progressY"),ie([this.scroll]),ie([this.overshootCoords]),this}scrollInView(t,e=0,s=Te.inOutQuad){this.updateScrollCoords();const i=this.destX,r=this.destY,n=this.scroll,o=this.scrollBounds,a=this.canScroll;if(!this.containerArray&&this.isOutOfBounds(o,i,r)){const[l,h,d,u]=o,p=ct(dt(r-l,-c,0),0),m=ct(dt(i-h,0,c),0),f=ct(dt(r-d,0,c),0),g=ct(dt(i-u,-c,0),0);new Me(n,{x:ct(n.x+(g?g-e:m?m+e:0),0),y:ct(n.y+(p?p-e:f?f+e:0),0),duration:H(t)?350*I.timeScale:t,ease:s,onUpdate:()=>{this.canScroll=!1,this.$scrollContainer.scrollTo(n.x,n.y)}}).init().then(()=>{this.canScroll=a})}return this}handleHover(){this.isFinePointer&&this.cursor&&!this.cursorStyles&&(this.cursorStyles=es(this.$trigger,{cursor:this.cursor.onHover}))}animateInView(t,e=0,s=Te.inOutQuad){this.stop(),this.updateBoundingValues();const i=this.x,r=this.y,[n,o,a,l]=this.containerPadding,h=this.scroll.y-this.targetBounds[0]+n+e,d=this.scroll.x-this.targetBounds[1]-o-e,c=this.scroll.y-this.targetBounds[2]-a-e,u=this.scroll.x-this.targetBounds[3]+l+e,p=this.isOutOfBounds([h,d,c,u],i,r);if(p){const[e,n]=this.disabled,o=dt(ut(i,this.snapX),u,d),a=dt(ut(r,this.snapY),h,c),l=H(t)?350*I.timeScale:t;e||1!==p&&3!==p||this.animate[this.xProp](o,l,s),n||2!==p&&3!==p||this.animate[this.yProp](a,l,s)}return this}handleDown(t){const e=t.target;if(this.grabbed||"range"===e.type)return;t.stopPropagation(),this.grabbed=!0,this.released=!1,this.stop(),this.updateBoundingValues();const s=t.changedTouches,r=s?s[0].clientX:t.clientX,n=s?s[0].clientY:t.clientY,{x:o,y:a}=this.transforms.normalizePoint(r,n),[l,h,d,c]=this.containerBounds,u=(1-this.containerFriction)*this.dragSpeed,p=this.x,m=this.y;this.coords[0]=this.coords[2]=u?p>h?h+(p-h)/u:p<c?c+(p-c)/u:p:p,this.coords[1]=this.coords[3]=u?m>d?d+(m-d)/u:m<l?l+(m-l)/u:m:m,this.pointer[0]=o,this.pointer[1]=a,this.pointer[2]=o,this.pointer[3]=a,this.pointer[4]=o,this.pointer[5]=a,this.pointer[6]=o,this.pointer[7]=a,this.deltaX=0,this.deltaY=0,this.velocity=0,this.velocityStack[0]=0,this.velocityStack[1]=0,this.velocityStack[2]=0,this.velocityStackIndex=0,this.angle=0,this.targetStyles&&(this.targetStyles.revert(),this.targetStyles=null);const f=ts(this.$target,"zIndex",!1);as=(f>as?f:as)+1,this.targetStyles=es(this.$target,{zIndex:as}),this.triggerStyles&&(this.triggerStyles.revert(),this.triggerStyles=null),this.cursorStyles&&(this.cursorStyles.revert(),this.cursorStyles=null),this.isFinePointer&&this.cursor&&(this.bodyStyles=es(i.body,{cursor:this.cursor.onGrab})),this.scrollInView(100,0,Te.out(3)),this.onGrab(this),i.addEventListener("touchmove",this),i.addEventListener("touchend",this),i.addEventListener("touchcancel",this),i.addEventListener("mousemove",this),i.addEventListener("mouseup",this),i.addEventListener("selectstart",this)}handleMove(t){if(!this.grabbed)return;const e=t.changedTouches,s=e?e[0].clientX:t.clientX,i=e?e[0].clientY:t.clientY,{x:r,y:n}=this.transforms.normalizePoint(s,i),o=r-this.pointer[6],a=n-this.pointer[7];let l=t.target,h=!1,d=!1,c=!1;for(;e&&l&&l!==this.$trigger;){const t=ts(l,"overflow-y");if("hidden"!==t&&"visible"!==t){const{scrollTop:t,scrollHeight:e,clientHeight:s}=l;if(e>s){c=!0,h=t<=3,d=t>=e-s-3;break}}l=l.parentElement}c&&(!h&&!d||h&&a<0||d&&a>0)?(this.pointer[0]=r,this.pointer[1]=n,this.pointer[2]=r,this.pointer[3]=n,this.pointer[4]=r,this.pointer[5]=n,this.pointer[6]=r,this.pointer[7]=n):(is(t),this.triggerStyles||(this.triggerStyles=es(this.$trigger,{pointerEvents:"none"})),this.$trigger.addEventListener("touchstart",is,{passive:!1}),this.$trigger.addEventListener("touchmove",is,{passive:!1}),this.$trigger.addEventListener("touchend",is),(this.dragged||!this.disabled[0]&&et(o)>this.dragThreshold||!this.disabled[1]&&et(a)>this.dragThreshold)&&(this.updateTicker.resume(),this.pointer[2]=this.pointer[0],this.pointer[3]=this.pointer[1],this.pointer[0]=r,this.pointer[1]=n,this.dragged=!0,this.released=!1,this.onDrag(this)))}handleUp(){if(!this.grabbed)return;this.updateTicker.pause(),this.triggerStyles&&(this.triggerStyles.revert(),this.triggerStyles=null),this.bodyStyles&&(this.bodyStyles.revert(),this.bodyStyles=null);const[t,e]=this.disabled,[s,n,o,a,l,h]=this.pointer,[d,c,u,p]=this.containerBounds,[m,f]=this.snapped,g=this.releaseXSpring,y=this.releaseYSpring,_=this.releaseEase,b=this.hasReleaseSpring,v=this.overshootCoords,T=this.x,x=this.y,S=this.computeVelocity(s-l,n-h),w=this.angle=at(n-a,s-o),$=150*S,C=(1-this.releaseContainerFriction)*this.dragSpeed,E=T+tt(w)*$,k=x+K(w)*$,N=E>c?c+(E-c)*C:E<p?p+(E-p)*C:E,D=k>u?u+(k-u)*C:k<d?d+(k-d)*C:k,A=this.destX=dt(ct(ut(N,this.snapX),5),p,c),R=this.destY=dt(ct(ut(D,this.snapY),5),d,u),L=this.isOutOfBounds(this.containerBounds,E,k);let B=0,P=0,F=_,M=_,V=0;if(v.x=T,v.y=x,!t){const t=A===c?T>c?-1:1:T<p?-1:1,s=ct(T-A,0);g.velocity=e&&b?s?$*t/et(s):0:S;const{ease:i,settlingDuration:r,restDuration:n}=g;B=T===A?0:b?r:r-n*I.timeScale,b&&(F=i),B>V&&(V=B)}if(!e){const e=R===u?x>u?-1:1:x<d?-1:1,s=ct(x-R,0);y.velocity=t&&b?s?$*e/et(s):0:S;const{ease:i,settlingDuration:r,restDuration:n}=y;P=x===R?0:b?r:r-n*I.timeScale,b&&(M=i),P>V&&(V=P)}if(!b&&L&&C&&(B||P)){const t=r.blend;new Me(v,{x:{to:N,duration:.65*B},y:{to:D,duration:.65*P},ease:_,composition:t}).init(),new Me(v,{x:{to:A,duration:B},y:{to:R,duration:P},ease:_,composition:t}).init(),this.overshootTicker.stretch(ot(B,P)).restart()}else t||this.animate[this.xProp](A,B,F),e||this.animate[this.yProp](R,P,M);this.scrollInView(V,this.scrollThreshold,_);let O=!1;A!==m&&(this.snapped[0]=A,this.snapX&&(O=!0)),R!==f&&this.snapY&&(this.snapped[1]=R,this.snapY&&(O=!0)),O&&this.onSnap(this),this.grabbed=!1,this.dragged=!1,this.updated=!0,this.released=!0,this.onRelease(this),this.$trigger.removeEventListener("touchstart",is),this.$trigger.removeEventListener("touchmove",is),this.$trigger.removeEventListener("touchend",is),i.removeEventListener("touchmove",this),i.removeEventListener("touchend",this),i.removeEventListener("touchcancel",this),i.removeEventListener("mousemove",this),i.removeEventListener("mouseup",this),i.removeEventListener("selectstart",this)}reset(){return this.stop(),this.resizeTicker.pause(),this.grabbed=!1,this.dragged=!1,this.updated=!1,this.released=!1,this.canScroll=!1,this.setX(0,!0),this.setY(0,!0),this.coords[0]=0,this.coords[1]=0,this.pointer[0]=0,this.pointer[1]=0,this.pointer[2]=0,this.pointer[3]=0,this.pointer[4]=0,this.pointer[5]=0,this.pointer[6]=0,this.pointer[7]=0,this.velocity=0,this.velocityStack[0]=0,this.velocityStack[1]=0,this.velocityStack[2]=0,this.velocityStackIndex=0,this.angle=0,this}enable(){return this.enabled||(this.enabled=!0,this.$target.classList.remove("is-disabled"),this.touchActionStyles=es(this.$trigger,{touchAction:this.disabled[0]?"pan-x":this.disabled[1]?"pan-y":"none"}),this.$trigger.addEventListener("touchstart",this,{passive:!0}),this.$trigger.addEventListener("mousedown",this,{passive:!0}),this.$trigger.addEventListener("mouseenter",this)),this}disable(){return this.enabled=!1,this.grabbed=!1,this.dragged=!1,this.updated=!1,this.released=!1,this.canScroll=!1,this.touchActionStyles.revert(),this.cursorStyles&&(this.cursorStyles.revert(),this.cursorStyles=null),this.triggerStyles&&(this.triggerStyles.revert(),this.triggerStyles=null),this.bodyStyles&&(this.bodyStyles.revert(),this.bodyStyles=null),this.targetStyles&&(this.targetStyles.revert(),this.targetStyles=null),this.$target.classList.add("is-disabled"),this.$trigger.removeEventListener("touchstart",this),this.$trigger.removeEventListener("mousedown",this),this.$trigger.removeEventListener("mouseenter",this),i.removeEventListener("touchmove",this),i.removeEventListener("touchend",this),i.removeEventListener("touchcancel",this),i.removeEventListener("mousemove",this),i.removeEventListener("mouseup",this),i.removeEventListener("selectstart",this),this}revert(){return this.reset(),this.disable(),this.$target.classList.remove("is-disabled"),this.updateTicker.revert(),this.overshootTicker.revert(),this.resizeTicker.revert(),this.animate.revert(),this.resizeObserver.disconnect(),this}handleEvent(t){switch(t.type){case"mousedown":case"touchstart":this.handleDown(t);break;case"mousemove":case"touchmove":this.handleMove(t);break;case"mouseup":case"touchend":case"touchcancel":this.handleUp();break;case"mouseenter":this.handleHover();break;case"selectstart":is(t)}}}const hs=(t=_)=>new le({duration:1*I.timeScale,onComplete:t},null,0).resume(),ds=t=>{let e;return(...s)=>{let i,r,n,o,a;e&&(i=e.currentIteration,r=e.iterationProgress,n=e.reversed,o=e._alternate,a=e._startTime,e.revert());const l=t(...s);return l&&!z(l)&&l.revert&&(e=l),H(r)||(e.currentIteration=i,e.iterationProgress=(o&&i%2?!n:n)?1-r:r,e._startTime=a),l||_}};class cs{constructor(t={}){A.current&&A.current.register(this);const e=t.root;let r=i;e&&(r=e.current||e.nativeElement||de(e)[0]||i);const n=t.defaults,o=I.defaults,a=t.mediaQueries;if(this.defaults=n?yt(n,o):o,this.root=r,this.constructors=[],this.revertConstructors=[],this.revertibles=[],this.constructorsOnce=[],this.revertConstructorsOnce=[],this.revertiblesOnce=[],this.once=!1,this.onceIndex=0,this.methods={},this.matches={},this.mediaQueryLists={},this.data={},a)for(let t in a){const e=s.matchMedia(a[t]);this.mediaQueryLists[t]=e,e.addEventListener("change",this)}}register(t){(this.once?this.revertiblesOnce:this.revertibles).push(t)}execute(t){let e=A.current,s=A.root,i=I.defaults;A.current=this,A.root=this.root,I.defaults=this.defaults;const r=this.mediaQueryLists;for(let t in r)this.matches[t]=r[t].matches;const n=t(this);return A.current=e,A.root=s,I.defaults=i,n}refresh(){return this.onceIndex=0,this.execute(()=>{let t=this.revertibles.length,e=this.revertConstructors.length;for(;t--;)this.revertibles[t].revert();for(;e--;)this.revertConstructors[e](this);this.revertibles.length=0,this.revertConstructors.length=0,this.constructors.forEach(t=>{const e=t(this);z(e)&&this.revertConstructors.push(e)})}),this}add(t,e){if(this.once=!1,z(t)){const e=t;this.constructors.push(e),this.execute(()=>{const t=e(this);z(t)&&this.revertConstructors.push(t)})}else this.methods[t]=(...t)=>this.execute(()=>e(...t));return this}addOnce(t){if(this.once=!0,z(t)){const e=this.onceIndex++;if(this.constructorsOnce[e])return this;const s=t;this.constructorsOnce[e]=s,this.execute(()=>{const t=s(this);z(t)&&this.revertConstructorsOnce.push(t)})}return this}keepTime(t){this.once=!0;const e=this.onceIndex++,s=this.constructorsOnce[e];if(z(s))return s(this);const i=ds(t);let r;return this.constructorsOnce[e]=i,this.execute(()=>{r=i(this)}),r}handleEvent(t){"change"===t.type&&this.refresh()}revert(){const t=this.revertibles,e=this.revertConstructors,s=this.revertiblesOnce,i=this.revertConstructorsOnce,r=this.mediaQueryLists;let n=t.length,o=e.length,a=s.length,l=i.length;for(;n--;)t[n].revert();for(;o--;)e[o](this);for(;a--;)s[a].revert();for(;l--;)i[l](this);for(let t in r)r[t].removeEventListener("change",this);t.length=0,e.length=0,this.constructors.length=0,s.length=0,i.length=0,this.constructorsOnce.length=0,this.onceIndex=0,this.matches={},this.methods={},this.mediaQueryLists={},this.data={}}}const us=(t,e)=>t&&z(t)?t(e):t,ps=new Map;class ms{constructor(t){this.element=t,this.useWin=this.element===i.body,this.winWidth=0,this.winHeight=0,this.width=0,this.height=0,this.left=0,this.top=0,this.scale=1,this.zIndex=0,this.scrollX=0,this.scrollY=0,this.prevScrollX=0,this.prevScrollY=0,this.scrollWidth=0,this.scrollHeight=0,this.velocity=0,this.backwardX=!1,this.backwardY=!1,this.scrollTicker=new le({autoplay:!1,onBegin:()=>this.dataTimer.resume(),onUpdate:()=>{const t=this.backwardX||this.backwardY;_t(this,t=>t.handleScroll(),t)},onComplete:()=>this.dataTimer.pause()}).init(),this.dataTimer=new le({autoplay:!1,frameRate:30,onUpdate:t=>{const e=t.deltaTime,s=this.prevScrollX,i=this.prevScrollY,r=this.scrollX,n=this.scrollY,o=s-r,a=i-n;this.prevScrollX=r,this.prevScrollY=n,o&&(this.backwardX=s>r),a&&(this.backwardY=i>n),this.velocity=ct(e>0?Math.sqrt(o*o+a*a)/e:0,5)}}).init(),this.resizeTicker=new le({autoplay:!1,duration:250*I.timeScale,onComplete:()=>{this.updateWindowBounds(),this.refreshScrollObservers(),this.handleScroll()}}).init(),this.wakeTicker=new le({autoplay:!1,duration:500*I.timeScale,onBegin:()=>{this.scrollTicker.resume()},onComplete:()=>{this.scrollTicker.pause()}}).init(),this._head=null,this._tail=null,this.updateScrollCoords(),this.updateWindowBounds(),this.updateBounds(),this.refreshScrollObservers(),this.handleScroll(),this.resizeObserver=new ResizeObserver(()=>this.resizeTicker.restart()),this.resizeObserver.observe(this.element),(this.useWin?s:this.element).addEventListener("scroll",this,!1)}updateScrollCoords(){const t=this.useWin,e=this.element;this.scrollX=ct(t?s.scrollX:e.scrollLeft,0),this.scrollY=ct(t?s.scrollY:e.scrollTop,0)}updateWindowBounds(){this.winWidth=s.innerWidth,this.winHeight=(()=>{const t=i.createElement("div");i.body.appendChild(t),t.style.height="100lvh";const e=t.offsetHeight;return i.body.removeChild(t),e})()}updateBounds(){const t=getComputedStyle(this.element),e=this.element;let s,i;if(this.scrollWidth=e.scrollWidth+parseFloat(t.marginLeft)+parseFloat(t.marginRight),this.scrollHeight=e.scrollHeight+parseFloat(t.marginTop)+parseFloat(t.marginBottom),this.updateWindowBounds(),this.useWin)s=this.winWidth,i=this.winHeight;else{const t=e.getBoundingClientRect();s=e.clientWidth,i=e.clientHeight,this.top=t.top,this.left=t.left,this.scale=t.width?s/t.width:t.height?i/t.height:1}this.width=s,this.height=i}refreshScrollObservers(){_t(this,t=>{t.ready&&t._debug&&t.removeDebug()}),this.updateBounds(),_t(this,t=>{t.ready&&(t.refresh(),t.onResize(t),t._debug&&t.debug())})}refresh(){this.updateWindowBounds(),this.updateBounds(),this.refreshScrollObservers(),this.handleScroll()}handleScroll(){this.updateScrollCoords(),this.wakeTicker.restart()}handleEvent(t){"scroll"===t.type&&this.handleScroll()}revert(){this.scrollTicker.cancel(),this.dataTimer.cancel(),this.resizeTicker.cancel(),this.wakeTicker.cancel(),this.resizeObserver.disconnect(),(this.useWin?s:this.element).removeEventListener("scroll",this),ps.delete(this.element)}}const fs=(t,e,s,i,r)=>{const n="min"===e,o="max"===e,a="top"===e||"left"===e||"start"===e||n?0:"bottom"===e||"right"===e||"end"===e||o?"100%":"center"===e?"50%":e,{n:l,u:h}=It(a,Lt);let d=l;return"%"===h?d=l/100*s:h&&(d=me(t,Lt,"px",!0).n),o&&i<0&&(d+=i),n&&r>0&&(d+=r),d},gs=(t,e,s,i,r)=>{let n;if(O(e)){const o=k.exec(e);if(o){const a=o[0],l=a[0],h=e.split(a),d="min"===h[0],c="max"===h[0],u=fs(t,h[0],s,i,r),p=fs(t,h[1],s,i,r);if(d){const e=At(fs(t,"min",s),p,l);n=e<u?u:e}else if(c){const e=At(fs(t,"max",s),p,l);n=e>u?u:e}else n=At(u,p,l)}else n=fs(t,e,s,i,r)}else n=e;return ct(n,0)},ys=t=>{let e;const s=t.targets;for(let t=0,i=s.length;t<i;t++){const i=s[t];if(i[o]){e=i;break}}return e};let _s=0;const bs=["#FF4B4B","#FF971B","#FFC730","#F9F640","#7AFF5A","#18FF74","#17E09B","#3CFFEC","#05DBE9","#33B3F1","#638CF9","#C563FE","#FF4FCF","#F93F8A"];class vs{constructor(t={}){A.current&&A.current.register(this);const e=$t(t.sync,"play pause"),s=e?$e(e):null,r=e&&("linear"===e||e===fe),n=e&&!(s===fe&&!r),o=e&&(V(e)||!0===e||r),a=e&&O(e)&&!n&&!o,l=a?e.split(" ").map(t=>()=>{const e=this.linked;return e&&e[t]?e[t]():null}):null,h=a&&l.length>2;this.index=_s++,this.id=H(t.id)?this.index:t.id,this.container=(t=>{const e=t&&de(t)[0]||i.body;let s=ps.get(e);return s||(s=new ms(e),ps.set(e,s)),s})(t.container),this.target=null,this.linked=null,this.repeat=null,this.horizontal=null,this.enter=null,this.leave=null,this.sync=n||o||!!l,this.syncEase=n?s:null,this.syncSmooth=o?!0===e||r?1:e:null,this.onSyncEnter=l&&!h&&l[0]?l[0]:_,this.onSyncLeave=l&&!h&&l[1]?l[1]:_,this.onSyncEnterForward=l&&h&&l[0]?l[0]:_,this.onSyncLeaveForward=l&&h&&l[1]?l[1]:_,this.onSyncEnterBackward=l&&h&&l[2]?l[2]:_,this.onSyncLeaveBackward=l&&h&&l[3]?l[3]:_,this.onEnter=t.onEnter||_,this.onLeave=t.onLeave||_,this.onEnterForward=t.onEnterForward||_,this.onLeaveForward=t.onLeaveForward||_,this.onEnterBackward=t.onEnterBackward||_,this.onLeaveBackward=t.onLeaveBackward||_,this.onUpdate=t.onUpdate||_,this.onResize=t.onResize||_,this.onSyncComplete=t.onSyncComplete||_,this.reverted=!1,this.ready=!1,this.completed=!1,this.began=!1,this.isInView=!1,this.forceEnter=!1,this.hasEntered=!1,this.offset=0,this.offsetStart=0,this.offsetEnd=0,this.distance=0,this.prevProgress=0,this.thresholds=["start","end","end","start"],this.coords=[0,0,0,0],this.debugStyles=null,this.$debug=null,this._params=t,this._debug=$t(t.debug,!1),this._next=null,this._prev=null,vt(this.container,this),hs(()=>{if(!this.reverted){if(!this.target){const e=de(t.target)[0];this.target=e||i.body,this.refresh()}this._debug&&this.debug()}})}link(t){if(t&&(t.pause(),this.linked=t,H(t)||H(t.persist)||(t.persist=!0),!this._params.target)){let e;H(t.targets)?_t(t,t=>{t.targets&&!e&&(e=ys(t))}):e=ys(t),this.target=e||i.body,this.refresh()}return this}get velocity(){return this.container.velocity}get backward(){return this.horizontal?this.container.backwardX:this.container.backwardY}get scroll(){return this.horizontal?this.container.scrollX:this.container.scrollY}get progress(){const t=(this.scroll-this.offsetStart)/this.distance;return t===1/0||isNaN(t)?0:ct(dt(t,0,1),6)}refresh(){this.ready=!0,this.reverted=!1;const t=this._params;return this.repeat=$t(us(t.repeat,this),!0),this.horizontal="x"===$t(us(t.axis,this),"y"),this.enter=$t(us(t.enter,this),"end start"),this.leave=$t(us(t.leave,this),"start end"),this.updateBounds(),this.handleScroll(),this}removeDebug(){return this.$debug&&(this.$debug.parentNode.removeChild(this.$debug),this.$debug=null),this.debugStyles&&(this.debugStyles.revert(),this.$debug=null),this}debug(){this.removeDebug();const t=this.container,e=this.horizontal,s=t.element.querySelector(":scope > .animejs-onscroll-debug"),r=i.createElement("div"),n=i.createElement("div"),o=i.createElement("div"),a=bs[this.index%bs.length],l=t.useWin,h=l?t.winWidth:t.width,d=l?t.winHeight:t.height,c=t.scrollWidth,u=t.scrollHeight,p=this.container.width>360?320:260,m=e?0:10,f=e?10:0,g=e?24:p/2,y=e?g:15,_=e?60:g,b=e?_:y,v=e?"repeat-x":"repeat-y",T=t=>e?"0px "+t+"px":t+"px 2px",x=t=>`linear-gradient(${e?90:0}deg, ${t} 2px, transparent 1px)`,S=(t,e,s,i,r)=>`position:${t};left:${e}px;top:${s}px;width:${i}px;height:${r}px;`;r.style.cssText=`${S("absolute",m,f,e?c:p,e?p:u)}\n pointer-events: none;\n z-index: ${this.container.zIndex++};\n display: flex;\n flex-direction: ${e?"column":"row"};\n filter: drop-shadow(0px 1px 0px rgba(0,0,0,.75));\n `,n.style.cssText=`${S("sticky",0,0,e?h:g,e?g:d)}`,s||(n.style.cssText+=`background:\n ${x("#FFFF")}${T(g-10)} / 100px 100px ${v},\n ${x("#FFF8")}${T(g-10)} / 10px 10px ${v};\n `),o.style.cssText=`${S("relative",0,0,e?c:g,e?g:u)}`,s||(o.style.cssText+=`background:\n ${x("#FFFF")}${T(0)} / ${e?"100px 10px":"10px 100px"} ${v},\n ${x("#FFF8")}${T(0)} / ${e?"10px 0px":"0px 10px"} ${v};\n `);const w=[" enter: "," leave: "];this.coords.forEach((t,s)=>{const r=s>1,l=(r?0:this.offset)+t,m=s%2,f=l<b,g=l>(r?e?h:d:e?c:u)-b,v=(r?m&&!f:!m&&!f)||g,T=i.createElement("div"),x=i.createElement("div"),$=e?v?"right":"left":v?"bottom":"top",C=v?(e?_:y)+(r?e?-1:g?0:-2:e?-1:-2):e?1:0;x.innerHTML=`${this.id}${w[m]}${this.thresholds[s]}`,T.style.cssText=`${S("absolute",0,0,_,y)}\n display: flex;\n flex-direction: ${e?"column":"row"};\n justify-content: flex-${r?"start":"end"};\n align-items: flex-${v?"end":"start"};\n border-${$}: 2px solid ${a};\n `,x.style.cssText=`\n overflow: hidden;\n max-width: ${p/2-10}px;\n height: ${y};\n margin-${e?v?"right":"left":v?"bottom":"top"}: -2px;\n padding: 1px;\n font-family: ui-monospace, monospace;\n font-size: 10px;\n letter-spacing: -.025em;\n line-height: 9px;\n font-weight: 600;\n text-align: ${e&&v||!e&&!r?"right":"left"};\n white-space: pre;\n text-overflow: ellipsis;\n color: ${m?a:"rgba(0,0,0,.75)"};\n background-color: ${m?"rgba(0,0,0,.65)":a};\n border: 2px solid ${m?a:"transparent"};\n border-${e?v?"top-left":"top-right":v?"top-left":"bottom-left"}-radius: 5px;\n border-${e?v?"bottom-left":"bottom-right":v?"top-right":"bottom-right"}-radius: 5px;\n `,T.appendChild(x);let E=l-C+(e?1:0);T.style[e?"left":"top"]=`${E}px`,(r?n:o).appendChild(T)}),r.appendChild(n),r.appendChild(o),t.element.appendChild(r),s||r.classList.add("animejs-onscroll-debug"),this.$debug=r,"static"===ts(t.element,"position")&&(this.debugStyles=es(t.element,{position:"relative "}))}updateBounds(){let t;this._debug&&this.removeDebug();const e=this.target,s=this.container,r=this.horizontal,n=this.linked;let o,a=e;for(n&&(o=n.currentTime,n.seek(0,!0));a&&a!==s.element&&a!==i.body;){const e="sticky"===ts(a,"position")&&es(a,{position:"static"});a=a.parentElement,e&&(t||(t=[]),t.push(e))}const l=e.getBoundingClientRect(),h=s.scale,d=(r?l.left+s.scrollX-s.left:l.top+s.scrollY-s.top)*h,c=(r?l.width:l.height)*h,u=r?s.width:s.height,p=(r?s.scrollWidth:s.scrollHeight)-u,m=this.enter,f=this.leave;let g="start",y="end",_="end",b="start";if(O(m)){const t=m.split(" ");_=t[0],g=t.length>1?t[1]:g}else if(M(m)){const t=m;H(t.container)||(_=t.container),H(t.target)||(g=t.target)}else V(m)&&(_=m);if(O(f)){const t=f.split(" ");b=t[0],y=t.length>1?t[1]:y}else if(M(f)){const t=f;H(t.container)||(b=t.container),H(t.target)||(y=t.target)}else V(f)&&(b=f);const v=gs(e,g,c),T=gs(e,y,c),x=v+d-u,S=T+d-p,w=gs(e,_,u,x,S),$=gs(e,b,u,x,S),C=v+d-w,E=T+d-$,k=E-C;this.offset=d,this.offsetStart=C,this.offsetEnd=E,this.distance=k<=0?0:k,this.thresholds=[g,y,_,b],this.coords=[v,T,w,$],t&&t.forEach(t=>t.revert()),n&&n.seek(o,!0),this._debug&&this.debug()}handleScroll(){if(!this.ready)return;const t=this.linked,e=this.sync,s=this.syncEase,i=this.syncSmooth,r=t&&(s||i),n=this.horizontal,o=this.container,a=this.scroll,l=a<=this.offsetStart,h=a>=this.offsetEnd,d=!l&&!h,c=a===this.offsetStart||a===this.offsetEnd,u=!this.hasEntered&&c,p=this._debug&&this.$debug;let m=!1,f=!1,g=this.progress;if(l&&this.began&&(this.began=!1),g>0&&!this.began&&(this.began=!0),r){const e=t.progress;if(i&&V(i)){if(i<1){const t=1e-4,s=e<g&&1===g?t:e>g&&!g?-t:0;g=ct(pt(e,g,pt(.01,.2,i))+s,6)}}else s&&(g=s(g));m=g!==this.prevProgress,f=1===e,m&&!f&&i&&e&&o.wakeTicker.restart()}if(p){const t=n?o.scrollY:o.scrollX;p.style[n?"top":"left"]=t+10+"px"}(d&&!this.isInView||u&&!this.forceEnter&&!this.hasEntered)&&(d&&(this.isInView=!0),this.forceEnter&&this.hasEntered?d&&(this.forceEnter=!1):(p&&d&&(p.style.zIndex=""+this.container.zIndex++),this.onSyncEnter(this),this.onEnter(this),this.backward?(this.onSyncEnterBackward(this),this.onEnterBackward(this)):(this.onSyncEnterForward(this),this.onEnterForward(this)),this.hasEntered=!0,u&&(this.forceEnter=!0))),(d||!d&&this.isInView)&&(m=!0),m&&(r&&t.seek(t.duration*g),this.onUpdate(this)),!d&&this.isInView&&(this.isInView=!1,this.onSyncLeave(this),this.onLeave(this),this.backward?(this.onSyncLeaveBackward(this),this.onLeaveBackward(this)):(this.onSyncLeaveForward(this),this.onLeaveForward(this)),e&&!i&&(f=!0)),g>=1&&this.began&&!this.completed&&(e&&f||!e)&&(e&&this.onSyncComplete(this),this.completed=!0,(!this.repeat&&!t||!this.repeat&&t&&t.completed)&&this.revert()),g<1&&this.completed&&(this.completed=!1),this.prevProgress=g}revert(){if(this.reverted)return;const t=this.container;return bt(t,this),t._head||t.revert(),this._debug&&this.removeDebug(),this.reverted=!0,this.ready=!1,this}}const Ts=(t,e,s)=>(((1-3*s+3*e)*t+(3*s-6*e))*t+3*e)*t,xs=(t=.5,e=0,s=.5,i=1)=>t===e&&s===i?fe:r=>0===r||1===r?r:Ts(((t,e,s)=>{let i,r,n=0,o=1,a=0;do{r=n+(o-n)/2,i=Ts(r,e,s)-t,i>0?o=r:n=r}while(et(i)>1e-7&&++a<100);return r})(r,t,s),e,i),Ss=(t=10,e)=>{const s=e?it:rt;return e=>s(dt(e,0,1)*t)*(1/t)},ws=(...t)=>{const e=t.length;if(!e)return fe;const s=e-1,i=t[0],r=t[s],n=[0],o=[Z(i)];for(let e=1;e<s;e++){const i=t[e],r=O(i)?i.trim().split(" "):[i],a=r[0],l=r[1];n.push(H(l)?e/s:Z(l)/100),o.push(Z(a))}return o.push(Z(r)),n.push(1),function(t){for(let e=1,s=n.length;e<s;e++){const s=n[e];if(t<=s){const i=n[e-1],r=o[e-1];return r+(o[e]-r)*(t-i)/(s-i)}}return o[o.length-1]}},$s=(t=10,e=1)=>{const s=[0],i=t-1;for(let t=1;t<i;t++){const r=s[t-1],n=t/i,o=n*(1-e)+(n+((t+1)/i-n)*Math.random())*e;s.push(dt(o,r,1))}return s.push(1),ws(...s)};var Cs=Object.freeze({__proto__:null,Spring:je,createSpring:Ze,cubicBezier:xs,eases:Te,irregular:$s,linear:ws,spring:Ge,steps:Ss});const Es=(t,e=100)=>{const s=[];for(let i=0;i<=e;i++)s.push(ct(t(i/e),4));return`linear(${s.join(", ")})`},ks={},Ns=t=>{let e=ks[t];if(e)return e;if(e="linear",O(t)){if(B(t,"linear")||B(t,"cubic-")||B(t,"steps")||B(t,"ease"))e=t;else if(B(t,"cubicB"))e=L(t);else{const s=Se(t);z(s)&&(e=s===fe?"linear":Es(s))}ks[t]=e}else if(z(t)){const s=Es(t);s&&(e=s)}else t.ease&&(e=Es(t.ease));return e},Ds=["x","y","z"],As=["perspective","width","height","margin","padding","top","right","bottom","left","borderWidth","fontSize","borderRadius",...Ds],Is=(()=>[...Ds,...g.filter(t=>["X","Y","Z"].some(e=>t.endsWith(e)))])();let Rs=null;const Ls=(t,e,s,i,r)=>{let n=O(e)?e:Et(e,s,i,r,null,null);return V(n)?As.includes(t)||B(t,"translate")?`${n}px`:B(t,"rotate")||B(t,"skew")?`${n}deg`:`${n}`:n},Bs=(t,e,s,i,r,n)=>{let o="0";const a=H(i)?getComputedStyle(t)[e]:Ls(e,i,t,r,n);return o=H(s)?F(i)?i.map(s=>Ls(e,s,t,r,n)):a:[Ls(e,s,t,r,n),a],o};class Ps{constructor(t,s){A.current&&A.current.register(this),X(Rs)&&(!e||!H(CSS)&&Object.hasOwnProperty.call(CSS,"registerProperty")?(g.forEach(t=>{const e=B(t,"skew"),s=B(t,"scale"),i=B(t,"rotate"),r=B(t,"translate"),n=i||e,o=n?"<angle>":s?"<number>":r?"<length-percentage>":"*";try{CSS.registerProperty({name:"--"+t,syntax:o,inherits:!1,initialValue:r?"0px":n?"0deg":s?"1":"0"})}catch{}}),Rs=!0):Rs=!1);const i=ce(t);i.length||console.warn("No target found. Make sure the element you're trying to animate is accessible before creating your animation.");const r=$t(s.autoplay,I.defaults.autoplay),n=!(!r||!r.link)&&r,o=s.alternate&&!0===s.alternate,a=s.reversed&&!0===s.reversed,h=$t(s.loop,I.defaults.loop),d=!0===h||h===1/0?1/0:V(h)?h+1:1,c=o?a?"alternate-reverse":"alternate":a?"reverse":"normal",m=1===I.timeScale?1:u;this.targets=i,this.animations=[],this.controlAnimation=null,this.onComplete=s.onComplete||I.defaults.onComplete,this.duration=0,this.muteCallbacks=!1,this.completed=!1,this.paused=!r||!1!==n,this.reversed=a,this.persist=$t(s.persist,I.defaults.persist),this.autoplay=r,this._speed=$t(s.playbackRate,I.defaults.playbackRate),this._resolve=_,this._completed=0,this._inlineStyles=[],i.forEach((t,e)=>{const r=t[l],n=Is.some(t=>s.hasOwnProperty(t)),o=t.style,a=this._inlineStyles[e]={},h=$t(s.ease,I.defaults.ease),u=Et(h,t,e,i,null,null),_=z(u)||O(u)?u:h,b=h.ease&&h,v=Ns(_),T=(b?b.settlingDuration:Et($t(s.duration,I.defaults.duration),t,e,i,null,null))*m,x=Et($t(s.delay,I.defaults.delay),t,e,i,null,null)*m,S=$t(s.composition,"replace");for(let l in s){if(!j(l))continue;const h={},u={iterations:d,direction:c,fill:"both",easing:v,duration:T,delay:x,composite:S},p=s[l],y=!!n&&(g.includes(l)?l:f.get(l)),_=y?"transform":l;let b;if(a[_]||(a[_]=o[_]),M(p)){const s=p,n=$t(s.ease,v),a=n.ease&&n,d=s.to,c=s.from;if(u.duration=(a?a.settlingDuration:Et($t(s.duration,T),t,e,i,null,null))*m,u.delay=Et($t(s.delay,x),t,e,i,null,null)*m,u.composite=$t(s.composition,S),u.easing=Ns(n),b=Bs(t,l,c,d,e,i),y?(h[`--${y}`]=b,r[y]=b):h[l]=Bs(t,l,c,d,e,i),Ke(this,t,l,h,u),!H(c))if(y){const t=`--${y}`;o.setProperty(t,h[t][0])}else o[l]=h[l][0]}else b=F(p)?p.map(s=>Ls(l,s,t,e,i)):Ls(l,p,t,e,i),y?(h[`--${y}`]=b,r[y]=b):h[l]=b,Ke(this,t,l,h,u)}if(n){let t=p;for(let e in r)t+=`${y[e]}var(--${e})) `;o.transform=t}}),n&&this.autoplay.link(this)}forEach(t){try{const e=O(t)?e=>e[t]():t;this.animations.forEach(e)}catch{}return this}get speed(){return this._speed}set speed(t){this._speed=+t,this.forEach(e=>e.playbackRate=t)}get currentTime(){const t=this.controlAnimation,e=I.timeScale;return this.completed?this.duration:t?+t.currentTime*(1===e?1:e):0}set currentTime(t){const e=t*(1===I.timeScale?1:u);this.forEach(t=>{!this.persist&&e>=this.duration&&t.play(),t.currentTime=e})}get progress(){return this.currentTime/this.duration}set progress(t){this.forEach(e=>e.currentTime=t*this.duration||0)}resume(){return this.paused?(this.paused=!1,this.forEach("play")):this}pause(){return this.paused?this:(this.paused=!0,this.forEach("pause"))}alternate(){return this.reversed=!this.reversed,this.forEach("reverse"),this.paused&&this.forEach("pause"),this}play(){return this.reversed&&this.alternate(),this.resume()}reverse(){return this.reversed||this.alternate(),this.resume()}seek(t,e=!1){return e&&(this.muteCallbacks=!0),t<this.duration&&(this.completed=!1),this.currentTime=t,this.muteCallbacks=!1,this.paused&&this.pause(),this}restart(){return this.completed=!1,this.seek(0,!0).resume()}commitStyles(){return this.forEach("commitStyles")}complete(){return this.seek(this.duration)}cancel(){return this.muteCallbacks=!0,this.commitStyles().forEach("cancel"),this.animations.length=0,requestAnimationFrame(()=>{this.targets.forEach(t=>{"none"===t.style.transform&&t.style.removeProperty("transform")})}),this}revert(){return this.cancel().targets.forEach((t,e)=>{const s=t.style,i=this._inlineStyles[e];for(let e in i){const r=i[e];H(r)||r===p?s.removeProperty(L(e)):t.style[e]=r}t.getAttribute("style")===p&&t.removeAttribute("style")}),this}then(t=_){const e=this.then,s=()=>{this.then=null,t(this),this.then=e,this._resolve=_};return new Promise(t=>(this._resolve=()=>t(s()),this.completed&&this._resolve(),this))}}const Fs={animate:(t,e)=>new Ps(t,e),convertEase:Es};let Ms=0,Vs=0;const Os=(t,e)=>!(!t||!e)&&(t===e||t.contains(e)),zs=t=>{if(!t)return null;const e=t.style,s=e.transition||"";return e.setProperty("transition","none","important"),s},Hs=(t,e)=>{if(!t)return;const s=t.style;e?s.transition=e:s.removeProperty("transition")},Xs=t=>{const e=t.layout.transitionMuteStore,s=t.$el,i=t.$measure;s&&!e.has(s)&&e.set(s,zs(s)),i&&!e.has(i)&&e.set(i,zs(i))},Ys=t=>{t.forEach((t,e)=>Hs(e,t)),t.clear()},Ws={display:"none",visibility:"hidden",opacity:"0",transform:"none",position:"static"},Us=t=>{if(!t)return;const e=t.parentNode;e&&(e._head===t&&(e._head=t._next),e._tail===t&&(e._tail=t._prev),t._prev&&(t._prev._next=t._next),t._next&&(t._next._prev=t._prev),t._prev=null,t._next=null,t.parentNode=null)},qs=(t,e,s,i)=>{let r=t.dataset.layoutId;r||(r=t.dataset.layoutId="node-"+Vs++);const n=i||{};return n.$el=t,n.$measure=t,n.id=r,n.index=0,n.targets=null,n.delay=0,n.duration=0,n.ease=null,n.state=s,n.layout=s.layout,n.parentNode=e||null,n.isTarget=!1,n.isEntering=!1,n.isLeaving=!1,n.isInlined=!1,n.hasTransform=!1,n.inlineStyles=[],n.inlineTransforms=null,n.inlineTransition=null,n.branchAdded=!1,n.branchRemoved=!1,n.branchNotRendered=!1,n.sizeChanged=!1,n.hasVisibilitySwap=!1,n.hasDisplayNone=!1,n.hasVisibilityHidden=!1,n.measuredInlineTransform=null,n.measuredInlineTransition=null,n.measuredDisplay=null,n.measuredVisibility=null,n.measuredPosition=null,n.measuredHasDisplayNone=!1,n.measuredHasVisibilityHidden=!1,n.measuredIsVisible=!1,n.measuredIsRemoved=!1,n.measuredIsInsideRoot=!1,n.properties={transform:"none",x:0,y:0,left:0,top:0,clientLeft:0,clientTop:0,width:0,height:0},n.layout.properties.forEach(t=>n.properties[t]=0),n._head=null,n._tail=null,n._prev=null,n._next=null,n},js=(t,e,s,i)=>{const r=t.$el,n=t.layout.root,o=n===r,a=t.properties,l=t.state.rootNode,h=t.parentNode,d=s.transform,c=r.style.transform,u=!!h&&h.measuredIsRemoved,p=s.position;o&&(t.layout.absoluteCoords="fixed"===p||"absolute"===p),t.$measure=e,t.inlineTransforms=c,t.hasTransform=d&&"none"!==d,t.measuredIsInsideRoot=Os(n,e),t.measuredInlineTransform=null,t.measuredDisplay=s.display,t.measuredVisibility=s.visibility,t.measuredPosition=p,t.measuredHasDisplayNone="none"===s.display,t.measuredHasVisibilityHidden="hidden"===s.visibility,t.measuredIsVisible=!(t.measuredHasDisplayNone||t.measuredHasVisibilityHidden),t.measuredIsRemoved=t.measuredHasDisplayNone||t.measuredHasVisibilityHidden||u;let m=!1,f=r.previousSibling;for(;f&&(f.nodeType===Node.COMMENT_NODE||f.nodeType===Node.TEXT_NODE&&!f.textContent.trim());)f=f.previousSibling;if(f&&f.nodeType===Node.TEXT_NODE)m=!0;else{for(f=r.nextSibling;f&&(f.nodeType===Node.COMMENT_NODE||f.nodeType===Node.TEXT_NODE&&!f.textContent.trim());)f=f.nextSibling;m=null!==f&&f.nodeType===Node.TEXT_NODE}if(t.isInlined=m,t.hasTransform&&!i){const s=t.layout.transitionMuteStore;s.get(r)||(t.inlineTransition=zs(r)),e===r?r.style.transform="none":(s.get(e)||(t.measuredInlineTransition=zs(e)),t.measuredInlineTransform=e.style.transform,e.style.transform="none")}let g,y,_=0,b=0,v=0,T=0;if(!i){const t=e.getBoundingClientRect();_=t.left,b=t.top,v=t.width,T=t.height}for(let t in a){const e="transform"===t?d:s[t]||s.getPropertyValue&&s.getPropertyValue(t);H(e)||(a[t]=e)}if(a.left=_,a.top=b,a.clientLeft=i?0:e.clientLeft,a.clientTop=i?0:e.clientTop,o)t.layout.absoluteCoords?(g=_,y=b):(g=0,y=0);else{const e=h||l,s=e.properties.left,i=e.properties.top,r=e.properties.clientLeft,n=e.properties.clientTop;if(t.layout.absoluteCoords)g=_-s-r,y=b-i-n;else if(e===l){const t=l.properties.left,e=l.properties.top;g=_-t-l.properties.clientLeft,y=b-e-l.properties.clientTop}else g=_-s-r,y=b-i-n}return a.x=g,a.y=y,a.width=v,a.height=T,t},Gs=(t,e)=>{if(e)for(let s in e)t.properties[s]=e[s]},Zs=(t,e)=>{const s=Et(e.ease,t.$el,t.index,t.targets,null,null),i=z(s)?s:e.ease,r=!H(i)&&!H(i.ease);t.ease=r?i.ease:i,t.duration=r?i.settlingDuration:Et(e.duration,t.$el,t.index,t.targets,null,null),t.delay=Et(e.delay,t.$el,t.index,t.targets,null,null)},Qs=t=>{const e=t.$el.style,s=t.inlineStyles;s.length=0,t.layout.recordedProperties.forEach(t=>{s.push(t,e[t]||"")})},Js=t=>{const e=t.$el.style,s=t.inlineStyles;for(let t=0,i=s.length;t<i;t+=2){const i=s[t],r=s[t+1];r&&""!==r?e[i]=r:(e[i]="",e.removeProperty(i))}},Ks=t=>{const e=t.inlineTransforms,s=t.$el.style;!t.hasTransform||!e||t.hasTransform&&"none"===s.transform||e&&"none"===e?s.removeProperty("transform"):e&&(s.transform=e);const i=t.$measure;if(t.hasTransform&&i!==t.$el){const e=i.style,s=t.measuredInlineTransform;s&&""!==s?e.transform=s:e.removeProperty("transform")}t.measuredInlineTransform=null,null!==t.inlineTransition&&(Hs(t.$el,t.inlineTransition),t.inlineTransition=null),i!==t.$el&&null!==t.measuredInlineTransition&&(Hs(i,t.measuredInlineTransition),t.measuredInlineTransition=null)},ti=t=>{(t.measuredIsRemoved||t.hasVisibilitySwap)&&(t.$el.style.removeProperty("display"),t.$el.style.removeProperty("visibility"),t.hasVisibilitySwap&&(t.$measure.style.removeProperty("display"),t.$measure.style.removeProperty("visibility"))),t.layout.pendingRemoval.delete(t.$el)},ei=(t,e,s)=>(e.properties={...t.properties},e.state=s,e.isTarget=t.isTarget,e.hasTransform=t.hasTransform,e.inlineTransforms=t.inlineTransforms,e.measuredIsVisible=t.measuredIsVisible,e.measuredDisplay=t.measuredDisplay,e.measuredIsRemoved=t.measuredIsRemoved,e.measuredHasDisplayNone=t.measuredHasDisplayNone,e.measuredHasVisibilityHidden=t.measuredHasVisibilityHidden,e.hasDisplayNone=t.hasDisplayNone,e.isInlined=t.isInlined,e.hasVisibilityHidden=t.hasVisibilityHidden,e);class si{constructor(t){this.layout=t,this.rootNode=null,this.rootNodes=new Set,this.nodes=new Map,this.scrollX=0,this.scrollY=0}revert(){return this.forEachNode(t=>{this.layout.pendingRemoval.delete(t.$el),t.$el.removeAttribute("data-layout-id"),t.$measure.removeAttribute("data-layout-id")}),this.rootNode=null,this.rootNodes.clear(),this.nodes.clear(),this}getNode(t){if(t&&t.dataset)return this.nodes.get(t.dataset.layoutId)}getComputedValue(t,e){const s=this.getNode(t);if(s)return s.properties[e]}forEach(t,e){let s=t,i=0;for(;s;)if(e(s,i++),s._head)s=s._head;else if(s._next)s=s._next;else{for(;s&&!s._next;)s=s.parentNode;s&&(s=s._next)}}forEachRootNode(t){this.forEach(this.rootNode,t)}forEachNode(t){for(const e of this.rootNodes)this.forEach(e,t)}registerElement(t,e){if(!t||1!==t.nodeType)return null;this.layout.transitionMuteStore.has(t)||this.layout.transitionMuteStore.set(t,zs(t));const s=[t,e],i=this.layout.root;let r=null;for(;s.length;){const t=s.pop(),e=s.pop();if(!e||1!==e.nodeType||Y(e))continue;const n=!!t&&t.measuredIsRemoved,o=n?Ws:getComputedStyle(e),a=!!n||"none"===o.display,l=!!n||"hidden"===o.visibility,h=!a&&!l,d=e.dataset.layoutId,c=Os(i,e);let u=d?this.nodes.get(d):null;if(u&&u.$el!==e){const a=Os(i,u.$el),l=u.measuredIsVisible;if(a||!c&&(c||l||!h)){if(a&&!l&&h){js(u,e,o,n);let t=e.lastElementChild;for(;t;)s.push(t,u),t=t.previousElementSibling;r||(r=u);continue}{let i=e.lastElementChild;for(;i;)s.push(i,t),i=i.previousElementSibling;r||(r=u);continue}}Us(u),u=qs(e,t,this,u)}else u=qs(e,t,this,u);u.branchAdded=!1,u.branchRemoved=!1,u.branchNotRendered=!1,u.isTarget=!1,u.sizeChanged=!1,u.hasVisibilityHidden=l,u.hasDisplayNone=a,u.hasVisibilitySwap=l&&!u.measuredHasVisibilityHidden||a&&!u.measuredHasDisplayNone,this.nodes.set(u.id,u),u.parentNode=t||null,u._prev=null,u._next=null,t?(this.rootNodes.delete(u),t._head?(t._tail._next=u,u._prev=t._tail,t._tail=u):(t._head=u,t._tail=u)):this.rootNodes.add(u),js(u,u.$el,o,n);let p=e.lastElementChild;for(;p;)s.push(p,u),p=p.previousElementSibling;r||(r=u)}return r}ensureDetachedNode(t,e){if(!t||t===this.layout.root)return null;const s=t.dataset.layoutId,i=s?this.nodes.get(s):null;if(i&&i.$el===t)return i;let r=null,n=t.parentElement;for(;n&&n!==this.layout.root;){if(e.has(n)){r=this.ensureDetachedNode(n,e);break}n=n.parentElement}return this.registerElement(t,r)}record(){const t=this.layout,e=t.children,s=t.root,i=F(e)?e:[e],r=[],n="*"===e?s:A.root,o=[];let a=s.parentElement;for(;a&&1===a.nodeType;){const t=getComputedStyle(a);if(t.transform&&"none"!==t.transform){const t=a.style.transform||"",e=zs(a);o.push(a,t,e),a.style.transform="none"}a=a.parentElement}for(let t=0,e=i.length;t<e;t++){const e=i[t];r[t]=O(e)?n.querySelectorAll(e):e}const l=ce(r);this.nodes.clear(),this.rootNodes.clear();const h=this.registerElement(s,null);h.isTarget=!0,this.rootNode=h;const d=new Set;let c=0;const u=[];this.nodes.forEach(t=>{u.push(t.$el)}),this.nodes.forEach((t,e)=>{t.index=c++,t.targets=u,t&&t.measuredIsInsideRoot&&d.add(e)});const p=new Set,m=[];for(let t=0,e=l.length;t<e;t++){const e=l[t];if(e&&1===e.nodeType&&e!==s){if(!Os(s,e)){const t=e.dataset.layoutId;if(!t||!d.has(t))continue}p.has(e)||(p.add(e),m.push(e))}}for(let t=0,e=m.length;t<e;t++)this.ensureDetachedNode(m[t],p);for(let t=0,e=l.length;t<e;t++){const e=l[t],s=this.getNode(e);if(s){let t=s;for(;t&&!t.isTarget;)t.isTarget=!0,t=t.parentNode}}this.scrollX=window.scrollX,this.scrollY=window.scrollY,this.forEachNode(Ks);for(let t=0,e=o.length;t<e;t+=3){const e=o[t],s=o[t+1],i=o[t+2];s&&""!==s?e.style.transform=s:e.style.removeProperty("transform"),Hs(e,i)}return this}}function ii(t){const e={},s={};for(let i in t){const r=t[i];"duration"===i||"delay"===i||"ease"===i?s[i]=r:e[i]=r}return[e,s]}class ri{constructor(t,e={}){A.current&&A.current.register(this);const s=ii(e.swapAt),i=ii(e.enterFrom),r=ii(e.leaveTo),n=e.properties;if(e.duration=$t(e.duration,350),e.delay=$t(e.delay,0),e.ease=$t(e.ease,"inOut(3.5)"),this.params=e,this.root=ce(t)[0],this.id=e.id||Ms++,this.children=e.children||"*",this.absoluteCoords=!1,this.swapAtParams=yt(e.swapAt||{opacity:0},{ease:"inOut(1.75)"}),this.enterFromParams=e.enterFrom||{opacity:0},this.leaveToParams=e.leaveTo||{opacity:0},this.properties=new Set(["opacity","fontSize","color","backgroundColor","borderRadius","border","filter","clipPath"]),s[0])for(let t in s[0])this.properties.add(t);if(i[0])for(let t in i[0])this.properties.add(t);if(r[0])for(let t in r[0])this.properties.add(t);if(n)for(let t=0,e=n.length;t<e;t++)this.properties.add(n[t]);this.recordedProperties=new Set(["display","visibility","translate","position","left","top","marginLeft","marginTop","width","height","maxWidth","maxHeight","minWidth","minHeight"]),this.properties.forEach(t=>this.recordedProperties.add(t)),this.pendingRemoval=new WeakSet,this.transitionMuteStore=new Map,this.oldState=new si(this),this.newState=new si(this),this.timeline=null,this.transformAnimation=null,this.animating=[],this.swapping=[],this.leaving=[],this.entering=[],this.oldState.record(),Ys(this.transitionMuteStore)}revert(){return this.root.classList.remove("is-animated"),this.timeline&&(this.timeline.complete(),this.timeline=null),this.transformAnimation&&(this.transformAnimation.complete(),this.transformAnimation=null),this.animating.length=this.swapping.length=this.leaving.length=this.entering.length=0,this.oldState.revert(),this.newState.revert(),requestAnimationFrame(()=>Ys(this.transitionMuteStore)),this}record(){return this.transformAnimation&&(this.transformAnimation.cancel(),this.transformAnimation=null),this.oldState.record(),this.timeline&&(this.timeline.cancel(),this.timeline=null),this.newState.forEachRootNode(Js),this}animate(t={}){const e={ease:$t(t.ease,this.params.ease),delay:$t(t.delay,this.params.delay),duration:$t(t.duration,this.params.duration)},s={id:this.id},i=$t(t.onComplete,this.params.onComplete),r=$t(t.onPause,this.params.onPause);for(let e in D)"ease"!==e&&"duration"!==e&&"delay"!==e&&(H(t[e])?H(this.params[e])||(s[e]=this.params[e]):s[e]=t[e]);s.onComplete=()=>{const e=t.autoplay,s=I.editor;if(e&&e.linked||s&&s.showPanel)i&&i(this.timeline);else{this.transformAnimation&&this.transformAnimation.cancel(),f.forEachRootNode(t=>{ti(t),Js(t)});for(let t=0,e=S.length;t<e;t++){const e=S[t];e.style.transform=f.getComputedValue(e,"transform")}this.root.classList.contains("is-animated")&&(this.root.classList.remove("is-animated"),i&&i(this.timeline)),requestAnimationFrame(()=>{this.root.classList.contains("is-animated")||Ys(this.transitionMuteStore)})}},s.onPause=()=>{const e=t.autoplay;if(e&&e.linked)return i&&i(this.timeline),void(r&&r(this.timeline));this.root.classList.contains("is-animated")&&(this.transformAnimation&&this.transformAnimation.cancel(),f.forEachRootNode(ti),this.root.classList.remove("is-animated"),i&&i(this.timeline),r&&r(this.timeline))},s.composition=!1;const n=yt(yt(t.swapAt||{},this.swapAtParams),e),o=yt(yt(t.enterFrom||{},this.enterFromParams),e),a=yt(yt(t.leaveTo||{},this.leaveToParams),e),[l,h]=ii(n),[d,c]=ii(o),[u,p]=ii(a),m=this.oldState,f=this.newState,g=this.animating,y=this.swapping,_=this.entering,b=this.leaving,v=this.pendingRemoval;g.length=y.length=_.length=b.length=0,m.forEachRootNode(Xs),f.record(),f.forEachRootNode(Qs);const T=[],x=[],S=[],w=[],$=f.rootNode,C=$.$el;f.forEachRootNode(t=>{const e=t.$el,s=t.id,i=t.parentNode,r=!!i&&i.branchAdded,n=!!i&&i.branchRemoved,o=!!i&&i.branchNotRendered;let a=m.nodes.get(s);const l=!a;l?(a=ei(t,{},m),m.nodes.set(s,a),a.measuredIsRemoved=!0):a.measuredIsRemoved&&!t.measuredIsRemoved&&(ei(t,a,m),a.measuredIsRemoved=!0);const h=a.parentNode,c=(h?h.id:null)!==(i?i.id:null),p=a.$el!==t.$el,y=a.measuredIsRemoved,x=t.measuredIsRemoved;if(!a.measuredIsRemoved&&!x&&!l&&(c||p)){const t=a.properties.left,e=a.properties.top,s=i||f.rootNode,r=s.id?m.nodes.get(s.id):null,n=r?r.properties.left:s.properties.left,o=r?r.properties.top:s.properties.top,l=r?r.properties.clientLeft:s.properties.clientLeft,h=r?r.properties.clientTop:s.properties.clientTop;a.properties.x=t-n-l,a.properties.y=e-o-h}t.hasVisibilitySwap&&(t.hasVisibilityHidden&&(t.$el.style.visibility="visible",t.$measure.style.visibility="hidden"),t.hasDisplayNone&&(t.$el.style.display=a.measuredDisplay||t.measuredDisplay||"",t.$measure.style.visibility="hidden"));const S=v.has(e),w=a.measuredIsVisible,C=t.measuredIsVisible,E=!w&&C&&!o,k=!x&&(y||S)&&!r,N=x&&!y&&!n,D=N||x&&S&&!n;t.branchAdded=r||k,t.branchRemoved=n||D,t.branchNotRendered=o||x,x&&w&&(t.$el.style.display=a.measuredDisplay,t.$el.style.visibility="visible",ei(a,t,f)),N?(t.isTarget&&(b.push(e),t.isLeaving=!0),v.add(e)):!x&&S&&v.delete(e),k&&!o||E?(Gs(a,d),t.isTarget&&(_.push(e),t.isEntering=!0)):D&&!o&&Gs(t,u),t===$||!t.isTarget||t.isEntering||t.isLeaving||g.push(e),T.push(e)});let E=0,k=0,N=0;f.forEachRootNode(t=>{const s=t.$el,i=t.parentNode,r=m.nodes.get(t.id),n=t.properties,o=r.properties;let a=i!==$&&i;for(;a&&!a.isTarget&&a!==$;)a=a.parentNode;t===$?(t.index=0,t.targets=g,Zs(t,e)):t.isEntering?(t.index=a?a.index:E,t.targets=a?g:_,Zs(t,c),E++):t.isLeaving?(t.index=a?a.index:k,t.targets=a?g:b,k++,Zs(t,p)):t.isTarget?(t.index=N++,t.targets=g,Zs(t,e)):(t.index=a?a.index:0,t.targets=g,Zs(t,h)),r.index=t.index,r.targets=t.targets;for(let e in n)n[e]=Et(n[e],s,t.index,t.targets,null,null),o[e]=Et(o[e],s,r.index,r.targets,null,null);const d=Math.abs(n.width-o.width)>1,u=Math.abs(n.height-o.height)>1;if(t.sizeChanged=d||u,t.isTarget&&(!t.measuredIsRemoved&&r.measuredIsVisible||t.measuredIsRemoved&&t.measuredIsVisible)){"none"===n.transform&&"none"===o.transform||(t.hasTransform=!0,S.push(s));for(let t in n)if("transform"!==t&&n[t]!==o[t]){x.push(s);break}}t.isTarget||(y.push(s),t.sizeChanged&&i&&i.isTarget&&i.sizeChanged&&(l.transform&&(t.hasTransform=!0,S.push(s)),w.push(s)))});const A={delay:t=>f.getNode(t).delay,duration:t=>f.getNode(t).duration,ease:t=>f.getNode(t).ease};if(s.defaults=A,this.timeline=Xe(s),!x.length&&!S.length&&!y.length)return Ys(this.transitionMuteStore),this.timeline.complete();if(T.length){this.root.classList.add("is-animated");for(let t=0,e=T.length;t<e;t++){const e=T[t],s=e.dataset.layoutId,i=m.nodes.get(s),r=f.nodes.get(s),n=i.properties;r.isInlined||("grid"!==i.measuredDisplay&&"grid"!==r.measuredDisplay||e.style.setProperty("display","block","important"),(e!==C||this.absoluteCoords)&&(e.style.position=this.absoluteCoords?"fixed":"absolute",e.style.left="0px",e.style.top="0px",e.style.marginLeft="0px",e.style.marginTop="0px",e.style.translate=`${n.x}px ${n.y}px`),e===C&&"static"===r.measuredPosition&&(e.style.position="relative",e.style.left="0px",e.style.top="0px")),e.style.width=`${n.width}px`,e.style.height=`${n.height}px`,e.style.minWidth="auto",e.style.minHeight="auto",e.style.maxWidth="none",e.style.maxHeight="none"}m.scrollX===window.scrollX&&m.scrollY===window.scrollY||requestAnimationFrame(()=>window.scrollTo(m.scrollX,m.scrollY));for(let t=0,e=x.length;t<e;t++){const e=x[t],s=e.dataset.layoutId,i=m.nodes.get(s),r=f.nodes.get(s),n=i.properties,o=r.properties;let a=!1;const l={composition:"none"};n.width!==o.width&&(l.width=[n.width,o.width],a=!0),n.height!==o.height&&(l.height=[n.height,o.height],a=!0),r.hasTransform||r.isInlined||(l.translate=[`${n.x}px ${n.y}px`,`${o.x}px ${o.y}px`],a=!0),this.properties.forEach(t=>{const e=n[t],s=o[t];"transform"!==t&&e!==s&&(l[t]=[e,s],a=!0)}),a&&this.timeline.add(e,l,0)}}if(y.length){for(let t=0,e=y.length;t<e;t++){const e=y[t],s=m.getNode(e),i=s.properties;e.style.width=`${i.width}px`,e.style.height=`${i.height}px`,e.style.minWidth="auto",e.style.minHeight="auto",e.style.maxWidth="none",e.style.maxHeight="none",s.isInlined||(e.style.translate=`${i.x}px ${i.y}px`),this.properties.forEach(t=>{"transform"!==t&&(e.style[t]=`${m.getComputedValue(e,t)}`)})}for(let t=0,e=y.length;t<e;t++){const e=y[t],s=f.getNode(e),i=s.properties;this.timeline.call(()=>{e.style.width=`${i.width}px`,e.style.height=`${i.height}px`,e.style.minWidth="auto",e.style.minHeight="auto",e.style.maxWidth="none",e.style.maxHeight="none",s.isInlined||(e.style.translate=`${i.x}px ${i.y}px`),this.properties.forEach(t=>{"transform"!==t&&(e.style[t]=`${f.getComputedValue(e,t)}`)})},s.delay+s.duration/2)}if(w.length){const t=$e(f.nodes.get(w[0].dataset.layoutId).ease),e=e=>1-t(1-e),s={};if(l)for(let t in l)"transform"!==t&&(s[t]=[{from:e=>m.getComputedValue(e,t),to:l[t]},{from:l[t],to:e=>f.getComputedValue(e,t),ease:e}]);this.timeline.add(w,s,0)}}const R=S.length;if(R){for(let t=0;t<R;t++){const e=S[t],s=f.getNode(e);s.isInlined||(e.style.translate=`${m.getComputedValue(e,"x")}px ${m.getComputedValue(e,"y")}px`),e.style.transform=m.getComputedValue(e,"transform"),w.includes(e)&&(s.ease=Et(n.ease,e,s.index,s.targets,null,null),s.duration=Et(n.duration,e,s.index,s.targets,null,null))}this.transformAnimation=Fs.animate(S,{translate:t=>f.getNode(t).isInlined?"0px 0px":`${f.getComputedValue(t,"x")}px ${f.getComputedValue(t,"y")}px`,transform:t=>{const e=f.getComputedValue(t,"transform");if(!w.includes(t))return e;const s=m.getComputedValue(t,"transform"),i=f.getNode(t);return[s,Et(l.transform,t,i.index,i.targets,null,null),e]},autoplay:!1,...A}),this.timeline.sync(this.transformAnimation,0)}return this.timeline.init()}update(t,e={}){return this.record(),t(this),this.animate(e)}}const ni=Ue,oi={},ai=t=>(...e)=>{const s=t(...e);return new Proxy(_,{apply:(t,e,[i])=>s(i),get:(t,e)=>{if(oi[e])return ai((...t)=>{const i=oi[e](...t);return t=>i(s(t))})}})},li=(t,e,s=0)=>{const i=(...t)=>(t.length<e.length?ai(((t,e=0)=>(...s)=>e?e=>t(...s,e):e=>t(e,...s))(e,s)):e)(...t);return oi[t]||(oi[t]=i),i},hi=li("roundPad",ni.roundPad),di=li("padStart",ni.padStart),ci=li("padEnd",ni.padEnd),ui=li("wrap",ni.wrap),pi=li("mapRange",ni.mapRange),mi=li("degToRad",ni.degToRad),fi=li("radToDeg",ni.radToDeg),gi=li("snap",ni.snap),yi=li("clamp",ni.clamp),_i=li("round",ni.round),bi=li("lerp",ni.lerp,1),vi=li("damp",ni.damp,1),Ti=(t=0,e=1,s=0)=>{const i=10**s;return Math.floor((Math.random()*(e-t+1/i)+t)*i)/i};let xi=0;const Si=(t,e=0,s=1,i=0)=>{let r=void 0===t?xi++:t;return(t=e,n=s,o=i)=>{r+=1831565813,r=Math.imul(r^r>>>15,1|r),r^=r+Math.imul(r^r>>>7,61|r);const a=10**o;return Math.floor((((r^r>>>14)>>>0)/4294967296*(n-t+1/a)+t)*a)/a}},wi=t=>t[Ti(0,t.length-1)],$i=(t,e=Ti)=>{let s,i,r=t.length;for(;r;)i=e(0,--r),s=t[r],t[r]=t[i],t[i]=s;return t},Ci=(t,e={})=>{let s,i=[],r=0,n=null;const o=e.from,a=e.reversed,l=e.ease,h=!H(l),d=h&&!H(l.ease)?l.ease:h?$e(l):null,c=e.grid,u=!0===c,m=e.axis,f=e.total,g=H(o)||0===o||"first"===o,y="center"===o,_="last"===o,b="random"===o,v=F(o),T=F(t),x=e.use,S=Z(T?t[0]:t),w=T?Z(t[1]):0,$=C.exec((T?t[1]:t)+p),E=e.start||0+(T?S:0),k=e.seed,N=H(k)||!1===k?Ti:Si(!0===k?0:k),D=e.jitter,A=!H(D),I=F(D),R=I?D[0]:D||0,L=I?D[1]:D||0;let B=g?0:V(o)?o:0;return(t,l,h,p,g)=>{const[C]=ce(t),k=H(f)?h.length:f,D=!H(x)&&(z(x)?x(C,l,k):Dt(C,x)),I=V(D)||O(D)&&V(+D)?+D:l,P=I>=0&&I<k?I:l;if(y&&(B=(k-1)/2),_&&(B=k-1),!i.length){if(u){let t=!0,e=!1,s=1/0,r=1/0,n=1/0,a=-1/0,l=-1/0,d=-1/0;const c=[],u=[],p=[];for(let i=0;i<k;i++){const o=h[i];let m=0,f=0,g=0,y=!1;if(o&&z(o.getBoundingClientRect)){const t=o.getBoundingClientRect();m=t.left+t.width/2,f=t.top+t.height/2,y=!0}else{const t=o;t&&V(t.x)&&V(t.y)&&(m=t.x,f=t.y,V(t.z)&&(g=t.z,e=!0),y=!0)}if(!y){t=!1;break}c.push(m),u.push(f),p.push(g),m<s&&(s=m),f<r&&(r=f),g<n&&(n=g),m>a&&(a=m),f>l&&(l=f),g>d&&(d=g)}if(t){let t=c[0],h=u[0],f=p[0];v?(t=s+o[0]*(a-s),h=r+o[1]*(l-r),f=e?n+(o.length>=3?o[2]:.5)*(d-n):0):y?(t=(s+a)/2,h=(r+l)/2,f=(n+d)/2):_?(t=c[k-1],h=u[k-1],f=p[k-1]):V(o)&&(t=c[o],h=u[o],f=p[o]);for(let s=0;s<k;s++){const r=t-c[s],n=h-u[s],o=f-p[s];let a=J(r*r+n*n+(e?o*o:0));"x"===m&&(a=-r),"y"===m&&(a=-n),"z"===m&&(a=-o),i.push(a)}let g=1/0;for(let t=0;t<k;t++){const e=et(i[t]);e>0&&e<g&&(g=e)}if(g>0&&g<1/0)for(let t=0;t<k;t++)i[t]=i[t]/g}else for(let t=0;t<k;t++)i.push(et(B-t))}else for(let t=0;t<k;t++)if(c){const e=c.length,s=c[0]*c[1];let r,n,a;v?(r=o[0]*(c[0]-1),n=o[1]*(c[1]-1),a=3===e?(o.length>=3?o[2]:.5)*(c[2]-1):0):y?(r=(c[0]-1)/2,n=(c[1]-1)/2,a=3===e?(c[2]-1)/2:0):(r=B%c[0],n=rt(B/c[0])%c[1],a=3===e?rt(B/s):0);const l=r-t%c[0],h=n-rt(t/c[0])%c[1],d=a-(3===e?rt(t/s):0);let u=J(l*l+h*h+(3===e?d*d:0));"x"===m&&(u=-l),"y"===m&&(u=-h),"z"===m&&(u=-d),i.push(u)}else i.push(et(B-t));r=i[0];for(let t=1;t<k;t++)i[t]>r&&(r=i[t]);if(d||a)for(let t=0;t<k;t++){let e=i[t];d&&(e=d(e/r)*r),a&&(e=m?-e:et(r-e)),i[t]=e}if(A){n=new Array(k);for(let t=0;t<k;t++)n[t]=N(-1,1,4)}b&&(i=$i(i,N))}const F=T?(w-S)/r:S;H(s)&&(s=g?Ve(g,H(e.start)?g.iterationDuration:E):E);let M=s+(F*ct(i[P],2)||0);if(A){const t=r?i[P]/r:0,e=R+(L-R)*t;M+=n[P]*e}return e.modifier&&(M=e.modifier(M)),$&&(M=`${M}${$[2]}`),M}};var Ei=Object.freeze({__proto__:null,$:ce,addChild:vt,clamp:yi,cleanInlineStyles:zt,createSeededRandom:Si,damp:vi,degToRad:mi,forEachChildren:_t,get:ts,keepTime:ds,lerp:bi,mapRange:pi,padEnd:ci,padStart:di,radToDeg:fi,random:Ti,randomPick:wi,remove:ss,removeChild:bt,round:_i,roundPad:hi,set:es,shuffle:$i,snap:gi,stagger:Ci,sync:hs,wrap:ui});const ki=t=>{const e=de(t)[0];return e&&Y(e)?e:console.warn(`${t} is not a valid SVGGeometryElement`)},Ni=(t,e,s,i,r)=>{const n=s+i,o=r?Math.max(0,Math.min(n,e)):(n%e+e)%e;return t.getPointAtLength(o)},Di=(t,e,s=0)=>i=>{const r=+t.getTotalLength(),n=i[a],o=t.getCTM(),l=0===s;return{from:0,to:r,modifier:i=>{const a=i+s*r;if("a"===e){const e=Ni(t,r,a,-1,l),s=Ni(t,r,a,1,l);return 180*at(s.y-e.y,s.x-e.x)/lt}{const s=Ni(t,r,a,0,l);return"x"===e?n||!o?s.x:s.x*o.a+s.y*o.c+o.e:n||!o?s.y:s.x*o.b+s.y*o.d+o.f}}}},Ai=(t,e=0)=>{const s=ki(t);if(s)return{translateX:Di(s,"x",e),translateY:Di(s,"y",e),rotate:Di(s,"a",e)}},Ii=(t,e=0,s=0)=>de(t).map(t=>((t,e,s)=>{const i=u,r=getComputedStyle(t),n=r.strokeLinecap,o="non-scaling-stroke"===r.vectorEffect?t:null;let a=n;const l=new Proxy(t,{get(t,e){const s=t[e];return e===h?t:"setAttribute"===e?(...e)=>{if("draw"===e[0]){const s=e[1].split(" "),r=+s[0],l=+s[1],h=(t=>{let e=1;if(t&&t.getCTM){const s=t.getCTM();s&&(e=(J(s.a*s.a+s.b*s.b)+J(s.c*s.c+s.d*s.d))/2)}return e})(o),d=-1e3*r*h,c=l*i*h+d,u=i*h+(0===r&&1===l||1===r&&0===l?0:10*h)-c;if("butt"!==n){const e=r===l?"butt":n;a!==e&&(t.style.strokeLinecap=`${e}`,a=e)}t.setAttribute("stroke-dashoffset",`${d}`),t.setAttribute("stroke-dasharray",`${c} ${u}`)}return Reflect.apply(s,t,e)}:z(s)?(...e)=>Reflect.apply(s,t,e):s}});return"1000"!==t.getAttribute("pathLength")&&(t.setAttribute("pathLength","1000"),l.setAttribute("draw",`${e} ${s}`)),l})(t,e,s)),Ri=(t,e=.33)=>(s,i,r,n)=>{if(!(s.tagName||"").toLowerCase().match(/^(path|polygon|polyline)$/))throw new Error(`Can't morph a <${s.tagName}> SVG element. Use <path>, <polygon> or <polyline>.`);const o=ki(t);if(!o)throw new Error("Can't morph to an invalid target. 'path2' must resolve to an existing <path>, <polygon> or <polyline> SVG element.");if(!(o.tagName||"").toLowerCase().match(/^(path|polygon|polyline)$/))throw new Error(`Can't morph a <${o.tagName}> SVG element. Use <path>, <polygon> or <polyline>.`);const a="path"===s.tagName,l=a?" ":",",h=n?n._value:null;h&&s.setAttribute(a?"d":"points",h);let d="",c="";if(e){const t=s.getTotalLength(),i=o.getTotalLength(),r=Math.max(Math.ceil(t*e),Math.ceil(i*e));for(let e=0;e<r;e++){const n=e/(r-1),h=s.getPointAtLength(t*n),u=o.getPointAtLength(i*n),p=a?0===e?"M":"L":"";d+=p+ct(h.x,3)+l+h.y+" ",c+=p+ct(u.x,3)+l+u.y+" "}}else d=s.getAttribute(a?"d":"points"),c=o.getAttribute(a?"d":"points");return[d,c]};var Li=Object.freeze({__proto__:null,createDrawable:Ii,createMotionPath:Ai,morphTo:Ri});const Bi="undefined"!=typeof Intl&&Intl.Segmenter,Pi=/\{value\}/g,Fi=/\{i\}/g,Mi=/(\s+)/,Vi=/^\s+$/,Oi="line",zi="word",Hi="char",Xi="data-line";let Yi=null,Wi=null,Ui=null;const qi=t=>t.isWordLike||" "===t.segment||V(+t.segment),ji=t=>t.setAttribute("aria-hidden","true"),Gi=(t,e)=>[...t.querySelectorAll(`[data-${e}]:not([data-${e}] [data-${e}])`)],Zi={line:"#00D672",word:"#FF4B4B",char:"#5A87FF"},Qi=t=>{if(!t.childElementCount&&!t.textContent.trim()){const e=t.parentElement;t.remove(),e&&Qi(e)}},Ji=(t,e,s)=>{const i=t.getAttribute(Xi);if(null!==i&&+i!==e||"BR"===t.tagName){s.add(t);const e=t.previousSibling,i=t.nextSibling;e&&3===e.nodeType&&Vi.test(e.textContent)&&s.add(e),i&&3===i.nodeType&&Vi.test(i.textContent)&&s.add(i)}let r=t.childElementCount;for(;r--;)Ji(t.children[r],e,s);return s},Ki=(t,e={})=>{let s="";e||(e={});const i=O(e.class)?` class="${e.class}"`:"",r=$t(e.clone,!1),n=$t(e.wrap,!1),o=n?!0===n?"clip":n:!!r&&"clip";return n&&(s+=`<span${o?` style="overflow:${o};"`:""}>`),s+=`<span${i}${r?' style="position:relative;"':""} data-${t}="{i}">`,r?(s+="<span>{value}</span>",s+=`<span inert style="position:absolute;top:${"top"===r?"-100%":"bottom"===r?"100%":"0"};left:${"left"===r?"-100%":"right"===r?"100%":"0"};white-space:nowrap;">{value}</span>`):s+="{value}",s+="</span>",n&&(s+="</span>"),s},tr=(t,e,s,i,r,n,o,a,l)=>{const h=r===Oi,d=r===Hi,c=`_${r}_`,u=z(t)?t(s):t,p=h?"block":"inline-block";Ui.innerHTML=u.replace(Pi,`<i class="${c}"></i>`).replace(Fi,`${d?l:h?o:a}`);const m=Ui.content,f=m.firstElementChild,g=m.querySelector(`[data-${r}]`)||f,y=m.querySelectorAll(`i.${c}`),_=y.length;if(_){f.style.display=p,g.style.display=p,g.setAttribute(Xi,`${o}`),h||(g.setAttribute("data-word",`${a}`),d&&g.setAttribute("data-char",`${l}`));let t=_;for(;t--;){const e=y[t],i=e.parentElement;i.style.display=p,h?i.innerHTML=s.innerHTML:i.replaceChild(s.cloneNode(!0),e)}e.push(g),i.appendChild(m)}else console.warn('The expression "{value}" is missing from the provided template.');return n&&(f.style.outline=`1px dotted ${Zi[r]}`),f};class er{constructor(t,s={}){Yi||(Yi=Bi?new Bi([],{granularity:zi}):{segment:t=>{const e=[],s=t.split(Mi);for(let t=0,i=s.length;t<i;t++){const i=s[t];e.push({segment:i,isWordLike:!Vi.test(i)})}return e}}),Wi||(Wi=Bi?new Bi([],{granularity:"grapheme"}):{segment:t=>[...t].map(t=>({segment:t}))}),!Ui&&e&&(Ui=i.createElement("template")),A.current&&A.current.register(this);const{words:r,chars:n,lines:o,accessible:a,includeSpaces:l,debug:h}=s,d=(t=F(t)?t[0]:t)&&t.nodeType?t:(he(t)||[])[0],c=!0===o?{}:o,u=!0===r||H(r)?{}:r,p=!0===n?{}:n;this.debug=$t(h,!1),this.includeSpaces=$t(l,!1),this.accessible=$t(a,!0),this.linesOnly=c&&!u&&!p,this.lineTemplate=M(c)?Ki(Oi,c):c,this.wordTemplate=M(u)||this.linesOnly?Ki(zi,u):u,this.charTemplate=M(p)?Ki(Hi,p):p,this.$target=d,this.html=d&&d.innerHTML,this.lines=[],this.words=[],this.chars=[],this.effects=[],this.effectsCleanups=[],this.cache=null,this.ready=!1,this.width=0,this.resizeTimeout=null;const m=()=>this.html&&(c||u||p)&&this.split();this.resizeObserver=new ResizeObserver(()=>{clearTimeout(this.resizeTimeout),this.resizeTimeout=setTimeout(()=>{const t=d.offsetWidth;t!==this.width&&(this.width=t,m())},150)}),this.lineTemplate&&!this.ready?i.fonts.ready.then(m):m(),d?this.resizeObserver.observe(d):console.warn("No Text Splitter target found.")}addEffect(t){if(!z(t))return console.warn("Effect must return a function."),this;const e=ds(t);return this.effects.push(e),this.ready&&(this.effectsCleanups[this.effects.length-1]=e(this)),this}revert(){return clearTimeout(this.resizeTimeout),this.lines.length=this.words.length=this.chars.length=0,this.resizeObserver.disconnect(),this.effectsCleanups.forEach(t=>z(t)?t(this):t.revert&&t.revert()),this.$target.innerHTML=this.html,this}splitNode(t){const e=this.wordTemplate,s=this.charTemplate,r=this.includeSpaces,n=this.debug,o=t.nodeType;if(3===o){const o=t.nodeValue;if(o.trim()){const a=[],l=this.words,h=this.chars,d=Yi.segment(o),c=i.createDocumentFragment();let u=null;for(const t of d){const e=t.segment,s=qi(t);if(!u||s&&u&&qi(u))a.push(e);else{const t=a.length-1,s=a[t];Mi.test(s)||Mi.test(e)?a.push(e):a[t]+=e}u=t}for(let t=0,o=a.length;t<o;t++){const o=a[t];if(o.trim()){const d=a[t+1],u=r&&d&&!d.trim(),p=o,m=s?Wi.segment(p):null,f=s?i.createDocumentFragment():i.createTextNode(u?o+" ":o);if(s){const t=[...m];for(let e=0,r=t.length;e<r;e++){const o=t[e],a=e===r-1&&u?o.segment+" ":o.segment,d=i.createTextNode(a);tr(s,h,d,f,Hi,n,-1,l.length,h.length)}}e?tr(e,l,f,c,zi,n,-1,l.length,h.length):s?c.appendChild(f):c.appendChild(i.createTextNode(o)),u&&t++}else{if(t&&r)continue;c.appendChild(i.createTextNode(o))}}t.parentNode.replaceChild(c,t)}}else if(1===o){const e=[...t.childNodes];for(let t=0,s=e.length;t<s;t++)this.splitNode(e[t])}}split(t=!1){const e=this.$target,s=!!this.cache&&!t,r=this.lineTemplate,n=this.wordTemplate,o=this.charTemplate,a="loading"!==i.fonts.status,l=r&&a;this.ready=!r||a,(l||t)&&this.effectsCleanups.forEach(t=>z(t)&&t(this)),s||(t&&(e.innerHTML=this.html,this.words.length=this.chars.length=0),this.splitNode(e),this.cache=e.innerHTML),l&&(s&&(e.innerHTML=this.cache),this.lines.length=0,n&&(this.words=Gi(e,zi))),o&&(l||n)&&(this.chars=Gi(e,Hi));const h=this.words.length?this.words:this.chars;let d,c=0;for(let t=0,e=h.length;t<e;t++){const e=h[t],{top:s,height:i}=e.getBoundingClientRect();!H(d)&&s-d>.5*i&&c++,e.setAttribute(Xi,`${c}`);const r=e.querySelectorAll(`[${Xi}]`);let n=r.length;for(;n--;)r[n].setAttribute(Xi,`${c}`);d=s}if(l){const t=i.createDocumentFragment(),s=new Set,a=[];for(let t=0;t<c+1;t++){const i=e.cloneNode(!0);Ji(i,t,new Set).forEach(t=>{const e=t.parentNode;e&&(1===t.nodeType&&s.add(e),e.removeChild(t))}),a.push(i)}s.forEach(Qi);for(let e=0,s=a.length;e<s;e++)tr(r,this.lines,a[e],t,Oi,this.debug,e);e.innerHTML="",e.appendChild(t),n&&(this.words=Gi(e,zi)),o&&(this.chars=Gi(e,Hi))}if(this.linesOnly){const t=this.words;let e=t.length;for(;e--;){const s=t[e];s.replaceWith(s.textContent)}t.length=0}if(this.accessible&&(l||!s)){const t=i.createElement("span");t.style.cssText="position:absolute;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);width:1px;height:1px;white-space:nowrap;",t.innerHTML=this.html,e.insertBefore(t,e.firstChild),this.lines.forEach(ji),this.words.forEach(ji),this.chars.forEach(ji)}return this.width=e.offsetWidth,(l||t)&&this.effects.forEach((t,e)=>this.effectsCleanups[e]=t(this)),this}refresh(){this.split(!0)}}const sr=(t,e)=>new er(t,e),ir=(t,e)=>(console.warn("text.split() is deprecated, import splitText() directly, or text.splitText()"),new er(t,e)),rr=t=>{let e="";for(let s=0,i=t.length;s<i;s++)if(s+2<i&&"-"===t[s+1]&&t.charCodeAt(s)<t.charCodeAt(s+2)){const i=t.charCodeAt(s),r=t.charCodeAt(s+2);for(let t=i;t<=r;t++)e+=String.fromCharCode(t);s+=2}else e+=t[s];return e},nr={lowercase:"a-z",uppercase:"A-Z",numbers:"0-9",symbols:"!%#_|*+=",braille:"⠀-⣿",blocks:"▀-▟",shades:"░-▓"},or=new WeakMap,ar=(t={})=>{t||(t={});const e=t.chars,s=$e(t.ease||"linear"),i=t.text,r=t.from,n=t.reversed||!1,o=t.perturbation||0,a=t.cursor,l=!0===a?"_":"number"==typeof a?String.fromCharCode(a):"string"==typeof a?a:"",h=l.length,d=t.seed||0,c=void 0===t.override||t.override,u=t.revealRate||60,p=1e3*I.timeScale/u,m=t.settleDuration||300*I.timeScale,f=t.settleRate||30,g=t.duration,y=t.revealDelay,b=t.delay,v=t.onChange||_;return(t,a,u,_)=>{const T="function"==typeof e?e(t,a,u):e||"a-zA-Z0-9!%#_",x=rr(nr[T]||T),S=x.length-1,w="function"==typeof g?g(t,a,u):g,$="function"==typeof y?y(t,a,u):y||0,C="function"==typeof b?b(t,a,u):b||0,E=d?Si(d):Si();or.has(t)||or.set(t,t.textContent);const k=_?_._value:t.textContent,N=void 0!==i?"function"==typeof i?i(t,a,u):i:_?_._value:or.get(t),D=" "===N||"&nbsp;"===N?" ":N,A=" "===k?0:k.length,R=D.length,L=!0===c?x:"string"==typeof c&&c.length>0?rr(nr[c]||c):null,B=L?L.length-1:0,P=" "===c?" ":null,F=""===c?R:Math.max(A,R),M=w>0?w:(F-1)*p+m,V=ct((M+$)/I.timeScale,0)*I.timeScale,O=$>0?ct($/V,12):0,z=void 0===r||"auto"===r?R<A?"right":"left":r,H=new Int32Array(F);if("random"===z){for(let t=0;t<F;t++)H[t]=t;for(let t=F-1;t>0;t--){const e=E(0,t),s=H[t];H[t]=H[e],H[e]=s}}else{const t="right"===z?(""!==c&&A?A:F)-1:"center"===z?((""!==c&&A?A:F)-1)/2:"number"==typeof z?z:0,e=Math.abs,s=new Array(F);for(let t=0;t<F;t++)s[t]=t;s.sort((s,i)=>e(s-t)-e(i-t));for(let t=0;t<F;t++)H[s[t]]=t}if(n){const t=F-1;for(let e=0;e<F;e++)H[e]=t-H[e]}const X=ct(m/M,12),Y=ct((1-X)/F,12),W=h*Y,U=ct(1e3*I.timeScale/(f*V),12),q=new Float32Array(F),j=new Float32Array(F),G=o>0?o*X:0;for(let t=0;t<F;t++){const e=G>0?(E(0,2e3)-1e3)/1e3*G:0,s=G>0?(E(0,2e3)-1e3)/1e3*G:0;q[t]=H[t]*Y+e,j[t]=Math.ceil((q[t]+X+s)/U)*U}if(R<F&&"left"!==z&&"right"!==z&&"random"!==z){let t=0;for(let e=R;e<F;e++)j[e]>t&&(t=j[e]);const e=new Array(R);for(let t=0;t<R;t++)e[t]=t;e.sort((t,e)=>H[t]-H[e]);const s=(1-t)/R;for(let i=0;i<R;i++){const r=t+i*s;r>j[e[i]]&&(j[e[i]]=r)}}const Z=new Array(F);for(let t=0;t<F;t++)Z[t]=x[E(0,S)];const Q=L?L===x?Z:new Array(F):null;if(Q&&Q!==Z)for(let t=0;t<F;t++)Q[t]=P||L[E(0,L.length-1)];let J=k;if(!_)if(""===c)J="";else if(L){J="";for(let t=0;t<A;t++)J+=" "===k[t]?" ":Q[t]}let K=-1,tt=-1,et="";const st=""!==c,it=!!L,rt=h>0;return{from:0,to:1,duration:V,delay:C,ease:"linear",modifier:t=>{if(t===K)return et;if(K=t,C>0&&t<=0)return et=k,k;if(t<=0)return et=J,J;if(t>=1)return et=D,D;et="";const e=t/U|0,i=e!==tt;i&&(tt=e);const r=O>0?(t-O)/(1-O):t,n=r>0?s(r):0;for(let t=0;t<F;t++){const e=q[t];n>=j[t]?t<R&&(et+=D[t]):n<=0||n<e?st&&t<A&&(it?" "===k[t]?et+=" ":(i&&(Q[t]=P||L[E(0,B)]),et+=Q[t]):et+=k[t]):t<R&&" "===D[t]||t<A&&" "===k[t]?et+=" ":rt&&n-e<W?et+=l[h-1-((n-e)/Y|0)]:(i&&(Z[t]=x[E(0,S)]),et+=Z[t])}return i&&v(et,n),et}}}};var lr=Object.freeze({__proto__:null,TextSplitter:er,scrambleText:ar,split:ir,splitText:sr});t.$=ce,t.Animatable=Ye,t.AutoLayout=ri,t.Draggable=ls,t.JSAnimation=Me,t.Scope=cs,t.ScrollObserver=vs,t.Spring=je,t.TextSplitter=er,t.Timeline=He,t.Timer=le,t.WAAPIAnimation=Ps,t.addChild=vt,t.animate=(t,e)=>I.editor?I.editor.addAnimation(t,e):new Me(t,e,null,0,!1).init(),t.clamp=yi,t.cleanInlineStyles=zt,t.createAnimatable=(t,e)=>new Ye(t,e),t.createDraggable=(t,e)=>new ls(t,e),t.createDrawable=Ii,t.createLayout=(t,e)=>new ri(t,e),t.createMotionPath=Ai,t.createScope=t=>new cs(t),t.createSeededRandom=Si,t.createSpring=Ze,t.createTimeline=Xe,t.createTimer=t=>new le(t,null,0).init(),t.cubicBezier=xs,t.damp=vi,t.degToRad=mi,t.eases=Te,t.easings=Cs,t.engine=qt,t.forEachChildren=_t,t.get=ts,t.globals=I,t.irregular=$s,t.keepTime=ds,t.lerp=bi,t.linear=ws,t.mapRange=pi,t.morphTo=Ri,t.onScroll=(t={})=>new vs(t),t.padEnd=ci,t.padStart=di,t.radToDeg=fi,t.random=Ti,t.randomPick=wi,t.remove=ss,t.removeChild=bt,t.round=_i,t.roundPad=hi,t.scrambleText=ar,t.scrollContainers=ps,t.set=es,t.shuffle=$i,t.snap=gi,t.split=ir,t.splitText=sr,t.spring=Ge,t.stagger=Ci,t.steps=Ss,t.svg=Li,t.sync=hs,t.text=lr,t.utils=Ei,t.waapi=Fs,t.wrap=ui});
</script><script>/* Generated by scripts/build-gallery.py; edit catalogs or examples.js. */
window.animeExamples = [
{
"id": "svg-draw",
"kind": "element",
"title": "Draw a connection",
"description": "A trace reveals a directed connection; labels remain readable.",
"duration": 900,
"path": "M 55 110 C 140 20 240 200 345 110",
"start": "Source",
"end": "Destination",
"group": "elements",
"groupTitle": "Elements",
"beatSource": "runtime",
"useWhen": "Explain a trace reveals a directed connection; labels remain readable.",
"avoid": "Avoid decorative motion or treating illustrative timing and geometry as measured performance.",
"assumptions": "Original conceptual example; all timing and geometry are illustrative. Retest edited parameters."
},
{
"id": "motion-path",
"kind": "element",
"title": "Follow a route",
"description": "A packet follows the same coordinate space as its route.",
"duration": 1200,
"path": "M 55 110 C 140 20 240 200 345 110",
"start": "Send",
"end": "Receive",
"group": "elements",
"groupTitle": "Elements",
"beatSource": "runtime",
"useWhen": "Explain a packet follows the same coordinate space as its route.",
"avoid": "Avoid decorative motion or treating illustrative timing and geometry as measured performance.",
"assumptions": "Original conceptual example; all timing and geometry are illustrative. Retest edited parameters."
},
{
"id": "spatial-stagger",
"kind": "element",
"title": "Propagate from the center",
"description": "Row-major cells activate outward from the center of a grid.",
"duration": 350,
"delay": 100,
"columns": 5,
"rows": 3,
"group": "elements",
"groupTitle": "Elements",
"beatSource": "runtime",
"useWhen": "Explain row-major cells activate outward from the center of a grid.",
"avoid": "Avoid decorative motion or treating illustrative timing and geometry as measured performance.",
"assumptions": "Original conceptual example; all timing and geometry are illustrative. Retest edited parameters."
},
{
"id": "dependency-flow",
"kind": "composition",
"title": "Explain a dependency",
"description": "Input connects to a check, then the checked result reaches output.",
"duration": 600,
"labels": [
"Input",
"Check",
"Output"
],
"group": "compositions",
"groupTitle": "Compositions",
"beatSource": "runtime",
"useWhen": "Explain input connects to a check, then the checked result reaches output.",
"avoid": "Avoid decorative motion or treating illustrative timing and geometry as measured performance.",
"assumptions": "Original conceptual example; all timing and geometry are illustrative. Retest edited parameters."
},
{
"id": "assemble-explode",
"kind": "composition",
"title": "Separate, inspect, reassemble",
"description": "Stable parts separate to expose their relationship, then return to one assembly.",
"duration": 700,
"distance": 105,
"labels": [
"Interface",
"Compute",
"Storage"
],
"group": "compositions",
"groupTitle": "Compositions",
"beatSource": "runtime",
"useWhen": "Explain stable parts separate to expose their relationship, then return to one assembly.",
"avoid": "Avoid decorative motion or treating illustrative timing and geometry as measured performance.",
"assumptions": "Original conceptual example; all timing and geometry are illustrative. Retest edited parameters."
},
{
"id": "oil-gas-separator-upset",
"group": "oil-gas",
"groupTitle": "Oil & gas",
"title": "Separator train: contain an upset",
"description": "Separate the streams; isolate one train without hiding the recovery route.",
"useWhen": "Use with operations educators to explain how separation, upset containment and alternate train availability differ. Ask which paths must stop before recovery.",
"avoid": "Do not use as a live control display, regulatory assurance, numerical model or a substitute for locally approved procedures.",
"assumptions": "Original conceptual model. All timings, quantities, rates and capacities are illustrative. Geometry shows relationships, not physical scale. No clinical, compliance or engineering certification claims.",
"config": {
"phaseMs": 1200,
"feedLevel": 26
},
"beats": [
{
"at": 0,
"label": "Feed split"
},
{
"at": 1200,
"label": "Separation"
},
{
"at": 2400,
"label": "Upset held"
},
{
"at": 3600,
"label": "Train isolated"
},
{
"at": 4800,
"label": "Stable route"
},
{
"at": 6000,
"label": "Settled outcome"
}
],
"kind": "industry"
},
{
"id": "oil-gas-pipeline-reroute",
"group": "oil-gas",
"groupTitle": "Oil & gas",
"title": "Pipeline leak: isolate and bypass",
"description": "Two boundary valves contain the suspect segment before bypass flow resumes.",
"useWhen": "Use in resilience workshops to distinguish detection, boundary isolation and alternate delivery. Ask whether a bypass exists before promising restored supply.",
"avoid": "Do not use as a live control display, regulatory assurance, numerical model or a substitute for locally approved procedures.",
"assumptions": "Original conceptual model. All timings, quantities, rates and capacities are illustrative. Geometry shows relationships, not physical scale. No clinical, compliance or engineering certification claims.",
"config": {
"phaseMs": 1200,
"bypassY": 365
},
"beats": [
{
"at": 0,
"label": "Normal flow"
},
{
"at": 1200,
"label": "Leak alarm"
},
{
"at": 2400,
"label": "Close bounds"
},
{
"at": 3600,
"label": "Open bypass"
},
{
"at": 4800,
"label": "Supply restored"
},
{
"at": 6000,
"label": "Settled outcome"
}
],
"kind": "industry"
},
{
"id": "pharma-batch-genealogy",
"group": "pharma",
"groupTitle": "Pharma",
"title": "Batch genealogy: hold, then release",
"description": "A quality hold propagates to descendants; disposition restores only the accepted branch.",
"useWhen": "Use with manufacturing quality and data-lineage teams to explain why a hold follows descendants while release requires branch-specific evidence.",
"avoid": "Do not use as a live control display, regulatory assurance, numerical model or a substitute for locally approved procedures.",
"assumptions": "Original conceptual model. All timings, quantities, rates and capacities are illustrative. Geometry shows relationships, not physical scale. No clinical, compliance or engineering certification claims.",
"config": {
"phaseMs": 1200,
"packCount": 3
},
"beats": [
{
"at": 0,
"label": "Trace inputs"
},
{
"at": 1200,
"label": "Blend batch"
},
{
"at": 2400,
"label": "Hold lineage"
},
{
"at": 3600,
"label": "Review evidence"
},
{
"at": 4800,
"label": "Release branch"
},
{
"at": 6000,
"label": "Settled outcome"
}
],
"kind": "industry"
},
{
"id": "pharma-cold-chain-quarantine",
"group": "pharma",
"groupTitle": "Pharma",
"title": "Cold chain: excursion to quarantine",
"description": "A recorded excursion changes custody status, not the historical temperature trace.",
"useWhen": "Use with distribution and quality teams to explain why a logger excursion changes custody disposition without erasing the temperature history.",
"avoid": "Do not use as a live control display, regulatory assurance, numerical model or a substitute for locally approved procedures.",
"assumptions": "Original conceptual model. All timings, quantities, rates and capacities are illustrative. Geometry shows relationships, not physical scale. No clinical, compliance or engineering certification claims.",
"config": {
"phaseMs": 1200,
"excursionRise": 48
},
"beats": [
{
"at": 0,
"label": "Pack & record"
},
{
"at": 1200,
"label": "Transport"
},
{
"at": 2400,
"label": "Excursion"
},
{
"at": 3600,
"label": "Quarantine"
},
{
"at": 4800,
"label": "Disposition"
},
{
"at": 6000,
"label": "Settled outcome"
}
],
"kind": "industry"
},
{
"id": "government-permit-review-loop",
"group": "government",
"groupTitle": "Government",
"title": "Permit review: parallel checks & correction",
"description": "Independent reviews converge; a missing exhibit returns to the applicant before decision.",
"useWhen": "Use with public-service designers to distinguish parallel review from a decision gate and show how missing exhibits create an applicant correction loop.",
"avoid": "Do not use as a live control display, regulatory assurance, numerical model or a substitute for locally approved procedures.",
"assumptions": "Original conceptual model. All timings, quantities, rates and capacities are illustrative. Geometry shows relationships, not physical scale. No clinical, compliance or engineering certification claims.",
"config": {
"phaseMs": 1200,
"exhibitPages": 3
},
"beats": [
{
"at": 0,
"label": "Application"
},
{
"at": 1200,
"label": "Parallel review"
},
{
"at": 2400,
"label": "Missing exhibit"
},
{
"at": 3600,
"label": "Correction"
},
{
"at": 4800,
"label": "Decision gate"
},
{
"at": 6000,
"label": "Settled outcome"
}
],
"kind": "industry"
},
{
"id": "government-budget-execution",
"group": "government",
"groupTitle": "Government",
"title": "Budget allocation: authority before spend",
"description": "Approved envelopes become commitments; expenditure follows a separate execution gate.",
"useWhen": "Use with public-finance educators to separate allocation, authority, commitment and expenditure; ask why an unspent envelope is not automatically reusable.",
"avoid": "Do not use as a live control display, regulatory assurance, numerical model or a substitute for locally approved procedures.",
"assumptions": "Original conceptual model. All timings, quantities, rates and capacities are illustrative. Geometry shows relationships, not physical scale. No clinical, compliance or engineering certification claims.",
"config": {
"phaseMs": 1200,
"allocationScale": 0.85
},
"beats": [
{
"at": 0,
"label": "Allocate"
},
{
"at": 1200,
"label": "Authorize"
},
{
"at": 2400,
"label": "Commit"
},
{
"at": 3600,
"label": "Verify delivery"
},
{
"at": 4800,
"label": "Record spend"
},
{
"at": 6000,
"label": "Settled outcome"
}
],
"kind": "industry"
},
{
"id": "retail-inventory-reservation",
"group": "retail",
"groupTitle": "Retail",
"title": "Omnichannel: reserve before promising",
"description": "Two demand channels compete for one pickable unit; the second order gets an honest alternative.",
"useWhen": "Use with commerce product and store operations teams to expose the race between web and store demand and prevent a second promise on one unit.",
"avoid": "Do not use as a live control display, regulatory assurance, numerical model or a substitute for locally approved procedures.",
"assumptions": "Original conceptual model. All timings, quantities, rates and capacities are illustrative. Geometry shows relationships, not physical scale. No clinical, compliance or engineering certification claims.",
"config": {
"phaseMs": 1200,
"parcelSize": 34
},
"beats": [
{
"at": 0,
"label": "Count stock"
},
{
"at": 1200,
"label": "Web reserves"
},
{
"at": 2400,
"label": "Store competes"
},
{
"at": 3600,
"label": "Offer alternate"
},
{
"at": 4800,
"label": "Fulfil promise"
},
{
"at": 6000,
"label": "Settled outcome"
}
],
"kind": "industry"
},
{
"id": "retail-return-disposition",
"group": "retail",
"groupTitle": "Retail",
"title": "Returns: inspect before restocking",
"description": "Refund and inventory disposition are separate branches; damaged goods stay out of sellable stock.",
"useWhen": "Use with returns, finance and inventory teams to separate refund eligibility from physical restock eligibility and retain the rejected-goods branch.",
"avoid": "Do not use as a live control display, regulatory assurance, numerical model or a substitute for locally approved procedures.",
"assumptions": "Original conceptual model. All timings, quantities, rates and capacities are illustrative. Geometry shows relationships, not physical scale. No clinical, compliance or engineering certification claims.",
"config": {
"phaseMs": 1200,
"restockUnits": 2
},
"beats": [
{
"at": 0,
"label": "Receive return"
},
{
"at": 1200,
"label": "Inspect condition"
},
{
"at": 2400,
"label": "Route disposition"
},
{
"at": 3600,
"label": "Refund record"
},
{
"at": 4800,
"label": "Restock accepted"
},
{
"at": 6000,
"label": "Settled outcome"
}
],
"kind": "industry"
},
{
"id": "logistics-hub-connection-recovery",
"group": "logistics",
"groupTitle": "Logistics",
"title": "Hub sorting: recover a missed connection",
"description": "Follow a late parcel from induction through sorting, a missed departure, exception staging and a later connection.",
"useWhen": "Explain why physical sorting and departure cutoffs are separate dependencies; useful for hub planning and service design.",
"avoid": "Do not present this as a route optimizer, carrier SLA, throughput benchmark or promise of delivery.",
"assumptions": "Original conceptual hub. All timings, positions, capacities and departure windows are illustrative; one parcel represents a tracked consignment.",
"config": {
"duration": 6000,
"recoveryConnection": "Later connection"
},
"beats": [
{
"at": 0,
"label": "Induct"
},
{
"at": 1200,
"label": "Read & sort"
},
{
"at": 2400,
"label": "Cutoff missed"
},
{
"at": 3600,
"label": "Stage safely"
},
{
"at": 4800,
"label": "Reconnect"
},
{
"at": 6000,
"label": "Resolved overview"
}
],
"kind": "industry"
},
{
"id": "logistics-port-crane-yard",
"group": "logistics",
"groupTitle": "Logistics",
"title": "Port coordination: berth, crane and yard",
"description": "A container moves only after berth access, crane clearance and a yard slot align; a blocked lane prompts reassignment.",
"useWhen": "Explain interdependent marine and landside work to planners; show that crane motion alone does not complete a transfer.",
"avoid": "Avoid crane operating instruction, nautical guidance, capacity forecasts or safety clearance claims.",
"assumptions": "All geometry, timing and resource counts are illustrative. Original conceptual port; not an equipment or safety simulation.",
"config": {
"duration": 6000,
"yardSlot": "B"
},
"beats": [
{
"at": 0,
"label": "Berth ready"
},
{
"at": 1200,
"label": "Lift approved"
},
{
"at": 2400,
"label": "Lane blocked"
},
{
"at": 3600,
"label": "Reassign slot"
},
{
"at": 4800,
"label": "Yard receipt"
},
{
"at": 6000,
"label": "Resolved overview"
}
],
"kind": "industry"
},
{
"id": "manufacturing-takt-buffer",
"group": "manufacturing",
"groupTitle": "Manufacturing",
"title": "Assembly flow: bottleneck and buffer",
"description": "Three assembly stations expose an uneven cycle; a small buffer absorbs the mismatch while work is rebalanced.",
"useWhen": "Explain work-in-progress and local bottlenecks to operations teams without implying that a buffer creates capacity.",
"avoid": "Avoid production forecasting, exact takt design or claims that one buffer universally solves a bottleneck.",
"assumptions": "All cycles, buffer sizes, positions and timings are illustrative. Single-piece tokens simplify an original conceptual assembly line.",
"config": {
"duration": 6000,
"bufferSlots": 2
},
"beats": [
{
"at": 0,
"label": "Feed chassis"
},
{
"at": 1200,
"label": "Assemble"
},
{
"at": 2400,
"label": "Queue grows"
},
{
"at": 3600,
"label": "Rebalance"
},
{
"at": 4800,
"label": "Release units"
},
{
"at": 6000,
"label": "Resolved overview"
}
],
"kind": "industry"
},
{
"id": "manufacturing-fault-rework",
"group": "manufacturing",
"groupTitle": "Manufacturing",
"title": "Machine fault: isolate, inspect and rework",
"description": "A machining fault stops the affected cell; a suspect part leaves the main line for inspection, rework and verification.",
"useWhen": "Explain containment boundaries, part identity and the difference between repair of a machine and release of a product.",
"avoid": "Not lockout/tagout instructions, machine-safety validation or a quality-release standard.",
"assumptions": "Conceptual original cell; all timings and counts are illustrative. Animated isolation is a process state, not a certified safety procedure.",
"config": {
"duration": 6000,
"lotId": "LOT A"
},
"beats": [
{
"at": 0,
"label": "Machine part"
},
{
"at": 1200,
"label": "Detect fault"
},
{
"at": 2400,
"label": "Contain lot"
},
{
"at": 3600,
"label": "Rework"
},
{
"at": 4800,
"label": "Verify release"
},
{
"at": 6000,
"label": "Resolved overview"
}
],
"kind": "industry"
},
{
"id": "energy-microgrid-storage",
"group": "energy",
"groupTitle": "Energy",
"title": "Microgrid: balance generation with storage",
"description": "Solar and wind feed a common bus; a renewable dip triggers storage dispatch before a flexible load rejoins.",
"useWhen": "Explain the distinct roles of generation, storage and flexible demand to a general energy audience.",
"avoid": "Not electrical design, dispatch optimization, grid-code compliance or battery-sizing advice.",
"assumptions": "All power, storage and time relationships are qualitative and illustrative; original topology omits protection and power electronics.",
"config": {
"duration": 6000,
"storageBars": 3
},
"beats": [
{
"at": 0,
"label": "Renewables"
},
{
"at": 1200,
"label": "Serve load"
},
{
"at": 2400,
"label": "Output dips"
},
{
"at": 3600,
"label": "Discharge"
},
{
"at": 4800,
"label": "Load rejoins"
},
{
"at": 6000,
"label": "Resolved overview"
}
],
"kind": "industry"
},
{
"id": "energy-feeder-restoration",
"group": "energy",
"groupTitle": "Energy",
"title": "Feeder fault: isolate and restore service",
"description": "A faulted feeder section is opened at both ends; a normally open tie restores healthy downstream service.",
"useWhen": "Explain sectional isolation versus whole-feeder outage with an accessible single-line conceptual topology.",
"avoid": "Never use as switching instructions, protection coordination, load-flow analysis or an operator procedure.",
"assumptions": "Original conceptual topology. Switch states and all timings are illustrative; alternate source capacity and safe isolation are assumed, not calculated.",
"config": {
"duration": 6000,
"tieAvailable": 1
},
"beats": [
{
"at": 0,
"label": "Normal supply"
},
{
"at": 1200,
"label": "Fault appears"
},
{
"at": 2400,
"label": "Open section"
},
{
"at": 3600,
"label": "Close tie"
},
{
"at": 4800,
"label": "Restore branch"
},
{
"at": 6000,
"label": "Resolved overview"
}
],
"kind": "industry"
},
{
"id": "healthcare-care-handoffs",
"group": "healthcare",
"groupTitle": "Healthcare",
"title": "Care coordination: triage and handoffs",
"description": "Follow registration, triage review, care-team handoff and discharge coordination, with an information gap resolved.",
"useWhen": "Explain administrative handoff ownership and missing-information recovery to nonclinical service-design audiences.",
"avoid": "Not clinical triage criteria, treatment recommendations, staffing models or emergency-care instructions.",
"assumptions": "Nonclinical original process illustration. No patient data. All times and resource counts are illustrative; clinical decisions are intentionally excluded.",
"config": {
"duration": 6000,
"handoffRole": "Care coordinator"
},
"beats": [
{
"at": 0,
"label": "Register"
},
{
"at": 1200,
"label": "Triage review"
},
{
"at": 2400,
"label": "Resolve gap"
},
{
"at": 3600,
"label": "Team accepts"
},
{
"at": 4800,
"label": "Coordinate exit"
},
{
"at": 6000,
"label": "Resolved overview"
}
],
"kind": "industry"
},
{
"id": "healthcare-sample-rejection",
"group": "healthcare",
"groupTitle": "Healthcare",
"title": "Diagnostic sample chain: reject and recollect",
"description": "A labeled tube passes accession and inspection; an unsuitable specimen is held while a linked replacement reaches analysis.",
"useWhen": "Explain specimen identity and rejection recovery as a nonclinical laboratory coordination illustration.",
"avoid": "Not diagnostic interpretation, collection instructions, rejection criteria, patient advice or laboratory accreditation guidance.",
"assumptions": "Nonclinical conceptual workflow with invented sample identifiers. All counts and timings are illustrative; suitability is a generic process state.",
"config": {
"duration": 6000,
"sampleId": "S-042"
},
"beats": [
{
"at": 0,
"label": "Label & send"
},
{
"at": 1200,
"label": "Accession"
},
{
"at": 2400,
"label": "Reject & hold"
},
{
"at": 3600,
"label": "Recollect"
},
{
"at": 4800,
"label": "Analyze & report"
},
{
"at": 6000,
"label": "Resolved overview"
}
],
"kind": "industry"
},
{
"id": "finance-payment-reconciliation",
"group": "finance",
"groupTitle": "Finance",
"title": "Payment: authorization is not settlement",
"description": "Follow one payment from card authorization through clearing, settlement and an exception-ledger reconciliation.",
"useWhen": "Explain to product and finance teams why an approved payment can still be unsettled or unreconciled.",
"avoid": "Do not use to specify payment-network messages, double-entry postings, dispute rights or accounting policy.",
"assumptions": "Original conceptual flow; card, merchant and issuer roles are simplified. All timings and entry labels are illustrative; no monetary rates or compliance claims.",
"config": {
"duration": 6000,
"reference": "A"
},
"beats": [
{
"at": 0,
"label": "Authorize"
},
{
"at": 1000,
"label": "Capture"
},
{
"at": 2000,
"label": "Clear"
},
{
"at": 3000,
"label": "Settle"
},
{
"at": 4000,
"label": "Reconcile"
},
{
"at": 6000,
"label": "Complete"
}
],
"kind": "industry"
},
{
"id": "finance-insurance-evidence",
"group": "finance",
"groupTitle": "Finance",
"title": "Insurance: evidence before settlement",
"description": "A claim file combines photos, policy context and assessment; a missing item returns for review before payout.",
"useWhen": "Use for claims operations audiences discussing evidence completeness, traceability and review handoffs.",
"avoid": "Not a coverage determination, fraud score, legal timetable, automated approval policy or claim valuation model.",
"assumptions": "All time values are illustrative. The claim and damaged property are fictional; settlement presumes a separate valid coverage and terms decision.",
"config": {
"duration": 6000,
"missingItem": "Signature"
},
"beats": [
{
"at": 0,
"label": "Intake"
},
{
"at": 1000,
"label": "Assemble"
},
{
"at": 2000,
"label": "Review gap"
},
{
"at": 3000,
"label": "Resolve"
},
{
"at": 4000,
"label": "Settle"
},
{
"at": 6000,
"label": "Complete"
}
],
"kind": "industry"
},
{
"id": "telecom-congestion-reroute",
"group": "telecom",
"groupTitle": "Telecommunications",
"title": "Packet network: congestion and rerouting",
"description": "A saturated transit link queues traffic; an alternate path carries later packets to the same destination.",
"useWhen": "Explain topology resilience, queue pressure and alternate-path selection to a non-protocol-specific networking audience.",
"avoid": "Not a routing-protocol implementation, QoS SLA, traffic simulator or evidence that rerouting always preserves ordering.",
"assumptions": "Packets, queue slots and timings are illustrative. Alternate capacity and route availability are assumed; convergence, loss and retransmission are omitted.",
"config": {
"duration": 6000,
"queuePackets": 4
},
"beats": [
{
"at": 0,
"label": "Forward"
},
{
"at": 1000,
"label": "Queue"
},
{
"at": 2000,
"label": "Detect"
},
{
"at": 3000,
"label": "Reroute"
},
{
"at": 4000,
"label": "Deliver"
},
{
"at": 6000,
"label": "Complete"
}
],
"kind": "industry"
},
{
"id": "telecom-cell-handover",
"group": "telecom",
"groupTitle": "Telecommunications",
"title": "Cell handover: preserving a session",
"description": "A moving handset crosses coverage, prepares a target radio link and switches access while its session remains anchored.",
"useWhen": "Use to explain the distinction between radio access and persistent session identity during mobility.",
"avoid": "Not a 3GPP message flow, radio-planning calculation, coverage map or promise of zero interruption.",
"assumptions": "Coverage ellipses, travel distance and times are illustrative. Target admission and a shared session anchor are assumed; technology-specific procedures are intentionally omitted.",
"config": {
"duration": 6000,
"travelPx": 286
},
"beats": [
{
"at": 0,
"label": "Serve A"
},
{
"at": 1000,
"label": "Measure"
},
{
"at": 2000,
"label": "Prepare B"
},
{
"at": 3000,
"label": "Switch"
},
{
"at": 4000,
"label": "Release A"
},
{
"at": 6000,
"label": "Complete"
}
],
"kind": "industry"
},
{
"id": "agriculture-irrigation-zones",
"group": "agriculture",
"groupTitle": "Agriculture",
"title": "Irrigation: measure, open, soak, close",
"description": "A water header feeds three field zones in sequence; moisture indications rise and a wet zone stays bypassed.",
"useWhen": "Explain feedback-based irrigation zoning and why neighboring strips need not receive identical watering.",
"avoid": "Not irrigation design, sensor calibration, crop-specific moisture advice, water-rights guidance or pump sizing.",
"assumptions": "All phase times and moisture-gauge levels are illustrative without physical units. Soil response is compressed and no weather, runoff or hydraulic model is included.",
"config": {
"duration": 6000,
"wetZone": 1
},
"beats": [
{
"at": 0,
"label": "Read soil"
},
{
"at": 1000,
"label": "Open north"
},
{
"at": 2000,
"label": "Soak north"
},
{
"at": 3000,
"label": "Open south"
},
{
"at": 4000,
"label": "Close valves"
},
{
"at": 6000,
"label": "Complete"
}
],
"kind": "industry"
},
{
"id": "agriculture-harvest-grading",
"group": "agriculture",
"groupTitle": "Agriculture",
"title": "Harvest: grade, store and distribute",
"description": "A crop lot passes an inspection belt, splits into fresh and processing channels and reaches distinct storage routes.",
"useWhen": "Use with supply-chain audiences to explain grade-dependent destinations without losing harvest-lot traceability.",
"avoid": "Not a food-safety process, storage-temperature prescription, yield forecast or grading standard.",
"assumptions": "All timing and illustrated produce are conceptual. Two quality destinations are simplified; disposal, pathogen checks and detailed cold-chain controls are outside scope.",
"config": {
"duration": 6000,
"freshCount": 3
},
"beats": [
{
"at": 0,
"label": "Receive lot"
},
{
"at": 1000,
"label": "Inspect"
},
{
"at": 2000,
"label": "Separate"
},
{
"at": 3000,
"label": "Store"
},
{
"at": 4000,
"label": "Dispatch"
},
{
"at": 6000,
"label": "Complete"
}
],
"kind": "industry"
},
{
"id": "infrastructure-bridge-inspection",
"group": "infrastructure",
"groupTitle": "Infrastructure",
"title": "Bridge: load paths and inspection closure",
"description": "A conceptual bridge shows load transfer to supports, an inspection finding and a local lane closure for review.",
"useWhen": "Use only to introduce the relationship between visible bridge components, conceptual load transfer and controlled access during review.",
"avoid": "Never use as structural engineering analysis, load capacity, safety assurance, inspection checklist, repair selection or reopening authorization.",
"assumptions": "Original schematic, not a bridge design. Geometry, vehicle load, paths and timing are unscaled illustrations. A qualified professional must determine actual structural behavior and access decisions.",
"config": {
"duration": 6000,
"loadX": 385
},
"beats": [
{
"at": 0,
"label": "Apply load"
},
{
"at": 1000,
"label": "Trace path"
},
{
"at": 2000,
"label": "Inspect"
},
{
"at": 3000,
"label": "Close lane"
},
{
"at": 4000,
"label": "Review repair"
},
{
"at": 6000,
"label": "Complete"
}
],
"kind": "industry"
},
{
"id": "infrastructure-construction-resequence",
"group": "infrastructure",
"groupTitle": "Infrastructure",
"title": "Construction: dependency and resequencing",
"description": "A permit hold blocks a lift; off-site assembly advances without pretending to remove the critical dependency.",
"useWhen": "Help project teams distinguish work that can be resequenced from a critical prerequisite that cannot be bypassed.",
"avoid": "Not a computed critical-path schedule, construction-method statement, permit prediction, resource model or lift plan.",
"assumptions": "All axis values and timings are illustrative without calendar units. Fabrication is assumed independent and resources available; the permit gate remains unresolved rather than implying authorization.",
"config": {
"duration": 6000,
"advanceSlots": 1.5
},
"beats": [
{
"at": 0,
"label": "Baseline"
},
{
"at": 1000,
"label": "Permit hold"
},
{
"at": 2000,
"label": "Identify float"
},
{
"at": 3000,
"label": "Resequence"
},
{
"at": 4000,
"label": "Gate lift"
},
{
"at": 6000,
"label": "Complete"
}
],
"kind": "industry"
},
{
"id": "presentation-patterns-expressive-robot",
"group": "presentation-patterns",
"groupTitle": "Presentation patterns",
"title": "Expressive robot: blink, think, smile",
"description": "A silver visor robot raises an articulated hand to scratch its head, then holds a smile.",
"useWhen": "Give a conceptual agent a bounded acknowledgment or thinking gesture.",
"avoid": "Do not imply sentience, measured cognition or an always-on assistant.",
"assumptions": "Generalized from an authorized presentation reference: vector geometry and explanatory relationships only. Timings and states are illustrative, not measured outcomes. No branding, source deck, fonts or images are redistributed.",
"config": {
"duration": 6000,
"scale": 3.7,
"smileDepth": 12
},
"beats": [
{
"at": 0,
"label": "Blink"
},
{
"at": 1000,
"label": "Raise hand"
},
{
"at": 2000,
"label": "Scratch"
},
{
"at": 3000,
"label": "Lower hand"
},
{
"at": 4000,
"label": "Smile"
},
{
"at": 6000,
"label": "Complete"
}
],
"kind": "industry"
},
{
"id": "presentation-patterns-approval-gate",
"group": "presentation-patterns",
"groupTitle": "Presentation patterns",
"title": "Approval gate: wait, open, cross, return",
"description": "An envelope waits before a closed split barrier; approval precedes opening, crossing and returning evidence.",
"useWhen": "Explain the distinction between a proposal, human permission, execution and evidence.",
"avoid": "Not a real authorization control. Never use animation state as permission to execute.",
"assumptions": "Generalized from an authorized presentation reference: vector geometry and explanatory relationships only. Timings and states are illustrative, not measured outcomes. No branding, source deck, fonts or images are redistributed.",
"config": {
"duration": 6000,
"travelPx": 420
},
"beats": [
{
"at": 0,
"label": "Wait"
},
{
"at": 1000,
"label": "Approval"
},
{
"at": 2000,
"label": "Open barrier"
},
{
"at": 3000,
"label": "Cross"
},
{
"at": 4000,
"label": "Evidence return"
},
{
"at": 6000,
"label": "Complete"
}
],
"kind": "industry"
},
{
"id": "presentation-patterns-delivery-cycle",
"group": "presentation-patterns",
"groupTitle": "Presentation patterns",
"title": "Delivery cycle: parallel design and feedback",
"description": "Two design streams join delivery, then acceptance and release return learning into the next cycle.",
"useWhen": "Explain parallel design with a shared delivery join and an acceptance-before-release sequence.",
"avoid": "Not a scheduler, compliance process or proof that work has completed.",
"assumptions": "Generalized from an authorized presentation reference: vector geometry and explanatory relationships only. Timings and states are illustrative, not measured outcomes. No branding, source deck, fonts or images are redistributed.",
"config": {
"duration": 6000
},
"beats": [
{
"at": 0,
"label": "Scope"
},
{
"at": 1000,
"label": "Parallel design"
},
{
"at": 2000,
"label": "Join delivery"
},
{
"at": 3000,
"label": "Accept / release"
},
{
"at": 4000,
"label": "Feedback"
},
{
"at": 6000,
"label": "Complete"
}
],
"kind": "industry"
},
{
"id": "presentation-patterns-connected-memory",
"group": "presentation-patterns",
"groupTitle": "Presentation patterns",
"title": "Connected memory: retain, review and reuse",
"description": "Learning yields retained knowledge and reviewed instructions; independent external sources connect to the agent.",
"useWhen": "Distinguish learning activity, retained knowledge, reusable instructions and external access.",
"avoid": "Not autonomous self-modification, source synchronization or an integration implementation.",
"assumptions": "Generalized from an authorized presentation reference: vector geometry and explanatory relationships only. Timings and states are illustrative, not measured outcomes. No branding, source deck, fonts or images are redistributed.",
"config": {
"duration": 6000
},
"beats": [
{
"at": 0,
"label": "Learn"
},
{
"at": 1000,
"label": "Retain"
},
{
"at": 2000,
"label": "Review"
},
{
"at": 3000,
"label": "Reuse"
},
{
"at": 4000,
"label": "Source access"
},
{
"at": 6000,
"label": "Complete"
}
],
"kind": "industry"
}
];
</script><script>/* Each mounted card owns one paused finite timeline and abortable listeners. */
(() => {
const ns='http://www.w3.org/2000/svg';
function node(tag,attrs={},text='') { const e=document.createElementNS(ns,tag); for(const [k,v] of Object.entries(attrs))e.setAttribute(k,v); e.textContent=text; return e; }
function mount(host,c) {
const abort=new AbortController(), signal=abort.signal, media=matchMedia('(prefers-reduced-motion: reduce)');
let destroyed=false;
host.innerHTML=`<h2></h2><p></p><svg viewBox="0 0 400 220" role="img"></svg><div class="controls"><button data-action="play">Play</button><button data-action="replay">Replay</button><button data-action="settle">Settle</button><label>Seek <input type="range" min="0" max="100" value="100" step="1"></label></div><output aria-live="polite">Complete</output>`;
host.querySelector('h2').textContent=c.title; host.querySelector('p').textContent=c.description;
const svg=host.querySelector('svg'); svg.setAttribute('aria-label',c.description);
const industry=c.kind==='industry';
host.classList.toggle('industry',industry);
if(industry)svg.setAttribute('viewBox','0 0 960 540');
const add=(tag,attrs={},text='',parent=svg)=>{const e=node(tag,attrs,text);parent.append(e);return e;};
const label=(x,y,text)=>add('text',{x,y,'text-anchor':'middle'},text);
let tl, recipeBeats;
const beat=(label,at)=>({label,at});
if(industry){
const renderer=window.industryRenderers?.[c.id];
if(typeof renderer!=='function')throw new Error('Missing industry renderer: '+c.id);
tl=renderer(svg,c.config,{anime,el:add});
}else tl=anime.createTimeline({autoplay:false,defaults:{ease:'linear'}});
if(c.id==='svg-draw'||c.id==='motion-path') {
add('path',{d:c.path,class:'guide'});
const path=add('path',{d:c.path,class:'trace'});
label(65,190,c.start); label(325,190,c.end);
if(c.id==='svg-draw')tl.add(anime.svg.createDrawable(path),{draw:['0 0','0 1'],duration:c.duration},0);
else {const marker=add('circle',{r:9,cx:0,cy:0,class:'packet'});tl.add(marker,{...anime.svg.createMotionPath(path),duration:c.duration},0);}
recipeBeats=(c.id==='svg-draw'?['Source','Reveal connection','Connected']:['Send','In transit','Receive']).map((name,i)=>beat(name,i*tl.duration/2));
} else if(c.id==='spatial-stagger') {
const cells=[];
for(let row=0;row<c.rows;row++)for(let col=0;col<c.columns;col++)cells.push(add('rect',{x:35+col*330/c.columns,y:30+row*160/c.rows,width:280/c.columns,height:125/c.rows,rx:5,class:'cell'}));
tl.add(cells,{opacity:[0.25,1],duration:c.duration,delay:anime.stagger(c.delay,{grid:[c.columns,c.rows],from:'center'})},0);
// Anime owns grid-distance rounding and stagger delays: use its actual end.
recipeBeats=[beat('Grid ready',0),beat('Center outward',tl.duration/2),beat('Activated',tl.duration)];
} else if(c.id==='dependency-flow') {
const a=add('path',{d:'M 85 100 L 180 100',class:'trace'}),b=add('path',{d:'M 220 100 L 315 100',class:'trace'});
[60,200,340].forEach((x,i)=>{add('circle',{cx:x,cy:100,r:25,class:'cell'});label(x,155,c.labels[i]);});
tl.label('input',0).add(anime.svg.createDrawable(a),{draw:['0 0','0 1'],duration:c.duration},'input').label('output',c.duration).add(anime.svg.createDrawable(b),{draw:['0 0','0 1'],duration:c.duration},'output');
recipeBeats=[beat('Input',0),beat('Check',tl.labels.output),beat('Output',tl.duration)];
} else if(c.id==='assemble-explode') {
const hold=400, returnAt=c.duration+hold;
c.labels.forEach((text,i)=>{
const part=add('g',{'data-part':i});
part.append(node('rect',{x:155+i*30,y:55+i*22,width:60,height:80,rx:6,class:'cell'}));
// Static labels stay outside the motion wrappers, including while assembled.
label(80+i*120,195,text);
const x=(i-1)*c.distance;
tl.add(part,{translateX:[0,x],duration:c.duration},0)
.add(part,{translateX:[x,x],duration:hold},c.duration)
.add(part,{translateX:[x,0],duration:c.duration},returnAt);
});
recipeBeats=[beat('Assembled',0),beat('Separate',c.duration),beat('Inspect hold',returnAt-hold/2),beat('Reassembled',tl.duration)];
}
if(!tl||!Number.isFinite(tl.duration)||tl.duration<=0)throw new Error('Invalid finite timeline: '+c.id);
const beats=document.createElement('div');beats.className='beats';beats.setAttribute('aria-label','Timeline beats');
// Legacy positions are computed on every mount, including edited runtime configs.
// Renderers may supply duration-derived beats; older industry descriptors stay unchanged.
for(const beat of (industry?(tl.recipeBeats||c.beats):recipeBeats)||[]){
if(!Number.isFinite(beat.at)||beat.at<0||beat.at>tl.duration)throw new Error('Beat outside timeline: '+c.id+' / '+beat.label);
const button=document.createElement('button');button.type='button';button.textContent=beat.label;button.dataset.beat=beat.at;
button.addEventListener('click',()=>seek(beat.at),{signal});beats.append(button);
}
host.append(beats);
const guidance=document.createElement('section');guidance.className='guidance';guidance.setAttribute('aria-label','Adaptation guidance');
for(const [key,title] of [['useWhen','Use when'],['avoid','Avoid'],['assumptions','Assumptions']]){
const heading=document.createElement('h3'),p=document.createElement('p');heading.textContent=title;p.textContent=c[key]||'';guidance.append(heading,p);
}
host.append(guidance);
const range=host.querySelector('input'),out=host.querySelector('output');
const sync=()=>{range.value=100*tl.currentTime/tl.duration;};
tl.onUpdate=sync;
tl.onComplete=()=>{sync();out.textContent='Complete';};
function settle(){if(destroyed)return;tl.pause();tl.seek(tl.duration);sync();out.textContent='Complete';}
function seek(ms){if(destroyed)return;if(media.matches)return settle();tl.pause();const n=Number(ms);tl.seek(Math.max(0,Math.min(tl.duration,Number.isFinite(n)?n:0)));sync();out.textContent='Paused';}
function play(restart=false){if(destroyed)return;if(media.matches)return settle();if(restart||tl.currentTime>=tl.duration)tl.seek(0);tl.play();out.textContent='Playing';}
host.querySelector('[data-action="play"]').addEventListener('click',()=>play(),{signal});
host.querySelector('[data-action="replay"]').addEventListener('click',()=>play(true),{signal});
host.querySelector('[data-action="settle"]').addEventListener('click',settle,{signal});
range.addEventListener('input',()=>seek(Number(range.value)*tl.duration/100),{signal});
media.addEventListener('change',settle,{signal});
window.addEventListener('beforeprint',settle,{signal});
document.addEventListener('visibilitychange',()=>{if(document.hidden)settle();},{signal});
window.addEventListener('pagehide',settle,{signal});
settle();
return {seek,settle,play:()=>play(),replay:()=>play(true),state:()=>({duration:tl.duration,time:tl.currentTime,paused:tl.paused,destroyed}),destroy(){if(destroyed)return;settle();abort.abort();tl.revert();destroyed=true;host.replaceChildren();}};
}
const main=document.querySelector('main'), selected=document.body.dataset.example;
if(selected !== undefined) {
const config=window.animeExamples.find(c=>c.id===selected);
if(!config)throw new Error('Unknown example ID: '+selected);
if(window.self!==window.top)document.body.classList.add('embedded');
const host=document.createElement('article');host.id=config.id;main.append(host);
window.animeGallery={controllers:{[config.id]:mount(host,config)},mount};
} else {
const group=document.body.dataset.gallery;
const groups=[...new Set(window.animeExamples.map(c=>c.group))];
if(group!=='all'&&!groups.includes(group))throw new Error('Unknown gallery: '+group);
if(group==='all'){
const nav=document.createElement('nav');nav.className='registry-nav';nav.setAttribute('aria-label','Choose a registry');
for(const name of groups){const link=document.createElement('a');link.href=name+'/index.html';link.textContent=window.animeExamples.find(c=>c.group===name).groupTitle;nav.append(link);}
main.append(nav);
}
for(const name of groups) {
if(group!=='all'&&group!==name)continue;
const section=document.createElement('section'), heading=document.createElement('h2'), link=document.createElement('a');
section.dataset.registry=name;link.href=group==='all'?name+'/index.html':'index.html';link.textContent=window.animeExamples.find(c=>c.group===name).groupTitle;heading.append(link);section.append(heading);
const grid=document.createElement('div');grid.className='preview-grid';section.append(grid);
for(const config of window.animeExamples.filter(c=>c.group===name)) {
const card=document.createElement('article'),frame=document.createElement('iframe'),open=document.createElement('a');
const href=(group==='all'?'':'../')+'examples/'+config.id+'.html';
frame.src=href;frame.title=config.title;frame.dataset.example=config.id;
open.href=href;open.textContent='Open example: '+config.title;open.className='open-example';
card.append(frame,open);grid.append(card);
}
main.append(section);
}
}
})();
</script></body></html>