shopic 0.2.4 → 0.2.6

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