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