shopic 0.1.5 → 0.2.1

package/dist/index.js

@@ -1 +1 @@
-"use strict";(()=>{var tt=new Map,h=(t,o)=>{if(tt.has(t))throw new Error(`[shopic] Animation "${t}" is registered twice.`);tt.set(t,o)},et=(t,o=document)=>{let a=o.querySelectorAll("[data-anim]");for(let n of a){let e=n.dataset.anim;if(!e||n.dataset.animState==="ready")continue;let s=tt.get(e);if(!s){console.warn(`[shopic] No animation registered for data-anim="${e}".`,n);continue}n.dataset.animState="ready",s(n,t)}};var Mt=2,It=150,Ht=4,Ot=1,Rt=5e3,Ct=.75,_t="power3.out",Nt=[0,.25,.5,.6,.7,.8,.9,1],nt="shopic:slide-enter";h("carousel",(t,{gsap:o,reducedMotion:a})=>{let n=Array.from(t.querySelectorAll(":scope > [data-slide]"));if(n.length<2)return;let e=t.closest("section")??t.parentElement??document.body,s=Array.from(e.querySelectorAll("[data-tab]")),r=a?0:Ct,d=n.length,c=new Map(n.map((i,m)=>[i,m])),g=new Map;n.forEach((i,m)=>{let v=i.dataset.slide;v&&!g.has(v)&&g.set(v,m)});let y=[],O=()=>{let i=t.getBoundingClientRect().left,m=t.scrollLeft,v=parseFloat(getComputedStyle(t).paddingLeft)||0,M=t.scrollWidth-t.clientWidth;y=n.map(G=>Math.min(G.getBoundingClientRect().left-i+m-v,M))},w=i=>{for(let m of s){let v=m.dataset.tab===i;m.classList.toggle("is-active",v),v?m.setAttribute("aria-current","true"):m.removeAttribute("aria-current")}},E=-1,T=null,S=!1,u=!1,p,L,b=null,I=0,H=0,C=0,R=0,N=!1,q=()=>b!==null,D=()=>T!==null,_=()=>{clearTimeout(p),p=void 0},B=()=>!a&&!document.hidden&&u&&!q()&&!S&&!e.contains(document.activeElement),P=()=>{_(),B()&&(p=setTimeout(()=>{p=void 0,B()&&V((E+1)%d)},Rt))},W=i=>{let m=n[i],v=m.dataset.slide;if(v&&w(v),i!==E){E=i;for(let M of n)M.classList.toggle("is-current",M===m);m.dispatchEvent(new CustomEvent(nt))}},F=i=>{T=null,W(i),P()},U=()=>{clearTimeout(L),o.killTweensOf(t),T=null};function V(i){if(U(),T=i,r===0){t.scrollLeft=y[i],F(i);return}o.to(t,{scrollLeft:y[i],duration:r,ease:_t,overwrite:"auto",onComplete:()=>F(i),onInterrupt:()=>{T=null}})}let Y=()=>{let i=t.scrollLeft,m=0;return y.forEach((v,M)=>{Math.abs(v-i)<Math.abs(y[m]-i)&&(m=M)}),m},$=()=>{let i=Y();Math.abs(y[i]-t.scrollLeft)<Ot?F(i):V(i)},J=()=>{let i=I>0?y[I]-y[I-1]:1/0,m=I<d-1?y[I+1]-y[I]:1/0,v=Math.min(Math.abs(i),Math.abs(m));if(Math.abs(R)<v*.25){$();return}V((I+Math.sign(R)+d)%d)};for(let i of s)i.addEventListener("click",m=>{m.preventDefault();let v=i.dataset.tab??"",M=g.get(v);M!==void 0&&(_(),w(v),V(M))});let z=new Array(d).fill(0),Q=new IntersectionObserver(i=>{for(let M of i){let G=c.get(M.target);G!==void 0&&(z[G]=M.isIntersecting?M.intersectionRatio:0)}let m=-1,v=0;z.forEach((M,G)=>{M<=v||(v=M,m=G)}),m!==-1&&(T!==null&&m!==T||W(m))},{root:t,threshold:Nt});for(let i of n)Q.observe(i);O(),t.style.scrollSnapType="none",t.style.touchAction="pan-y",t.addEventListener("dragstart",i=>i.preventDefault());let[l]=y;t.scrollLeft=l;let f=new ResizeObserver(O);f.observe(t);for(let i of n)f.observe(i);"onscrollend"in window?t.addEventListener("scrollend",()=>{!D()&&!q()&&$()}):t.addEventListener("scroll",()=>{D()||q()||(clearTimeout(L),L=setTimeout($,It))}),t.addEventListener("pointerdown",i=>{_(),U(),b=i.pointerId,N=!1,H=i.clientX,C=t.scrollLeft,R=0,I=Y()}),t.addEventListener("pointermove",i=>{if(i.pointerId!==b)return;let m=i.clientX-H;if(!N){if(Math.abs(m)<Ht)return;N=!0,t.classList.add("is-dragging"),t.setPointerCapture(i.pointerId)}R=-m*Mt,t.scrollLeft=C+R,i.pointerType==="mouse"&&i.preventDefault()});let x=i=>{i.pointerId===b&&(b=null,t.hasPointerCapture(i.pointerId)&&t.releasePointerCapture(i.pointerId),N?(t.classList.remove("is-dragging"),J()):$())};window.addEventListener("pointerup",x),window.addEventListener("pointercancel",x),t.addEventListener("click",i=>{N&&(N=!1,i.preventDefault(),i.stopPropagation())},!0),e.addEventListener("pointerenter",i=>{i.pointerType==="mouse"&&(S=!0,_())}),e.addEventListener("pointerleave",i=>{i.pointerType==="mouse"&&(S=!1,P())}),e.addEventListener("focusin",_),e.addEventListener("focusout",()=>queueMicrotask(P)),document.addEventListener("visibilitychange",()=>{document.hidden?_():P()}),new IntersectionObserver(i=>{u=i.some(m=>m.isIntersecting),u?P():_()},{threshold:.2}).observe(t)});var st="!<>-_\\/[]{}=+*^?#$%01",K=new WeakMap,X=(t,{duration:o=1050,stagger:a=.75,text:n,reducedMotion:e=!1,relaunchOnHover:s=!1}={})=>{if(e){n!==void 0&&(t.textContent=n);return}if(n!==void 0)t.dataset.scrambleText=n;else if(!t.dataset.scrambleText){let S=t.textContent;if(!S||!S.trim())return;t.dataset.scrambleText=S}let r=t.dataset.scrambleText;if(!r||!r.trim())return;let d=Array.from(r),c=d.length,g=Array.from(t.children),y;g.length===c&&g.every(S=>S.tagName==="SPAN")?y=g:(y=d.map(S=>{let u=document.createElement("span");return u.textContent=S,u}),t.textContent="",t.append(...y));let O=Symbol("scramble");K.set(t,O);let w=d.map((S,u)=>c<=1?0:u/(c-1)*o*a),E=performance.now(),T=S=>{if(K.get(t)!==O)return;let u=S-E,p=!0;d.forEach((L,b)=>{if(L===" "){y[b].textContent=" ";return}u>=w[b]?y[b].textContent=L:(p=!1,y[b].textContent=st[Math.random()*st.length|0])}),p?K.delete(t):requestAnimationFrame(T)};requestAnimationFrame(T),s&&Pt(t,{duration:o,stagger:a})},Pt=(t,o)=>{t.dataset.scrambleHoverBound||(t.dataset.scrambleHoverBound="true",t.addEventListener("pointerenter",()=>{K.has(t)||X(t,o)}))};var $t=.5,qt="power2.out",Dt=".status-pill, .evidence_label, .evidence_sku",Ft={duration:630,stagger:.6,relaunchOnHover:!0};h("evidence",(t,{gsap:o,reducedMotion:a})=>{let n=Array.from(t.children);if(!n.length)return;if(a){for(let c of n)c.style.height="auto",c.style.opacity="1";return}let e=()=>{o.killTweensOf(n),o.set(n,{height:0,opacity:0,overflow:"hidden"});let c=o.timeline();for(let g of n)c.call(()=>{for(let y of g.querySelectorAll(Dt))X(y,Ft)}),c.to(g,{height:"auto",opacity:1,duration:$t,ease:qt,onComplete:()=>o.set(g,{height:"auto"})})},s=!1,r=!1,d=()=>{if(!s||r)return;let c=t.closest("[data-slide]");c&&!c.classList.contains("is-current")||(r=!0,e())};if("IntersectionObserver"in window){let c=new IntersectionObserver(g=>{for(let y of g)y.isIntersecting&&(s=!0,d(),r&&c.disconnect())},{threshold:.2});c.observe(t)}else s=!0,d();t.closest("[data-slide]")?.addEventListener(nt,()=>{r=!1,d()})});var it="is-open",at=".faq_row",lt=".faq_toggle";h("faq",t=>{let o=t.querySelectorAll(at);if(o.length===0){console.warn(`[shopic] faq found no ${at} to open.`,t);return}let a=[];for(let s of o){let r=s.querySelector(lt);if(!r){console.warn(`[shopic] faq row has no ${lt} to click.`,s);continue}a.push({row:s,toggle:r})}if(a.length===0)return;let n=s=>{for(let{row:r,toggle:d}of a){let c=r===s;r.classList.toggle(it,c),d.setAttribute("aria-expanded",String(c))}};for(let{row:s,toggle:r}of a)r.addEventListener("click",()=>{n(s.classList.contains(it)?null:s)}),r.addEventListener("keydown",d=>{d.key!=="Enter"&&d.key!==" "||(d.preventDefault(),r.click())}),r.hasAttribute("tabindex")||(r.tabIndex=0);let e=a.find(({toggle:s})=>s.getAttribute("aria-expanded")==="true");n((e??a[0]).row)});var ct=8;h("focus-drift",(t,{reducedMotion:o})=>{let a=t.querySelector(":scope > .camera_focus");!a||o||(t.addEventListener("pointermove",n=>{if(n.pointerType!=="mouse")return;let e=t.getBoundingClientRect(),s=(n.clientX-e.left)/e.width-.5,r=(n.clientY-e.top)/e.height-.5,d=(s*ct*2).toFixed(1),c=(r*ct*2).toFixed(1);a.style.transform=`translate(${d}px, ${c}px)`}),t.addEventListener("pointerleave",()=>{a.style.transform=""}))});var dt=42,ut=96,Vt=2600,Gt="is-scanned",Xt="is-fresh";h("foundation-rail",(t,{gsap:o,reducedMotion:a})=>{let n=t.closest(".camera_photo"),e=Array.from(t.querySelectorAll(":scope > .foundation_slot"),u=>({element:u,parts:Array.from(u.querySelectorAll(".foundation_photo, .foundation_card")),tile:u.querySelector(".foundation_scan"),setX:o.quickSetter(u,"x","px"),home:0,turn:0,state:null}));if(!n||e.length===0){console.warn("[shopic] foundation-rail expects a .camera_photo tile around a track of .foundation_slot items.",t);return}let s=o.quickSetter(t,"x","px"),r=0,d=0,c=u=>u,g=()=>{let[u]=e,p=u.element.offsetWidth,L=p+(parseFloat(getComputedStyle(t).columnGap)||0);r=L*e.length,d=r/dt*(Vt/1e3),c=o.utils.wrap(-r/2,r/2),r<n.offsetWidth+p&&console.warn(`[shopic] foundation-rail: ${e.length} slots span ${r}px but the tile needs ${n.offsetWidth+p}px to loop without a gap.`,t);let b=n.getBoundingClientRect(),I=b.width/n.offsetWidth||1,H=(u.element.getBoundingClientRect().left-b.left)/I+p/2-n.offsetWidth/2-(Number(o.getProperty(t,"x"))||0)-(Number(o.getProperty(u.element,"x"))||0);e.forEach((C,R)=>{C.home=H+R*L,C.setX(C.turn*r)})},y=u=>u>ut?"unseen":u>ut-d?"fresh":"seen",O=(u,p)=>{if(u.state!==p){u.state=p;for(let L of u.parts)L.classList.toggle(Gt,p!=="unseen");u.tile?.classList.toggle(Xt,p==="fresh")}},w=u=>{if(r){s(-u);for(let p of e){let L=c(p.home-u),b=Math.round((L-(p.home-u))/r);b!==p.turn&&(p.turn=b,p.setX(b*r)),O(p,y(L))}}},E={t:0},T=()=>E.t*r,S=a?null:o.to(E,{t:1,duration:dt,ease:"none",repeat:-1,paused:!0,onUpdate:()=>w(T())});new ResizeObserver(()=>{g(),w(T())}).observe(t),S&&new IntersectionObserver(u=>{S.paused(!u.some(p=>p.isIntersecting))}).observe(t)});var ft="split_line",kt="split_word",mt="split_word-inner",Bt=t=>{let o=document.createDocumentFragment(),a=[],n=document.createElement("span");n.className=ft,o.appendChild(n);let e=(r,d)=>{if(!r)return;let c=document.createElement("span");c.className=kt;let g=document.createElement("span");g.className=d?`${mt} ${d}`:mt,g.textContent=r,c.appendChild(g),n.appendChild(c),a.push(g)},s=(r,d)=>{for(let c of r.split(/(\s+)/))c&&(/^\s+$/.test(c)?n.appendChild(document.createTextNode(" ")):e(c,d))};for(let r of Array.from(t.childNodes))r.nodeType===Node.TEXT_NODE?s(r.textContent??""):r instanceof HTMLBRElement?(n=document.createElement("span"),n.className=ft,o.appendChild(n)):r instanceof HTMLElement&&s(r.textContent??"",r.className||void 0);return t.textContent="",t.appendChild(o),a},pt={yPercent:0,duration:.9,ease:"power4.out",stagger:.035};h("headline",(t,{gsap:o,ScrollTrigger:a,reducedMotion:n})=>{if(n){t.style.visibility="visible";return}let e=Bt(t);if(o.set(e,{yPercent:110}),t.style.visibility="visible",t.dataset.animTrigger==="load"||!a){o.to(e,{...pt,delay:.3});return}o.to(e,{...pt,scrollTrigger:{trigger:t,start:"top 85%"}})});var Wt=26;h("marquee",(t,{gsap:o,reducedMotion:a})=>{if(a)return;let n=Number(t.dataset.animSets??4),e=Number(t.dataset.animDuration??Wt);if(!Number.isFinite(n)||n<2)return;let s=()=>t.scrollWidth/n,r=o.to(t,{x:()=>-s(),duration:e,ease:"none",repeat:-1,modifiers:{x:c=>`${Number.parseFloat(c)%s()}px`}}),d=t.parentElement;d&&(d.addEventListener("pointerenter",()=>r.pause()),d.addEventListener("pointerleave",()=>r.resume()))});var Ut=1.15,gt=.18,yt=10,Z=8,k=.55,ht="is-visible",Et="opacity, width, height",Yt=["name","price","packaging","sku"];h("photo-hover",(t,{reducedMotion:o})=>{let a=t.querySelector(":scope > img"),n=t.querySelector(":scope > .detect_layer"),e=t.querySelector(":scope > .camera_focus");if(!a&&!e)return;let s=e?.querySelector(".is-ring")??null,r=e?.querySelector(".is-corners")??null;e&&(!s||!r)&&console.warn("[shopic] photo-hover expects is-ring and is-corners layers inside the reticle.",e);let d=t.querySelector(":scope > .camera_readout"),c=Number(t.dataset.animZoom)||Ut,g=Array.from(t.querySelectorAll(".detect_box")),y=t.querySelector('[data-match="card"]'),O=y?.querySelector('[data-match="thumb"]')??null,w=0,E=0,T=0,S=0,u=0,p=0,L=0,b=null,I=l=>l.width/t.offsetWidth||1,H=(l,f)=>{let x=t.getBoundingClientRect(),A=I(x);return{x:(l-x.left)/A,y:(f-x.top)/A,width:t.offsetWidth,height:t.offsetHeight}},C=l=>{let f=t.getBoundingClientRect(),x=l.getBoundingClientRect(),A=I(f);return{x:(x.left-f.left)/A-Z,y:(x.top-f.top)/A-Z,w:x.width/A+Z*2,h:x.height/A+Z*2}},R=()=>{let{x:l,y:f,width:x,height:A}=H(p,L),i=(l/x-.5)*x*(c-1),m=(f/A-.5)*A*(c-1),v=`translate(${i.toFixed(2)}px, ${m.toFixed(2)}px) scale(${c})`;a&&(a.style.transform=v),n&&(n.style.transform=v)},N=()=>{if(!d)return;let l=t.getBoundingClientRect();if(!l.width||!l.height)return;let f=(p-l.left)/l.width-.5,x=(L-l.top)/l.height-.5,A=(f*yt*2).toFixed(1),i=(x*yt*2).toFixed(1);d.style.setProperty("translate",`${A}px ${i}px`)},q=()=>{let{x:l,y:f}=H(p,L);return{x:l-(e?.offsetWidth??0)/2,y:f-(e?.offsetHeight??0)/2}},D=(l,f)=>{e&&(e.style.left=`${l.toFixed(2)}px`,e.style.top=`${f.toFixed(2)}px`)},_=()=>{let l=q();D(l.x,l.y),S=l.x,u=l.y,E=0,T=0,r&&(r.style.transform="")},B=()=>{let l=q();D(l.x,l.y),o||(E-=l.x-S,T-=l.y-u),S=l.x,u=l.y},P=l=>{if(!e)return;let f=C(l);D(f.x,f.y),e.style.width=`${f.w.toFixed(2)}px`,e.style.height=`${f.h.toFixed(2)}px`},W=()=>{if(r){if(E-=E*gt,T-=T*gt,Math.abs(E)>.1||Math.abs(T)>.1){r.style.transform=`translate(${E.toFixed(2)}px, ${T.toFixed(2)}px)`;return}E=0,T=0,r.style.transform=""}},F=()=>{b?P(b):B(),W(),w=requestAnimationFrame(F)},U=l=>{if(y){for(let f of Yt){let x=l.dataset[f],A=y.querySelector(`[data-match="${f}"]`);A&&x!==void 0&&(A.textContent=x)}if(O){let f=l.dataset.thumb;f&&(O.removeAttribute("srcset"),O.removeAttribute("sizes"),O.src=f),O.style.display=f?"":"none"}y.classList.add(ht)}},V=l=>{if(b=l,U(l),!!e&&(e.style.transitionProperty="",P(l),r&&(r.style.opacity="0"),s)){let f=(1-k)/2*100;s.style.width=`${k*100}%`,s.style.height=`${k*100}%`,s.style.left=`${f}%`,s.style.top=`${f}%`,s.style.right="auto",s.style.bottom="auto"}},Y=l=>{if(!s)return;let f=C(l),{x,y:A}=H(p,L),i=(x-f.x)/f.w-.5,m=(A-f.y)/f.h-.5,v=i*f.w*(1-k),M=m*f.h*(1-k);s.style.setProperty("translate",`${v.toFixed(2)}px ${M.toFixed(2)}px`)},$=()=>{b=null,y?.classList.remove(ht),e&&(e.style.width="",e.style.height="",e.style.transitionProperty=Et,r&&(r.style.opacity=""),s&&(s.style.width="",s.style.height="",s.style.left="",s.style.top="",s.style.right="",s.style.bottom="",s.style.removeProperty("translate")))},J=l=>{l.pointerType==="mouse"&&(p=l.clientX,L=l.clientY,R(),N(),e&&(e.style.transitionProperty=Et,_(),cancelAnimationFrame(w),w=requestAnimationFrame(F)))},z=l=>{l.pointerType==="mouse"&&(p=l.clientX,L=l.clientY,R(),N())},Q=()=>{cancelAnimationFrame(w),w=0,a&&(a.style.transform=""),n&&(n.style.transform=""),d?.style.setProperty("translate","0px 0px"),$(),e&&(e.style.left="",e.style.top="",e.style.transitionProperty="",r&&(r.style.transform=""),E=0,T=0)};t.addEventListener("pointerenter",J),t.addEventListener("pointermove",z),t.addEventListener("pointerleave",Q);for(let l of g)l.addEventListener("pointerenter",f=>{f.pointerType==="mouse"&&V(l)}),l.addEventListener("pointermove",()=>{b===l&&Y(l)}),l.addEventListener("pointerleave",()=>{b===l&&($(),_())})});var bt="is-visible";h("reveal",(t,{reducedMotion:o})=>{let a=Number(t.dataset.animDelay??0);if(a&&(t.style.transitionDelay=`${a}ms`),o||!("IntersectionObserver"in window)){t.classList.add(bt);return}let n=new IntersectionObserver(e=>{for(let s of e)s.isIntersecting&&(s.target.classList.add(bt),n.unobserve(s.target))},{threshold:.15});n.observe(t)});h("scramble",(t,{reducedMotion:o})=>{let a={duration:Number(t.dataset.animDuration??1050),stagger:Number(t.dataset.animStagger??.75),reducedMotion:o};if(o||!("IntersectionObserver"in window)){X(t,a);return}let n=new IntersectionObserver(e=>{for(let s of e)s.isIntersecting&&(X(t,{...a,relaunchOnHover:!0}),n.unobserve(s.target))},{threshold:.2});n.observe(t)});var j=({grouped:t=!1,prefix:o="",suffix:a="",value:n})=>{let e=Math.round(n),s=t?e.toLocaleString("en-US"):String(e);return`${o}${s}${a}`};var zt=.5,vt="power4.out",Kt=.18,Zt="power2.in",jt=.35,Jt=1400,Qt=.15,te=420,ee=t=>{let o=t.querySelector("[data-stat-value]");return o||console.warn("[shopic] stats row is missing [data-stat-value]",t),o},ot=t=>({grouped:(t.dataset.statGrouped??t.closest('[data-anim="stats"]')?.dataset.statGrouped)==="true",prefix:t.dataset.statPrefix??t.closest('[data-anim="stats"]')?.dataset.statPrefix??"",suffix:t.dataset.statSuffix??t.closest('[data-anim="stats"]')?.dataset.statSuffix??""}),Lt=(t,o)=>{t.textContent=j({...ot(t),value:o})},Tt=(t,o)=>{t.classList.toggle("is-hovered",o);for(let a of t.querySelectorAll("[data-stat-label], [data-stat-hover]"))a.classList.toggle("is-hovered",o)},St=(t,o,a,n)=>{if(a){Lt(t,o);return}let e=performance.now(),s=r=>{if(n!==Number(t.dataset.statsGeneration))return;let d=Math.min((r-e)/Jt,1),c=1-(1-d)**3;t.textContent=j({...ot(t),value:o*c}),d<1&&requestAnimationFrame(s)};requestAnimationFrame(s)},ne=(t,{gsap:o,reducedMotion:a})=>{let n=t,e=ee(n);if(!e)return;let s=n.dataset.statCount??e.dataset.statCount,r=s===void 0?null:Number(s),d=n.dataset.statTicker??e.dataset.statTicker,c=d===void 0?null:Number(d),g=n.dataset.statTickerInterval??e.dataset.statTickerInterval,y=g===void 0?Number.NaN:Number(g),O=y>0?y:te,w=null,E=0,T=!1,S=()=>{c!==null&&(e.textContent=j({...ot(e),value:c}))},u=()=>{a||c===null||w!==null||(w=setInterval(()=>{c!==null&&(c+=1+Math.floor(Math.random()*3),S())},O))},p=()=>{w!==null&&(clearInterval(w),w=null)},L=()=>{E+=1,e.dataset.statsGeneration=String(E),r!==null?Lt(e,r):S(),o.set(e,{clearProps:"transform"})},b=H=>{E+=1,e.dataset.statsGeneration=String(E),o.killTweensOf(e),o.set(e,{yPercent:110}),o.to(e,{duration:zt,ease:vt,yPercent:0}),H&&r!==null&&St(e,r,a,E)};if(a){L();return}S(),o.set(e,{yPercent:110});let I=()=>{T||(T=!0,b(!0))};if("IntersectionObserver"in window){let H=new IntersectionObserver(C=>{C.some(R=>R.isIntersecting)&&(I(),H.disconnect())},{threshold:Qt});H.observe(n)}else I();c!==null&&("IntersectionObserver"in window?new IntersectionObserver(C=>{C.some(R=>R.isIntersecting)?u():p()}).observe(n):u()),n.addEventListener("pointerenter",H=>{H.pointerType==="mouse"&&(Tt(n,!0),E+=1,e.dataset.statsGeneration=String(E),o.killTweensOf(e),o.timeline().to(e,{duration:Kt,ease:Zt,yPercent:-110}).set(e,{yPercent:110}).to(e,{duration:jt,ease:vt,onStart:()=>{r!==null&&St(e,r,a,E)},yPercent:0}))}),n.addEventListener("pointerleave",()=>Tt(n,!1))};h("stats",ne);var rt=t=>String(t).padStart(2,"0");h("timer",t=>{let o=()=>{let a=new Date;t.textContent=`${rt(a.getHours())}:${rt(a.getMinutes())}:${rt(a.getSeconds())}`};o(),setInterval(o,1e3)});var xt="is-active",oe="(max-width: 991px)";h("versus-tabs",t=>{let o=Array.from(t.querySelectorAll('[role="tab"]')),a=t.nextElementSibling,n=a?Array.from(a.querySelectorAll(":scope > *")):[];if(o.length===0||o.length!==n.length){console.warn(`[shopic] versus-tabs expects one tab per panel; found ${o.length} tabs and ${n.length} panels.`,t);return}let e=window.matchMedia(oe),s=d=>{o.forEach((c,g)=>{c.classList.toggle(xt,g===d),c.setAttribute("aria-selected",String(g===d))}),n.forEach((c,g)=>{c.hidden=e.matches&&g!==d})},r=()=>Math.max(0,o.indexOf(t.querySelector(`.${xt}`)));o.forEach((d,c)=>{d.addEventListener("click",()=>s(c)),d.addEventListener("keydown",g=>{(g.key==="Enter"||g.key===" ")&&(g.preventDefault(),s(c))}),d.hasAttribute("tabindex")||(d.tabIndex=0)}),e.addEventListener("change",()=>s(r())),s(r())});var wt=()=>{let{gsap:t,ScrollTrigger:o}=window;if(!t)throw new Error("[shopic] GSAP is not on the page. Enable it in Webflow \u2192 Site Settings \u2192 Custom Code \u2192 GSAP.");return o&&t.registerPlugin(o),{gsap:t,ScrollTrigger:o}},At=()=>window.matchMedia("(prefers-reduced-motion: reduce)").matches;window.Webflow||(window.Webflow=[]);window.Webflow.push(()=>{let{gsap:t,ScrollTrigger:o}=wt();et({gsap:t,ScrollTrigger:o,reducedMotion:At()})});})();
+"use strict";(()=>{var tt=new Map,h=(t,r)=>{if(tt.has(t))throw new Error(`[shopic] Animation "${t}" is registered twice.`);tt.set(t,r)},et=(t,r=document)=>{let l=r.querySelectorAll("[data-anim]");for(let o of l){let n=o.dataset.anim;if(!n||o.dataset.animState==="ready")continue;let s=tt.get(n);if(!s){console.warn(`[shopic] No animation registered for data-anim="${n}".`,o);continue}o.dataset.animState="ready",s(o,t)}};var Ht=2,It=150,Ot=4,Rt=1,Ct=5e3,Nt=.75,_t="power3.out",Pt=[0,.25,.5,.6,.7,.8,.9,1],nt="shopic:slide-enter";h("carousel",(t,{gsap:r,reducedMotion:l})=>{let o=Array.from(t.querySelectorAll(":scope > [data-slide]"));if(o.length<2)return;let n=t.closest("section")??t.parentElement??document.body,s=Array.from(n.querySelectorAll("[data-tab]")),e=l?0:Nt,i=o.length,a=new Map(o.map((c,p)=>[c,p])),m=new Map;o.forEach((c,p)=>{let v=c.dataset.slide;v&&!m.has(v)&&m.set(v,p)});let y=[],O=()=>{let c=t.getBoundingClientRect().left,p=t.scrollLeft,v=parseFloat(getComputedStyle(t).paddingLeft)||0,M=t.scrollWidth-t.clientWidth;y=o.map(V=>Math.min(V.getBoundingClientRect().left-c+p-v,M))},x=c=>{for(let p of s){let v=p.dataset.tab===c;p.classList.toggle("is-active",v),v?p.setAttribute("aria-current","true"):p.removeAttribute("aria-current")}},E=-1,T=null,L=!1,u=!1,g,S,b=null,H=0,I=0,C=0,R=0,_=!1,D=()=>b!==null,$=()=>T!==null,N=()=>{clearTimeout(g),g=void 0},B=()=>!l&&!document.hidden&&u&&!D()&&!L&&!n.contains(document.activeElement),P=()=>{N(),B()&&(g=setTimeout(()=>{g=void 0,B()&&G((E+1)%i)},Ct))},W=c=>{let p=o[c],v=p.dataset.slide;if(v&&x(v),c!==E){E=c;for(let M of o)M.classList.toggle("is-current",M===p);p.dispatchEvent(new CustomEvent(nt))}},F=c=>{T=null,W(c),P()},U=()=>{clearTimeout(S),r.killTweensOf(t),T=null};function G(c){if(U(),T=c,e===0){t.scrollLeft=y[c],F(c);return}r.to(t,{scrollLeft:y[c],duration:e,ease:_t,overwrite:"auto",onComplete:()=>F(c),onInterrupt:()=>{T=null}})}let Y=()=>{let c=t.scrollLeft,p=0;return y.forEach((v,M)=>{Math.abs(v-c)<Math.abs(y[p]-c)&&(p=M)}),p},q=()=>{let c=Y();Math.abs(y[c]-t.scrollLeft)<Rt?F(c):G(c)},J=()=>{let c=H>0?y[H]-y[H-1]:1/0,p=H<i-1?y[H+1]-y[H]:1/0,v=Math.min(Math.abs(c),Math.abs(p));if(Math.abs(R)<v*.25){q();return}G((H+Math.sign(R)+i)%i)};for(let c of s)c.addEventListener("click",p=>{p.preventDefault();let v=c.dataset.tab??"",M=m.get(v);M!==void 0&&(N(),x(v),G(M))});let z=new Array(i).fill(0),Q=new IntersectionObserver(c=>{for(let M of c){let V=a.get(M.target);V!==void 0&&(z[V]=M.isIntersecting?M.intersectionRatio:0)}let p=-1,v=0;z.forEach((M,V)=>{M<=v||(v=M,p=V)}),p!==-1&&(T!==null&&p!==T||W(p))},{root:t,threshold:Pt});for(let c of o)Q.observe(c);O(),t.style.scrollSnapType="none",t.style.touchAction="pan-y",t.addEventListener("dragstart",c=>c.preventDefault());let[d]=y;t.scrollLeft=d;let f=new ResizeObserver(O);f.observe(t);for(let c of o)f.observe(c);"onscrollend"in window?t.addEventListener("scrollend",()=>{!$()&&!D()&&q()}):t.addEventListener("scroll",()=>{$()||D()||(clearTimeout(S),S=setTimeout(q,It))}),t.addEventListener("pointerdown",c=>{N(),U(),b=c.pointerId,_=!1,I=c.clientX,C=t.scrollLeft,R=0,H=Y()}),t.addEventListener("pointermove",c=>{if(c.pointerId!==b)return;let p=c.clientX-I;if(!_){if(Math.abs(p)<Ot)return;_=!0,t.classList.add("is-dragging"),t.setPointerCapture(c.pointerId)}R=-p*Ht,t.scrollLeft=C+R,c.pointerType==="mouse"&&c.preventDefault()});let w=c=>{c.pointerId===b&&(b=null,t.hasPointerCapture(c.pointerId)&&t.releasePointerCapture(c.pointerId),_?(t.classList.remove("is-dragging"),J()):q())};window.addEventListener("pointerup",w),window.addEventListener("pointercancel",w),t.addEventListener("click",c=>{_&&(_=!1,c.preventDefault(),c.stopPropagation())},!0),n.addEventListener("pointerenter",c=>{c.pointerType==="mouse"&&(L=!0,N())}),n.addEventListener("pointerleave",c=>{c.pointerType==="mouse"&&(L=!1,P())}),n.addEventListener("focusin",N),n.addEventListener("focusout",()=>queueMicrotask(P)),document.addEventListener("visibilitychange",()=>{document.hidden?N():P()}),new IntersectionObserver(c=>{u=c.some(p=>p.isIntersecting),u?P():N()},{threshold:.2}).observe(t)});var it="!<>-_\\/[]{}=+*^?#$%01",K=new WeakMap,k=(t,{duration:r=1050,stagger:l=.75,text:o,reducedMotion:n=!1,relaunchOnHover:s=!1}={})=>{if(n){o!==void 0&&(t.textContent=o);return}if(o!==void 0)t.dataset.scrambleText=o;else if(!t.dataset.scrambleText){let L=t.textContent;if(!L||!L.trim())return;t.dataset.scrambleText=L}let e=t.dataset.scrambleText;if(!e||!e.trim())return;let i=Array.from(e),a=i.length,m=Array.from(t.children),y;m.length===a&&m.every(L=>L.tagName==="SPAN")?y=m:(y=i.map(L=>{let u=document.createElement("span");return u.textContent=L,u}),t.textContent="",t.append(...y));let O=Symbol("scramble");K.set(t,O);let x=i.map((L,u)=>a<=1?0:u/(a-1)*r*l),E=performance.now(),T=L=>{if(K.get(t)!==O)return;let u=L-E,g=!0;i.forEach((S,b)=>{if(S===" "){y[b].textContent=" ";return}u>=x[b]?y[b].textContent=S:(g=!1,y[b].textContent=it[Math.random()*it.length|0])}),g?K.delete(t):requestAnimationFrame(T)};requestAnimationFrame(T),s&&qt(t,{duration:r,stagger:l})},qt=(t,r)=>{t.dataset.scrambleHoverBound||(t.dataset.scrambleHoverBound="true",t.addEventListener("pointerenter",()=>{K.has(t)||k(t,r)}))};var Dt=.5,$t="power2.out",Ft=".status-pill, .evidence_label, .evidence_sku",Gt={duration:630,stagger:.6,relaunchOnHover:!0};h("evidence",(t,{gsap:r,reducedMotion:l})=>{let o=Array.from(t.children);if(!o.length)return;if(l){for(let a of o)a.style.height="auto",a.style.opacity="1";return}let n=()=>{r.killTweensOf(o),r.set(o,{height:0,opacity:0,overflow:"hidden"});let a=r.timeline();for(let m of o)a.call(()=>{for(let y of m.querySelectorAll(Ft))k(y,Gt)}),a.to(m,{height:"auto",opacity:1,duration:Dt,ease:$t,onComplete:()=>r.set(m,{height:"auto"})})},s=!1,e=!1,i=()=>{if(!s||e)return;let a=t.closest("[data-slide]");a&&!a.classList.contains("is-current")||(e=!0,n())};if("IntersectionObserver"in window){let a=new IntersectionObserver(m=>{for(let y of m)y.isIntersecting&&(s=!0,i(),e&&a.disconnect())},{threshold:.2});a.observe(t)}else s=!0,i();t.closest("[data-slide]")?.addEventListener(nt,()=>{e=!1,i()})});var at="is-open",lt=".faq_row",ct=".faq_toggle";h("faq",t=>{let r=t.querySelectorAll(lt);if(r.length===0){console.warn(`[shopic] faq found no ${lt} to open.`,t);return}let l=[];for(let s of r){let e=s.querySelector(ct);if(!e){console.warn(`[shopic] faq row has no ${ct} to click.`,s);continue}l.push({row:s,toggle:e})}if(l.length===0)return;let o=s=>{for(let{row:e,toggle:i}of l){let a=e===s;e.classList.toggle(at,a),i.setAttribute("aria-expanded",String(a))}};for(let{row:s,toggle:e}of l)e.addEventListener("click",()=>{o(s.classList.contains(at)?null:s)}),e.addEventListener("keydown",i=>{i.key!=="Enter"&&i.key!==" "||(i.preventDefault(),e.click())}),e.hasAttribute("tabindex")||(e.tabIndex=0);let n=l.find(({toggle:s})=>s.getAttribute("aria-expanded")==="true");o((n??l[0]).row)});var dt=8;h("focus-drift",(t,{reducedMotion:r})=>{let l=t.querySelector(":scope > .camera_focus");!l||r||(t.addEventListener("pointermove",o=>{if(o.pointerType!=="mouse")return;let n=t.getBoundingClientRect(),s=(o.clientX-n.left)/n.width-.5,e=(o.clientY-n.top)/n.height-.5,i=(s*dt*2).toFixed(1),a=(e*dt*2).toFixed(1);l.style.transform=`translate(${i}px, ${a}px)`}),t.addEventListener("pointerleave",()=>{l.style.transform=""}))});var ut=42,ft=96,Vt=2600,kt="is-scanned",Xt="is-fresh";h("foundation-rail",(t,{gsap:r,reducedMotion:l})=>{let o=t.closest(".camera_photo"),n=Array.from(t.querySelectorAll(":scope > .foundation_slot"),u=>({element:u,parts:Array.from(u.querySelectorAll(".foundation_photo, .foundation_card")),tile:u.querySelector(".foundation_scan"),setX:r.quickSetter(u,"x","px"),home:0,turn:0,state:null}));if(!o||n.length===0){console.warn("[shopic] foundation-rail expects a .camera_photo tile around a track of .foundation_slot items.",t);return}let s=r.quickSetter(t,"x","px"),e=0,i=0,a=u=>u,m=()=>{let[u]=n,g=u.element.offsetWidth,S=g+(parseFloat(getComputedStyle(t).columnGap)||0);e=S*n.length,i=e/ut*(Vt/1e3),a=r.utils.wrap(-e/2,e/2),e<o.offsetWidth+g&&console.warn(`[shopic] foundation-rail: ${n.length} slots span ${e}px but the tile needs ${o.offsetWidth+g}px to loop without a gap.`,t);let b=o.getBoundingClientRect(),H=b.width/o.offsetWidth||1,I=(u.element.getBoundingClientRect().left-b.left)/H+g/2-o.offsetWidth/2-(Number(r.getProperty(t,"x"))||0)-(Number(r.getProperty(u.element,"x"))||0);n.forEach((C,R)=>{C.home=I+R*S,C.setX(C.turn*e)})},y=u=>u>ft?"unseen":u>ft-i?"fresh":"seen",O=(u,g)=>{if(u.state!==g){u.state=g;for(let S of u.parts)S.classList.toggle(kt,g!=="unseen");u.tile?.classList.toggle(Xt,g==="fresh")}},x=u=>{if(e){s(-u);for(let g of n){let S=a(g.home-u),b=Math.round((S-(g.home-u))/e);b!==g.turn&&(g.turn=b,g.setX(b*e)),O(g,y(S))}}},E={t:0},T=()=>E.t*e,L=l?null:r.to(E,{t:1,duration:ut,ease:"none",repeat:-1,paused:!0,onUpdate:()=>x(T())});new ResizeObserver(()=>{m(),x(T())}).observe(t),L&&new IntersectionObserver(u=>{L.paused(!u.some(g=>g.isIntersecting))}).observe(t)});var pt="split_line",Bt="split_word",mt="split_word-inner",Wt=t=>{let r=document.createDocumentFragment(),l=[],o=document.createElement("span");o.className=pt,r.appendChild(o);let n=(e,i)=>{if(!e)return;let a=document.createElement("span");a.className=Bt;let m=document.createElement("span");m.className=i?`${mt} ${i}`:mt,m.textContent=e,a.appendChild(m),o.appendChild(a),l.push(m)},s=(e,i)=>{for(let a of e.split(/(\s+)/))a&&(/^\s+$/.test(a)?o.appendChild(document.createTextNode(" ")):n(a,i))};for(let e of Array.from(t.childNodes))e.nodeType===Node.TEXT_NODE?s(e.textContent??""):e instanceof HTMLBRElement?(o=document.createElement("span"),o.className=pt,r.appendChild(o)):e instanceof HTMLElement&&s(e.textContent??"",e.className||void 0);return t.textContent="",t.appendChild(r),l},gt={yPercent:0,duration:.9,ease:"power4.out",stagger:.035};h("headline",(t,{gsap:r,ScrollTrigger:l,reducedMotion:o})=>{if(o){t.style.visibility="visible";return}let n=Wt(t);if(r.set(n,{yPercent:110}),t.style.visibility="visible",t.dataset.animTrigger==="load"||!l){r.to(n,{...gt,delay:.3});return}r.to(n,{...gt,scrollTrigger:{trigger:t,start:"top 85%"}})});var Ut=26;h("marquee",(t,{gsap:r,reducedMotion:l})=>{if(l)return;let o=Number(t.dataset.animSets??4),n=Number(t.dataset.animDuration??Ut);if(!Number.isFinite(o)||o<2)return;let s=()=>t.scrollWidth/o,e=r.to(t,{x:()=>-s(),duration:n,ease:"none",repeat:-1,modifiers:{x:a=>`${Number.parseFloat(a)%s()}px`}}),i=t.parentElement;i&&(i.addEventListener("pointerenter",()=>e.pause()),i.addEventListener("pointerleave",()=>e.resume()))});var Yt=1.15,yt=.18,ht=10,Z=8,X=.55,Et="is-visible",bt="opacity, width, height",zt=["name","price","packaging","sku"];h("photo-hover",(t,{reducedMotion:r})=>{let l=t.querySelector(":scope > img"),o=t.querySelector(":scope > .detect_layer"),n=t.querySelector(":scope > .camera_focus");if(!l&&!n)return;let s=n?.querySelector(".is-ring")??null,e=n?.querySelector(".is-corners")??null;n&&(!s||!e)&&console.warn("[shopic] photo-hover expects is-ring and is-corners layers inside the reticle.",n);let i=t.querySelector(":scope > .camera_readout"),a=Number(t.dataset.animZoom)||Yt,m=Array.from(t.querySelectorAll(".detect_box")),y=t.querySelector('[data-match="card"]'),O=y?.querySelector('[data-match="thumb"]')??null,x=0,E=0,T=0,L=0,u=0,g=0,S=0,b=null,H=d=>d.width/t.offsetWidth||1,I=(d,f)=>{let w=t.getBoundingClientRect(),A=H(w);return{x:(d-w.left)/A,y:(f-w.top)/A,width:t.offsetWidth,height:t.offsetHeight}},C=d=>{let f=t.getBoundingClientRect(),w=d.getBoundingClientRect(),A=H(f);return{x:(w.left-f.left)/A-Z,y:(w.top-f.top)/A-Z,w:w.width/A+Z*2,h:w.height/A+Z*2}},R=()=>{let{x:d,y:f,width:w,height:A}=I(g,S),c=(d/w-.5)*w*(a-1),p=(f/A-.5)*A*(a-1),v=`translate(${c.toFixed(2)}px, ${p.toFixed(2)}px) scale(${a})`;l&&(l.style.transform=v),o&&(o.style.transform=v)},_=()=>{if(!i)return;let d=t.getBoundingClientRect();if(!d.width||!d.height)return;let f=(g-d.left)/d.width-.5,w=(S-d.top)/d.height-.5,A=(f*ht*2).toFixed(1),c=(w*ht*2).toFixed(1);i.style.setProperty("translate",`${A}px ${c}px`)},D=()=>{let{x:d,y:f}=I(g,S);return{x:d-(n?.offsetWidth??0)/2,y:f-(n?.offsetHeight??0)/2}},$=(d,f)=>{n&&(n.style.left=`${d.toFixed(2)}px`,n.style.top=`${f.toFixed(2)}px`)},N=()=>{let d=D();$(d.x,d.y),L=d.x,u=d.y,E=0,T=0,e&&(e.style.transform="")},B=()=>{let d=D();$(d.x,d.y),r||(E-=d.x-L,T-=d.y-u),L=d.x,u=d.y},P=d=>{if(!n)return;let f=C(d);$(f.x,f.y),n.style.width=`${f.w.toFixed(2)}px`,n.style.height=`${f.h.toFixed(2)}px`},W=()=>{if(e){if(E-=E*yt,T-=T*yt,Math.abs(E)>.1||Math.abs(T)>.1){e.style.transform=`translate(${E.toFixed(2)}px, ${T.toFixed(2)}px)`;return}E=0,T=0,e.style.transform=""}},F=()=>{b?P(b):B(),W(),x=requestAnimationFrame(F)},U=d=>{if(y){for(let f of zt){let w=d.dataset[f],A=y.querySelector(`[data-match="${f}"]`);A&&w!==void 0&&(A.textContent=w)}if(O){let f=d.dataset.thumb;f&&(O.removeAttribute("srcset"),O.removeAttribute("sizes"),O.src=f),O.style.display=f?"":"none"}y.classList.add(Et)}},G=d=>{if(b=d,U(d),!!n&&(n.style.transitionProperty="",P(d),e&&(e.style.opacity="0"),s)){let f=(1-X)/2*100;s.style.width=`${X*100}%`,s.style.height=`${X*100}%`,s.style.left=`${f}%`,s.style.top=`${f}%`,s.style.right="auto",s.style.bottom="auto"}},Y=d=>{if(!s)return;let f=C(d),{x:w,y:A}=I(g,S),c=(w-f.x)/f.w-.5,p=(A-f.y)/f.h-.5,v=c*f.w*(1-X),M=p*f.h*(1-X);s.style.setProperty("translate",`${v.toFixed(2)}px ${M.toFixed(2)}px`)},q=()=>{b=null,y?.classList.remove(Et),n&&(n.style.width="",n.style.height="",n.style.transitionProperty=bt,e&&(e.style.opacity=""),s&&(s.style.width="",s.style.height="",s.style.left="",s.style.top="",s.style.right="",s.style.bottom="",s.style.removeProperty("translate")))},J=d=>{d.pointerType==="mouse"&&(g=d.clientX,S=d.clientY,R(),_(),n&&(n.style.transitionProperty=bt,N(),cancelAnimationFrame(x),x=requestAnimationFrame(F)))},z=d=>{d.pointerType==="mouse"&&(g=d.clientX,S=d.clientY,R(),_())},Q=()=>{cancelAnimationFrame(x),x=0,l&&(l.style.transform=""),o&&(o.style.transform=""),i?.style.setProperty("translate","0px 0px"),q(),n&&(n.style.left="",n.style.top="",n.style.transitionProperty="",e&&(e.style.transform=""),E=0,T=0)};t.addEventListener("pointerenter",J),t.addEventListener("pointermove",z),t.addEventListener("pointerleave",Q);for(let d of m)d.addEventListener("pointerenter",f=>{f.pointerType==="mouse"&&G(d)}),d.addEventListener("pointermove",()=>{b===d&&Y(d)}),d.addEventListener("pointerleave",()=>{b===d&&(q(),N())})});var Kt="display_none",ot=0;h("platform-hotspots",t=>{let r=0,l=Array.from(t.querySelectorAll("[data-platform-hotspot-wrap]")).flatMap(e=>{let i=e.querySelector("[data-platform-hotspot]"),a=e.querySelector("[data-platform-tooltip]");return!i||!a?(r+=1,[]):[{wrap:e,trigger:i,tooltip:a}]});if(r>0&&console.warn(`[shopic] platform-hotspots skipped ${r} malformed ${r===1?"group":"groups"} (a trigger and tooltip are required).`,t),l.length===0)return;l.forEach(({trigger:e,tooltip:i})=>{if(!i.id){do ot+=1;while(t.ownerDocument.getElementById(`platform-tooltip-${ot}`));i.id=`platform-tooltip-${ot}`}let a=new Set((e.getAttribute("aria-describedby")??"").split(/\s+/).filter(Boolean));a.add(i.id),e.setAttribute("aria-describedby",[...a].join(" "))});let o=(e,i)=>{e.tooltip.classList.toggle(Kt,!i),e.tooltip.style.visibility=i?"visible":"hidden",e.tooltip.style.pointerEvents=i?"auto":"none",e.trigger.setAttribute("aria-expanded",String(i))},n=()=>l.forEach(e=>o(e,!1)),s=e=>{l.forEach(i=>o(i,i===e))};n(),l.forEach(e=>{let i=null;e.wrap.addEventListener("pointerenter",a=>{a.pointerType==="mouse"&&s(e)}),e.wrap.addEventListener("pointerleave",a=>{a.pointerType==="mouse"&&!e.wrap.contains(t.ownerDocument.activeElement)&&o(e,!1)}),e.wrap.addEventListener("focusout",a=>{(!(a.relatedTarget instanceof Node)||!e.wrap.contains(a.relatedTarget))&&o(e,!1)}),e.trigger.addEventListener("pointerdown",a=>{i=a.pointerType}),e.trigger.addEventListener("focus",()=>{i!=="touch"&&i!=="pen"&&s(e)}),e.trigger.addEventListener("click",a=>{i==="touch"||i==="pen"?e.trigger.getAttribute("aria-expanded")==="true"?o(e,!1):s(e):i===null&&a.detail===0&&s(e),i=null})}),t.ownerDocument.addEventListener("pointerdown",e=>{(!(e.target instanceof Node)||l.every(i=>!i.wrap.contains(e.target)))&&n()}),t.ownerDocument.addEventListener("keydown",e=>{e.key==="Escape"&&n()})});var vt="is-visible";h("reveal",(t,{reducedMotion:r})=>{let l=Number(t.dataset.animDelay??0);if(l&&(t.style.transitionDelay=`${l}ms`),r||!("IntersectionObserver"in window)){t.classList.add(vt);return}let o=new IntersectionObserver(n=>{for(let s of n)s.isIntersecting&&(s.target.classList.add(vt),o.unobserve(s.target))},{threshold:.15});o.observe(t)});h("scramble",(t,{reducedMotion:r})=>{let l={duration:Number(t.dataset.animDuration??1050),stagger:Number(t.dataset.animStagger??.75),reducedMotion:r};if(r||!("IntersectionObserver"in window)){k(t,l);return}let o=new IntersectionObserver(n=>{for(let s of n)s.isIntersecting&&(k(t,{...l,relaunchOnHover:!0}),o.unobserve(s.target))},{threshold:.2});o.observe(t)});h("scroll-topbar",t=>{let r=document.querySelector("[data-topbar-trigger]");if(!r){console.warn("[shopic] Scroll topbar is missing its trigger.");return}let l=0,o=()=>{l=0;let s=r.getBoundingClientRect().top<=t.offsetHeight;t.dataset.topbarVisible=String(s),t.style.visibility=s?"visible":"hidden",t.inert=!s,t.setAttribute("aria-hidden",String(!s))},n=()=>{l||(l=window.requestAnimationFrame(o))};window.addEventListener("scroll",n,{passive:!0}),window.addEventListener("resize",n),window.addEventListener("pageshow",n),new ResizeObserver(n).observe(document.body),o()});var j=({grouped:t=!1,prefix:r="",suffix:l="",value:o})=>{let n=Math.round(o),s=t?n.toLocaleString("en-US"):String(n);return`${r}${s}${l}`};var Zt=.5,Tt="power4.out",jt=.18,Jt="power2.in",Qt=.35,te=1400,ee=.15,ne=420,oe=t=>{let r=t.querySelector("[data-stat-value]");return r||console.warn("[shopic] stats row is missing [data-stat-value]",t),r},rt=t=>({grouped:(t.dataset.statGrouped??t.closest('[data-anim="stats"]')?.dataset.statGrouped)==="true",prefix:t.dataset.statPrefix??t.closest('[data-anim="stats"]')?.dataset.statPrefix??"",suffix:t.dataset.statSuffix??t.closest('[data-anim="stats"]')?.dataset.statSuffix??""}),wt=(t,r)=>{t.textContent=j({...rt(t),value:r})},Lt=(t,r)=>{t.classList.toggle("is-hovered",r);for(let l of t.querySelectorAll("[data-stat-label], [data-stat-hover]"))l.classList.toggle("is-hovered",r)},St=(t,r,l,o)=>{if(l){wt(t,r);return}let n=performance.now(),s=e=>{if(o!==Number(t.dataset.statsGeneration))return;let i=Math.min((e-n)/te,1),a=1-(1-i)**3;t.textContent=j({...rt(t),value:r*a}),i<1&&requestAnimationFrame(s)};requestAnimationFrame(s)},re=(t,{gsap:r,reducedMotion:l})=>{let o=t,n=oe(o);if(!n)return;let s=o.dataset.statCount??n.dataset.statCount,e=s===void 0?null:Number(s),i=o.dataset.statTicker??n.dataset.statTicker,a=i===void 0?null:Number(i),m=o.dataset.statTickerInterval??n.dataset.statTickerInterval,y=m===void 0?Number.NaN:Number(m),O=y>0?y:ne,x=null,E=0,T=!1,L=()=>{a!==null&&(n.textContent=j({...rt(n),value:a}))},u=()=>{l||a===null||x!==null||(x=setInterval(()=>{a!==null&&(a+=1+Math.floor(Math.random()*3),L())},O))},g=()=>{x!==null&&(clearInterval(x),x=null)},S=()=>{E+=1,n.dataset.statsGeneration=String(E),e!==null?wt(n,e):L(),r.set(n,{clearProps:"transform"})},b=I=>{E+=1,n.dataset.statsGeneration=String(E),r.killTweensOf(n),r.set(n,{yPercent:110}),r.to(n,{duration:Zt,ease:Tt,yPercent:0}),I&&e!==null&&St(n,e,l,E)};if(l){S();return}L(),r.set(n,{yPercent:110});let H=()=>{T||(T=!0,b(!0))};if("IntersectionObserver"in window){let I=new IntersectionObserver(C=>{C.some(R=>R.isIntersecting)&&(H(),I.disconnect())},{threshold:ee});I.observe(o)}else H();a!==null&&("IntersectionObserver"in window?new IntersectionObserver(C=>{C.some(R=>R.isIntersecting)?u():g()}).observe(o):u()),o.addEventListener("pointerenter",I=>{I.pointerType==="mouse"&&(Lt(o,!0),E+=1,n.dataset.statsGeneration=String(E),r.killTweensOf(n),r.timeline().to(n,{duration:jt,ease:Jt,yPercent:-110}).set(n,{yPercent:110}).to(n,{duration:Qt,ease:Tt,onStart:()=>{e!==null&&St(n,e,l,E)},yPercent:0}))}),o.addEventListener("pointerleave",()=>Lt(o,!1))};h("stats",re);var st=t=>String(t).padStart(2,"0");h("timer",t=>{let r=()=>{let l=new Date;t.textContent=`${st(l.getHours())}:${st(l.getMinutes())}:${st(l.getSeconds())}`};r(),setInterval(r,1e3)});var xt="is-active",se="(max-width: 991px)";h("versus-tabs",t=>{let r=Array.from(t.querySelectorAll('[role="tab"]')),l=t.nextElementSibling,o=l?Array.from(l.querySelectorAll(":scope > *")):[];if(r.length===0||r.length!==o.length){console.warn(`[shopic] versus-tabs expects one tab per panel; found ${r.length} tabs and ${o.length} panels.`,t);return}let n=window.matchMedia(se),s=i=>{r.forEach((a,m)=>{a.classList.toggle(xt,m===i),a.setAttribute("aria-selected",String(m===i))}),o.forEach((a,m)=>{a.hidden=n.matches&&m!==i})},e=()=>Math.max(0,r.indexOf(t.querySelector(`.${xt}`)));r.forEach((i,a)=>{i.addEventListener("click",()=>s(a)),i.addEventListener("keydown",m=>{(m.key==="Enter"||m.key===" ")&&(m.preventDefault(),s(a))}),i.hasAttribute("tabindex")||(i.tabIndex=0)}),n.addEventListener("change",()=>s(e())),s(e())});var At=()=>{let{gsap:t,ScrollTrigger:r}=window;if(!t)throw new Error("[shopic] GSAP is not on the page. Enable it in Webflow \u2192 Site Settings \u2192 Custom Code \u2192 GSAP.");return r&&t.registerPlugin(r),{gsap:t,ScrollTrigger:r}},Mt=()=>window.matchMedia("(prefers-reduced-motion: reduce)").matches;window.Webflow||(window.Webflow=[]);window.Webflow.push(()=>{let{gsap:t,ScrollTrigger:r}=At();et({gsap:t,ScrollTrigger:r,reducedMotion:Mt()})});})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shopic",
-  "version": "0.1.5",
+  "version": "0.2.1",
   "description": "Custom code bundle for the Shopic Webflow site.",
   "license": "UNLICENSED",
   "private": false,