shopic 0.1.4 → 0.2.0

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