shopic 0.1.4 → 0.1.5
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.
- package/dist/index.js +1 -1
- 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,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()})});})();
|