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