1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3552],{63:(e,t,a)=>{"use strict";var n=a(7260);a.o(n,"usePathname")&&a.d(t,{usePathname:function(){return n.usePathname}}),a.o(n,"useRouter")&&a.d(t,{useRouter:function(){return n.useRouter}}),a.o(n,"useSearchParams")&&a.d(t,{useSearchParams:function(){return n.useSearchParams}})},80:(e,t,a)=>{"use strict";a.d(t,{Ji:()=>l,u4:()=>s});var n=a(5302),r=a(3075),i=a(9385);function s(e,t){(0,n.u)(e,{...(0,i.h)(),...t})}function l(){let e=(0,i.M)();for(let t of(0,r.rj)()){let a=e[t.key];if(!a)continue;let s="".concat((0,r.Ok)(t.key),"-seen");try{if(sessionStorage.getItem(s)===a)continue;sessionStorage.setItem(s,a)}catch(e){}(0,n.u)("ab_exposure",{experiment:t.key,variant:a,...(0,i.h)()})}}},1150:(e,t,a)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"default",{enumerable:!0,get:function(){return o}});let n=a(5155),r=a(2115),i=a(4437);function s(e){return{default:e&&"default"in e?e.default:e}}a(6552);let l={loader:()=>Promise.resolve(s(()=>null)),loading:null,ssr:!0},o=function(e){let t={...l,...e},a=(0,r.lazy)(()=>t.loader().then(s)),o=t.loading;function c(e){let s=o?(0,n.jsx)(o,{isLoading:!0,pastDelay:!0,error:null}):null,l=!t.ssr||!!t.loading,c=l?r.Suspense:r.Fragment,d=t.ssr?(0,n.jsxs)(n.Fragment,{children:[null,(0,n.jsx)(a,{...e})]}):(0,n.jsx)(i.BailoutToCSR,{reason:"next/dynamic",children:(0,n.jsx)(a,{...e})});return(0,n.jsx)(c,{...l?{fallback:s}:{},children:d})}return c.displayName="LoadableComponent",c}},1588:()=>{},1673:()=>{},2973:(e,t,a)=>{"use strict";function n(){return"undefined"!=typeof window}a.d(t,{u4:()=>s});function r(){return(n()?window.vam:function(){return"production"}())||"production"}function i(){return"production"===r()}function s(e,t,a){var s,l;if(!n()){let e="[Vercel Web Analytics] Please import `track` from `@vercel/analytics/server` when using this function in a server environment";if(i())console.warn(e);else throw Error(e);return}if(!t){null==(s=window.va)||s.call(window,"event",{name:e,options:a});return}try{let n=function(e,t){if(!e)return;let a=e,n=[];for(let[r,i]of Object.entries(e))"object"==typeof i&&null!==i&&(t.strip?a=function(e,{[e]:t,...a}){return a}(r,a):n.push(r));if(n.length>0&&!t.strip)throw Error(`The following properties are not valid: ${n.join(", ")}. Only strings, numbers, booleans, and null are allowed.`);return a}(t,{strip:i()});null==(l=window.va)||l.call(window,"event",{name:e,data:n,options:a})}catch(e){e instanceof Error&&"development"===r()&&console.error(e)}}},3064:()=>{},3552:(e,t,a)=>{Promise.resolve().then(a.bind(a,4818))},3901:()=>{},4054:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),!function(e,t){for(var a in t)Object.defineProperty(e,a,{enumerable:!0,get:t[a]})}(t,{bindSnapshot:function(){return s},createAsyncLocalStorage:function(){return i},createSnapshot:function(){return l}});let a=Object.defineProperty(Error("Invariant: AsyncLocalStorage accessed in runtime where it is not available"),"__NEXT_ERROR_CODE",{value:"E504",enumerable:!1,configurable:!0});class n{disable(){throw a}getStore(){}run(){throw a}exit(){throw a}enterWith(){throw a}static bind(e){return e}}let r="undefined"!=typeof globalThis&&globalThis.AsyncLocalStorage;function i(){return r?new r:new n}function s(e){return r?r.bind(e):n.bind(e)}function l(){return r?r.snapshot():function(e,...t){return e(...t)}}},4374:(e,t,a)=>{"use strict";a.d(t,{d:()=>r,w:()=>n});let n={exposure:1.08,envIntensity:.85,keyIntensity:3,fillIntensity:4.8,rimIntensity:7.1,ambientIntensity:0,envMapIntensity:17.5,steelRoughness:.04,clearcoat:.47},r=!1},4437:(e,t,a)=>{"use strict";function n(e){let{reason:t,children:a}=e;return a}Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"BailoutToCSR",{enumerable:!0,get:function(){return n}}),a(4553)},4818:(e,t,a)=>{"use strict";let n;a.d(t,{default:()=>td});var r=a(5155),i=a(2115),s=a(7650),l=a(5239),o=a(2619),c=a.n(o),d=a(63),u=a(80),h=a(3127),p=a(9132),m=a(4416);function f(e){let{children:t,isValidProp:a,...n}=e;a&&(0,p.D)(a),(n={...(0,i.useContext)(h.Q),...n}).isStatic=(0,m.M)(()=>n.isStatic);let s=(0,i.useMemo)(()=>n,[JSON.stringify(n.transition),n.transformPagePoint,n.reducedMotion]);return(0,r.jsx)(h.Q.Provider,{value:s,children:t})}var x=a(7486),v=a(1408),g=a(818);let y="shop.noware.nyc",b="112bdeace3edab53be8271dffe0f2003",w="https://".concat(y,"/api/2025-01/graphql.json"),j=!!(y&&b);async function k(e,t,a){let n=await fetch(w,{method:"POST",headers:{"Content-Type":"application/json","X-Shopify-Storefront-Access-Token":b},body:JSON.stringify({query:e,variables:t}),signal:a});if(!n.ok)throw Error("Shopify API error: ".concat(n.status," ").concat(n.statusText));let r=await n.json();if(r.errors)throw Error(r.errors.map(e=>e.message).join(", "));return r.data}async function N(e){var t,a;if(!j)return{variantImages:{},variantAvailability:{},variantPrices:{},variantTitles:{},productImages:[]};let n=e.startsWith("gid://")?e:"gid://shopify/ProductVariant/".concat(e),r=null==(t=(await k("query productGallery($id: ID!, $maxWidth: Int!) {\n node(id: $id) {\n ... on ProductVariant {\n product {\n images(first: 20) {\n edges { node { url(transform: { maxWidth: $maxWidth }) altText } }\n }\n variants(first: 20) {\n edges {\n node {\n id\n title\n availableForSale\n image { url(transform: { maxWidth: $maxWidth }) altText }\n price { amount currencyCode }\n compareAtPrice { amount currencyCode }\n }\n }\n }\n }\n }\n }\n }",{id:n,maxWidth:1400})).node)?void 0:t.product;if(!r)return{variantImages:{},variantAvailability:{},variantPrices:{},variantTitles:{},productImages:[]};let i={},s={},l={},o={};for(let e of r.variants.edges){let t=e.node.id.replace("gid://shopify/ProductVariant/","");s[t]=e.node.availableForSale,l[t]={amount:parseFloat(e.node.price.amount),currencyCode:e.node.price.currencyCode,compareAtAmount:e.node.compareAtPrice?parseFloat(e.node.compareAtPrice.amount):null}
1,o[t]=e.node.title,(null==(a=e.node.image)?void 0:a.url)&&(i[t]=e.node.image.url)}return{variantImages:i,variantAvailability:s,variantPrices:l,variantTitles:o,productImages:r.images.edges.map(e=>e.node)}}async function C(e,t){let{cart:a,userErrors:n}=(await k("mutation cartPricing($input: CartInput!) {\n cartCreate(input: $input) {\n cart {\n cost { subtotalAmount { amount currencyCode } }\n discountCodes { code applicable }\n discountAllocations { discountedAmount { amount } }\n lines(first: 100) { nodes {\n quantity merchandise { ... on ProductVariant { id } }\n cost { subtotalAmount { amount } totalAmount { amount } compareAtAmountPerQuantity { amount } }\n } }\n }\n userErrors { message }\n }\n }",{input:{lines:e.map(e=>({merchandiseId:S(e.variantId),quantity:e.quantity})),...t?{discountCodes:[t]}:{}}},AbortSignal.timeout(12e3))).cartCreate;if(!a||n.length)throw Error("Cart pricing unavailable");let r=e=>Math.round(100*Number(e)),i=a.lines.nodes.map(e=>{var t,a;return{variantId:e.merchandise.id.replace("gid://shopify/ProductVariant/",""),quantity:e.quantity,original:Math.max(r(e.cost.subtotalAmount.amount),r(null!=(a=null==(t=e.cost.compareAtAmountPerQuantity)?void 0:t.amount)?a:"0")*e.quantity),total:r(e.cost.totalAmount.amount)}}),s=i.reduce((e,t)=>e+t.total,0),l=Math.min(s,a.discountAllocations.reduce((e,t)=>e+r(t.discountedAmount.amount),0)),o=i.map(e=>s?l*e.total/s:0),c=o.map(Math.floor),d=l-c.reduce((e,t)=>e+t,0);o.map((e,t)=>({index:t,fraction:e-c[t]})).sort((e,t)=>t.fraction-e.fraction).slice(0,d).forEach(e=>{let{index:t}=e;return c[t]++});let u=Object.fromEntries(i.map((e,t)=>[e.variantId,{quantity:e.quantity,original:e.original/100,total:(e.total-c[t])/100}]));if(e.some(e=>{var t;return(null==(t=u[e.variantId])?void 0:t.quantity)!==e.quantity}))throw Error("Incomplete cart pricing");return{currencyCode:a.cost.subtotalAmount.currencyCode,lines:u,subtotal:(s-l)/100,applicableCodes:a.discountCodes.filter(e=>e.applicable).map(e=>e.code)}}function S(e){return e.startsWith("gid://")?e:"gid://shopify/ProductVariant/".concat(e)}async function E(e,t){let a=new Map;for(let t of e){var n;if(t.quantity<=0)continue;let e=S(t.variantId);a.set(e,(null!=(n=a.get(e))?n:0)+t.quantity)}if(0===a.size)throw Error("Cannot create a checkout with no items");let r={lines:[...a].map(e=>{let[t,a]=e;return{merchandiseId:t,quantity:a}})},i=(0,g.yR)();i.length&&(r.attributes=i),t&&(r.discountCodes=[t]);let{cart:s,userErrors:l}=(await k("mutation cartCreate($input: CartInput!) {\n cartCreate(input: $input) {\n cart {\n id\n checkoutUrl\n }\n userErrors {\n field\n message\n }\n }\n }",{input:r})).cartCreate;if(l.length>0)throw Error(l.map(e=>e.message).join(", "));if(!s)throw Error("Failed to create cart");return s.checkoutUrl}var M=a(8328),P=a(6979);let I=["44187581644842","44187581710378","44187581743146","44187581677610"];function L(e){return e.reduce((e,t)=>e+t.quantity,0)}function F(e){var t,a,n,s,o;let{open:c,onClose:d,onChooseAnother:u,lines:h,onChange:p,options:m,gallery:f,discountCode:x,note:v,productName:g="PUFF"}=e,y=(0,i.useRef)(null),b=(0,i.useRef)(!1),w=(0,i.useRef)(0),[j,k]=(0,i.useState)(!1),S=(0,i.useRef)(!1),M=(0,i.useRef)(null),I=(0,i.useRef)(null),[F,T]=(0,i.useState)(!1),[R,A]=(0,i.useState)(""),[_,U]=(0,i.useState)(null),[O,B]=(0,i.useState)(!1),[q,H]=(0,i.useState)(null),z=JSON.stringify({lines:h,discountCode:x}),W=(null==q?void 0:q.key)===z?q.pricing:null,D=c&&h.length>0&&(null==q?void 0:q.key)!==z;(0,i.useEffect)(()=>{if(!c||!h.length)return;let e=!1,t=setTimeout(()=>{C(h,x).then(t=>{e||H({key:z,pricing:t})}).catch(()=>{e||H({key:z,pricing:null})})},200);return()=>{e=!0,clearTimeout(t)}},[c,h,x,z]),f=null!=_?_:f;let V=L(h),X=null!=(s=null!=(n=null==W?void 0:W.currencyCode)?n:null==f||null==(t=f.variantPrices[null==(a=h[0])?void 0:a.variantId])?void 0:t.currencyCode)?s:"USD",G=e=>new Intl.NumberFormat("en-US",{style:"currency",currency:X,maximumFractionDigits:2}).format(e),Y=h.every(e=>null==f?void 0:f.variantPrices[e.variantId]),Q=null!=(o=null==W?void 0:W.subtotal)?o:h.reduce((e,t)=>
1{var a,n;return e+(null!=(n=null==f||null==(a=f.variantPrices[t.variantId])?void 0:a.amount)?n:179)*t.quantity},0),$=W?Object.values(W.lines).reduce((e,t)=>e+t.original-t.total,0):0,Z=h.some(e=>(null==f?void 0:f.variantAvailability[e.variantId])===!1);(0,i.useEffect)(()=>{let e=y.current;if(!e)return;if(!c)return void e.close();k(!1);let t=document.activeElement instanceof HTMLElement?document.activeElement:null,a=document.body.style.overflow;return e.showModal(),document.body.style.overflow="hidden",()=>{null!==M.current&&window.clearTimeout(M.current),S.current=!1,I.current=null,e.close(),document.body.style.overflow=a,null==t||t.focus({preventScroll:!0})}},[c]),(0,i.useEffect)(()=>(w.current++,b.current=!1,T(!1),A(""),()=>{w.current++}),[h,c]);let J=()=>{if(!S.current)return;null!==M.current&&window.clearTimeout(M.current),S.current=!1;let e=I.current;I.current=null,d(),null==e||e()},K=e=>{if(S.current)return;w.current++,S.current=!0,I.current=null!=e?e:null;let t=y.current;t&&t.style.setProperty("--cart-close-from",getComputedStyle(t).transform),k(!0),M.current=window.setTimeout(J,300*!window.matchMedia("(prefers-reduced-motion: reduce)").matches)},ee=async()=>{if(!O&&h.length){B(!0),A("");try{let e=await N(h[0].variantId);if(!e.variantPrices[h[0].variantId])throw Error("pricing");U(e)}catch(e){A("Current pricing couldnât load. Please try again.")}finally{B(!1)}}},et=async()=>{if(b.current||!V||Z||!Y)return;let e=++w.current;b.current=!0,T(!0),A("");try{let t=await N(h[0].variantId);if(e!==w.current)return;if(U(t),h.some(e=>!0!==t.variantAvailability[e.variantId]))throw Error("availability");let a=await E(h,x);if(e!==w.current)return;(0,P.F)("checkout_start",{placement:"cart_drawer",quantity:V}),window.location.assign(a)}catch(t){if(e!==w.current)return;(0,P.F)("checkout_error",{placement:"cart_drawer",quantity:V}),A("We couldnât open checkout. Check availability and try again; your cart is saved."),b.current=!1,T(!1)}};return(0,r.jsx)("dialog",{ref:y,className:"puff-cart","data-closing":j,"aria-labelledby":"cart-title",onCancel:e=>{e.preventDefault(),K()},onAnimationEnd:e=>{e.target===e.currentTarget&&"cart-exit"===e.animationName&&J()},onClick:e=>{if(e.target!==e.currentTarget)return;let t=e.currentTarget.getBoundingClientRect();(e.clientX<t.left||e.clientX>t.right||e.clientY<t.top||e.clientY>t.bottom)&&K()},children:(0,r.jsxs)("div",{className:"cart-shell",children:[(0,r.jsxs)("header",{className:"cart-header",children:[(0,r.jsxs)("div",{children:[(0,r.jsxs)("p",{className:"cart-eyebrow",children:["NOWARE / ",g]}),(0,r.jsxs)("h2",{id:"cart-title",children:["Your cart ",(0,r.jsx)("span",{children:String(V).padStart(2,"0")})]})]}),(0,r.jsx)("button",{className:"cart-close",onClick:()=>K(),"aria-label":"Close cart",children:(0,r.jsx)("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"1",strokeLinecap:"round","aria-hidden":"true",children:(0,r.jsx)("path",{d:"m5 5 10 10M15 5 5 15"})})})]}),(0,r.jsxs)("div",{className:"cart-items",children:[v&&(0,r.jsx)("p",{className:"home-note",role:"status",children:v}),!V&&(0,r.jsxs)("div",{className:"cart-empty",children:[(0,r.jsxs)("p",{children:["A little room for ",g,"."]}),(0,r.jsxs)("button",{onClick:()=>K(),children:["Keep exploring ",(0,r.jsx)("span",{"aria-hidden":"true",children:"â"})]})]}),h.map(e=>{var t,a,n,i,s,o,c;let d=m.find(t=>t.variantId===e.variantId),u=(null==f?void 0:f.variantAvailability[e.variantId])===!1,x=null==f?void 0:f.variantPrices[e.variantId],v=null!=(i=null==W||null==(t=W.lines[e.variantId])?void 0:t.total)?i:(null!=(n=null==x?void 0:x.amount)?n:179)*e.quantity,y=null!=(c=null==W||null==(a=W.lines[e.variantId])?void 0:a.original)?c:Math.max(null!=(s=null==x?void 0:x.compareAtAmount)?s:0,null!=(o=null==x?void 0:x.amount)?o:179)*e.quantity;return(0,r.jsxs)("article",{className:"cart-item",children:[(0,r.jsx)("div",{className:"cart-image",children:(0,r.jsx)(l.default,{src:d.image,width:220,height:260,alt:"".concat(d.label," ").concat(g)})}),(0,r.jsxs)("div",{className:"cart-item-info",children:[(0,r.jsxs)("div",{className:"cart-item-title",children:[(0,r.jsx)("h3",{children:g}),(0,r.jsxs)("div",{className:"cart-line-price",children:[y>v&&(0,r.jsxs)("del",{children:[(0,r.jsx)("span",{className:"sr-only",children:"Original price "}),G(y)]}),(0,r.jsxs)("span",{children:[(0,r.jsx)("span",{className:"sr-only",children:"Current price "}),G(v)]})]})]}),(0,r.jsxs)("p",{children:[d.label," / 128 GB"]}),(0,r.jsx)("p",{className:"cart-small",children:u?"Currently sold out":"Ships 2nd week in October"}),(0,r.jsxs)("div",{className:"cart-line-actions",children:[(0,r.jsxs)("div",{className:"cart-quantity",children:[(0,r.jsx)("button",{disabled:F,"aria-label":"Decrease ".concat(d.label," quantity"),onClick:()=>p(h.flatMap(t=>t.variantId===e.variantId?t.quantity>1?[{...t,quantity:t.quantity-1}]:[]:[t])),children:"â"}),(0,r.jsx)("span",{"aria-label":"".concat(d.label," quantity"),children:e.quantity}),(0,r.jsx)("button",{disabled:F||V>=3||u,"aria-label":"Increase ".concat(d.label," quantity"),onClick:()=>p(h.map(t=>t.variantId===e.variantId?{...t,quantity:t.quantity+1}:t)),children:"+"})]}),(0,r.jsxs)("button",{className:"cart-remove",disabled:F,onClick:()=>p(h.filter(t=>t.variantId!==e.variantId)),children:["Remove",(0,r.jsxs)("span",{className:"sr-only",children:[" ",d.label]})]})]})]})]},e.variantId)})]}),!!V&&(0,r.jsxs)("footer",{className:"cart-footer",children:[(0,r.jsxs)("div",{className:"cart-subtotal",children:[(0,r.jsx)("span",{children:"Subtotal"}),(0,r.jsx)("span",{children:G(Q)})]}),(0,r.jsx)("p",{className:"cart-small",role:"status",children:D?"Updating discountsâ¦"
1:$>0?"You save ".concat(G($),"."):!W&&(V>=2||x)?"Discounts will be confirmed at checkout.":null}),(0,r.jsxs)("p",{className:"cart-shipping",children:[(0,r.jsxs)("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:[(0,r.jsx)("path",{d:"M1.9 6.4h11.2v10.4H1.9z"}),(0,r.jsx)("path",{d:"M13.1 9.9h3.6l2.9 3.2v3.7h-6.5z"}),(0,r.jsx)("circle",{cx:"6.1",cy:"18.5",r:"1.7"}),(0,r.jsx)("circle",{cx:"16.6",cy:"18.5",r:"1.7"})]}),"Free US shipping"]}),(0,r.jsx)("p",{className:"cart-small",children:"Taxes and international shipping calculated at checkout."}),x&&(0,r.jsx)("p",{className:"cart-small",children:(null==W?void 0:W.applicableCodes.some(e=>e.toLowerCase()===x.toLowerCase()))?"Code ".concat(x," applied."):"Code ".concat(x," will be checked at checkout.")}),R&&(0,r.jsx)("p",{className:"cart-error",role:"alert",children:R}),!Y&&(0,r.jsxs)("p",{className:"cart-error",role:"status",children:["Current pricing couldnât load.",(0,r.jsx)("button",{className:"cart-retry",disabled:O,onClick:ee,children:O?"Loadingâ¦":"Retry"})]}),(0,r.jsxs)("button",{className:"cart-cta cart-checkout",disabled:F||Z||!Y||D,onClick:et,children:[F?"Opening checkoutâ¦":Z?"Remove sold-out items to continue":"Checkout",(0,r.jsx)("span",{"aria-hidden":"true",children:"â"})]}),1===V&&(0,r.jsxs)("button",{className:"cart-cta cart-additional-offer",onClick:()=>K(u),children:["Choose a second, 15% off",(0,r.jsx)("span",{"aria-hidden":"true",children:"â"})]})]})]})})}a(8993);var T=a(6278),R=a.n(T),A=a(6617);function _(e,t){let a=t.rotation%180!=0,n=a?e.height:e.width,r=a?e.width:e.height,i=("cover"===t.fit?Math.max:Math.min)(A.WJ/n,A.hU/r);return{width:n*i,height:r*i}}function U(e,t){let a=_(e,t),n=a.width*t.zoom,r=a.height*t.zoom;return{width:n,height:r,left:A.WJ/2+t.x*A.WJ-n/2,top:A.hU/2+t.y*A.hU-r/2}}let O=[{x:-5.42,y:3.64,inHx:-4.84,inHy:9.79,outHx:4.26,outHy:-8.61},{x:9.68,y:-6.84,inHx:-3.81,inHy:0,outHx:27.39,outHy:-1.88},{x:45.48,y:62.79,inHx:10.13,inHy:-14.48,outHx:-8.42,outHy:12.03},{x:9.68,y:68.86,inHx:11.26,inHy:4.39,outHx:-11.03,outHy:-4.3},{x:-9.29,y:41.49,inHx:1.65,inHy:11.26,outHx:-1.65,outHy:-11.26}],B=null,q=[{key:"nw",label:"top left"},{key:"ne",label:"top right"},{key:"sw",label:"bottom left"},{key:"se",label:"bottom right"}];function H(e){let{imageUrl:t,settings:a,onSettings:n,pixels:s,paint:l,onPaint:o,tool:c,brush:d}=e,u=null!=B?B:B=function(){let e=1/0,t=-1/0,a=1/0,n=-1/0;for(let r=0;r<O.length;r++){let i=O[r],s=O[(r+1)%O.length];for(let r=0;r<=64;r++){let l=r/64,o=1-l,c=o**3*i.x+3*o*o*l*(i.x+i.outHx)+3*o*l*l*(s.x+s.inHx)+l**3*s.x,d=o**3*i.y+3*o*o*l*(i.y+i.outHy)+3*o*l*l*(s.y+s.inHy)+l**3*s.y;c<e&&(e=c),c>t&&(t=c),d<a&&(a=d),d>n&&(n=d)}}let r=t-e,i=n-a,s=function(){let e=e=>Math.round(100*e)/100,t="M".concat(e(O[0].x)," ").concat(e(O[0].y));for(let a=0;a<O.length;a++){let n=O[a],r=O[(a+1)%O.length];t+="C".concat(e(n.x+n.outHx)," ").concat(e(n.y+n.outHy)," ").concat(e(r.x+r.inHx)," ").concat(e(r.y+r.inHy)," ").concat(e(r.x)," ").concat(e(r.y))}return t+"Z"}(),l="".concat(e," ").concat(a," ").concat(r," ").concat(i),o='<svg xmlns="http://www.w3.org/2000/svg" viewBox="'.concat(l,'" preserveAspectRatio="none"><path d="').concat(s,'" fill="#fff"/></svg>');return{d:s,view:{x:e,y:a,w:r,h:i},viewBox:l,panel:{left:-e/r*100,top:-a/i*100,w:A.WJ/r*100,h:A.hU/i*100},maskImage:'url("data:image/svg+xml,'.concat(encodeURIComponent(o),'")')}}(),h=(0,i.useId)(),p=(0,i.useRef)(null),m=(0,i.useRef)(null),[f,x]=(0,i.useState)({width:A.WJ,height:A.hU}),[v,g]=(0,i.useState)(""),[y,b]=(0,i.useState)({width:300,height:330}),w=(0,i.useRef)(null),j=(0,i.useRef)(null);(0,i.useEffect)(()=>{if(!t)return void x({width:A.WJ,height:A.hU});let e=!1,a=new window.Image;return a.onload=()=>{e||x({width:a.naturalWidth,height:a.naturalHeight})},a.src=t,()=>{e=!0}},[t]),(0,i.useEffect)(()=>{try{let e=document.createElement("canvas");(0,A.$X)(e,(0,A.eu)("flower",0)),g(e.toDataURL("image/png"))}catch(e){}},[]),(0,i.useEffect)(()=>{if(!m.current)return;let e=new ResizeObserver(e=>{let[t]=e,{width:a,height:n}=t.contentRect;a>20&&n>20&&b({width:a,height:n})});return e.observe(m.current),()=>e.disconnect()},[]),(0,i.useEffect)(()=>{p.current&&(0,A.$X)(p.current,s)},[s]);let k={x:u.panel.left/100*y.width,y:u.panel.top/100*y.height,w:u.panel.w/100*y.width},N=k.w/A.WJ,C=U(f,a),S=_(f,a),E=a.rotation%180!=0,M={left:k.x+C.left*N,top:k.y+C.top*N,width:C.width*N,height:C.height*N},P="move"===c,I=e=>{let t=j.current;if(!t)return;let{x:a,y:n}=(e=>{let t=m.current.getBoundingClientRect();return{x:(e.clientX-t.left-k.x)/N-.5,y:(e.clientY-t.top-k.y)/N-.5}})(e);t.paint=(0,A.Wp)(t.paint,a,n,d/2,"draw"===c?1:-1),o(t.paint)},L=e=>{var t,a;(null==(t=w.current)?void 0:t.pointerId)===e.pointerId&&(w.current=null),(null==(a=j.current)?void 0:a.pointerId)===e.pointerId&&(j.current=null)},F=(e,t)=>{var n;0===e.button&&!w.current&&P&&(e.preventDefault(),e.stopPropagation(),null==(n=m.current)||n.setPointerCapture(e.pointerId),w.current={pointerId:e.pointerId,x:e.clientX,y:e.clientY,settings:{...a},corner:t})},T={maskImage:u.maskImage,WebkitMaskImage:u.maskImage,maskSize:"100% 100%",WebkitMaskSize:"100% 100%",maskRepeat:"no-repeat",WebkitMaskRepeat:"no-repeat",clipPath:"url(#".concat(h,")")};return(0,r.jsx)("div",{className:"screen-canvas screen-canvas-".concat(c),children:(0,r.jsxs)("div",{ref:m,className:"screen-gem",style:{aspectRatio:"".concat(u.view.w," / ").concat(u.view.h),"--ar":u.view.w/u.view.h},onPointerDown:e=>{var t;P||0!==e.button||j.current||e.target.closest(".screen-gem-body")&&(e.preventDefault(),null==(t=m.current)||t.setPointerCapture(e.pointerId),j.current={pointerId:e.pointerId,paint:l},I(e))},onPointerMove:e=>{var t;if((null==(t=j.current)?void 0:t.pointerId)===e.pointerId)return void I(e);let a=w.current;if(!a||a.pointerId!==e.pointerId)return;let r=(e.clientX-a.x)/N,i=(e.clientY-a.y)/N;a.corner?n(function(e,t,a,n,r){let i=_(e,t),s=U(e,t),l=a.endsWith("w")?-1:1,o=a.startsWith("n")?-1:1,c=s.left+(l<0?s.width:0),d=s.top+(o<0?s.height:0),u=l*i.width,h=o*i.height,p=Math.max(.1,Math.min(5,t.zoom+(n*u+r*h)/(u*u+h*h))),m=c+l*i.width*p/2,f=d+o*i.height*p/2;return{...t,zoom:p,x:(m-A.WJ/2)/A.WJ,y:(f-A.hU/2)/A.hU}}(f,a.settings,a.corner,r,i)):n({...a.settings,x:a.settings.x+r/A.WJ,y:a.settings.y+i/A.hU})},onPointerUp:L,onPointerCancel:L,onLostPointerCapture:L,children:[(0,r.jsx)("svg",{width:"0",height:"0",style:{position:"absolute"},"aria-hidden":"true",children:(0,r.jsx)("defs",{children:(0,r.jsx)("clipPath",{id:h,clipPathUnits:"objectBoundingBox",children:(0,r.jsx)("path",{d:u.d,transform:"scale(".concat(1/u.view.w," ").concat(1/u.view.h,") translate(").concat(-u.view.x," ").concat(-u.view.y,")")})})})}),(0,r.jsxs)("div",{className:"screen-gem-body",style:T,children:[P&&(0,r.jsx)("div",{className:"screen-image-ghost","aria-hidden":"true",style:{left:M.left+M.width/2,top:M.top+M.height/2,width:(E?S.height:S.width)*a.zoom*N,height:(E?S.width:S.height)*a.zoom*N,backgroundImage:"url(".concat(JSON.stringify(t||v),")"),transform:"translate(-50%,-50%) rotate(".concat(a.rotation,"deg)")}}),(0,r.jsx)("canvas",{ref:p,className:"screen-image-artboard",width:A.WJ,height:A.hU,role:"img","aria-label":"What will show on the PUFF screen",style:{left:"".concat(u.panel.left,"%"),top:"".concat(u.panel.top,"%"),width:"".concat(u.panel.w,"%"),height:"".concat(u.panel.h,"%")}}),(0,r.jsx)("div",{className:"screen-gem-glass","aria-hidden":"true"})]}),(0,r.jsx)("svg",{className:"screen-gem-edge",viewBox:u.viewBox,preserveAspectRatio:"none","aria-hidden":"true",children:(0,r.jsx)("path",{d:u.d,fill:"none",stroke:"currentColor",strokeWidth:1,vectorEffect:"non-scaling-stroke"})}),(0,r.jsx)("div",{className:"screen-panel-outline","aria-hidden":"true",style:{left:"".concat(u.panel.left,"%"),top:"".concat(u.panel.top,"%"),width:"".concat(u.panel.w,"%"),height:"".concat(u.panel.h,"%")}}),P&&(0,r.jsx)("div",{className:"screen-image-selection",role:"group",tabIndex:0,"aria-label":"Move the image by dragging; drag a corner to resize",onPointerDown:e=>F(e),style:M,children:q.map(e=>{let{key:t,label:a}=e;return(0,r.jsx)("button",{className:"screen-image-handle screen-image-handle-".concat(t),"aria-label":"Resize from ".concat(a),onPointerDown:e=>F(e,t)},t)})})]})})}a(9504);let z={brightness:0,contrast:1,inverted:!1,dither:"atkinson",strength:1,rotation:0},W=[{key:"atkinson",label:"Atkinson"},{key:"diffusion",label:"Diffusion"},{key:"ordered",label:"Pattern"},{key:"none",label:"Threshold"}];function D(e){let{imageUrl:t,onCancel:a,onPlace:n}=e,s=(0,i.useRef)(null),l=(0,i.useRef)(null),o=(0,i.useRef)(null),[c,d]=(0,i.useState)(!1),[u,h]=(0,i.useState)(""),p=(0,i.useRef)(null),m=(0,i.useRef)(null),f=(0,i.useRef)(null),[x,v]=(0,i.useState)(!1),[g,y]=(0,i.useState)({...z});(0,i.useEffect)(()=>{var e;let a=s.current,n=document.activeElement;a&&!a.open&&a.showModal();let r=document.body.style.overflow;document.body.style.overflow="hidden",null==a||null==(e=a.querySelector("h3"))||e.focus();let i=new window.Image;return i.onload=()=>{m.current=i,v(!0)},i.src=t,()=>{i.onload=null,document.body.style.overflow=r,null==a||a.close(),null==n||n.focus({preventScroll:!0})}},[t]),(0,i.useEffect)(()=>{x&&p.current&&m.current&&(null!=f.current||(f.current=document.createElement("canvas")),(0,A.$X)(p.current,(0,A.s$)(f.current,m.current,{...A.sj,...g,fit:"cover"})))},[x,g]);let b=e=>{o.current||(o.current=e,d(!0))};(0,i.useEffect)(()=>
1{if(!c)return;let e=window.matchMedia("(prefers-reduced-motion: reduce)").matches,t=window.setTimeout(()=>{var e;return null==(e=o.current)?void 0:e.call(o)},190*!e);return()=>window.clearTimeout(t)},[c]),(0,i.useLayoutEffect)(()=>{let e=l.current;if(!e)return;let t=()=>{let t=e.querySelector(".screen-upload-heading"),a=e.querySelector(".screen-upload-actions"),n=e.offsetWidth-1,r=e.offsetHeight-1,i=t.offsetHeight,s=t.offsetWidth,l=a.offsetTop,o=a.offsetLeft,c=a.offsetHeight/2;h("M25 .5 H".concat(s-22," Q").concat(s," .5 ").concat(s," 22 V").concat(i-12," Q").concat(s," ").concat(i," ").concat(s+12," ").concat(i," H").concat(n-24," Q").concat(n," ").concat(i," ").concat(n," ").concat(i+24," V").concat(r-c," A").concat(c," ").concat(c," 0 0 1 ").concat(n-c," ").concat(r," H").concat(o+c," A").concat(c," ").concat(c," 0 0 1 ").concat(o," ").concat(r-c," Q").concat(o," ").concat(l+12," ").concat(o-12," ").concat(l+12," H25 Q.5 ").concat(l+12," .5 ").concat(l-12," V25 Q.5 .5 25 .5 Z"))},a=new ResizeObserver(t);return a.observe(e),t(),()=>a.disconnect()},[]);let w=e=>y({...g,...e}),j=(e,t,a,n,i)=>(0,r.jsxs)("label",{className:"screen-image-range",children:[(0,r.jsxs)("span",{children:[t,(0,r.jsx)("output",{children:i})]}),(0,r.jsx)("input",{type:"range",min:a,max:n,step:.01,value:g[e],style:{"--range-fill":"".concat((g[e]-a)/(n-a)*100,"%")},"aria-label":t,onChange:t=>w({[e]:Number(t.target.value)})})]});return(0,r.jsx)("dialog",{ref:s,className:"screen-upload-modal","data-closing":c,"aria-labelledby":"screen-upload-title","aria-describedby":"screen-upload-description",onCancel:e=>{e.preventDefault(),b(a)},children:(0,r.jsxs)("div",{ref:l,className:"screen-upload-shell",inert:c,children:[(0,r.jsx)("svg",{className:"screen-upload-outline","aria-hidden":"true",children:(0,r.jsx)("path",{d:u})}),(0,r.jsxs)("header",{className:"screen-upload-heading",children:[(0,r.jsx)("i",{"aria-hidden":"true"}),(0,r.jsx)("h3",{id:"screen-upload-title",tabIndex:-1,children:"Tune your image"}),(0,r.jsx)("i",{"aria-hidden":"true"})]}),(0,r.jsxs)("div",{className:"screen-upload-body",children:[(0,r.jsxs)("div",{className:"screen-upload-preview",children:[(0,r.jsx)("div",{className:"screen-upload-display",children:(0,r.jsx)("canvas",{ref:p,width:48,height:64,"aria-label":"Preview at screen resolution"})}),(0,r.jsx)("span",{className:"screen-upload-resolution",children:"48 \xd7 64 / Preview"}),(0,r.jsx)("button",{type:"button",onClick:()=>w({rotation:(g.rotation+90)%360}),children:"Rotate â»"})]}),(0,r.jsxs)("div",{className:"screen-upload-controls",children:[(0,r.jsx)("p",{id:"screen-upload-description",children:"One colour, 48 \xd7 64 pixels. Adjust until it reads well."}),j("brightness","Brightness",-.5,.5,"".concat(Math.round(100*g.brightness))),j("contrast","Contrast",.5,2.5,"".concat(Math.round(100*g.contrast),"%")),(0,r.jsxs)("div",{className:"screen-upload-dither-group",children:[(0,r.jsx)("span",{children:"Texture"}),(0,r.jsx)("div",{className:"screen-upload-dithers",role:"group","aria-label":"Dither",children:W.map(e=>{let{key:t,label:a}=e;return(0,r.jsx)("button",{type:"button","aria-pressed":g.dither===t,onClick:()=>w({dither:t}),children:a},t)})})]}),(0,r.jsx)("div",{className:"screen-upload-strength",inert:"none"===g.dither,"aria-hidden":"none"===g.dither,"data-disabled":"none"===g.dither,children:j("strength","Dither amount",0,1,"".concat(Math.round(100*g.strength),"%"))}),(0,r.jsxs)("label",{className:"screen-image-invert",children:[(0,r.jsx)("input",{type:"checkbox",checked:g.inverted,onChange:e=>w({inverted:e.target.checked})}),"Invert colours"]})]})]}),(0,r.jsxs)("div",{className:"screen-upload-actions",children:[(0,r.jsx)("button",{type:"button",onClick:()=>b(a),children:"Cancel"}),(0,r.jsx)("button",{type:"button",className:"screen-upload-place",disabled:!x,onClick:()=>b(()=>n(g)),children:"Use image â"})]})]})})}var V=a(8662),X=a(4741);let G=new WeakMap,Y=e=>"".concat(e.x.toFixed(3)," ").concat(e.y.toFixed(3));function Q(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:15,a=e.map((e,a)=>Array.isArray(t)?t[a]:t);return e.forEach((t,n)=>{let r=(n+1)%e.length,i=Math.hypot(e[r][0]-t[0],e[r][1]-t[1]),s=a[n]+a[r];if(s>i){let e=i/s;a[n]*=e,a[r]*=e}}),e.map((t,n)=>{let r=e[(n+e.length-1)%e.length],i=e[(n+1)%e.length],s=Math.hypot(r[0]-t[0],r[1]-t[1]),l=Math.hypot(i[0]-t[0],i[1]-t[1]),o=a[n],c=(e,a)=>[t[0]+(e[0]-t[0])*o/(a||1),t[1]+(e[1]-t[1])*o/(a||1)];return{r:o,sweep:+((t[0]-r[0])*(i[1]-t[1])-(t[1]-r[1])*(i[0]-t[0])>0),start:c(r,s),end:c(i,l)}}).map((e,t)=>{let{r:a,sweep:n,start:r,end:i}=e;return"".concat(t?"L":"M").concat(r.join(" ")," ").concat(a>.01?"A".concat(a," ").concat(a," 0 0 ").concat(n," ").concat(i.join(" ")):"")}).join(" ")+" Z"}function $(e){let{mode:t}=e,a=(0,i.useRef)(null),[n,s]=(0,i.useState)(null),l=function(){X.r.current||(0,V.U)();let[e]=(0,i.useState)(X.O.current);return e}();return(0,i.useLayoutEffect)(()=>{var e;let n=null==(e=a.current)?void 0:e.parentElement,r=null==n?void 0:n.querySelector(".screen-panel-head"),i=null==n?void 0:n.querySelector(".screen-panel-body"),l=null==n?void 0:n.querySelector('.screen-pane[data-active="true"]');if(!n||!r||!i||!l)return;let o=()=>{let e=n.offsetWidth-.5,a=n.offsetHeight-parseFloat(getComputedStyle(n).paddingBottom)-.5,o=n.getBoundingClientRect(),c=r.offsetWidth-.5,d=r.offsetHeight,u=parseFloat(getComputedStyle(i).paddingTop),h=u/2,p=Math.min(a,d+2*u+l.offsetHeight),m=a-p,f=m>64&&"image"!==t,x=f?Math.min(u,.28*m):0,v=e*("metaball"===t?.43:.64),g=u/3,y=f?[[.5,.5],[c,.5],[c,d],[e,d],[e,p],[v,p],[v,p+x],[.5,p+x]]:[[.5,.5],[c,.5],[c,d],[e,d],[e,p],[.5,p]],b=d/2,w=Q(y,f?[b,b,15,15,15,15,15,15]:[b,b,15,15,15,15]);if("image"===t){var j;let e=[...l.querySelectorAll("[data-panel-group]")].filter(e=>!e.hidden).map(e=>{var t;let a=e.getBoundingClientRect(),n=e.querySelector("button"),r=e.querySelector(".screen-tools"),i=e.classList.contains("screen-toolbar-actions")&&n?n.getBoundingClientRect().height/2:(null!=(t=null==r?void 0:r.getBoundingClientRect().height)?t:a.height)/2;return{left:a.left-o.left,right:a.right-o.left,top:a.top-o.top,bottom:a.bottom-o.top,radius:i}}),t=l.querySelector(".screen-gem-edge path");t&&(w=null!=(j=function(e,t,a,n){let r=arguments.length>4&&void 0!==arguments[4]?arguments[4]:10,i=function(e,t,a){var n;let r=null!=(n=e.getAttribute("d"))?n:"",i=G.get(e);if(!i||i.d!==r){let t=e.getTotalLength();i={d:r,points:Array.from({length:256},(a,n)=>{let r=e.getPointAtLength(t*n/256);return{x:r.x,y:r.y}})},G.set(e,i)}let s=e.getScreenCTM();if(!s)return[];let l=i.points.map(e=>({x:s.a*e.x+s.c*e.y+s.e-t.left,y:s.b*e.x+s.d*e.y+s.f-t.top}));return 0>l.reduce((e,t,a)=>{let n=l[(a+1)%l.length];return e+t.x*n.y-n.x*t.y},0)&&l.reverse(),l.map((e,t)=>{let n=l[(t+l.length-1)%l.length],r=l[(t+1)%l.length],i=r.x-n.x,s=r.y-n.y,o=Math.hypot(i,s)||1;return{x:e.x+a*s/o,y:e.y-a*i/o}})}(e,t,r);if(!i.length||!n.length)return null;let s=i.reduce((e,t,a)=>t.y>i[e].y?a:e,0),l=i.reduce((e,t,a)=>t.x<i[e].x?a:e,0),o=n.map(e=>({left:e.left-r,right:e.right+r,top:e.top-r,bottom:e.bottom+r,r:e.radiu
1s+r})),c=a.height/2,d=a.right,u=o[0],h="M".concat(c+.5," .5 L").concat(d-c," .5 A").concat(c," ").concat(c," 0 0 1 ").concat(d," ").concat(c+.5);d>u.right-u.r?h+=" C".concat(d," ").concat(u.top," ").concat(u.right," ").concat(u.top," ").concat(u.right," ").concat(u.top+u.r):(h+=" C".concat(d," ").concat(u.top," ").concat(u.right-u.r," ").concat(u.top," ").concat(u.right-u.r," ").concat(u.top),h+=" A".concat(u.r," ").concat(u.r," 0 0 1 ").concat(u.right," ").concat(u.top+u.r)),o.forEach((e,t)=>{h+=" L".concat(e.right," ").concat(e.bottom-e.r," A").concat(e.r," ").concat(e.r," 0 0 1 ").concat(e.right-e.r," ").concat(e.bottom);let a=o[t+1];if(a){let t=(a.top-e.bottom)/2,n=Math.min(e.left,a.left)+(Math.min(e.right,a.right)-Math.min(e.left,a.left))*.28;h+=" L".concat(n+t," ").concat(e.bottom," A").concat(t," ").concat(t," 0 0 0 ").concat(n+t," ").concat(a.top),h+=" L".concat(a.right-a.r," ").concat(a.top," A").concat(a.r," ").concat(a.r," 0 0 1 ").concat(a.right," ").concat(a.top+a.r)}});let p=o[o.length-1],m=i[s],f=Math.min(p.right-p.r,p.left+(m.y<p.bottom?p.r:Math.max(p.r,(p.right-p.left)*.36))),x=f-m.x,v=m.x+.4*x;h+=" L".concat(f," ").concat(p.bottom),h+=" C".concat(f-.45*x," ").concat(p.bottom," ").concat(v," ").concat(m.y," ").concat(Y(m));for(let e=s;e!==l;e=(e+1)%i.length){let t=i[(e+i.length-1)%i.length],a=i[e],n=i[(e+1)%i.length],r=i[(e+2)%i.length];h+=" C".concat(Y({x:a.x+(n.x-t.x)/6,y:a.y+(n.y-t.y)/6})," ").concat(Y({x:n.x-(r.x-a.x)/6,y:n.y-(r.y-a.y)/6})," ").concat(Y(n))}let g=i[l],y=Math.min(50,(g.y-c)/3);return(h+=" C".concat(g.x," ").concat(g.y-y," .5 ").concat(g.y-y," .5 ").concat(g.y-2*y))+" L.5 ".concat(c+.5," A").concat(c," ").concat(c," 0 0 1 ").concat(c+.5," .5 Z")}(t,o,{right:c,height:d},e))?j:w)}let k=[];if(f){let n=p+x+g,r=a-n;if("metaball"===t){k.push(Q([[.5,n],[.39*e,n],[.39*e,n+.25*r],[.27*e,n+.25*r],[.27*e,n+.6*r],[.08*e,n+.6*r],[.08*e,n+.4*r],[.5,n+.4*r]],10)),k.push(Q([[v+g,p+g],[.7*e,p+g],[.7*e,n+.38*r],[.63*e,n+.38*r],[.63*e,a],[.51*e,a],[.51*e,n+.18*r],[v+g,n+.18*r]],10));let t=p+g+.16*r;k.push(Q([[.79*e,t],[e,t],[e,n+.46*r],[.9*e,n+.46*r],[.9*e,n+.76*r],[.76*e,n+.76*r],[.76*e,n+.12*r],[.79*e,n+.12*r]],10))}else{let t=.35*e,i=.28*t,s=.68*t;k.push(Q([[.5,n],[t,n],[t,n+.48*r],[s,n+.48*r],[s,a],[i,a],[i,n+.76*r],[.5,n+.76*r]],10));let l=.45*e;k.push(Q([[l,n],[v+g,n],[v+g,p+g],[.96*e,p+g],[.96*e,n+.4*r],[.84*e,n+.4*r],[.84*e,n+.83*r],[l+.12*e,n+.83*r],[l+.12*e,n+.57*r],[l,n+.57*r]],10))}}let N=[[e-h,d+h],[e-h,p-h]];"image"===t?N.length=0:N.push([h,p+x-h]),s({mode:t,main:w,fillers:k,screws:N,width:e+1,height:n.offsetHeight,headerHeight:d})},c=new ResizeObserver(o);return[n,r,i,l,...l.querySelectorAll(".screen-toolbar, [data-panel-group]")].forEach(e=>c.observe(e)),o(),()=>c.disconnect()},[t]),(0,r.jsx)("svg",{ref:a,className:"screen-panel-edge","aria-hidden":"true",children:n&&(0,r.jsxs)(x.P.g,{initial:{opacity:+!!l,scale:l?1:.975},animate:{opacity:1,scale:1},style:{transformOrigin:"50% 20%"},transition:{duration:.22*!l,ease:[.16,1,.3,1]},children:[(0,r.jsx)("path",{className:"screen-panel-fill",d:n.main,style:{stroke:"none"}}),(0,r.jsx)("path",{className:"screen-panel-stroke",d:n.main,style:{fill:"none"}}),n.screws.map((e,t)=>{let[a,n]=e;return(0,r.jsx)("circle",{cx:a,cy:n,r:4.5},t)}),n.fillers.map((e,t)=>(0,r.jsx)("path",{className:"screen-panel-hollow",d:e},t))]},n.mode)})}function Z(){let e=(0,i.useRef)(null),[t,a]=(0,i.useState)({path:"",screws:[]});return(0,i.useEffect)(()=>{var t;let n=null==(t=e.current)?void 0:t.parentElement;if(!n)return;let r=()=>{let e=n.querySelector(".screen-tip-cta");e&&i.observe(e);let t=parseFloat(getComputedStyle(n).paddingLeft),r=n.offsetWidth-.5,s=n.offsetHeight-.5,l=t/2,o=e?Math.min(r-32,e.offsetLeft+e.offsetWidth+t):r-44,c=e?e.offsetTop-6:s-32,d=Math.min(r/2,o-30);a({path:"M".concat(12," .5 H").concat(r-12," Q").concat(r," .5 ").concat(r," ").concat(12," V").concat(c-12," Q").concat(r," ").concat(c," ").concat(r-12," ").concat(c," H").concat(o+12," Q").concat(o," ").concat(c," ").concat(o," ").concat(c+12," V").concat(s-12," Q").concat(o," ").concat(s," ").concat(o-12," ").concat(s," H").concat(d+9," L").concat(d+2," ").concat(s+7," Q").concat(d," ").concat(s+9," ").concat(d-2," ").concat(s+7," L").concat(d-9," ").concat(s," H").concat(12," Q.5 ").concat(s," .5 ").concat(s-12," V").concat(12," Q.5 .5 ").concat(12," .5 Z"),screws:[[l,l],[r-l,l],[r-l,c-l],[o-l,s-l],[l,s-l]]})},i=new ResizeObserver(r),s=new MutationObserver(r);return i.observe(n),s.observe(n,{childList:!0}),r(),()=>{i.disconnect(),s.disconnect()}},[]),(0,r.jsxs)("svg",{ref:e,className:"screen-tip-plate","aria-hidden":"true",children:[(0,r.jsx)("path",{d:t.path}),t.screws.map((e,t)=>{let[a,n]=e;return(0,r.jsx)("circle",{cx:a,cy:n,r:"3"},t)})]})}var J=a(5048);a(8644);let K=R()(()=>Promise.all([a.e(1831),a.e(9367),a.e(2145),a.e(1243)]).then(a.bind(a,1243)),{loadableGenerated:{webpack:()=>[1243]},ssr:!1}),ee=[{key:"metaball",label:"Customizable"},{key:"image",label:"Make your own"},{key:"orbit",label:"Standard"}],et=[{key:"count",label:"Blobs",min:2,max:6,step:1,format:e=>String(e)},{key:"speed",label:"Speed",min:.3,max:2,step:.05,format:e=>"".concat(Math.round(100*e),"%")},{key:"size",label:"Size",min:.6,max:1.6,step:.05,format:e=>"".concat(Math.round(100*e),"%")}],ea=[{key:"move",label:"Move"},{key:"draw",label:"Draw"},{key:"erase",label:"Erase"}],en={...A.sj,dither:"none"};function er(e){let{light:t=!1,gemColor:a="ruby",compact:n=!1,plainTitle:s=!1,purchaseControls:o,gemOptions:c,onGemColorChange:d}=e,u=s?"Puff":"PUFF",h={ruby:"Red",citrine:"Yellow",sapphire:"Blue",peridot:"Green"}[a],p=(0,i.useRef)(null),m=(0,i.useRef)(null),f=(0,i.useRef)(0),[x,v]=(0,i.useState)(!1),[g,y]=(0,i.useState)(!1),[b,w]=(0,i.useState)(!1),j=(0,i.useRef)(null);(0,i.useEffect)(()=>{let e=matchMedia("(max-width: 767px)"),t=()=>w(!1);e.addEventListener("change",t);let a=new IntersectionObserver(e=>{let[a]=e;a.isIntersecting||t()});return j.current&&a.observe(j.current),()=>{e.removeEventListener("change",t),a.disconnect()}},[]);let[k,N]=(0,i.useState)(!1),[C,S]=(0,i.useState)("image"),[E,M]=(0,i.useState)(!0),[P,I]=(0,i.useState)(!1),L=()=>M(!1),F=()=>{ev.current=!1,ex.current.forEach(clearTimeout),ex.current=[],em(!1),ec(e=>e%2?e+1:e+2)},[T,R]=(0,i.useState)({...A.eK}),[_,U]=(0,i.useState)(""),[O,B]=(0,i.useState)(en),[q,z]=(0,i.useState)(A.IE),[W,V]=(0,i.useState)("move"),[X,G]=(0,i.useState)(3),[Y,Q]=(0,i.useState)(""),[er,ei]=(0,i.useState)(""),[es,el]=(0,i.useState)(!1),[eo,ec]=(0,i.useState)(0),[ed,eu]=(0,i.useState)(!1),eh=(0,i.useRef)(!1),[ep,em]=(0,i.useState)(!1),ef=(0,i.useRef)(null),ex=(0,i.useRef)([]);(0,i.useEffect)(()=>()=>ex.current.forEach(clearTimeout),[]);let ev=(0,i.useRef)(!1),eg=function(e,t){let[a,n]=(0,i.useState)(()=>(0,A.eu)("flower",0)),r=(0,i.useRef)(null),s=(0,i.useRef)(null),l=(0,i.useRef)(null);return(0,i.useEffect)(()=>{var a;let i=!1,o=e=>{null!=l.current||(l.current=document.createElement("canvas")),n((0,A.s$)(l.current,e,t))};if(!e){s.current||(s.current=document.createElement("canvas"),(0,A.$X)(s.current,(0,A.eu)("flower",0))),o(s.current);return}if((null==(a=r.current)?void 0:a.url)===e)return void o(r.current.element);let c=new window.Image;return c.onload=()=>{i||(r.current={url:e,element:c},o(c))},c.src=e,()=>{i=!0}},[e,t]),a}(_,O),ey=(0,i.useMemo)(()=>(0,A.BR)(eg,q),[eg,q]);return(0,i.useEffect)(()=>{el(matchMedia("(prefers-reduced-motion: reduce)").matches);let e=new IntersectionObserver(t=>{let[a]=t;a.isIntersecting&&(v(!0),e.disconnect())},{rootMargin:"300px"});return p.current&&e.observe(p.current),()=>{e.disconnect(),f.current++}},[]),(0,i.useEffect)(()=>
1{if(!x||g||k)return;let e=setTimeout(()=>N(!0),3e4);return()=>clearTimeout(e)},[x,g,k]),(0,i.useEffect)(()=>{let e=p.current;if(!e)return;let t=0,a=()=>{var a;t=0;let n=(innerWidth<768&&null!=(a=e.querySelector(".screen-panel"))?a:e).getBoundingClientRect(),r=Math.max(1,innerHeight-80);I(Math.max(0,Math.min(n.bottom,innerHeight)-Math.max(n.top,80))>=Math.min(n.height,r)-1)},n=()=>{t||(t=requestAnimationFrame(a))},r=new ResizeObserver(n);r.observe(e);let i=e.querySelector(".screen-panel");return i&&r.observe(i),window.addEventListener("scroll",n,{passive:!0}),window.addEventListener("resize",n),a(),()=>{r.disconnect(),cancelAnimationFrame(t),window.removeEventListener("scroll",n),window.removeEventListener("resize",n)}},[]),(0,i.useEffect)(()=>{if(!E||!P||!g||k)return;let e=setTimeout(()=>S(e=>ee[(ee.findIndex(t=>t.key===e)+1)%ee.length].key),7e3);return()=>clearTimeout(e)},[E,P,g,k,C]),(0,r.jsxs)("section",{id:"make-puff-yours",ref:p,className:"screen-playground".concat(n?" screen-playground-compact":""),"aria-labelledby":"screen-title",children:[(0,r.jsxs)("div",{className:"screen-visual",children:[(0,r.jsxs)("div",{ref:j,className:"screen-stage","data-rotation-unlocked":b,"aria-label":"Interactive ".concat(u," screen preview"),onPointerDownCapture:e=>{("touch"!==e.pointerType||b)&&L()},children:[(!g||k)&&(0,r.jsx)(l.default,{className:"screen-fallback",src:"/assets/puff/cutout/".concat(h," - Front.png"),width:800,height:800,alt:"".concat(a," ").concat(u)}),x&&!k&&(0,r.jsx)(J.A,{onError:()=>N(!0),fallback:null,children:(0,r.jsx)(K,{gemColor:a,light:t,animation:C,connected:!0,paused:es,metaballs:T,pixels:"image"===C?ey:null,turn:eo,onReady:()=>y(!0),onError:()=>N(!0),onButtonPoint:(e,t,a)=>{let n=ef.current;n&&(n.style.transform="translate(".concat(e,"px, ").concat(t,"px) translate(-65%, -50%)"),n.style.visibility=a?"visible":"hidden",a!==eh.current)&&(eh.current=a,eu(a),a&&ev.current)&&(ev.current=!1,em(!0),ex.current.push(setTimeout(()=>em(!1),3400)))}})}),k&&(0,r.jsx)("p",{className:"screen-stage-caption",role:"status",children:"The interactive preview couldnât load."}),(0,r.jsx)("div",{ref:ef,className:"screen-ring".concat(ep?" screen-ring-on":""),"aria-hidden":"true",children:(0,r.jsx)("svg",{viewBox:"0 0 100 100",children:(0,r.jsx)("path",{d:"M50 8 C 74 8, 92 26, 92 50 S 74 92, 50 92 S 8 74, 8 50 S 26 8, 50 8"})})}),(0,r.jsxs)("div",{className:"screen-stage-controls",children:[c&&d&&(0,r.jsx)("div",{className:"screen-picker",role:"group","aria-label":"Gem color",children:c.map(e=>(0,r.jsx)("button",{"aria-label":e.label,"aria-pressed":a===e.key,onClick:()=>
1d(e.key),style:{backgroundColor:e.swatch},children:a===e.key&&(0,r.jsx)("span",{"aria-hidden":"true"})},e.key))}),g&&!k&&(0,r.jsx)("button",{type:"button",className:"screen-rotation-toggle","aria-pressed":b,"aria-label":b?"Lock rotation":"Unlock rotation",title:b?"Lock rotation":"Rotate model",onClick:()=>{L(),w(e=>!e)},children:(0,r.jsxs)("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:[(0,r.jsx)("path",{d:"M20.5 12a8.5 8.5 0 1 1-2.5-6M21 3v4.5h-4.5"}),(0,r.jsx)("rect",{x:"9",y:"11.5",width:"6",height:"5",rx:"1"}),(0,r.jsx)("path",{d:b?"M10.5 11.5V10a1.5 1.5 0 0 1 3-.4":"M10.5 11.5V10a1.5 1.5 0 0 1 3 0v1.5"})]})})]})]}),(0,r.jsxs)("div",{className:"screen-tip",role:"note",children:[(0,r.jsx)(Z,{}),(0,r.jsx)("p",{children:"Change your animation anytime with the button on the back."}),g&&!k&&(0,r.jsxs)("button",{type:"button",className:"screen-tip-cta".concat(ed?" screen-tip-cta-secondary":""),onClick:()=>{L(),ex.current.forEach(clearTimeout),ex.current=[],eh.current?(em(!1),ev.current=!1,ec(e=>e%2?e+1:e+2)):(ev.current=!0,ec(e=>e%2?e+2:e+1))},"aria-label":ed?"Spin the device back round to the gem":"Spin the device round to see the button on the back",children:[ed?"See the gem":"See the button",(0,r.jsx)("svg",{viewBox:"0 0 16 16","aria-hidden":"true",children:(0,r.jsx)("path",{d:"M3 8h9m0 0L8.5 4.5M12 8l-3.5 3.5"})})]})]})]}),(0,r.jsxs)("div",{className:"screen-controls",children:[(0,r.jsxs)("h2",{id:"screen-title",className:"screen-heading",children:["Make ",s?"Puff":(0,r.jsx)(l.default,{className:"screen-heading-logo",src:"/assets/puff/puff-logo.svg",width:749,height:277,alt:"PUFF"})," yours"]}),(0,r.jsxs)("p",{className:"screen-description",children:["Store a few animations on your ",u," and make the screen feel like you."]}),o&&(0,r.jsx)("div",{className:"screen-purchase",children:o}),(0,r.jsxs)("div",{className:"screen-customizer screen-panel",children:[(0,r.jsx)($,{mode:C}),(0,r.jsx)("div",{className:"screen-panel-head",children:(0,r.jsx)("div",{className:"screen-designs",role:"group","aria-label":"Choose a screen design",children:ee.map(e=>{let{key:t,label:a}=e;return(0,r.jsxs)("button",{"aria-pressed":C===t,onClick:()=>{S(t),L(),F()},children:[E&&P&&g&&!k&&C===t&&(0,r.jsx)("span",{className:"screen-tab-count","aria-hidden":"true",style:{"--cycle":"".concat(7e3,"ms")}},C),(0,r.jsx)("span",{className:"screen-tab-label",children:a})]},t)})})}),(0,r.jsx)("div",{className:"screen-panel-body",children:(0,r.jsx)("div",{className:"screen-options screen-options-stable","data-mode":C,onPointerDownCapture:()=>{L(),F()},onKeyDownCapture:L,children:(0,r.jsxs)("div",{className:"screen-options-box",children:[(0,r.jsxs)("div",{className:"screen-pane screen-pane-note","data-active":"orbit"===C,"aria-hidden":"orbit"!==C,inert:"orbit"!==C,children:[(0,r.jsxs)("p",{className:"screen-description screen-option-note",children:["Your ",u," comes with built-in animations that react to your files, your music and the way you move."]}),(0,r.jsx)("p",{className:"screen-description screen-option-note",children:"Explore community designs or bring your own photos, videos, generative designs, and games with Puff Studio, our web app."})]}),(0,r.jsx)("div",{className:"screen-pane screen-console","data-active":"metaball"===C,"aria-hidden":"metaball"!==C,inert:"metaball"!==C,role:"group","aria-label":"Customize the blobs",children:et.map(e=>{let{key:t,label:a,min:n,max:i,step:s,format:l}=e;return(0,r.jsxs)("label",{className:"screen-knob",style:{"--pos":"".concat((T[t]-n)/(i-n)*100,"%")},children:[(0,r.jsxs)("span",{className:"screen-knob-head",children:[(0,r.jsx)("b",{children:a}),(0,r.jsx)("output",{children:l(T[t])})]}),(0,r.jsx)("input",{type:"range",min:n,max:i,step:s,value:T[t],"aria-label":a,onChange:e=>R({...T,[t]:Number(e.target.value)})})]},t)})}),(0,r.jsxs)("div",{className:"screen-pane screen-maker","data-active":"image"===C,"aria-hidden":"image"!==C,inert:"image"!==C,children:[(0,r.jsx)(H,{imageUrl:_,settings:O,onSettings:B,pixels:ey,paint:q,onPaint:z,tool:W,brush:X}),(0,r.jsxs)("div",{className:"screen-toolbar",children:[(0,r.jsxs)("div",{className:"screen-tool-cluster","data-panel-group":!0,children:[(0,r.jsx)("div",{className:"screen-tools",role:"group","aria-label":"Tool",children:ea.map(e=>{let{key:t,label:a}=e;return(0,r.jsxs)("button",{"aria-pressed":W===t,onClick:()=>V(t),children:["move"===t&&(0,r.jsx)("svg",{viewBox:"0 0 16 16","aria-hidden":"true",children:(0,r.jsx)("path",{d:"M8 2v12M2 8h12M8 2 6 4m2-2 2 2M8 14l-2-2m2 2 2-2M2 8l2-2m-2 2 2 2m10-2-2-2m2 2-2 2"})}),"draw"===t&&(0,r.jsx)("svg",{viewBox:"0 0 16 16","aria-hidden":"true",children:(0,r.jsx)("path",{d:"m3 13 1-4 7-7 3 3-7 7-4 1Zm7-10 3 3"})}),"erase"===t&&(0,r.jsx)("svg",{viewBox:"0 0 16 16","aria-hidden":"true",children:(0,r.jsx)("path",{d:"m9 3 4 4-6 6H4l-2-2 7-8Zm-4 4 4 4M3 13h10"})}),(0,r.jsx)("span",{children:a})]},t)})}),(0,r.jsx)("div",{className:"screen-toolbar-brush",hidden:"move"===W,"aria-hidden":"move"===W,children:(0,r.jsxs)("label",{className:"screen-knob screen-knob-brush",style:{"--pos":"".concat((X-1)/7*100,"%"),"--brush":X},children:[(0,r.jsxs)("span",{className:"screen-knob-head",children:[(0,r.jsx)("b",{children:"erase"===W?"Eraser":"Brush"}),(0,r.jsx)("output",{children:X})]}),(0,r.jsx)("input",{type:"range",min:1,max:8,step:1,value:X,disabled:"move"===W,"aria-label":"erase"===W?"Eraser size":"Brush size",onCh
1ange:e=>G(Number(e.target.value))})]})})]}),(0,r.jsxs)("div",{className:"screen-toolbar-actions","data-panel-group":!0,children:[(0,r.jsxs)("button",{className:"screen-upload-btn",onClick:()=>{var e;return null==(e=m.current)?void 0:e.click()},children:[(0,r.jsx)("svg",{viewBox:"0 0 16 16","aria-hidden":"true",children:(0,r.jsx)("path",{d:"M8 11V3m0 0L4.5 6.5M8 3l3.5 3.5M3 13h10"})}),"Upload"]}),(0,r.jsxs)("button",{className:"screen-reset-btn",onClick:()=>{U(""),B(en),z((0,A.IE)()),V("move"),ei("")},children:[(0,r.jsx)("svg",{viewBox:"0 0 16 16","aria-hidden":"true",children:(0,r.jsx)("path",{d:"M3 8a5 5 0 1 0 1.5-3.6M3 3v3h3"})}),"Reset"]})]})]}),(0,r.jsx)("input",{ref:m,type:"file",hidden:!0,accept:"image/jpeg,image/png,image/webp","aria-label":"Image to put on the ".concat(u," screen"),onChange:e=>{var t;let a=null==(t=e.target.files)?void 0:t[0];if(e.target.value="",!a)return;let n=++f.current;if(a.size>0xc00000)return void ei("Choose an image under 12 MB.");let r=new FileReader;r.onerror=()=>{n===f.current&&ei("That file couldnât be read. Try another image.")},r.onload=()=>{let e=String(r.result),t=new window.Image;t.onerror=()=>{n===f.current&&ei("Try a JPG, PNG or WebP image.")},t.onload=()=>{n===f.current&&(ei(""),Q(e))},t.src=e}
1,r.readAsDataURL(a)}}),er&&(0,r.jsx)("p",{className:"home-note",role:"status",children:er})]})]})})})]})]}),Y&&(0,r.jsx)(D,{imageUrl:Y,onCancel:()=>Q(""),onPlace:e=>{U(Y),B({...A.sj,...e,fit:"contain"}),z((0,A.IE)()),V("move"),Q("")}})]})}let ei={src:"/assets/puff/puff-website-square-v02.mp4",poster:"/media-kit/photos/PUFF_LEAH-GREEN-3.jpg"};function es(e){let{priority:t=!1,bleed:a=!1,optimizedPoster:n=!1,autoPlayOnScroll:s=!1}=e,o=(0,i.useRef)(null),[c,d]=(0,i.useState)(!1),[h,p]=(0,i.useState)(!1),[m,f]=(0,i.useState)(!1),[x,v]=(0,i.useState)(!1),[g,y]=(0,i.useState)(s),[b,w]=(0,i.useState)(!1),j=(0,i.useRef)(!1),k=(0,i.useRef)(0),N=(0,i.useRef)(!1),C=(0,i.useRef)(!1),S=(0,i.useRef)(!1),E={video_id:"puff_launch",placement:t?"hero":"introduction"};(0,i.useEffect)(()=>{let e=o.current;if(!e)return;let t=window.matchMedia("(prefers-reduced-motion: reduce)"),a=.7*!!s,n=!1,r=()=>{if(!s||j.current||!n||document.hidden||t.matches||N.current||!e.paused||e.ended)return;let a=++k.current;C.current=!0,e.muted=!0,y(!0),v(!1),f(!0),e.play().catch(()=>{a===k.current&&f(!1)})},i=new IntersectionObserver(t=>{let[i]=t;(n=i.isIntersecting&&i.intersectionRatio>=a)?r():e.pause()},{threshold:[0,a]});i.observe(e);let l=()=>{document.hidden?e.pause():r()};return document.addEventListener("visibilitychange",l),()=>{i.disconnect(),document.removeEventListener("visibilitychange",l)}},[s]);let M=s&&c&&g&&C.current;return(0,r.jsxs)("section",{className:"home-film".concat(a?" home-film-bleed":"").concat(s?" home-film-scroll":""),"aria-label":"PUFF film",children:[(0,r.jsxs)("div",{className:"home-film-frame",style:{aspectRatio:"1 / 1",height:"auto",minHeight:0},children:[(0,r.jsx)("video",{ref:o,src:ei.src,"aria-label":"PUFF â the film",playsInline:!0,preload:"none",controls:!1,muted:g,loop:s&&!b,onVolumeChange:()=>{var e,t;let a=null!=(t=null==(e=o.current)?void 0:e.muted)&&t;y(a),a||(j.current=!0,w(!0))},onPlaying:()=>{if(p(!0),d(!0),f(!1),!S.current){let e={...E,autoplay:C.current};S.current=!!(0,P.F)("video_play",e),(0,u.u4)("puff_film_play",e)}},onPause:()=>{k.current++,d(!1),f(!1)},onEnded:()=>{d(!1),p(!1)},onError:()=>{v(!0),d(!1),f(!1)}}),!h&&(n?(0,r.jsxs)("picture",{children:[(0,r.jsx)("source",{media:"(max-width: 767px)",srcSet:"/assets/puff/lightbox/film-poster-640.webp"}),(0,r.jsx)(l.default,{src:"/assets/puff/lightbox/film-poster-1280.webp",alt:"PUFF editorial with Leah in green",fill:!0,unoptimized:!0,className:"home-film-poster",loading:t?"eager":"lazy",fetchPriority:t?"high":"low"})]}):(0,r.jsx)(l.default,{src:ei.poster,alt:"PUFF editorial with Leah in green",fill:!0,sizes:"(min-width: 860px) 760px, (min-width: 768px) calc(100vw - 100px), 100vw",className:"home-film-poster",priority:t})),(0,r.jsx)("button",{className:"home-film-toggle","aria-label":c?"Pause video":m?"Cancel video playback":x?"Retry video":"Play video","aria-busy":m,onClick:()=>{let e=o.current;if(!e)return;let t=++k.current;if(!e.paused||m){N.current=!0,e.pause(),d(!1),f(!1);return}N.current=!1,C.current=!1,x&&e.load();let a=e.muted;a&&(e.currentTime=0),e.muted=!1,e.loop=!1,y(!1),j.current=!0,w(!0),a&&((0,P.F)("video_unmute",E),(0,u.u4)("puff_film_unmute",E)),v(!1),f(!0),e.play().catch(e=>{t===k.current&&(f(!1),"AbortError"!==e.name&&v(!0))})},children:(0,r.jsxs)("span",{className:c?"home-film-pause":"home-film-play","aria-hidden":"true",children:[!c&&(0,r.jsx)("svg",{width:"12",height:"14",viewBox:"0 0 12 14",children:(0,r.jsx)("path",{d:"M1 1L11 7L1 13V1Z",fill:"currentColor"})}),c?"Pause":m?"Loadingâ¦":x?"Try again":"Watch the video"]})}),(h||s)&&(0,r.jsx)("button",{className:"home-film-mute".concat(M?" home-film-mute-pulse":""),"aria-label":g?"Unmute video":"Mute video",onClick:()=>{let e=o.current;if(e&&(e.muted=!e.muted,y(e.muted),!e.muted)){j.current=!0,w(!0),e.loop=!1,e.currentTime=0,N.current=!1,C.current=!1;let t=++k.current;v(!1),f(!0),e.play().catch(e=>{t===k.current&&(f(!1),"AbortError"!==e.name&&v(!0))}),(0,P.F)("video_unmute",E),(0,u.u4)("puff_film_unmute",E)}},children:(0,r.jsxs)("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:[(0,r.jsx)("path",{d:"M11 5 6 9H3v6h3l5 4V5Z"}),g?(0,r.jsx)("path",{d:"m16 9 6 6m0-6-6 6"}):(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("path",{d:"M15 8a6 6 0 0 1 0 8"}),(0,r.jsx)("path",{d:"M18 5a10 10 0 0 1 0 14"})]})]})}),x&&(0,r.jsx)("p",{className:"home-film-error",role:"status",children:"The video couldnât load. Please try again."})]}),M&&(0,r.jsxs)("span",{className:"home-film-sound-hint","aria-hidden":"true",children:[(0,r.jsx)("span",{children:"Sound on"}),(0,r.jsx)("svg",{width:"70",height:"76",viewBox:"0 0 70 76",fill:"none",children:(0,r.jsx)("path",{d:"M7 66C57 72 52 37 48 3M38 15Q44 8 48 3Q52 10 58 15",stroke:"currentColor",strokeWidth:"1.6",strokeLinecap:"round",strokeLinejoin:"round"})})]})]})}function el(){return(0,r.jsx)("header",{className:"exploration-header",children:(0,r.jsx)(c(),{href:"/explore","aria-label":"Noware â compare layouts",children:(0,r.jsx)(l.default,{src:"/svgs
1/wordmark.svg",alt:"noware",width:200,height:30,priority:!0})})})}function eo(e){let{price:t}=e;return(0,r.jsxs)("section",{className:"exploration-film-hero",children:[(0,r.jsxs)("div",{className:"exploration-film-copy",children:[(0,r.jsx)(l.default,{className:"exploration-puff-logo",src:"/assets/puff/puff-logo-black.svg",alt:"PUFF",width:749,height:277,priority:!0}),(0,r.jsxs)("h2",{children:["A new kind of",(0,r.jsx)("br",{}),"flash drive."]}),(0,r.jsx)("p",{children:"128GB of storage. A screen you can make your own. A little object with a lot of personality."}),(0,r.jsxs)("a",{className:"exploration-shop-link",href:"#choose-puff",children:["Choose your PUFF ",(0,r.jsxs)("span",{children:[t," â"]})]}),(0,r.jsx)("span",{className:"exploration-small",children:"Ships in October \xb7 14-day returns"})]}),(0,r.jsx)(es,{priority:!0})]})}function ec(e){let{photo:t,color:a,controls:n,first:i}=e;return(0,r.jsxs)("section",{id:"choose-puff",className:"exploration-product ".concat(i?"exploration-product-first":""),children:[(0,r.jsxs)("div",{className:"exploration-product-heading",children:[(0,r.jsx)("p",{className:"home-eyebrow",children:"INTRODUCING"}),(0,r.jsx)(l.default,{className:"exploration-puff-logo",src:"/assets/puff/puff-logo-black.svg",alt:"PUFF",width:749,height:277,priority:i})]}),(0,r.jsxs)("div",{className:"exploration-product-media",children:[(0,r.jsx)("div",{className:"exploration-product-photo",children:(0,r.jsx)(l.default,{src:t,alt:"".concat(a," PUFF â original product photograph"),fill:!0,sizes:"(min-width: 900px) 55vw, 100vw",priority:i})}),(0,r.jsxs)("div",{className:"exploration-product-caption",children:[(0,r.jsx)("span",{children:a}),(0,r.jsx)("span",{children:"128GB / Four gem colors"})]})]}),(0,r.jsxs)("div",{className:"exploration-product-description",children:[(0,r.jsx)("h2",{children:"A new kind of flash drive."}),(0,r.jsx)("p",{children:"Puff is a designer flash drive that reacts as you add files, play music, and move around."}),(0,r.jsx)("p",{className:"exploration-muted",children:"Style it how you like, personalize the animations, and discover a few surprises waiting inside."})]}),(0,r.jsx)("div",{className:"exploration-product-buy",children:n})]})}function ed(){return(0,r.jsxs)("section",{className:"exploration-film-story",id:"puff-film",children:[(0,r.jsx)(es,{}),(0,r.jsxs)("div",{children:[(0,r.jsx)("p",{className:"home-eyebrow",children:"MEET PUFF"}),(0,r.jsxs)("h2",{children:["A little object.",(0,r.jsx)("br",{}),"A lot going on."]}),(0,r.jsx)("p",{children:"Files, music, movement. See how PUFF reacts, and how it fits into your day."}),(0,r.jsxs)("a",{href:"#make-puff-yours",children:["Make it yours ",(0,r.jsx)("span",{children:"â"})]})]})]})}function eu(e){let{enabled:t,showFloatingLink:a=!0,children:n}=e,s=(0,i.useRef)(null),[l,o]=(0,i.useState)(!1);return(0,i.useEffect)(()=>{if(!t||!a||!s.current)return;let e=new IntersectionObserver(e=>{let[t]=e;o(t.boundingClientRect.bottom<=80)},{rootMargin:"-80px 0px 0px",threshold:0});return e.observe(s.current),()=>e.disconnect()},[t,a]),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("div",{ref:s,id:t?"buy-puff":void 0,className:t?"home-purchase-anchor":"contents",children:(0,r.jsx)("div",{className:t?"home-purchase-panel":"contents",children:n})}),t&&a&&l&&(0,r.jsxs)("a",{className:"home-buy-link",href:"#buy-puff",onClick:e=>{var t,a,n;e.preventDefault(),null==(t=s.current)||t.scrollIntoView({block:"center",behavior:matchMedia("(prefers-reduced-motion: reduce)").matches?"instant":"smooth"}),null==(n=s.current)||null==(a=n.querySelector("button:not(:disabled)"))||a.focus({preventScroll:!0})},children:["Buy now ",(0,r.jsx)("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none","aria-hidden":"true",children:(0,r.jsx)("path",{d:"M4 14 14 4M4 4h10v10",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})]})]})}a(1588);var eh=a(4374);function ep(){let e=(0,i.useRef)(null);return(0,i.useEffect)(()=>{var t;let a=null==(t=e.current)?void 0:t.closest("main");if(!a)return;let n=matchMedia("(prefers-reduced-motion: reduce)"),r=Array.from(a.querySelectorAll(".pv-hero, .pv-film-heading, .pv-film-description, .pv-film-story > .home-film, .screen-stage, .screen-tip, .screen-controls > .screen-heading, .screen-controls > .screen-description, .screen-panel, .home-editorial, .home-details-colors, .pv-loop-press-mobile, .home-footer")).map(e=>({anchor:e,parts:[e],kind:e.matches(".home-editorial,.home-film")?"grow":e.matches(".pv-hero")?"fade":"lift"}));
1a.querySelectorAll(".home-board .board").forEach(e=>{e.querySelectorAll(".board-title[data-reveal-part]").forEach(t=>{r.push({anchor:t,parts:Array.from(e.querySelectorAll('[data-reveal-part="'.concat(t.dataset.revealPart,'"]'))),kind:"lift"})}),e.querySelectorAll(".bp-gray").forEach(e=>r.push({anchor:e,parts:[e],kind:"fade"}))});let i=new Map(r.map(e=>[e.anchor,e])),s=new Set,l=e=>{let{parts:t,kind:a}=e,r=t.some(e=>e.classList.contains("pv-module-pending"));if(t.forEach(e=>e.classList.remove("pv-module-pending")),r&&!n.matches)for(let e of t){let t=e instanceof SVGGraphicsElement?e.getScreenCTM():null,n=t?12/Math.max(.01,Math.hypot(t.c,t.d)):12,r="fade"===a?[{opacity:0},{opacity:1}]:[{opacity:0,translate:"0 ".concat(n,"px"),scale:"grow"===a?".985":"1"},{opacity:1,translate:"0 0",scale:"1"}],i=e.animate(r,{duration:"grow"===a?340:300,easing:"cubic-bezier(.22,.68,.25,1)"});s.add(i),i.onfinish=()=>s.delete(i)}},o=new IntersectionObserver(e=>{for(let t of e)if(t.isIntersecting){let e=i.get(t.target);e&&l(e),o.unobserve(t.target)}},{threshold:0,rootMargin:"0px 0px -36px 0px"});if(!n.matches)for(let e of r)e.parts.forEach(e=>e.classList.add("pv-module-pending")),o.observe(e.anchor);let c=()=>{n.matches&&(o.disconnect(),r.forEach(e=>e.parts.forEach(e=>e.classList.remove("pv-module-pending"))),s.forEach(e=>e.cancel()),s.clear())},d=e=>{let t=e.target;for(let e of r)e.parts.some(e=>e.contains(t))&&(l(e),o.unobserve(e.anchor))};return n.addEventListener("change",c),a.addEventListener("focusin",d),()=>{o.disconnect(),n.removeEventListener("change",c),a.removeEventListener("focusin",d),r.forEach(e=>e.parts.forEach(e=>e.classList.remove("pv-module-pending"))),s.forEach(e=>e.cancel())}},[]),(0,r.jsx)("span",{ref:e,hidden:!0})}let em={ruby:14,citrine:46,sapphire:237,peridot:148},ef={ruby:"#651800",citrine:"#a88100",sapphire:"#151968",peridot:"#00652f"},ex=new Map;function ev(e){let t=ex.get(e);if(t)return t;null!=n||(n=new Promise((e,t)=>{let a=new Image;a.onload=()=>e(a),a.onerror=t,a.src="/assets/puff/hero-loop/keyboard-extension.webp"}));let a=n.then(t=>{let a=document.createElement("canvas");a.width=760,a.height=Math.round(t.height*a.width/t.width);let n=a.getContext("2d");n.drawImage(t,0,0,a.width,a.height);let r=em[e],i=n.getImageData(0,0,a.width,a.height),s=i.data,l=e=>Math.max(0,Math.min(1,e));for(let t=0;t<s.length;t+=4){let a=s[t]/255,n=s[t+1]/255,i=s[t+2]/255,o=Math.max(a,n,i),c=Math.min(a,n,i),d=o-c;if(!d||o!==a)continue;let u=(n-i)/d*60,h=d/o,p=l((36-Math.abs(u))/12)*l((h-.16)/.22)*("citrine"===e?l((o-.08)/.17):1);if(!p)continue;let m=(r+.2*u+360)%360/60,f=d*(1-Math.abs(m%2-1)),x=m<1?[d,f,0]:m<2?[f,d,0]:m<3?[0,d,f]:m<4?[0,f,d]:m<5?[f,0,d]:[d,0,f],v="citrine"===e?Math.pow(o,.45)/o:1;for(let a=0;a<3;a++){let n="sapphire"===e?(o-(o-(x[a]+c))*.8)*Math.min(1,1.03*o)/o:(x[a]+c)*v;s[t+a]=Math.round(s[t+a]*(1-p)+255*n*p)}}return n.putImageData(i,0,0),a});return ex.set(e,a),a}let eg=(e,t,a)=>{let n=Math.max(0,Math.min(1,(a-e)/(t-e)));return n*n*n*(n*(6*n-15)+10)},ey=[{codec:"hevc",type:'video/mp4; codecs="hvc1.1.6.L120.90"'},{codec:"av1",type:'video/mp4; codecs="av01.0.08M.08"'},{codec:"h264",type:'video/mp4; codecs="avc1.4D4028"'}],eb="stream-3",ew=e=>e?"mobile":"desktop",ej=function(e,t){let a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"h264";return"/assets/puff/hero-loop/stream/".concat(e,"-").concat(ew(t)).concat("h264"===a?"":".".concat(a),".mp4?v=").concat("h264"===a?"stream-1":eb)},ek=(e,t)=>"/assets/puff/hero-loop/stream/".concat(e,"-").concat(ew(t),"-poster.webp?v=").concat(eb),eN="(max-width:767px)",eC="(min-width:768px)",eS="(prefers-reduced-motion:no-preference)";function eE(e){let{color:t,onPlayPrompt:a}=e,[n,s]=(0,i.useState)(t),[l,o]=(0,i.useState)(!1),[c,d]=(0,i.useState)(null),[u,h]=(0,i.useState)({}),[p,m]=(0,i.useState)("h264"),[f]=(0,i.useState)(t),[x,v]=(0,i.useState)(!1);(0,i.useEffect)(()=>{n!==f&&v(!0)},[n,f]);let g=!!(u[n]||c&&u[c]),y=function(e,t,a){let n=(0,i.useRef)(new Map),r=(0,i.useRef)(t);return(0,i.useEffect)(()=>{var t;let i;if(!e||matchMedia("(prefers-reduced-motion: reduce)").matches)return;let s=navigator.connection;if((null==s?void 0:s.saveData)||/(^|-)[23]g$/.test(null!=(t=null==s?void 0:s.effectiveType)?t:""))return;let l=new AbortController,o=n.current,c=()=>{i=setTimeout(async()=>{let e=[...["ruby","citrine","sapphire","peridot"].filter(e=>e!==r.current),r.current],t=matchMedia("(max-width:767px)").matches;for(let n of e){if(l.signal.aborted)return;if(!o.has(n))try{let e=await fetch(ej(n,t,a),{signal:l.signal,cache:"force-cache",priority:"low"});if(!e.ok)continue;let r=await e.blob();if(l.signal.aborted)return;o.set(n,URL.createObjectURL(r))}catch(e){if(l.signal.aborted)return}}},1500)};return"complete"===document.readyState?c():window.addEventListener("load",c,{once:!0}),()=>{clearTimeout(i),window.removeEventListener("load",c),l.abort()}},[e,a]),(0,i.useEffect)(()=>{let e=n.current;return()=>
1{e.forEach(e=>URL.revokeObjectURL(e)),e.clear()}},[]),n}(g&&t===n&&!c,t,p);(0,i.useEffect)(()=>{if(o(!1),g||matchMedia("(prefers-reduced-motion: reduce)").matches)return;let e=setTimeout(()=>o(!0),8e3);return()=>clearTimeout(e)},[g,t]);let b=l&&!g;(0,i.useEffect)(()=>{null==a||a(b)},[b,a]);let w=(0,i.useRef)(null),j=(0,i.useRef)(t);j.current=t;let k=null!=c?c:t!==n?t:null;(0,i.useEffect)(()=>{matchMedia(eC).matches&&ev(t).catch(()=>{})},[t]),(0,i.useEffect)(()=>{if(!c)return;let e=setTimeout(()=>{s(c),d(null)},320);return()=>clearTimeout(e)},[c]);let N=k?[n,k]:[n];return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("link",{rel:"preload",as:"image",href:ek(f,!0),media:eN,fetchPriority:"high"}),(0,r.jsx)("link",{rel:"preload",as:"image",href:ek(f,!1),media:eC,fetchPriority:"high"}),(0,r.jsx)("link",{rel:"preload",as:"image",href:"/assets/puff/hero-loop/keyboard-extension.webp",media:eC,fetchPriority:"high"}),N.map(e=>(0,r.jsx)(eM,{color:e,cachedSource:y.current.get(e),poster:e===f&&!x,leader:w,current:e===n,enabled:e===n||e===k,revealing:e===c,onBlocked:()=>{e===j.current&&o(!0)},onCodec:m,onStateChange:t=>h(a=>a[e]===t?a:{...a,[e]:t}),onReady:()=>{e===n||e!==j.current||c||d(e)},onUnavailable:()=>{e!==j.current||c||s(e)}},e))]})}function eM(e){let{color:t,cachedSource:a,current:n,enabled:s,revealing:l,poster:o,leader:c,onReady:d,onUnavailable:u,onStateChange:h,onBlocked:p,onCodec:m}=e,[f]=(0,i.useState)(()=>null!=a?a:void 0),x=(0,i.useRef)(null),v=(0,i.useRef)(null),g=(0,i.useRef)(null),y=(0,i.useRef)({onReady:d,onUnavailable:u,onStateChange:h,onBlocked:p,onCodec:m}),[b,w]=(0,i.useState)(!1),[j,k]=(0,i.useState)(!1),[N,C]=(0,i.useState)(!1),[S,E]=(0,i.useState)(null);(0,i.useLayoutEffect)(()=>{y.current={onReady:d,onUnavailable:u,onStateChange:h,onBlocked:p,onCodec:m}}),(0,i.useEffect)(()=>{y.current.onStateChange(b)},[b]),(0,i.useEffect)(()=>{b&&N&&y.current.onReady()},[b,N]),(0,i.useEffect)(()=>{var e;if(!b)return;let t=null==(e=x.current)?void 0:e.currentSrc;t&&!t.startsWith("blob:")&&y.current.onCodec(/\.hevc\.mp4/.test(t)?"hevc":/\.av1\.mp4/.test(t)?"av1":"h264")},[b]),(0,i.useLayoutEffect)(()=>{let e=g.current;(null==e?void 0:e.complete)&&e.naturalWidth&&k(!0)},[]),(0,i.useLayoutEffect)(()=>{if(!s){var e;null==(e=x.current)||e.pause(),w(!1)}},[s]),(0,i.useLayoutEffect)(()=>{if(!n){var e;s&&(null==(e=x.current)||e.dispatchEvent(new Event("loop-resync")));return}let t=x.current;return c.current=t,()=>{c.current===t&&(c.current=null)}},[n,s,c]),(0,i.useLayoutEffect)(()=>{E({mobile:matchMedia(eN).matches,originalGrade:"original"===new URLSearchParams(location.search).get("grade")})},[]),(0,i.useEffect)(()=>{let e,t=x.current;if(!t||!s||!S)return;t.error&&y.current.onUnavailable();let a=matchMedia("(prefers-reduced-motion: reduce)"),n=!1,r=!1,i=!1,l=!1,o=0,d=0,u=!1,h=0,p=0,m=performance.now(),f=-1,v=0;t.muted=t.defaultMuted=!0,t.playsInline=!0;let g=()=>n&&!document.hidden&&!a.matches,b=()=>{var a;o&&(a=o,"function"==typeof t.cancelVideoFrameCallback?t.cancelVideoFrameCallback(a):cancelAnimationFrame(a)),clearTimeout(e),e=void 0,o=0},j=()=>{var e,a,n;if(b(),r||!g()||t.paused)return;let i=(null==(e=c.current)?void 0:e.paused)||(null!=(n=null==(a=c.current)?void 0:a.readyState)?n:0)<2?null:c.current;if(i&&i!==t&&Number.isFinite(t.duration)){let e=t.duration,a=(i.currentTime-t.currentTime+1.5*e)%e-e/2;if(Math.abs(a)>.08&&d<2){d++,t.currentTime=(i.currentTime+.025)%e,k();return}if(Math.abs(a)>.018){t.playbackRate=a>0?1.15:.85,k();return}}if(t.playbackRate=1,i&&i!==t){let e=Math.min(t.duration,t.currentTime+.43000000000000005),a=(e,a)=>Array.from({length:t.buffered.length},(e,t)=>t).some(n=>t.buffered.start(n)<=e+.01&&t.buffered.end(n)>=a-.01),n=t.currentTime+.43000000000000005-t.duration;if(!(a(t.currentTime,e)&&(n<=0||a(0,n))))return void k()}l=!0,w(!0)},k=()=>{!o&&!l&&!r&&g()&&(o="function"==typeof t.requestVideoFrameCallback?t.requestVideoFrameCallback(j):requestAnimationFrame(j),e=setTimeout(()=>{b(),t.readyState>=2&&t.currentTime>0&&!t.seeking?j():k()},180))},N=()=>{if(!g()){t.pause(),b(),a.matches&&(l=!1,w(!1));return}if(!i&&t.readyState>=1){i=!0;
1let e=c.current;e&&e!==t&&Number.isFinite(t.duration)&&(t.currentTime=(e.currentTime+.025)%t.duration)}if(u)return;if(!t.paused)return void k();u=!0,p=performance.now();let e=++h;t.play().then(()=>{if(!r&&e===h){if(!g())return void t.pause();k()}}).catch(t=>{!r&&e===h&&g()&&"AbortError"!==t.name&&(w(!1),y.current.onUnavailable(),y.current.onBlocked())}).finally(()=>{e===h&&(u=!1)})},C=()=>{b(),i=!1,l=!1,d=0,t.playbackRate=1,w(!1)},E=()=>{C(),N()},M=()=>{g()&&(h++,u=!1,t.pause(),(t.error||t.networkState===HTMLMediaElement.NETWORK_NO_SOURCE||t.readyState<2)&&t.load(),m=performance.now(),N())},P=setInterval(()=>{if(!g()){m=performance.now();return}let e=performance.now();t.currentTime===f||t.paused||(f=t.currentTime,m=e,k()),(u&&e-p>5e3||e-m>6e3)&&(v++<2?M():(y.current.onBlocked(),t.readyState<2&&(l=!1,w(!1))))},750);t.addEventListener("loop-resync",E);let I=new IntersectionObserver(e=>{let[t]=e;n=t.isIntersecting,N()});return I.observe(t),t.addEventListener("loadstart",C),t.addEventListener("loadedmetadata",N),t.addEventListener("loadeddata",N),t.addEventListener("canplay",N),window.addEventListener("puff-loop-retry",M),window.addEventListener("pageshow",N),window.addEventListener("online",M),t.addEventListener("playing",k),t.addEventListener("seeked",k),document.addEventListener("visibilitychange",N),a.addEventListener("change",N),()=>{r=!0,h++,clearInterval(P),b(),I.disconnect(),t.pause(),t.removeEventListener("loop-resync",E),t.removeEventListener("loadstart",C),t.removeEventListener("loadedmetadata",N),t.removeEventListener("loadeddata",N),t.removeEventListener("canplay",N),window.removeEventListener("puff-loop-retry",M),window.removeEventListener("pageshow",N),window.removeEventListener("online",M),t.removeEventListener("playing",k),t.removeEventListener("seeked",k),document.removeEventListener("visibilitychange",N),a.removeEventListener("change",N)}},[c,s,S]);var M=()=>C(!0);let P=(0,i.useRef)(M);(0,i.useLayoutEffect)(()=>{P.current=M}),(0,i.useLayoutEffect)(()=>{let e,a=x.current,n=v.current,r=g.current;if(!a||!n||!a.parentElement)return;let i=a.parentElement,s=matchMedia("(min-width: 768px)"),l=!1,o=!1,c=!s.matches,d=!1,u=null,h=null,p=!0,m=-1,f=0,y=n.getContext("2d"),b=()=>{d||l||(d=!0,clearTimeout(e),P.current())},w=()=>{if(l||!h||!y)return;let{x:t,y:i,width:o,height:d,bleed:p}=h;y.clearRect(0,0,n.width,n.height),u&&s.matches&&(y.save(),y.beginPath(),y.rect(0,0,Math.max(0,t),n.height),y.clip(),y.transform(1.79185448*o/u.width,.00795793*d/u.width,-.01603892*o/u.height,.91398316*d/u.height,t-.64537089*o,i+.00130251*d),y.drawImage(u,0,0,1,u.height,-u.width,0,u.width,u.height),y.drawImage(u,0,0,u.width,1,0,-u.height,u.width,u.height),y.drawImage(u,0,0,1,1,-u.width,-u.height,u.width,u.height),y.drawImage(u,0,0),y.restore());let x=a.readyState>=2?a:(null==r?void 0:r.complete)&&r.naturalWidth?r:null;if(x)try{let e=x instanceof HTMLVideoElement?{width:x.videoWidth,height:x.videoHeight}:{width:x.naturalWidth,height:x.naturalHeight};if(i>0&&y.drawImage(x,0,0,e.width,1,t,0,o,i),s.matches)y.drawImage(x,t,i,o,d);else{let a=Math.max(o/e.width,d/e.height),n=o/a;y.drawImage(x,(e.width-n)*.38,0,n,d/a,t,i,o,d)}m=x===a?a.currentTime:-1,f=performance.now()}catch(e){}y.drawImage(n,p,0,1,n.height,0,0,p,n.height),y.drawImage(n,n.width-p-1,0,1,n.height,n.width-p,0,p,n.height),y.drawImage(n,0,p,n.width,1,0,0,n.width,p);let v=y.createLinearGradient(0,i+.65*d,0,i+d);for(let e=0;e<=10;e++)v.addColorStop(e/10,"rgba(0,0,0,".concat(1-eg(0,1,e/10),")"));y.globalCompositeOperation="destination-in",y.fillStyle=v,y.fillRect(0,0,n.width,n.height),y.globalCompositeOperation="source-over",x&&(c?b():null!=e||(e=setTimeout(()=>{c=!0,b()},1500)))},j=()=>
1{if(l)return;!o&&s.matches&&(o=!0,ev(t).then(e=>{l||(u=e,c=!0,j())}).catch(()=>{c=!0,j()}));let e=i.getBoundingClientRect(),r=a.getBoundingClientRect();if(!e.width||!e.height||!r.width||!r.height)return;let d=s.matches?160:80,p=Math.min(1,(s.matches?960:480)/(e.width+2*d));n.width=Math.round((e.width+2*d)*p),n.height=Math.round((e.height+2*d)*p),n.style.setProperty("--loop-blur-bleed","".concat(d,"px")),h={x:(r.x-e.x+d)*p,y:(r.y-e.y+d)*p,bleed:Math.ceil(d*p),width:r.width*p,height:r.height*p},i.style.setProperty("--loop-deep-blur",u?"72px":"52px"),w()},k=window.setInterval(()=>{p&&!document.hidden&&!a.paused&&a.currentTime!==m&&(s.matches||performance.now()-f>=95)&&w()},80),N=new IntersectionObserver(e=>{let[t]=e;p=t.isIntersecting});N.observe(i),a.addEventListener("loadeddata",j),a.addEventListener("playing",j),a.addEventListener("seeked",w),null==r||r.addEventListener("load",j);let C=new ResizeObserver(j);return C.observe(a),C.observe(i),s.addEventListener("change",j),j(),()=>{l=!0,window.clearInterval(k),clearTimeout(e),N.disconnect(),a.removeEventListener("seeked",w),a.removeEventListener("loadeddata",j),a.removeEventListener("playing",j),null==r||r.removeEventListener("load",j),C.disconnect(),s.removeEventListener("change",j)}},[x,v,g,t]);let I=N&&(n||l)&&(b||n&&o&&j);return(0,r.jsxs)("div",{className:"pv-device-motion","data-ready":I,"data-video":b,"data-color":t,"data-phase":n?"active":s?l?"crossfade":"preparing":"idle",style:{backgroundColor:ef[t],opacity:+!!I,zIndex:l?1:n?0:-1,transition:"opacity ".concat(280,"ms ease-in-out")},children:[(0,r.jsx)("canvas",{ref:v,className:"pv-loop-footage-backdrop",width:480,height:384,"aria-hidden":"true"}),(0,r.jsx)("video",{ref:x,src:(null==S?void 0:S.originalGrade)?"/assets/puff/hero-loop/".concat(t,"-").concat(S.mobile?"mobile":"tall",".mp4"):f,muted:!0,loop:!0,playsInline:!0,preload:"auto",autoPlay:o,"aria-label":"".concat(t.charAt(0).toUpperCase()+t.slice(1)," Puffâs screen animating while plugged into a laptop"),onError:e=>{e.currentTarget.error&&(w(!1),u(),s&&p())},children:ey.map(e=>{let{codec:a,type:n}=e;return(0,r.jsxs)(i.Fragment,{children:[(0,r.jsx)("source",{src:ej(t,!0,a),media:"".concat(eN," and ").concat(eS),type:n}),(0,r.jsx)("source",{src:ej(t,!1,a),media:"".concat(eC," and ").concat(eS),type:n})]},a)})}),o&&(0,r.jsxs)("picture",{children:[(0,r.jsx)("source",{media:eN,srcSet:ek(t,!0),width:1080,height:1470}),(0,r.jsx)("img",{ref:g,className:"pv-loop-poster",src:ek(t,!1),width:1200,height:1634,alt:"","aria-hidden":"true",decoding:"async",fetchPriority:"high",onLoad:()=>k(!0)})]}),(0,r.jsxs)("div",{className:"pv-loop-atmosphere","aria-hidden":"true",children:[(0,r.jsx)("span",{className:"pv-loop-blur pv-loop-blur-soft"}),(0,r.jsx)("span",{className:"pv-loop-blur pv-loop-blur-medium"}),(0,r.jsx)("span",{className:"pv-loop-blur pv-loop-blur-deep"}),(0,r.jsx)("span",{className:"pv-loop-shade"}),(0,r.jsx)("span",{className:"pv-loop-grain"})]})]})}let eP=["ruby","citrine","sapphire","peridot"],eI=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:960,a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"dark";return"/assets/puff/lightbox/".concat("white"===a?"figma/aligned/":"").concat(e,"-").concat(t,".webp")};function eL(e){let{color:t,priority:a=!1,alt:n,sizes:s,treatment:l="dark"}=e,[o,c]=(0,i.useState)({}),[d,u]=(0,i.useState)(t),h=(0,i.useRef)(null);return(0,i.useEffect)(()=>{var e;let t={};null==(e=h.current)||e.querySelectorAll("img[data-color]").forEach(e=>{e.complete&&e.naturalWidth>0&&(t[e.dataset.color]=!0)}),c(e=>({...e,...t}))},[]),(0,i.useEffect)(()=>{o[t]&&u(t)},[t,o]),(0,r.jsx)("div",{ref:h,className:"pv-product-gallery","aria-label":n,role:"img","aria-busy":!o[t],children:eP.map(e=>(0,r.jsx)("img",{"data-color":e,src:eI(e,960,l),srcSet:[480,960,1254].map(t=>"".concat(eI(e,t,l)," ").concat(t,"w")).join(", "),sizes:s,width:1254,height:1254,alt:"","aria-hidden":"true",className:"pv-product-photo",loading:a&&e===t?"eager":"lazy",fetchPriority:e===t?a?"high":"auto":"low",decoding:"async",onLoad:()=>c(t=>t[e]?t:{...t,[e]:!0}),style:{opacity:+(d===e)}},e))})}
1function eF(e){let{color:t,options:a,onColorChange:n}=e;return(0,r.jsx)("div",{className:"pv-loop-picker",children:(0,r.jsx)("div",{className:"pv-loop-color-cards",role:"group","aria-label":"Choose your Puff color",children:a.map(e=>{let a=e.key,i=a===t;return(0,r.jsx)("button",{type:"button",className:"pv-loop-color-card","data-color":a,"aria-label":"Choose ".concat(e.label),"aria-pressed":i,"aria-describedby":i?"puff-color-capacity-".concat(a):void 0,onClick:()=>n(a),style:{"--card-color":e.swatch,"--card-ink":"citrine"===a||"peridot"===a?"#181916":"#fff"},children:(0,r.jsxs)("span",{className:"pv-loop-color-shell",children:[(0,r.jsx)("span",{className:"pv-loop-color-photo",children:(0,r.jsx)(l.default,{src:eI(a,480,"white"),unoptimized:!0,alt:"",width:480,height:480})}),(0,r.jsxs)("span",{className:"pv-loop-color-name","aria-hidden":"true",children:[(0,r.jsx)("span",{className:"pv-loop-color-fill"}),(0,r.jsxs)("span",{className:"pv-loop-color-label",children:[(0,r.jsx)("i",{}),e.label]}),(0,r.jsx)("span",{id:"puff-color-capacity-".concat(a),className:"pv-loop-color-capacity",children:"128GB"})]})]})},a)})})})}a(5532),a(3901);let eT="https://www.wired.com/story/this-beautifully-weird-necklace-is-secretly-a-usb-drive/",eR=[{quote:"Nowareâs Puff necklace whimsically reimagines flash drives, turning something functional into personalized jewelry.",publication:"wired",name:"WIRED",href:eT,logo:"/assets/press/wired.svg",width:104,height:22,context:""},{quote:"reimagining the form and function of devices in inspiring ways",publication:"itsnicethat",name:"Itâs Nice That",href:"https://www.itsnicethat.com/features/good-screens-report-its-nice-that-insights-120826",logo:"/assets/press/itsnicethat.svg",width:112,height:22,context:"Good Screens \xb7 featuring Noware"},{quote:"Noware featured in 25 things inspiring IDEO",publication:"ideo",name:"IDEO",href:"https://edges.ideo.com/posts/25-things-inspiring-us-to-push-the-edges-of-our-craft",logo:null,statement:!0,context:"Edges by IDEO"},{quote:"the perfect accessory for a weekend-long festival",publication:"wired",name:"WIRED",href:eT,logo:"/assets/press/wired.svg",width:104,height:22,context:""},{quote:"Noware's Puff Flash Drive reimagines the small, portable data storage device as a dynamic, wearable accessory",publication:"trendhunter",name:"Trend Hunter",href:"https://www.trendhunter.com/trends/puff-flash-drive",logo:"/assets/press/trendhunter.svg",width:1920,height:360,context:""},{quote:"Nowareâs Puff offers a fresh direction for wearable tech",publication:"pap",name:"PAP",href:"https://www.pap-magazine.com/en/article/nowhere-puff-wearable-tech-jewelry",logo:"/assets/press/pap.png",width:715,height:443,context:""}],eA=eR.length,e_=(e,t)=>{let a=t/2;return((e+a)%t+t)%t-a};function eU(e){let{className:t=""}=e,a=(0,i.useRef)(null),n=(0,i.useRef)(null),s=(0,i.useRef)([]),o=(0,i.useRef)([]),[c,d]=(0,i.useState)(0),[h,p]=(0,i.useState)(!1),[m,f]=(0,i.useState)(!1),[x,v]=(0,i.useState)(!1),[g,y]=(0,i.useState)(!0),[b,w]=(0,i.useState)(!0),j=(0,i.useRef)({positions:[],widths:[],total:0,step:0,offset:0,target:0,velocity:0,dragging:!1,flinging:!1,startX:0,startOffset:0,lastX:0,lastT:0,moved:0}),k=e=>{let t=j.current,a=0,n=1/0;for(let r=0;r<eA;r++){let i=Math.abs(e_(t.positions[r]-e,t.total));i<n&&(n=i,a=r)}return a},N=e=>{let t=j.current;return t.offset+e_(t.positions[e]-t.offset,t.total)},C=(0,i.useCallback)(()=>{let e=j.current;if(!e.total)return;for(let t=0;t<eA;t++){let a=e_(e.positions[t]-e.offset,e.total),n=Math.abs(a)/e.step,r=Math.max(0,1-n),i=s.current[t];i&&(i.style.transform="translate3d(calc(-50% + ".concat(a.toFixed(2),"px), -50%, 0) scale(").concat((1+.24*r).toFixed(3),")"),i.style.opacity=Math.max(0,Math.min(1,1.3-.62*n)).toFixed(3),i.style.zIndex=String(50-Math.round(10*n)));let l=o.current[t];l&&(l.style.transform="translate3d(".concat((.26*a).toFixed(2),"px, 0, 0)"),l.style.opacity=Math.max(0,1-1.7*n).toFixed(3),l.style.pointerEvents=n<.5?"auto":"none")}let t=k(e.offset);d(e=>e===t?e:t)},[]);(0,i.useLayoutEffect)(()=>{var e;let t=n.current;if(!t)return;let a=()=>{let e=t.clientWidth;if(!e)return;let a=j.current,n=Math.max(0,Math.min(1,(e-320)/240));t.style.setProperty("--press-mark","".concat((15+7*n).toFixed(2),"px"));let r=s.current.map(e=>{var t;return(null==e||null==(t=e.firstElementChild)?void 0:t.offsetWidth)||0});if(r.some(e=>!e))return;let i=Math.max(40,Math.min(82,e/3.4-r.reduce((e,t)=>
1e+t,0)/eA)),l=[0];for(let e=1;e<eA;e++)l[e]=l[e-1]+(r[e-1]+r[e])/2+i;let o=l[eA-1]+(r[eA-1]+r[0])/2+i;if(a.total===o&&a.widths.length===eA&&r.every((e,t)=>e===a.widths[t]))return;let c=a.total?k(a.offset):0;a.positions=l,a.widths=r,a.total=o,a.step=o/eA,a.offset=l[c],a.target=a.offset,a.velocity=0,C()};a();let r=new ResizeObserver(a);for(let e of(r.observe(t),s.current))e&&r.observe(e);null==(e=document.fonts)||e.ready.then(a).catch(()=>{});let i=s.current.map(e=>null==e?void 0:e.firstElementChild).filter(e=>e instanceof HTMLImageElement);for(let e of i)e.complete||e.addEventListener("load",a,{once:!0});return()=>{for(let e of(r.disconnect(),i))e.removeEventListener("load",a)}},[C]),(0,i.useEffect)(()=>{let e=matchMedia("(prefers-reduced-motion: reduce)"),t=()=>w(e.matches),n=()=>y(!document.hidden);t(),n(),e.addEventListener("change",t),document.addEventListener("visibilitychange",n);let r=new IntersectionObserver(e=>{let[t]=e;return v(t.isIntersecting)},{threshold:0});return a.current&&r.observe(a.current),()=>{r.disconnect(),e.removeEventListener("change",t),document.removeEventListener("visibilitychange",n)}},[]),(0,i.useEffect)(()=>{if(b)return;let e=0,t=()=>{let a=j.current;if(a.total&&!a.dragging)if(a.flinging){if(a.offset+=a.velocity,a.velocity*=.9,2.2>Math.abs(a.velocity)){let e=Math.sign(a.velocity)*a.step*.28;a.flinging=!1,a.target=N(k(a.offset+e)),a.velocity=0}C()}else(Math.abs(a.target-a.offset)>.05||Math.abs(a.velocity)>.05)&&(a.velocity=(a.velocity+(a.target-a.offset)*.11)*.62,a.offset+=a.velocity,.25>Math.abs(a.target-a.offset)&&.18>Math.abs(a.velocity)&&(a.offset=a.target,a.velocity=0),C());e=requestAnimationFrame(t)};return e=requestAnimationFrame(t),()=>cancelAnimationFrame(e)},[C,b]);let S=(0,i.useCallback)(function(e){let t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],a=j.current;a.total&&(a.flinging=!1,a.velocity=0,a.target=N(e),t&&(a.offset=a.target,C()))},[C]);(0,i.useEffect)(()=>{if(h||m||!x||!g||b)return;let e=setInterval(()=>{let e=j.current;e.dragging||e.flinging||!e.total||(e.target=N((k(e.offset)+1)%eA))},6500);return()=>clearInterval(e)},[h,m,x,g,b]);let E=e=>{let t=j.current;if(t.dragging)if(t.dragging=!1,e.currentTarget.hasPointerCapture(e.pointerId)&&e.currentTarget.releasePointerCapture(e.pointerId),performance.now()-t.lastT<90&&Math.abs(t.velocity)>2.2&&!b)t.flinging=!0;else{let e=t.offset-t.startOffset==0?0:Math.sign(t.offset-t.startOffset)*t.step*.28;t.velocity=0,t.target=N(k(t.offset+e)),b&&(t.offset=t.target,C())}},M=e=>{p(!0);let t=j.current;t.total&&S(((k(t.target)+e)%eA+eA)%eA,b)};return(0,r.jsxs)("aside",{ref:a,className:"pv-press ".concat(t),"aria-label":"In the press","aria-roledescription":"carousel",onMouseEnter:()=>f(!0),onMouseLeave:()=>f(!1),onFocusCapture:e=>{var t;let a=e.target;(null==(t=a.matches)?void 0:t.call(a,":focus-visible"))&&p(!0)},children:[(0,r.jsx)("div",{className:"pv-press-stage","aria-live":h||b?"polite":"off",children:eR.map((e,t)=>(0,r.jsxs)("div",{ref:e=>{o.current[t]=e},className:"pv-press-slide".concat(t===c?" is-active":""),role:"group","aria-roledescription":"slide","aria-label":"".concat(t+1," of ").concat(eA),"aria-hidden":t!==c,inert:t!==c,children:[(0,r.jsx)("a",{className:"pv-press-feature",href:e.href,target:"_blank",rel:"noopener noreferrer",onClick:()=>{var t;return t=e.publication,void((0,P.F)("press_click",{placement:"hero_press_".concat(t)}),(0,u.u4)("puff_press_click",{publication:t,placement:"hero"}))},children:e.statement?(0,r.jsxs)("p",{className:"pv-press-line".concat(e.quote.length>90?" pv-press-quote-long":""),children:[e.quote,(0,r.jsx)("span",{className:"pv-press-out","aria-hidden":"true"})]}):(0,r.jsxs)("q",{className:e.quote.length>90?"pv-press-quote-long":void 0,children:[e.quote,(0,r.jsx)("span",{className:"pv-press-out","aria-hidden":"true"})]})}),(0,r.jsx)("span",{className:"pv-press-context",children:e.context})]},e.publication+t))}),(0,r.jsxs)("div",{className:"pv-press-nav",children:[(0,r.jsx)("button",{type:"button",className:"pv-press-step","aria-label":"Previous publication",onClick:()=>M(-1),children:(0,r.jsx)("svg",{width:"14",height:"14",viewBox:"0 0 16 16",fill:"none",stroke:"currentColor",strokeWidth:"1.6",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:(0,r.jsx)("path",{d:"M10 3.5 5.5 8l4.5 4.5"})})}),(0,r.jsx)("div",{ref:n,className:"pv-press-strip",role:"group","aria-label":"Publications",onPointerDown:e=>{if(0!==e.button&&"mouse"===e.pointerType)return;let t=j.current;t.total&&(t.dragging=!0,t.flinging=!1,t.velocity=0,t.moved=0,t.startX=t.lastX=e.clientX,t.startOffset=t.offset,t.lastT=performance.now())},onPointerMove:e=>{let t=j.current;if(!t.dragging)return;let a=performance.now(),n=e.clientX-t.lastX,r=Math.max(1,a-t.lastT);t.moved=Math.max(t.moved,Math.abs(e.clientX-t.startX)),t.moved>4&&!e.currentTarget.hasPointerCapture(e.pointerId)&&e.currentTarget.setPointerCapture(e.pointerId),t.offset=t.startOffset-(e.clientX-t.startX),t.velocity=-(n/r*16),t.lastX=e.clientX,t.lastT=a,C()},onPointerUp:E,onPointerCancel:E,onKeyDown:e=>
1{("ArrowLeft"===e.key||"ArrowRight"===e.key)&&(e.preventDefault(),M("ArrowRight"===e.key?1:-1))},children:eR.map((e,t)=>(0,r.jsx)("button",{type:"button",ref:e=>{s.current[t]=e},className:"pv-press-chip","aria-label":"Show the ".concat(e.name," quote"),"aria-pressed":t===c,onClick:()=>{!(j.current.moved>4)&&(p(!0),S(t,b))},children:e.logo?(0,r.jsx)(l.default,{src:e.logo,alt:e.name,"data-publication":e.publication,width:e.width,height:e.height}):(0,r.jsx)("span",{className:"pv-press-wordmark","data-publication":e.publication,children:e.name})},e.publication+t))}),(0,r.jsx)("button",{type:"button",className:"pv-press-step","aria-label":"Next publication",onClick:()=>M(1),children:(0,r.jsx)("svg",{width:"14",height:"14",viewBox:"0 0 16 16",fill:"none",stroke:"currentColor",strokeWidth:"1.6",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:(0,r.jsx)("path",{d:"M6 3.5 10.5 8 6 12.5"})})})]})]})}function eO(e){let{media:t,light:a,color:n,options:s,onColorChange:o,purchaseControls:d,deviceLoop:h=!1}=e,[p,m]=(0,i.useState)(!1),f=a&&"photos"===t&&!h,x=a&&"photos"===t?"white":"dark",v=s.find(e=>e.key===n),g=s.findIndex(e=>e.key===n)+1,y=(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)("div",{className:"pv-color-heading",children:[(0,r.jsx)("span",{className:"pv-capacity",children:"128GB"}),(0,r.jsx)("span",{className:"pv-color-label",style:{backgroundColor:v.swatch,color:"citrine"===n||"peridot"===n?"#101010":"#fff"},children:(0,r.jsx)("strong",{"aria-live":"polite",children:v.label})})]}),(0,r.jsx)("div",{className:"pv-color-tiles",role:"group","aria-label":"Choose your Puff color",children:s.map(e=>(0,r.jsxs)("button",{className:"pv-color-tile","aria-label":"Choose ".concat(e.label),"aria-pressed":e.key===n,onClick:()=>o(e.key),children:[(0,r.jsx)("span",{className:"pv-tile-image",children:(0,r.jsx)(l.default,{src:eI(e.key,240,x),unoptimized:!0,alt:"",width:220,height:220,sizes:"(max-width: 767px) 22vw, 110px"})}),(0,r.jsxs)("span",{className:"pv-tile-name",children:[(0,r.jsx)("i",{style:{backgroundColor:e.swatch}}),e.label]})]},e.key))})]});return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)("header",{className:"pv-header",children:[(0,r.jsx)("div",{className:"pv-nav-backdrop","aria-hidden":"true"}),(0,r.jsx)(c(),{href:"/","aria-label":"Noware home",children:(0,r.jsx)(l.default,{src:"/svgs/wordmark.svg",alt:"noware",width:200,height:30,priority:!0,className:a?"":"invert"})})]}),(0,r.jsxs)("section",{className:"pv-hero".concat("photos"===t?" pv-hero-with-purchase":"").concat(f?" pv-compact-photo":"").concat(h?" pv-device-loop":""),"aria-label":h?"Puff":"Introducing Puff","data-hero-media":h?"device-loop":t,style:h?{"--pv-loop-tone":ef[n]}:void 0,children:[(0,r.jsxs)("div",{className:"pv-hero-copy",children:[(0,r.jsxs)("div",{className:"pv-hero-intro",children:[(0,r.jsxs)("div",{className:"pv-hero-brand",children:[!h&&!f&&(0,r.jsx)("p",{className:"pv-introducing",children:"Introducing"}),(0,r.jsx)(l.default,{className:"pv-puff-mark",src:a?"/assets/puff/puff-logo-black.svg":"/assets/puff/puff-logo.svg",alt:"Puff",width:749,height:277,priority:!0})]}),(0,r.jsxs)("div",{className:"pv-headline-copy",children:[(0,r.jsx)("h2",{className:"pv-new-headline",children:"A new kind of flash drive"}),(0,r.jsxs)("p",{className:"pv-wear pv-new-wear",children:["A ",(0,r.jsx)("span",{className:"pv-use-case-list",children:"keychain, bag charm, necklace, and more!"})]})]}),h&&p&&(0,r.jsxs)("button",{type:"button",className:"pv-loop-play",onClick:()=>window.dispatchEvent(new Event("puff-loop-retry")),children:[(0,r.jsx)("span",{"aria-hidden":"true",children:"â·"})," See it move"]})]}),"photos"===t?(0,r.jsxs)("div",{id:"choose-puff",className:"pv-hero-purchase",children:[h?(0,r.jsx)(eF,{color:n,options:s,onColorChange:o}):!f&&y,(0,r.jsx)("div",{className:"pv-purchase",children:d})]}):(0,r.jsx)(r.Fragment,{children:(0,r.jsxs)("a",{href:"#choose-puff",className:"pv-explore",onClick:()=>{(0,u.u4)("puff_explore_colors",{placement:"hero",hero_media:t}),(0,P.F)("hero_cta_click",{placement:"explore_colors"})},children:["Explore colors ",(0,r.jsx)("span",{"aria-hidden":"true",children:"â"})]})})]}),(0,r.jsxs)("div",{className:"pv-hero-media".concat(h?" pv-loop-stage":""),children:[h&&(0,r.jsx)(eE,{color:n,onPlayPrompt:m}),"video"===t?(0,r.jsx)(es,{bleed:!0,priority:!0,optimizedPoster:!0}):(0,r.jsxs)("div",{className:"pv-photo-hero",children:[!h&&(0,r.jsx)(eL,{color:n,treatment:x,alt:"".concat(v.label," Puff on its silver necklace chain"),priority:!0,sizes:"(max-width: 767px) 78vw, 54vw"}),(0,r.jsxs)("div",{className:"pv-mobile-brand",children:[!h&&!f&&(0,r.jsx)("p",{className:"pv-introducing",children:"Introducing"}),(0,r.jsx)(l.default,{className:"pv-mobile-puff-mark",src:a?"/assets/puff/puff-logo-black.svg":"/assets/puff/puff-logo.svg",alt:"Puff",width:749,height:277}),(0,r.jsx)("h2",{className:"pv-mobile-brand-headline",children:"A new kind of flash drive"}),(0,r.jsxs)("p",{className:"pv-mobile-brand-wear pv-new-wear",children:["A ",(0,r.jsx)("span",{className:"pv-use-case-list",children:"keychain, bag charm, necklace, and more!"})]})]}),(0,r.jsxs)("div",{className:"pv-mobile-hero-copy",children:[(0,r.jsx)("h2",{className:"pv-new-headline",children:"A new kind of flash drive"}),(0,r.jsxs)("p",{className:"pv-wear pv-new-wear",children:["A ",(0,r.jsx)("span",{className:"pv-use-case-list",children:"keychain, bag charm, necklace, and more!"})]})]}),!a&&(0,r.jsxs)("div",{className:"pv-photo-caption",children:[(0,r.jsxs)("span",{children:[String(g).padStart(2,"0")," / ",v.label]}),(0,r.jsx)("div",{className:"pv-hero-swatches",role:"group","aria-label":"Preview a color",children:s.map(e=>(0,r.jsx)("button",{"aria-label":"Preview ".concat(e.label),"aria-pressed":e.key===n,onClick:()=>
1o(e.key),style:{"--swatch":e.swatch},children:(0,r.jsx)("span",{})},e.key))})]})]}),h&&(0,r.jsx)(eU,{className:"pv-loop-press-desktop"})]}),a&&"photos"===t&&!h&&(0,r.jsx)(eU,{})]}),h&&(0,r.jsx)(eU,{className:"pv-loop-press-mobile"}),"video"===t&&(0,r.jsxs)("section",{id:"choose-puff",className:"pv-shop","aria-labelledby":"pv-shop-title",children:[(0,r.jsxs)("div",{className:"pv-shop-photo",children:[(0,r.jsx)(eL,{color:n,treatment:x,alt:"".concat(v.label," Puff â polished silver, translucent gem and box chain necklace"),sizes:"(max-width: 767px) 100vw, 50vw"}),(0,r.jsx)("div",{className:"pv-shop-photo-label",children:(0,r.jsxs)("span",{children:["Puff / ",v.label]})})]}),(0,r.jsxs)("div",{className:"pv-shop-copy",children:[(0,r.jsx)("h2",{id:"pv-shop-title",children:"Puff"}),y,(0,r.jsx)("div",{className:"pv-purchase",children:d})]})]}),"photos"===t&&(0,r.jsxs)("section",{className:"pv-film-story","aria-labelledby":"pv-film-title",children:[(0,r.jsxs)("div",{className:"pv-film-copy",children:[(0,r.jsx)("div",{className:"pv-film-heading",children:(0,r.jsx)("h2",{id:"pv-film-title",children:"Puff is a designer flash drive that reacts as you add files, play music, and move around."})}),(0,r.jsx)("p",{className:"pv-film-description",children:"Style it how you like, personalize the animations, and discover a few surprises waiting inside..."})]}),(0,r.jsx)(es,{bleed:!0,optimizedPoster:!0,autoPlayOnScroll:!0})]})]})}a(7635),a(8225),a(1673),a(4941);var eB=a(4499);a(3064);let eq={w:1e3,r:24,tab:84,ear:40,earX:68,gap:20,screw:7.2,margin:44,rowH:64},eH={w:1e3,r:30,tab:130,ear:70,earX:62,gap:24,screw:14,margin:60,rowH:108},ez=(e,t)=>{let a=t[0]-e[0],n=t[1]-e[1],r=Math.hypot(a,n)||1;return[a/r,n/r]},eW=e=>Math.round(100*e)/100;function eD(e,t){let a=arguments.length>2&&void 0!==arguments[2]&&arguments[2],{gap:n,rowH:r}=e,i=e.tab+20,s=910+n,l=i+40,o=i+120+3*r+80,c=o+160+40*!!a,d=s+190,u=c-120,h=c+n,p=h+i+120+t,m=p+200,f=m+n,x=p+40-56,v=x+112,g=[{key:"tech",kind:"plate",points:[[0,0],[440,0],[440,i],[910,i],[910,o+100],[620,o+100],[620,o],[78,o],[78,i+100],[0,i+100]]},{key:"box",kind:"plate",points:[[s,0],[s+460,0],[s+460,l],[2e3,l],[2e3,l+120],[1930,l+120],[1930,u],[1760,u],[1760,c],[d,c],[d,u],[s,u]]},{key:"leftSide",kind:"gray",points:[[0,o+n],[620-n,o+n],[620-n,o+100+n],[360-n,o+100+n],[360-n,m-80],[100,m-80],[100,h+220],[0,h+220]]},{key:"bridge",kind:"gray",points:[[620,o+100+n],[d-n,o+100+n],[d-n,h+i-n],[840+n,h+i-n],[840+n,h-n],[620,h-n]]},{key:"rightSide",kind:"gray",points:[[1760+n,u+n],[1930,u+n],[1930,h+190],[2e3,h+190],[2e3,m-20],[1670+n,m-20],[1670+n,h+i+n],[1760+n,h+i+n]]},{key:"news",kind:"accent",points:[[360,h],[840,h],[840,h+i],[1670,h+i],[1670,h+i+70],[1570,h+i+70],[1570,x],[1670,x],[1670,v],[1250,v],[1250,p],[360,p]],radii:[e.r,e.r,e.r,e.r,e.r,e.r,e.r,56,56,56,e.r,e.r],screwCutoff:x-30},{key:"footL",kind:"gray",points:[[100,m-80+n],[360,m-80+n],[360,p+n],[1250-n,p+n],[1250-n,m],[800,m],[800,f+110],[260,f+110],[260,f+30],[100,f+30]]},{key:"footR",kind:"gray",points:[[820,f],[1670,f],[1670,m+90],[1900,m+90],[1900,f+190],[1160,f+190],[1160,f+110],[820,f+110]]}];return{w:2e3,h:f+190,plates:g,boxes:{specsTitle:[60,0,320,i],specsBody:[138,i+60,712,3*r],boxTitle:[s+60,0,340,l],boxBody:[s+60,l+60,1930-s-120,4*r],newsTitle:[420,h,360,i],newsBody:[420,h+i+60,1110,t],newsFoot:[1266,x+16,388,80]}}}function eV(e,t){let a=arguments.length>2&&void 0!==arguments[2]&&arguments[2],{tab:n,ear:r,earX:i,gap:s,margin:l,rowH:o}=e,c=3*e.screw,d=l+24,u=n+r+2*l+3*o,h=u+s,p=540-s,m=h+n+2*l+4*o+100+80*!!a,f=m-130,x=m-130,v=m+s,g=v+120,y=g+s,b=y+n+r+2*d+t,w=b+260+s,j=b+50-80,k=j+160,N=[{key:"tech",kind:"plate",points:[[0,0],[480,0],[480,0+n],[1e3,0+n],[1e3,u+n],[540,u+n],[540,u],[i,u],[i,0+n+r],[0,0+n+r]]},{key:"box",kind:"plate",points:[[0,h],[p,h],[p,h+n],[1e3,h+n],[1e3,f],[780,f],[780,m],[220,m],[220,x],[62,x],[62,h+n+r],[0,h+n+r]]},{key:"strip",kind:"gray",points:[[0,x+s],[220-s,x+s],[220-s,v],[780+s,v],[780+s,f+s],[1e3,f+s],[1e3,g],[740-s,g],[740-s,y+n-s],[520+s,y+n-s],[520+s,g],[0,g]]},{key:"news",kind:"accent",points:[[0,y],[520,y],[520,y+n],[740,y+n],[740,y],[1e3,y],[1e3,y+n+r],[880,y+n+r],[880,j],[1e3,j],[1e3,k],[540,k],[540,b],[480,b],[480,b+n],[240,b+n],[240,b],[i,b],[i,y+n+r],[0,y+n+r]],radii:[e.r,e.r,e.r,e.r,e.r,e.r,e.r,e.r,e.r,80,80,80,e.r,e.r,e.r,e.r,e.r,e.r,e.r,e.r],screwCutoff:j-c},{key:"footL",kind:"gray",points:[[0,w],[i+s,w],[i+s,b+s],[240-s,b+s],[240-s,w],[540-s,w],[540-s,w+140],[220,w+140],[220,w+260],[0,w+260]]},{key:"footR",kind:"gray",points:[[540,w],[1e3,w],[1e3,w+260],[760,w+260],[760,w+140],[540,w+140]]}];return{w:1e3,h:w+260,plates:N,boxes:{specsTitle:[0,0,480,n+r],specsBody:[i+d,0+n+d,1e3-i-2*d,3*o],boxTitle:[0,h,p,n],boxBody:[62+d,h+n+d,938-2*d,4*o],newsTitle:[0,y,520,n+r],newsBody:[i+d,y+n+r+d,880-i-2*d,t],newsFoot:[564,j+24,412,112]}}}function eX(e){let{s:t,compose:a,slots:n,className:s}=e,l=(0,i.useRef)(null),o=(0,i.useRef)(null),[d,u]=(0,i.useState)(t===eq?150:300),[h,p]=(0,i.useState)(""),{submitting:m,succeeded:f,emailIsValid:x,subscribe:v,error:g}
1=(0,eB.l)(h),y=a(t,d,n.spaciousBox);(0,i.useEffect)(()=>{let e=o.current,t=l.current;if(!e||!t)return;let a=new ResizeObserver(()=>{let a=Math.ceil(e.getBoundingClientRect().height*y.w/t.clientWidth)+2;u(e=>Math.abs(e-a)>4?a:e)});return a.observe(e),()=>a.disconnect()},[y.w]);let b=(e,t)=>{let[a,n,r,i]=y.boxes[e];return{left:"".concat(a/y.w*100,"%"),top:"".concat(n/y.h*100,"%"),width:"".concat(r/y.w*100,"%"),height:"".concat(i/y.h*100,"%"),...t}};return(0,r.jsxs)("div",{ref:l,className:"board ".concat(s),style:{aspectRatio:"".concat(y.w," / ").concat(y.h),"--board-accent":n.accent},children:[(0,r.jsx)("svg",{className:"board-svg",viewBox:"0 0 ".concat(y.w," ").concat(y.h),"aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",children:y.plates.map(e=>{var a,n;let i=[...function(e,t){let a=e.length,n=[];for(let r=0;r<a;r++){let i=e[(r+a-1)%a],s=e[r],l=e[(r+1)%a],o=ez(i,s),c=ez(s,l);o[0]*c[1]-o[1]*c[0]<=0||n.push([s[0]-o[0]*t+c[0]*t,s[1]-o[1]*t+c[1]*t])}return n}(e.points,2e3===y.w?30:3*t.screw),...null!=(a=e.extraScrews)?a:[]].filter(t=>{let[,a]=t;return void 0===e.screwCutoff||a<e.screwCutoff}).filter((a,n,r)=>{let[i,s]=a;return"news"!==e.key||!r.slice(0,n).some(e=>{let[a,n]=e;return Math.hypot(i-a,s-n)<3*t.screw})});return(0,r.jsxs)("g",{className:"bp bp-".concat(e.kind),"data-plate":e.key,"data-reveal-part":["tech","box","news"].includes(e.key)?e.key:void 0,children:[(0,r.jsx)("path",{d:function(e,t){let a=e.length;if(Array.isArray(t)){let n=[...t];return e.forEach((t,r)=>{let i=(r+1)%a,s=Math.hypot(e[i][0]-t[0],e[i][1]-t[1]),l=n[r]+n[i];if(l>s){let e=s/l;n[r]*=e,n[i]*=e}}),e.map((t,r)=>{let i=ez(e[(r+a-1)%a],t),s=ez(t,e[(r+1)%a]),l=n[r],o=[t[0]-i[0]*l,t[1]-i[1]*l],c=[t[0]+s[0]*l,t[1]+s[1]*l];return"".concat(r?"L":"M").concat(eW(o[0])," ").concat(eW(o[1])," A").concat(eW(l)," ").concat(eW(l)," 0 0 ").concat(+(i[0]*s[1]-i[1]*s[0]>0)," ").concat(eW(c[0])," ").concat(eW(c[1]))}).join(" ")+" Z"}let n=[];for(let r=0;r<a;r++){let i=e[(r+a-1)%a],s=e[r],l=e[(r+1)%a],o=ez(i,s),c=ez(s,l),d=[s[0]-o[0]*t,s[1]-o[1]*t],u=[s[0]+c[0]*t,s[1]+c[1]*t];n.push("".concat(0===r?"M":"L").concat(eW(d[0])," ").concat(eW(d[1])),"Q".concat(eW(s[0])," ").concat(eW(s[1])," ").concat(eW(u[0])," ").concat(eW(u[1])))}return n.join(" ")+" Z"}(e.points,null!=(n=e.radii)?n:t.r)}),i.map((e,a)=>{let[n,i]=e;return(0,r.jsx)("circle",{cx:n,cy:i,r:t.screw},a)})]},e.key)})}),(0,r.jsx)("div",{className:"board-box board-title","data-reveal-part":"tech",style:b("specsTitle"),children:(0,r.jsx)("span",{children:"TECH SPECS"})}),(0,r.jsx)("div",{className:"board-box board-table","data-reveal-part":"tech",style:b("specsBody"),children:n.specs}),(0,r.jsx)("div",{className:"board-box board-title","data-reveal-part":"box",style:b("boxTitle"),children:(0,r.jsx)("span",{children:"IN THE BOX"})}),(0,r.jsx)("div",{className:"board-box board-table","data-reveal-part":"box",style:b("boxBody"),children:n.box}),(0,r.jsx)("div",{className:"board-box board-title board-news-title","data-reveal-part":"news",style:b("newsTitle"),children:(0,r.jsx)("span",{children:"NEWSLETTER"})}),(0,r.jsx)("div",{className:"board-box board-news","data-reveal-part":"news",style:b("newsBody",{alignItems:"flex-start"}),children:(0,r.jsx)("div",{ref:o,className:"board-news-copy",children:f?(0,r.jsxs)("div",{className:"board-news-done","aria-live":"polite",children:[(0,r.jsx)("strong",{children:"Youâre on the list."}),(0,r.jsx)("span",{children:"Weâll be in touchâ¦"})]}):(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("h3",{className:"board-news-heading",children:"All the latest launches and events from Noware, in your inbox."}),(0,r.jsx)("input",{type:"email",inputMode:"email",autoComplete:"email",placeholder:"EMAIL",value:h,onChange:e=>p(e.target.value),"aria-invalid":!!g,"aria-describedby":g?"board-news-error-".concat(s):void 0,"aria-label":"Email address"}),g?(0,r.jsxs)("p",{id:"board-news-error-".concat(s),role:"alert",className:"board-news-fine",children:[":( ",g]}):(0,r.jsxs)("p",{className:"board-news-fine",children:["All provided info is protected by our ",(0,r.jsx)(c(),{href:"/privacy-policy",target:"_blank",children:"Privacy Policy"}),". This site is secured by reCAPTCHA, which is subject to Googleâs ",(0,r.jsx)("a",{href:"https://policies.google.com/privacy",target:"_blank",rel:"noreferrer",children:"Privacy Policy"})," and ",(0,r.jsx)("a",{href:"https://policies.google.com/terms",target:"_blank",rel:"noreferrer",children:"Terms of Service"}),"."]})]})})}),(0,r.jsx)("div",{className:"board-box board-news-foot","data-reveal-part":"news",style:b("newsFoot"),children:(0,r.jsx)("button",{type:"button",disabled:m||!x,onClick:v,children:f?"Thank you!":m?"Submittingâ¦":"Subscribe"})})]})}function eG(e){return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(eX,{s:eq,compose:eD,slots:e,className:"board-desktop hidden md:block"}),(0,r.jsx)(eX,{s:eH,compose:eV,slots:e,className:"board-mobile md:hidden"})]})}var eY=a(3018);let eQ=e=>{let{className:t="",style:a}=e;return(0,r.jsxs)("svg",{viewBox:"0 0 336 180",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:t,style:a,children:[(0,r.jsx)("path",{d:"M7 0L159 0Q166 0 166 7L166 28Q166 35 173 35L329 35Q336 35 336 42L336 173Q33
16 180 329 180L28 180Q21 180 21 173L21 57Q21 50 14 50L7 50Q0 50 0 43L0 7Q0 0 7 0Z",fill:"currentColor"}),(0,r.jsx)("circle",{cx:"14",cy:"14",r:"5.03",fill:"black"}),(0,r.jsx)("circle",{cx:"14",cy:"36",r:"5.03",fill:"black"}),(0,r.jsx)("circle",{cx:"152",cy:"14",r:"5.03",fill:"black"}),(0,r.jsx)("circle",{cx:"322",cy:"49",r:"5.03",fill:"black"}),(0,r.jsx)("circle",{cx:"322",cy:"166",r:"5.03",fill:"black"}),(0,r.jsx)("circle",{cx:"35",cy:"166",r:"5.03",fill:"black"})]})};var e$=a(5392);let eZ=(0,i.lazy)(()=>Promise.all([a.e(1831),a.e(9367),a.e(2145),a.e(9807)]).then(a.bind(a,9807))),eJ=(0,i.lazy)(()=>a.e(2835).then(a.bind(a,2835))),eK="#dbfc1a",e0=[{key:"ruby",label:"Ruby",swatch:"#DE1414",variantId:"44187581644842"},{key:"citrine",label:"Citrine",swatch:"#F2A50E",glow:"#FFD900",glowL:.85,variantId:"44187581710378"},{key:"sapphire",label:"Sapphire",swatch:"#1436C4",variantId:"44187581743146"},{key:"peridot",label:"Peridot",swatch:"#7FC63C",accent:eK,variantId:"44187581677610"}],e1={ruby:"/assets/puff/Red.png",sapphire:"/assets/puff/Blue.png",peridot:"/assets/puff/Green.png",citrine:"/assets/puff/Yellow.png"},e2={ruby:"/assets/puff/cutout/Red - Front.png",sapphire:"/assets/puff/cutout/Blue - Front.png",peridot:"/assets/puff/cutout/Green - Front.png",citrine:"/assets/puff/cutout/Yellow - Front.png"},e4={ruby:{side:"/assets/puff/red-side.png",video:"/assets/puff/red-spin.mp4"},sapphire:{side:"/assets/puff/blue-side.png",video:"/assets/puff/blue-spin.mp4"},peridot:{side:"/assets/puff/green-side.png",video:"/assets/puff/green-spin.mp4"},citrine:{side:"/assets/puff/yellow-side.png",video:"/assets/puff/yellow-spin.mp4"}},e5={ruby:"/assets/puff/wide-red.jpeg",sapphire:"/assets/puff/wide-blue.jpeg",peridot:"/assets/puff/wide-green.jpeg",citrine:"/assets/puff/wide-yellow.jpeg"},e3=[{src:"/media-kit/photos/PUFF_LEAH-GREEN-3.jpg",alt:"PUFF editorial with Leah in green"},{src:"/media-kit/photos/PUFF_CHERRY-BLOSSOM-3.jpg",alt:"PUFF cherry blossom editorial"},{src:"/media-kit/photos/PUFF_YULING-6.jpg",alt:"PUFF editorial with Yu Ling"},{src:"/media-kit/photos/PUFF_STUDIO-In-moputer-blue.jpg",alt:"PUFF studio image in moputer blue"}],e8="/media-kit/photos/PUFF_YULING-6.jpg";function e6(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:4e3;if("function"==typeof window.requestIdleCallback){let a=window.requestIdleCallback(e,{timeout:t});return()=>window.cancelIdleCallback(a)}let a=window.setTimeout(e,2e3);return()=>window.clearTimeout(a)}let e7=new Set([]),e9={cameraZ:-.46,screenX:-.008,screenY:-.026,screenZ:.011,screenScaleW:1.3,screenScaleH:1.15},te=["*","~","+","â¢","\xb7","\xb0","â¦","â§","â¹","â",":","#","\xa4","â"],tt=["@","#","$","%","&","*","~","+","!","?","^","/","\\","|","{","}","<",">","â¢","â¦","â§","â¹","â","â","â","â","â","â","\xa7","\xb6"],ta=e=>({animation:"fadeUp 0.7s cubic-bezier(0.22,1,0.36,1) ".concat(e,"s both")}),tn=e=>({animation:"fadeIn 0.6s ease-out ".concat(e,"s both")}),tr=["","ONE","TWO","THREE"],ti={type:"spring",stiffness:420,damping:38,mass:.8},ts={duration:.32,ease:[.22,1,.36,1]},tl={layout:ti,height:ts,opacity:ts,marginTop:ts,y:ts},to=[["Storage","128 GB"],["Interface","USB 3.1"],["Speed","Up to 100 MB/s"],["Weight","30g"],["Material","Metal"],["Gem","Photopolymer Resin"]],tc=[["1\xd7","Metal PUFF - 128GB"],["1\xd7","Box chain necklace"],["1\xd7","USB A adapter"],["1\xd7","Screwdriver"]];function td(e){let{theme:t="dark",layout:a,variant:n,initialGemColor:l="ruby"}=e;return a||n||((0,s.preload)("/assets/models/puff-jeff.opt.glb",{as:"fetch",crossOrigin:"anonymous"}),(0,s.preload)("/draco/draco_decoder.wasm",{as:"fetch",crossOrigin:"anonymous"})),(0,r.jsx)(i.Suspense,{children:(0,r.jsx)(tu,{theme:t,layout:a,variant:n,initialGemColor:l})})}function tu(e){var t,n,s,o,h,p,m,y,b,w,j,k,C,S,T,R,A,_,U;let{theme:O,layout:B,variant:q,initialGemColor:H}=e,z=(0,d.usePathname)(),W="video"===q||"photos"===q||"loop"===q,D=W||!!B||"/"===z||"/light"===z||"/alt"===z,V=D&&"light"===O,X=V&&("photos"===q||"loop"===q),[G,Y]=(0,i.useState)(!1),[Q,$]=(0,i.useState)(!0);(0,i.useEffect)(()=>{if("loop"!==q)return;let e=document.getElementById("choose-puff"),t=document.querySelector(".pv-hero"),a=()=>{Y(e?e.getBoundingClientRect().bottom<96:window.scrollY>.75*window.innerHeight);let a=null==t?void 0:t.querySelector(".pv-photo-hero");$(a?a.getBoundingClientRect().bottom>80:window.scrollY<80)};a(),window.addEventListener("scroll",a,{passive:!0}),window.addEventListener("resize",a);let n=new ResizeObserver(a);return t&&n.observe(t),()=>{window.removeEventListener("scroll",a),window.removeEventListener("resize",a),n.disconnect()}},[q]);let Z=D&&!B,K=Z&&("lead"===q||W),[ee,et]=(0,i.useState)([]),[ea,en]=(0,i.useState)(!1),[ei,em]=(0,i.useState)(!1),[ef,ex]=(0,i.useState)(""),ev=(0,i.useRef)(null),eg=(0,i.useCallback)(()=>
1{if(null!==ev.current)return ei?ee:ev.current;let e=[];try{e=function(e){try{let t=JSON.parse(null!=e?e:"[]");if(!Array.isArray(t))return[];let a=[];for(let e of t){if(!e||!I.includes(e.variantId)||!Number.isInteger(e.quantity)||e.quantity<1||a.some(t=>t.variantId===e.variantId))return[];a.push({variantId:e.variantId,quantity:e.quantity})}return 3>=L(a)?a:[]}catch(e){return[]}}(localStorage.getItem("noware-puff-cart"))}catch(e){}return ev.current=e,et(e),em(!0),e},[ee,ei]);(0,i.useEffect)(()=>{eg()},[eg]),(0,i.useEffect)(()=>{if(ei)try{localStorage.setItem("noware-puff-cart",JSON.stringify(ee))}catch(e){}},[ee,ei]);let[ey,eb]=(0,i.useState)(null);(0,i.useEffect)(()=>{eb(new URLSearchParams(window.location.search))},[]);let ew=eh.d&&(null==ey?void 0:ey.get("debug"))==="1",ej=eh.d&&((null==ey?void 0:ey.get("dev"))==="1"||(null==ey?void 0:ey.get("lighting"))==="1"),ek=(null==ey?void 0:ey.get("video"))==="1",eN=null!=(b=null==ey?void 0:ey.get("discount"))?b:null,[eC,eS]=(0,i.useState)(null);(0,i.useEffect)(()=>{if(!eN)return;let e=!1,t=new URLSearchParams({code:eN,variantId:e0[0].variantId});return fetch("/api/discount?".concat(t)).then(e=>e.json()).then(t=>{!e&&t.applicable&&eS(t.unitPrice)}).catch(()=>{}),()=>{e=!0}},[eN]);let[eE,eM]=(0,i.useState)(H),[eP,eI]=(0,i.useState)((e=>{var t,a;let n=e0.find(t=>t.key===e);return null!=(a=null!=(t=null==n?void 0:n.accent)?t:null==n?void 0:n.swatch)?a:eK})(H)),[eL,eF]=(0,i.useState)(null),eT=(0,i.useRef)(null),[eR,eA]=(0,i.useState)(!1);(0,i.useEffect)(()=>{let e=e=>{e.persisted&&eA(!1)},t=()=>{"visible"===document.visibilityState&&eA(!1)};return window.addEventListener("pageshow",e),document.addEventListener("visibilitychange",t),()=>{window.removeEventListener("pageshow",e),document.removeEventListener("visibilitychange",t)}},[]);let[e_,eU]=(0,i.useState)([]),eB=(0,i.useRef)(1),[eq,eH]=(0,i.useState)(!1),[ez,eW]=(0,i.useState)({...e9}),[eD,eV]=(0,i.useState)(!1),[eX,td]=(0,i.useState)([]),[tu,th]=(0,i.useState)(.01),tp=(0,i.useRef)(null),tm=(0,i.useCallback)(e=>{var t;if(e===eE)return;(0,u.u4)("puff_color_change",{from:eE,to:e}),(0,P.F)("color_select",{color:e}),eF(eE),eM(e);let a=e0.find(t=>t.key===e);a&&eI(null!=(t=a.accent)?t:a.swatch),eT.current&&clearTimeout(eT.current),eT.current=setTimeout(()=>eF(null),700)},[eE]),tf=e0.find(e=>e.key===eE),tx=null!=(w=null==tf?void 0:tf.glow)?w:eP,tv=null!=(j=null==tf?void 0:tf.glowL)?j:.6,[tg,ty]=(0,i.useState)(0),[tb,tw]=(0,i.useState)("hidden"),[tj,tk]=(0,i.useState)(3850),[tN,tC]=(0,i.useState)(void 0),tS=(0,i.useRef)(null),[tE,tM]=(0,i.useState)(null),[tP,tI]=(0,i.useState)(K),[tL,tF]=(0,i.useState)(!1);(0,i.useEffect)(()=>{if(tP||B)return;let e=setTimeout(()=>{tP||tF(!0)},1e4);return()=>clearTimeout(e)},[tP,B]);let[tT,tR]=(0,i.useState)(!0),[tA,t_]=(0,i.useState)(0),[tU,tO]=(0,i.useState)(0),[tB,tq]=(0,i.useState)([]),[tH,tz]=(0,i.useState)([]),[tW,tD]=(0,i.useState)(!1),tV=(0,i.useRef)(0),tX=(0,i.useRef)(null),tG=ew?{...ez,backingPoints:eX.length>=3?eX:void 0,backingZ:tu}:void 0;(0,i.useEffect)(()=>{if(!ew)return;let e=tp.current;if(!e)return;let t=e.getContext("2d");t.clearRect(0,0,200,200),t.fillStyle="#111",t.fillRect(0,0,200,200),t.strokeStyle="#222",t.lineWidth=.5;for(let e=0;e<=10;e++){let a=e/10*200;t.beginPath(),t.moveTo(a,0),t.lineTo(a,200),t.stroke(),t.beginPath(),t.moveTo(0,a),t.lineTo(200,a),t.stroke()}if(t.strokeStyle="#444",t.lineWidth=1,t.beginPath(),t.moveTo(100,0),t.lineTo(100,200),t.stroke(),t.beginPath(),t.moveTo(0,100),t.lineTo(200,100),t.stroke(),0===eX.length)return;let a=eX.map(e=>({cx:e.x/.1*200+100,cy:-e.y/.1*200+100}));if(a.length>=3){t.fillStyle="rgba(219, 252, 26, 0.12)",t.beginPath(),t.moveTo(a[0].cx,a[0].cy);for(let e=1;e<a.length;e++)t.lineTo(a[e].cx,a[e].cy);t.closePath(),t.fill()}t.strokeStyle="#dbfc1a",t.lineWidth=1.5,t.beginPath(),t.moveTo(a[0].cx,a[0].cy);for(let e=1;e<a.length;e++)t.lineTo(a[e].cx,a[e].cy);a.length>=3&&t.closePath(),t.stroke();for(let e=0;e<a.length;e++)t.fillStyle=0===e?"#fff":"#dbfc1a",t.beginPath(),t.arc(a[e].cx,a[e].cy,3,0,2*Math.PI),t.fill()},[eX,ew]),(0,i.useEffect)(()=>{if(W)return;
1let e=[...Object.values(e1).filter(Boolean),...ek?Object.values(e4).map(e=>e.side):[],...D?[]:Object.values(e5).filter(Boolean),...e3.map(e=>e.src),...D?[]:[e8]];return e6(()=>{e.forEach(e=>{new window.Image().src=e})})},[ek,D,W]),(0,i.useEffect)(()=>{let e=!1;return N(e0[0].variantId).then(t=>{if(e||(tM(t),W))return;let n=[...Object.values(t.variantImages),...t.productImages.map(e=>e.url)];e6(()=>{a.e(2835).then(a.bind(a,2835)).then(e=>{let{preloadImages:t}=e;return t(n)})})}).catch(e=>{console.error("[gallery] failed to load product images:",e)}),()=>{e=!0}},[W]);let tY=(0,i.useMemo)(()=>{let e=[];if(!tE)return e;e.push(...e3.map(e=>({type:"image",src:e.src,alt:e.alt})));let t=e0.find(e=>e.key===eE),a=t?tE.variantImages[t.variantId]:void 0;a&&e.push({type:"image",src:a,alt:"PUFF â ".concat(t.label)});let n=new Set(Object.values(tE.variantImages));for(let t of tE.productImages)n.has(t.url)||e.push({type:"image",src:t.url,alt:t.altText||"PUFF"});return e},[eE,tE]);(0,i.useEffect)(()=>{tY.length>0&&tg>=tY.length&&ty(0)},[tg,tY.length]);let tQ=(0,i.useCallback)(e=>{if(0===tY.length||e===tg||"crossfade"===tb)return;let t=tY[tg],a=tY[e];(null==t?void 0:t.type)==="image"&&(null==a?void 0:a.type)==="image"&&("visible"===tb||"in"===tb)?(tC(t.src),ty(e),tk(800),tw("crossfade")):(null==t?void 0:t.type)==="image"&&("visible"===tb||"in"===tb)?(tS.current=e,tk(400),tw("out")):"out"!==tb&&(ty(e),(null==a?void 0:a.type)==="image"?(tk(200),tw("in")):tw("hidden"))},[tg,tY,tb]),t$=(0,i.useCallback)(()=>{if("crossfade"===tb)tC(void 0),tw("visible");else if("in"===tb)tw("visible");else if("out"===tb){let e=tS.current;if(tS.current=null,null!==e){ty(e);let t=tY[e];(null==t?void 0:t.type)==="image"?(tk(400),tw("in")):tw("hidden")}else tw("hidden")}},[tb,tY]),tZ=(0,i.useCallback)(()=>{tY.length<=1||((0,u.u4)("puff_gallery_tap",{from:tg,to:(tg+1)%tY.length}),tQ((tg+1)%tY.length))},[tg,tY.length,tQ]);(0,i.useEffect)(()=>{if("visible"!==tb||tY.length<=1)return;let e=setTimeout(()=>{tQ((tg+1)%tY.length)},5e3);return()=>clearTimeout(e)},[tb,tg,tY.length,tQ]);let tJ=(0,i.useCallback)(()=>{tT&&((0,u.u4)("puff_hero_drag",{action:"dismiss_hint"}),tq(Array.from({length:20},(e,t)=>{let a=2*Math.PI*t/20+(Math.random()-.5)*.6,n=30+60*Math.random();return{id:t,char:te[Math.floor(Math.random()*te.length)],dx:Math.cos(a)*n,dy:Math.sin(a)*n,delay:100*Math.random()}})),tR(!1),setTimeout(()=>tq([]),900))},[tT]),tK=(0,i.useCallback)(e=>{var t;if(e.preventDefault(),tW)return;(0,u.u4)("puff_logo_tap");let a=null==(t=tX.current)?void 0:t.getBoundingClientRect(),n=a?e.clientX-a.left:0,r=a?e.clientY-a.top:0,i=35+Math.floor(15*Math.random());tz(Array.from({length:i},(e,t)=>{let a=2*Math.PI*t/i+(Math.random()-.5)*.8,s=60+140*Math.random(),l=40+80*Math.random();return{id:tV.current++,char:tt[Math.floor(Math.random()*tt.length)],ox:n,oy:r,dx:Math.cos(a)*s,dy:Math.sin(a)*s+l,rotation:(Math.random()-.5)*720,delay:150*Math.random(),size:10+14*Math.random()}})),tD(!0),tO(e=>e+1),setTimeout(()=>tz([]),1200),setTimeout(()=>tD(!1),5e3)},[tW]),t0=e0.find(e=>e.key===eE),t1=t0?null==tE?void 0:tE.variantPrices[t0.variantId]:void 0,t2=null!=(k=null==t1?void 0:t1.amount)?k:179,t4=null!=(C=null==t1?void 0:t1.compareAtAmount)?C:null,t5=null!=eC?"$".concat(Math.round(eC)):"$".concat(Math.round(t2)),t3=null!=eC||null!=t4&&t4>t2,t8=null!=eC?Math.round(t2):null!=t4?Math.round(t4):null,t6=!!t0&&(e7.has(t0.key)||(null==tE?void 0:tE.variantAvailability[t0.variantId])===!1),t7=(0,i.useCallback)(e=>{let t=e0.find(t=>t.variantId===e);return!!(t&&e7.has(t.key))||(null==tE?void 0:tE.variantAvailability[e])===!1},[tE]),t9=!D&&e_.length>0,ae=L(ee),at=D&&ae>=3,aa=D&&ae>0&&!at,an=Math.round(85*t2)/100,ar=new Intl.NumberFormat("en-US",{style:"currency",currency:null!=(S=null==t1?void 0:t1.currencyCode)?S:"USD",minimumFractionDigits:2}).format(an),ai=(0,i.useMemo)(()=>D?[eE]:[eE,...e_.map(e=>e.color)],[eE,e_,D]),as=ai.length,al=ai.reduce((e,t)=>{var a;let n=e0.find(e=>e.key===t),r=n?null==tE||null==(a=tE.variantPrices[n.variantId])?void 0:a.amount:void 0;return e+(null!=r?r:179)},0),ao=as>=2?Math.round(15*al/100):0,ac=Math.round(al)-ao,ad=ai.some(e=>{let t=e0.find(t=>t.key===e);return!!t&&t7(t.variantId)}),au=(0,i.useCallback)(()=>{var e;1},[!1,ai,as,eE,t7]),ah=(0,i.useCallback)(e=>{(0,u.u4)("puff_remove_another",{count:as-1}),(0,P.F)("quantity_change",{quantity:as-1}),eU(t=>t.filter(t=>t.id!==e))},[as]),ap=(0,i.useCallback)((e,t)=>{eU(a=>a.map(a=>a.id===e?{...a,color:t}:a))},[]),am=eR?"REDIRECTING...":ad?"SOLD OUT COLOR":D?at?"VIEW CART":"ADD TO CART":"BUY NOW",af="BUY ".concat(null!=(T=tr[as+1])?T:as+1),ax=(0,i.useRef)({}),av=(0,i.useRef)(new Set),ag=(0,i.useCallback)((e,t)=>{!(!ek||e!==eE||!t||t.paused||t.readyState<2||av.current.has(e))&&(0,P.F)("video_play",{video_id:"puff_spin_".concat(e),autoplay:t.autoplay,placement:"puff_product_detail"})&&av.current.add(e)},[eE,ek]);(0,i.useEffect)(()=>{let e=()=>ag(eE,ax.current[eE]);return e(),document.addEventListener(g.YE,e),()=>document.removeEventListener(g.YE,e)},[eE,ag]);let ay=(0,i.useRef)(new Set);(0,i.useEffect)(()=>{var e;t0&&(ay.current.has(t0.variantId)||(ay.current.add(t0.variantId),(0,M.gO)({variantId:t0.variantId,name:"PUFF â ".concat(t0.label),value:null!=eC?eC:t2,currency:null!=(e=null==t1?void 0:t1.currencyCode)?e:"USD"})))},[t0,t2,eC,t1]);let ab=(0,i.useCallback)(async()=>{var e,t,a,n;if(eR||ad)return;let r=new Map;for(let t of ai){let a=e0.find(e=>e.key===t);if(!a)continue;let n=null!=(e=r.get(a.variantId))?e:{label:a.label,quantity:0};n.quantity+=1,r.set(a.variantId,n)}if(0!==r.size){(0,P.F)("hero_cta_click",{placement:"puff_buy_now",quantity:as}),eA(!0);try{(0,u.u4)("puff_buy_now_click",{color:eE,colors:ai.join(","),quantity:as,discount:null!=eN?eN:"none"});let e=null!=(t=null==t1?void 0:t1.currencyCode)?t:"USD";for(let[t,{label:i,quantity:s}]of r){let r=null!=(n=null==tE||null==(a=tE.variantPrices[t])?void 0:a.amount)?n:179;(0,M.Ml)({variantId:t,name:"PUFF â ".concat(i),value:t9?r*s:null!=eC?eC:t2,currency:e,quantity:s})}let i=await E([...r].map(e=>{let[t,{quantity:a}]=e;return{variantId:t,quantity:a}}),null!=eN?eN:void 0);(0,P.F)("checkout_start",{quantity:as,color:eE}),window.location.href=i}catch(e){(0,P.F)("checkout_error",{placement:"puff_buy_now",color:eE,quantity:as}),eA(!1)}}},[eR,eE,ai,as,ad,t9,eN,t2,eC,t1,tE]),aw=()=>{let e=eg(),t=L(e)>=3;if(!t&&ad)return;if((0,P.F)("hero_cta_click",{placement:"puff_add_to_cart",quantity:as}),t){ex(""),en(!0);return}let a=ai.map(e=>({variantId:e0.find(t=>t.key===e).variantId,quantity:1})),n=function(e,t){var a;if(L(e)+L(t)>3)return null;let n=new Map(e.map(e=>[e.variantId,e.quantity]));for(let e of t)n.set(e.variantId,(null!=(a=n.get(e.variantId))?a:0)+e.quantity);return[...n].map(e=>
1{let[t,a]=e;return{variantId:t,quantity:a}})}(e,a);if(ex(n?"":"Your cart holds up to 3 PUFFs. Adjust the quantities below to make room."),n){for(let e of(et(n),a)){var r,i,s,l;let t=e0.find(t=>t.variantId===e.variantId);(0,M.Ml)({variantId:e.variantId,name:"PUFF â ".concat(t.label),value:null!=(s=null==tE||null==(r=tE.variantPrices[e.variantId])?void 0:r.amount)?s:179,currency:null!=(l=null==tE||null==(i=tE.variantPrices[e.variantId])?void 0:i.currencyCode)?l:"USD",quantity:e.quantity})}(0,u.u4)("puff_add_to_cart",{quantity:as,colors:ai.join(",")})}en(!0)},aj=(0,i.useRef)(!1);(0,i.useEffect)(()=>{if(tP||B){aj.current=!0;return}let e=setTimeout(()=>{aj.current||(0,u.u4)("puff_hero_load_slow",{waited_seconds:10})},1e4);return()=>clearTimeout(e)},[tP,B]);let ak=(0,i.useRef)(!1);(0,i.useEffect)(()=>{if(!ey||ak.current)return;ak.current=!0;let e=ey.get("utm_source"),t=ey.get("utm_medium"),a=ey.get("utm_campaign");(0,u.u4)("puff_page_view",{referrer:document.referrer||"direct",has_discount:!!eN,...e&&{utm_source:e},...t&&{utm_medium:t},...a&&{utm_campaign:a}})},[ey,eN]);let aN=(0,i.useRef)(new Set);(0,i.useEffect)(()=>{let e=[25,50,75,100],t=()=>{let t=window.scrollY,a=document.documentElement.scrollHeight-window.innerHeight;if(a<=0)return;let n=Math.round(t/a*100);for(let t of e)n>=t&&!aN.current.has(t)&&(aN.current.add(t),(0,u.u4)("puff_scroll_depth",{percent:t}),75===t&&(0,P.F)("scroll_75"))};return window.addEventListener("scroll",t,{passive:!0}),()=>window.removeEventListener("scroll",t)},[]),(0,i.useEffect)(()=>{let e=[30,60,120].map(e=>setTimeout(()=>(0,u.u4)("puff_engaged",{seconds:e}),1e3*e));return()=>e.forEach(clearTimeout)},[]);let aC=(0,i.useCallback)(()=>{tY.length>0&&"hidden"===tb&&(ty(0),tk(200),tw("in"))},[tY,tb]);(0,i.useEffect)(()=>{tY.length>0&&"hidden"===tb&&aC()},[tY,tb,aC]);let aS=(0,r.jsx)(f,{reducedMotion:"user",children:(0,r.jsxs)(eu,{enabled:D,showFloatingLink:!X,children:[(0,r.jsx)(x.P.div,{id:"home-color-options",layout:!0,transition:ti,className:"w-full mx-auto max-w-[500px] mt-8 pointer-events-auto",children:(0,r.jsxs)("div",{className:"flex items-center justify-between px-margin gap-3 py-[2px]",style:X?void 0:ta(.6),children:[(0,r.jsxs)("div",{className:"flex items-center gap-[10px] pl-4",children:[(0,r.jsx)(v.N,{initial:!1,children:t9&&(0,r.jsx)(x.P.span,{initial:{width:0,opacity:0,marginRight:-10},animate:{width:22,opacity:1,marginRight:0},exit:{width:0,opacity:0,marginRight:-10},transition:ts,className:"font-mschn text-white/60 text-[12px] tracking-[1.2px] leading-none overflow-hidden whitespace-nowrap",children:"01"},"label-01")}),e0.map(e=>{let t=t7(e.variantId);return(0,r.jsxs)("button",{"aria-label":"".concat(e.label).concat(t?" (Sold Out)":""),"aria-pressed":eE===e.key,onClick:()=>{t&&(0,u.u4)("puff_sold_out_tap",{color:e.key}),tm(e.key)},className:"relative w-[30px] h-[30px] rounded-full transition-transform duration-200 hover:scale-110 focus:outline-none",style:{backgroundColor:e.swatch,opacity:t&&eE!==e.key?.45:1},children:[eE===e.key&&(0,r.jsx)(x.P.span,{layoutId:"puff-ring-01",transition:ti,className:"absolute inset-[-4px] rounded-full border-[2px] border-white pointer-events-none"}),t&&(0,r.jsxs)("span",{className:"absolute inset-0 pointer-events-none flex items-center justify-center overflow-hidden rounded-full",children:[eE===e.key&&(0,r.jsx)("span",{className:"absolute block w-[150%] h-[6px] bg-black rotate-[-45deg]"}),(0,r.jsx)("span",{className:"relative block w-[150%] h-[2px] rotate-[-45deg] ".concat(eE===e.key?"bg-white":"bg-black")})]})]},e.key)})]}),(0,r.jsx)("div",{className:"h-[34px] rounded-full flex items-center justify-center px-5 border-2 border-white ml-2 mr-3",children:(0,r.jsx)("span",{className:"font-twk text-white text-[16px] leading-[1.1]",children:"128GB"})})]})}),(0,r.jsx)(v.N,{initial:!1,children:!D&&e_.map((e,t)=>(0,r.jsx)(x.P.div,{layout:!0,initial:{opacity:0,height:0,marginTop:0,y:-10},animate:{opacity:1,height:"auto",marginTop:8,y:0},exit:{opacity:0,height:0,marginTop:0,y:-10},transition:tl,className:"w-full mx-auto max-w-[500px] pointer-events-auto overflow-hidden",children:(0,r.jsxs)("div",{className:"flex items-center justify-between px-margin gap-3 py-[2px]",children:[(0,r.jsxs)("div",{className:"flex items-center gap-[10px] pl-4",children:[(0,r.jsx)("span",{className:"font-mschn text-white/60 text-[12px] tracking-[1.2px] leading-none w-[22px]",children:String(t+2).padStart(2,"0")}),e0.map(a=>{let n=t7(a.variantId),i=e.color===a.key;return(0,r.jsxs)("button",{"aria-label":"PUFF ".concat(t+2,": ").concat(a.label).concat(n?" (Sold Out)":""),disabled:n&&!i,onClick:()=>ap(e.id,a.key),className:"relative w-[30px] h-[30px] rounded-full transition-transform duration-200 hover:scale-110 focus:outline-none disabled:cursor-not-allowed disabled:hover:scale-100",style:{backgroundColor:a.swatch,opacity:n&&!i?.45:1},children:[i&&(0,r.jsx)(x.P.span,{layoutId:"puff-ring-".concat(e.id),transition:ti,className:"absolute inset-[-4px] rounded-full border-[2px] border-white pointer-events-none"}),n&&(0,r.jsxs)("span",{className:"absolute inset-0 pointer-events-none flex items-center justify-center overflow-hidden rounded-full",children:[i&&(0,r.jsx)("span",{className:"absolute block w-[150%] h-[6px] bg-black rotate-[-45deg]"}),(0,r.jsx)("span",{className:"relative block w-[150%] h-[2px] rotate-[-45deg] ".concat(i?"bg-white":"bg-black")})]})]},a.key)})]}),(0,r.jsx)(x.P.button,{"aria-label":"Remove PUFF ".concat(t+2),onClick:()=>ah(e.id),whileHover:{scale:1.08},whileTap:{scale:.92},className:"h-[34px] w-[34px] rounded-full flex items-center justify-center border-2 border-white/70 hover:border-white hover:bg-white/10 ml-2 mr-3 transition-colors",children:(0,r.jsx)("svg",{width:"14",height:"14",viewBox:"0 0 14 14",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",className:"block text-white","aria-hidden":"true",children:(0,r.jsx)("path",{d:"M2 2l10 10M12 2L2 12"})})})]})},e.id))}),(0,r.jsx)(x.P.div,{layout:!0,transition:ti,className:"w-full max-w-[500px] mx-auto mt-2 mb-4 md:mt-5 md:mb-8 pointer-events-auto",children:(0,r.jsxs)("div",{className:"flex px-margin flex-col items-center gap-3",style:X?void 0:ta(.75),children:[(D?["buy"]:t9?["summary","select","buy"]:["buy","select"]).map(e=>{if("summary"===e)return(0,r.jsx)(v.N,{initial:!1,children:t9&&(0,r.jsx)(x.P.p,{layout:!0,initial:{opacity:0,height:0}
1,animate:{opacity:1,height:"auto"},exit:{opacity:0,height:0},transition:tl,className:"w-full font-mschn text-[#dbfc1a] text-[12px] tracking-[1.2px] leading-[1.1] text-center overflow-hidden",children:(0,r.jsxs)(x.P.span,{initial:{opacity:0,y:6},animate:{opacity:1,y:0},transition:ts,className:"block pt-1",children:[as," PUFFS \xb7 ",15,"% OFF \xb7 YOU SAVE $",ao]},"".concat(as,"-").concat(ao))},"summary-line")},"summary");if("select"===e){let e=!1;return(0,r.jsx)(v.N,{initial:!1,children:e&&(0,r.jsxs)(x.P.button,{layout:!0,initial:{opacity:0,height:0},animate:{opacity:1,height:50},exit:{opacity:0,height:0},whileHover:{scale:1.02},whileTap:{scale:.98},transition:tl,onClick:au,className:"w-full flex items-center justify-between rounded-full border-2 border-white/30 hover:border-white/60 hover:bg-white/5 pl-5 pr-[18px] overflow-hidden transition-colors duration-200",children:[(0,r.jsx)("span",{className:"relative h-[20px] overflow-hidden text-left",children:(0,r.jsx)(v.N,{initial:!1,mode:"popLayout",children:(0,r.jsx)(x.P.span,{initial:{y:16,opacity:0},animate:{y:0,opacity:1},exit:{y:-16,opacity:0},transition:ts,className:"block font-mschn text-white text-[18px] tracking-[1.8px] leading-[20px] whitespace-nowrap",children:af},af)})}),(0,r.jsxs)("span",{className:"flex items-center gap-4",children:[(0,r.jsxs)("span",{className:"font-mschn italic text-[#dbfc1a] text-[18px] tracking-[1.8px] leading-[1.1]",children:[15,"% OFF"]}),(0,r.jsx)("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",className:"block text-white","aria-hidden":"true",children:(0,r.jsx)("path",{d:"M9 1.5v15M1.5 9h15"})})]})]},"select-another")},"select")}if(t6&&!t9)return(0,r.jsx)(x.P.div,{layout:!0,transition:ti,className:"w-full flex items-center bg-[#2a2a2a] rounded-full h-[50px] shadow-[0_0_3px_rgba(0,0,0,0.25)] px-6",children:(0,r.jsx)("span",{className:"font-mschn text-white/50 text-[18px] tracking-[1.8px] leading-[1.1] flex-1",children:"SOLD OUT"})},"buy");let t=aa?t2:t9?Math.round(al):t3&&null!=t8?t8:null,a=aa?ar:t9?"$".concat(ac):t5,n=eR||ad;return(0,r.jsxs)(x.P.button,{layout:!0,transition:ti,onClick:D?aw:ab,type:"button",disabled:n,"data-cart-restored":ei,whileHover:n?void 0:{scale:1.02},whileTap:n?void 0:{scale:.98},className:"home-purchase-cta group w-full flex items-center bg-[#dbfc1a] hover:bg-[#e8ff5a] hover:shadow-[0_0_24px_rgba(219,252,26,0.45)] active:bg-[#c8e800] rounded-full h-[50px] shadow-[0_0_3px_rgba(0,0,0,0.25)] pl-5 pr-[3px] disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:shadow-none transition-[background-color,box-shadow,opacity] duration-200 ease-out",children:[(0,r.jsx)("span",{className:"relative flex-1 h-[20px] overflow-hidden text-left",children:(0,r.jsx)(v.N,{initial:!1,mode:"popLayout",children:(0,r.jsx)(x.P.span,{initial:{y:16,opacity:0},animate:{y:0,opacity:1},exit:{y:-16,opacity:0},transition:ts,className:"block font-mschn text-black text-[18px] tracking-[1.8px] leading-[20px] whitespace-nowrap",children:am},am)})}),!at&&(0,r.jsx)(x.P.div,{layout:!0,transition:ti,className:"home-purchase-price relative flex-shrink-0 bg-black rounded-full h-[44px] px-5 flex items-center justify-center shadow-[0_0_3px_rgba(0,0,0,0.25)] overflow-hidden",children:(0,r.jsx)(v.N,{initial:!1,mode:"popLayout",children:(0,r.jsxs)(x.P.span,{initial:{y:18,opacity:0},animate:{y:0,opacity:1},exit:{y:-18,opacity:0},transition:ts,className:"font-twk text-white flex items-center gap-1 whitespace-nowrap",children:[null!=t&&(0,r.jsxs)("del",{className:"opacity-50 text-[14px] leading-none",children:["$",t]}),(0,r.jsx)("span",{className:"text-[20px] leading-none",children:a})]},"".concat(null!=t?t:"none","-").concat(a))})})]},"buy")}),(0,r.jsxs)(x.P.div,{layout:!0,transition:ti,className:"home-purchase-fineprint w-full px-1",children:[(0,r.jsx)(c(),{href:"/return-policy",className:"home-returns-link font-twk text-white opacity-[0.45] hover:opacity-100 text-[11px] tracking-[0.6px] underline underline-offset-4 transition-opacity",children:"14-DAY RETURNS"}),(0,r.jsx)("span",{className:"home-free-shipping font-twk text-[11px] tracking-[0.6px]",role:aa?"status":void 0,children:aa?"BUY ".concat(tr[ae+1],", SAVE ").concat(15,"%!"):"FREE US SHIPPING!"}),(0,r.jsx)("span",{className:"font-twk text-white text-[11px] tracking-[0.6px]",children:"SHIPS 2ND WEEK IN OCTOBER"})]})]})})]})}),aE=D?(0,r.jsx)("section",{className:"home-editorial px-margin md:pb-0 max-w-[600px] md:max-w-[1400px] mx-auto overflow-hidden",children:(0,r.jsxs)("div",{className:"home-editorial-frame relative w-full my-[-5%] aspect-[0.85] md:aspect-[1.25] bg-black rounded-lg overflow-hidden cursor-pointer",onClick:tZ,children:[tY.length>0&&(null==(t=tY[tg])?void 0:t.type)==="image"&&(0,r.jsx)(i.Suspense,{fallback:null,children:(0,r.jsx)(eJ,{wideTwinkles:!0,theme:V?"light":"dark",src:tY[tg].src,prevSrc:tN,alt:tY[tg].alt,state:tb,duration:tj,onAnimationEnd:t$})}),0===tY.length&&(0,r.jsx)("div",{className:"absolute inset-0 bottom-[
110%] flex items-center justify-center",children:(0,r.jsx)("svg",{viewBox:"0 0 202 160",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"w-[40px] h-auto",style:{animation:"snailPulse 1.6s ease-in-out infinite"},children:(0,r.jsx)("path",{d:"M186.385 1.13253C181.542 2.64057 178.344 7.29583 178.344 12.382L178.41 69.1255C178.41 73.2375 175.315 76.8343 171.219 77.0966C166.731 77.387 163 73.8276 163.01 69.3878L163.057 27.6029C163.057 25.383 164.048 23.2474 165.834 21.9454C169.181 19.51 171.201 15.3606 170.602 10.7709C169.892 5.32882 165.684 1.21683 160.242 0.607996C153.108 -0.188175 147.068 5.38502 147.068 12.3726C147.068 12.6255 146.684 114.142 146.684 114.142C146.684 118.376 143.449 122.057 139.242 122.188C135.034 122.319 131.341 118.816 131.341 114.47V46.6173C131.387 45.1093 131.247 36.9321 122.991 31.4058C118.718 28.5489 113.753 28.2492 108.648 23.1537C103.795 18.3111 103.842 13.9368 100.41 8.78514C94.3794 -0.272476 84.9731 0.439395 84.9731 0.439395H46.7682C46.7682 0.439395 37.4087 -0.356776 31.3217 8.78514C28.4699 13.0657 28.1707 18.0395 23.0842 23.1537C18.2501 28.015 13.8836 27.9682 8.74098 31.4058C-0.300652 37.4473 0.400612 46.8702 0.419312 46.8702V61.9881C0.643717 64.9292 1.93404 71.2705 8.71293 75.7946C12.9766 78.6421 17.9322 78.9418 23.0187 84.028C27.8621 88.8612 27.8154 93.2261 31.2375 98.3591C37.2591 107.398 46.6373 106.686 46.6467 106.686H65.9641C74.4167 106.686 81.2798 99.7641 81.2798 91.2591V58.1758C81.2798 52.6401 76.801 48.1628 71.2844 48.1628H61.074C56.3241 48.1628 52.4718 52.0219 52.4718 56.7802V68.9476C52.4718 73.0596 49.3769 76.647 45.2815 76.9186C40.7934 77.209 37.0627 73.6497 37.0627 69.2098V56.9207C37.0627 43.5731 47.8715 32.7452 61.1955 32.7452H71.0974C85.1133 32.7452 96.4832 44.1258 96.4925 58.1758L96.5112 93.1886C96.5112 108.681 84.2344 121.448 68.9375 122.188C68.9375 122.188 51.2563 122.207 47.2825 122.207C47.2825 122.207 43.4021 122.179 39.8023 123.2C33.9771 124.848 28.7597 128.258 25.2534 133.241C24.5615 134.224 23.7387 135.217 22.7289 136.219C17.9042 140.968 12.8083 143.525 8.15192 143.553C3.69188 143.553 0.400612 147.141 0.400612 151.562C0.400612 155.983 3.98174 159.58 8.40438 159.58H103.739L147.75 159.561C149.143 159.561 158.213 159.589 163.505 151.225C166.245 146.888 166.647 141.989 171.724 136.894C176.549 132.042 180.906 132.089 186.03 128.66C194.043 123.312 194.38 115.313 194.361 113.58V27.6029C194.361 25.3923 195.333 23.238 197.129 21.9454C200.083 19.8004 202 16.316 202 12.3726C202 4.60758 194.529 -1.41522 186.395 1.12317L186.385 1.13253Z",fill:"rgba(255,255,255,0.10)"})})}),tY.length>1&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("button",{"aria-label":"Previous",onClick:e=>{e.stopPropagation(),tQ((tg-1+tY.length)%tY.length)},className:"absolute left-0 top-1/2 -translate-y-1/2 z-20 w-12 h-24 flex items-center justify-center text-white/30 hover:text-white/60 transition-colors",style:tn(.5),children:(0,r.jsx)("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:(0,r.jsx)("path",{d:"M10 3L5 8L10 13",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}),(0,r.jsx)("button",{"aria-label":"Next",onClick:e=>{e.stopPropagation(),tQ((tg+1)%tY.length)},className:"absolute right-0 top-1/2 -translate-y-1/2 z-20 w-12 h-24 flex items-center justify-center text-white/30 hover:text-white/60 transition-colors",style:tn(.5),children:(0,r.jsx)("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:(0,r.jsx)("path",{d:"M6 3L11 8L6 13",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})})]})]})}):null,aM="loop"===q&&!G&&0===ae;return(0,r.jsxs)("main",{className:"".concat(V?"puff-home puff-home-light":D?"puff-home bg-black":"bg-black").concat(W?" puff-photo-home":"").concat("loop"===q?" puff-device-loop-home":"").concat(B?" exploration exploration-layout-".concat(B):""),"data-header-scrolled":"loop"===q?G:void 0,"data-header-over-media":"loop"===q?Q:void 0,children:[(0,r.jsxs)("h1",{className:"sr-only",children:[X?"Puff":"PUFF"," â a wearable designer flash drive by Noware"]}),(0,r.jsx)("style",{children:"\n @property --glow-color {\n syntax: '<color>';\n inherits: false;\n initial-value: #BC050C;\n }\n @keyframes grainShift {\n 0%, 100% { transform: translate(0, 0); }\n 12.5% { transform: translate(-2%, -3%); }\n 25% { transform: translate(3%, -1%); }\n 37.5% { transform: translate(-1%, 3%); }\n 50% { transform: translate(2%, 2%); }\n 62.5% { transform: translate(-3%, 1%); }\n 75% { transform: translate(1%, -2%); }\n 87.5% { transform: translate(-2%, 2%); }\n }\n @media (prefers-reduced-motion: reduce) {\n .hero-grain { animation: none !important; }\n }\n @keyframes snailPulse {\n 0%, 100% { opacity: 0.4; transform: scale(1); }\n 50% { opacity: 1; transform: scale(1.08); }\n }\n @keyframes asciiConfetti {\n 0% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }\n 20% { opacity: 1; }\n 100% { transform: translate(var(--cdx), var(--cdy)) rotate(var(--cr)) scale(0.3); opacity: 0; }\n }\n @keyframes fadeUp {\n from { opacity: 0; transform: translateY(18px); }\n to { opacity: 1; transform: translateY(0); }\n }\n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n "}),ew&&(0,r.jsxs)("div",{className:"fixed top-2 right-2 z-[9999] font-mono text-[11px]",children:[(0,r.jsx)("button",{onClick:()=>eH(e=>!e),className:"bg-black/80 text-white border border-white/20 px-2 py-1 rounded text-[11px] mb-1 block ml-auto",children:eq?"Hide Debug":"Debug"}),eq&&(0,r.jsxs)("div",{className:"bg-black/90 border border-white/20 rounded-lg p-3 w-[260px] space-y-2 backdrop-blur-sm max-h-[90vh] overflow-y-auto",children:[[{key:"cameraZ",label:"Camera Z",min:-3,max:0,step:.
101},{key:"screenX",label:"Screen X",min:-.1,max:.1,step:.001},{key:"screenY",label:"Screen Y",min:-.1,max:.1,step:.001},{key:"screenZ",label:"Screen Z",min:-.1,max:.1,step:.001},{key:"screenScaleW",label:"Screen W",min:.1,max:4,step:.05},{key:"screenScaleH",label:"Screen H",min:.1,max:4,step:.05}].map(e=>{let{key:t,label:a,min:n,max:i,step:s}=e;return(0,r.jsxs)("div",{className:"flex items-center gap-2",children:[(0,r.jsx)("span",{className:"text-white/60 w-[68px] shrink-0",children:a}),(0,r.jsx)("input",{type:"range",min:n,max:i,step:s,value:ez[t],onChange:e=>{let a;return a=parseFloat(e.target.value),eW(e=>({...e,[t]:a}))},className:"flex-1 h-1 accent-[#dbfc1a]"}),(0,r.jsx)("span",{className:"text-white w-[52px] text-right tabular-nums",children:ez[t].toFixed(3)})]},t)}),(0,r.jsxs)("div",{className:"border-t border-white/10 pt-2 mt-1",children:[(0,r.jsxs)("div",{className:"text-white/60 mb-1",children:["Backing Plane (",eX.length," pts)"]}),(0,r.jsx)("canvas",{ref:tp,width:200,height:200,onClick:e=>{let t=e.currentTarget.getBoundingClientRect(),a=200/t.width,n=200/t.height,r=(e.clientX-t.left)*a,i=(e.clientY-t.top)*n;td(e=>[...e,{x:(r-100)/200*.1,y:-((i-100)/200*2*.05)}])},className:"w-full aspect-square rounded cursor-crosshair border border-white/10"}),(0,r.jsxs)("div",{className:"flex items-center gap-2 mt-2",children:[(0,r.jsx)("span",{className:"text-white/60 w-[68px] shrink-0",children:"Back Z"}),(0,r.jsx)("input",{type:"range",min:-.05,max:.1,step:.001,value:tu,onChange:e=>th(parseFloat(e.target.value)),className:"flex-1 h-1 accent-[#dbfc1a]"}),(0,r.jsx)("span",{className:"text-white w-[52px] text-right tabular-nums",children:tu.toFixed(3)})]}),(0,r.jsxs)("div",{className:"flex gap-2 mt-2",children:[(0,r.jsx)("button",{onClick:()=>td(e=>e.slice(0,-1)),disabled:0===eX.length,className:"bg-white/10 text-white rounded px-2 py-1 text-[11px] disabled:opacity-30",children:"Undo"}),(0,r.jsx)("button",{onClick:()=>{td([])},className:"bg-white/10 text-white rounded px-2 py-1 text-[11px]",children:"Clear"})]})]}),(0,r.jsxs)("div",{className:"flex gap-2 pt-1",children:[(0,r.jsx)("button",{onClick:()=>{let e=JSON.stringify({...ez,backingPoints:eX,backingZ:tu},null,2);navigator.clipboard.writeText(e),eV(!0),setTimeout(()=>eV(!1),1500)},className:"flex-1 bg-[#dbfc1a] text-black rounded px-2 py-1 text-[11px] font-bold",children:eD?"Copied!":"Copy All"}),(0,r.jsx)("button",{onClick:()=>{eW({...e9}),td([]),th(.01)},className:"bg-white/10 text-white rounded px-2 py-1 text-[11px]",children:"Reset"})]})]})]}),B&&(0,r.jsx)(el,{}),"film"===B&&(0,r.jsx)(eo,{price:t5}),("film"===B||"product"===B)&&(0,r.jsx)(ec,{photo:e1[eE],color:null!=(R=null==t0?void 0:t0.label)?R:"Ruby",controls:aS,first:"product"===B}),"interactive"===B&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)("div",{className:"exploration-interactive-intro",children:[(0,r.jsx)("p",{className:"home-eyebrow",children:"PUFF / 128GB FLASH DRIVE"}),(0,r.jsx)("p",{children:"A new kind of flash drive. Make it feel like you."})]}),(0,r.jsx)(er,{light:V,gemColor:eE,compact:!0,purchaseControls:aS})]}),("product"===B||"interactive"===B)&&(0,r.jsx)(ed,{}),"film"===B&&(0,r.jsx)(er,{light:V,gemColor:eE}),!B&&(0,r.jsxs)(r.Fragment,{children:[!K&&(0,r.jsx)(r.Fragment,{children:(0,r.jsxs)("section",{className:"home-hero relative h-[100svh] w-full overflow-hidden bg-[#101010]",children:[(0,r.jsx)("div",{className:"absolute z-0 pointer-events-none w-[220vmin] h-[130vmax] md:w-[185vmin] md:h-[185vmin] left-1/2 top-[31%] md:top-[34%] -translate-x-1/2 -translate-y-1/2",style:{"--glow-color":tx,"--glow-l":String(tv),"--glow-dark":"oklch(from var(--glow-color) calc(l * var(--glow-l)) calc(c * 2) h)",background:"radial-gradient(50% 50% at 50% 50%, var(--glow-dark) 0%, color-mix(in srgb, var(--glow-dark) 55%, transparent) 25%, color-mix(in srgb, var(--glow-dark) 28%, transparent) 45%, color-mix(in srgb, var(--glow-dark) 12%, transparent) 65%, color-mix(in srgb, var(--glow-dark) 4%, transparent) 84%, transparent 100%)",transition:"--glow-color 500ms ease",opacity:V?.13:.6}
1,children:(0,r.jsx)("div",{"aria-hidden":!0,className:"absolute inset-0 overflow-hidden",style:{maskImage:"radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 25%, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0.1) 65%, rgba(0,0,0,0.04) 84%, transparent 100%)",WebkitMaskImage:"radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 25%, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0.1) 65%, rgba(0,0,0,0.04) 84%, transparent 100%)"},children:(0,r.jsx)("div",{className:"hero-grain absolute inset-[-12%]",style:{backgroundImage:"url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)'/%3E%3C/svg%3E\")",backgroundSize:"128px 128px",mixBlendMode:"overlay",opacity:.55,animation:"grainShift 0.9s steps(1) infinite"}})})}),(0,r.jsx)("div",{"aria-hidden":!0,className:"absolute z-0 pointer-events-none left-1/2 top-[50%] md:top-[49%] -translate-x-1/2 w-[70vmin] md:w-[44vmin] h-[13vmin] md:h-[9vmin] transition-opacity duration-1000 ease-out",style:{background:"radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.18) 50%, transparent 78%)",filter:"blur(12px)",opacity:+!!tP}}),(0,r.jsx)("div",{className:"absolute z-[5] pointer-events-none transition-opacity duration-700 left-1/2 top-[31%] md:top-[34%] -translate-x-1/2 -translate-y-1/2",style:{opacity:tP||tL?0:1},children:(0,r.jsx)("svg",{viewBox:"0 0 202 160",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"w-[40px] h-auto",style:{animation:"snailPulse 1.6s ease-in-out infinite"},children:(0,r.jsx)("path",{d:"M186.385 1.13253C181.542 2.64057 178.344 7.29583 178.344 12.382L178.41 69.1255C178.41 73.2375 175.315 76.8343 171.219 77.0966C166.731 77.387 163 73.8276 163.01 69.3878L163.057 27.6029C163.057 25.383 164.048 23.2474 165.834 21.9454C169.181 19.51 171.201 15.3606 170.602 10.7709C169.892 5.32882 165.684 1.21683 160.242 0.607996C153.108 -0.188175 147.068 5.38502 147.068 12.3726C147.068 12.6255 146.684 114.142 146.684 114.142C146.684 118.376 143.449 122.057 139.242 122.188C135.034 122.319 131.341 118.816 131.341 114.47V46.6173C131.387 45.1093 131.247 36.9321 122.991 31.4058C118.718 28.5489 113.753 28.2492 108.648 23.1537C103.795 18.3111 103.842 13.9368 100.41 8.78514C94.3794 -0.272476 84.9731 0.439395 84.9731 0.439395H46.7682C46.7682 0.439395 37.4087 -0.356776 31.3217 8.78514C28.4699 13.0657 28.1707 18.0395 23.0842 23.1537C18.2501 28.015 13.8836 27.9682 8.74098 31.4058C-0.300652 37.4473 0.400612 46.8702 0.419312 46.8702V61.9881C0.643717 64.9292 1.93404 71.2705 8.71293 75.7946C12.9766 78.6421 17.9322 78.9418 23.0187 84.028C27.8621 88.8612 27.8154 93.2261 31.2375 98.3591C37.2591 107.398 46.6373 106.686 46.6467 106.686H65.9641C74.4167 106.686 81.2798 99.7641 81.2798 91.2591V58.1758C81.2798 52.6401 76.801 48.1628 71.2844 48.1628H61.074C56.3241 48.1628 52.4718 52.0219 52.4718 56.7802V68.9476C52.4718 73.0596 49.3769 76.647 45.2815 76.9186C40.7934 77.209 37.0627 73.6497 37.0627 69.2098V56.9207C37.0627 43.5731 47.8715 32.7452 61.1955 32.7452H71.0974C85.1133 32.7452 96.4832 44.1258 96.4925 58.1758L96.5112 93.1886C96.5112 108.681 84.2344 121.448 68.9375 122.188C68.9375 122.188 51.2563 122.207 47.2825 122.207C47.2825 122.207 43.4021 122.179 39.8023 123.2C33.9771 124.848 28.7597 128.258 25.2534 133.241C24.5615 134.224 23.7387 135.217 22.7289 136.219C17.9042 140.968 12.8083 143.525 8.15192 143.553C3.69188 143.553 0.400612 147.141 0.400612 151.562C0.400612 155.983 3.98174 159.58 8.40438 159.58H103.739L147.75 159.561C149.143 159.561 158.213 159.589 163.505 151.225C166.245 146.888 166.647 141.989 171.724 136.894C176.549 132.042 180.906 132.089 186.03 128.66C194.043 123.312 194.38 115.313 194.361 113.58V27.6029C194.361 25.3923 195.333 23.238 197.129 21.9454C200.083 19.8004 202 16.316 202 12.3726C202 4.60758 194.529 -1.41522 186.395 1.12317L186.385 1.13253Z",fill:"black"})})}),(0,r.jsxs)("div",{className:"absolute inset-x-0 top-[-1%] z-10 h-[68%] md:inset-0 md:top-[1%] md:h-[65%]",style:{transform:"scale(0.85)"},children:[(0,r.jsx)("div",{className:"absolute inset-0 flex items-center justify-center transition-opacity duration-700",style:{opacity:tL&&!tP?1:0},children:(0,r.jsx)(l.default,{src:e2[eE],alt:"PUFF â ".concat(eE),width:1200,height:1200,sizes:"(max-width: 768px) 70vw, 35vw",className:"w-auto h-[64%] object-contain translate-y-[10%]",priority:!0})}),!tL&&(0,r.jsx)("div",{className:"absolute inset-0 transition-all duration-1000 ease-out",style:{opacity:+!!tP,transform:tP?"scale(1)":"scale(0.92)"},children:(0,r.jsx)(J.A,{onError:()=>tF(!0),fallback:null,children:(0,r.jsx)(i.Suspense,{fallback:null,children:(0,r.jsx)(eZ,{gemColor:eE,visible:!0,debugOverrides:tG,lightingOverrides:V?eh.w:void 0,devTools:ej,onLoaded:()=>{tI(!0),t_(e=>e+1)},onInteract:tJ,screenTrigger:tA,logoTapTrigger:tU})})})}),tP&&!tL&&(tT||tB.length>0)&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("style",{children:"\n @keyframes tapHintEnter {\n 0% { opacity: 0; transform: translateX(30px) scale(0.7); }\n 60% { opacity: 1; transform: translateX(-4px) scale(1.05); }\n 80% { transform: translateX(2px) scale(0.98); }\n 100% { opacity: 1; transform: translateX(0) scale(1); }\n }\n @keyframes tapHintFloat {\n 0%, 100% { transform: translateY(0px) rotate(0deg); }\n 50% { transform: translateY(-8px) rotate(-2deg); }\n }\n @keyframes sprinkleFly {\n 0% { transform: translate(0, 0) scale(1); opacity: 1; }\n 50% { opacity: 0.8; }\n 100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }\n }\n "}),tT&&(0,r.jsx)("div",{className:"absolute z-[15] pointer-events-none select-none left-1/2 top-1/2",style:{marginLeft:"max(min(14%, 12vmin), 88px)",marginTop:"-2%",animation:"tapHintEnter 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.2s both, tapHintFloat 2s ease-in-out 1.8s infinite"},children:(0,r.jsxs)("div",{className:"flex items-center gap-[3px]",children:[(0,r.jsxs)("svg",{width:"44",height:"24",viewBox:"0 0 44 24",fill:"none",children:[(0,r.jsx)("path",{d:"M42 12C36 4 28 20 16 14C13 12.5 10 12 8 12",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",fill:"none"}),(0,r.jsx)("path",{d:"M8 12L14 7",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"}),(0,r.jsx)("path",{d:"M8 12L14 17",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})]}),(0,r.jsx)("span",{className:"font-mschn text-white text-[11px] tracking-[0.15em] uppercase",children:"drag me"})]})}),tB.length>0&&(0,r.jsx)("div",{className:"absolute z-[15] pointer-events-none left-1/2 top-1/2",style:{marginLeft:"min(10%, 10vmin)",marginTop:"1%"},children:tB.map(e=>(0,r.jsx)("span",{className:"absolute text-white font-mono text-[13px]",style:{"--tx":"".concat(e.dx,"px"),"--ty":"".concat(e.dy,"px"),animation:"sprinkleFly 600ms ease-out ".concat(e.delay,"ms forwards")},children:e.char},e.id))})]})]}),(0,r.jsx)(f,{reducedMotion:"user",children:(0,r.jsxs)("div",{className:"absolute inset-0 z-20 pointer-events-none flex flex-col",style:{paddingBottom:"calc(env(safe-area-inset-bottom, 0px) + 20px)"},children:[(0,r.jsx)("div",{className:"home-wordmark flex justify-center pt-6 md:pt-margin pointer-events-auto",style:ta(.1),children:(0,r.jsxs)("div",{ref:tX,className:"relative cursor-pointer",onClick:tK,children:[(0,r.jsx)(l.default,{src:"/svgs
1/wordmark.svg",alt:"noware",width:200,height:30,priority:!0,className:"w-auto h-[20px] md:h-[30px] transition-opacity duration-200 ".concat(V?"":"invert"),style:{opacity:+!tW}}),tH.length>0&&(0,r.jsx)("div",{className:"absolute inset-0 pointer-events-none",style:{overflow:"visible"},children:tH.map(e=>(0,r.jsx)("span",{className:"absolute font-mono font-bold whitespace-nowrap",style:{left:"".concat(e.ox,"px"),top:"".concat(e.oy,"px"),"--cdx":"".concat(e.dx,"px"),"--cdy":"".concat(e.dy,"px"),"--cr":"".concat(e.rotation,"deg"),color:V?"#181916":"white",fontSize:"".concat(e.size,"px"),animation:"asciiConfetti 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94) ".concat(e.delay,"ms forwards")},children:e.char},e.id))})]})}),(0,r.jsx)("div",{className:"flex-1"}),(0,r.jsx)(x.P.div,{layout:!0,transition:ti,className:"flex justify-center",children:(0,r.jsx)("div",{style:ta(.3),children:(0,r.jsx)(l.default,{src:V?"/assets/puff/puff-logo-black.svg":"/assets/puff/puff-logo.svg",alt:"PUFF",width:180,height:60,priority:!0,className:"w-[45vw] max-w-[180px] h-auto"})})}),(0,r.jsx)(x.P.div,{layout:!0,transition:ti,className:"mx-auto mt-6",children:(0,r.jsx)("p",{className:"font-twk text-white text-center text-[20px] leading-[1.2] tracking-[0.6px]",style:ta(.45),children:"A new kind of flash drive."})}),aS]})})]})}),W?(0,r.jsx)(eO,{media:"video"===q?"video":"photos",deviceLoop:"loop"===q,light:V,color:eE,options:e0,onColorChange:tm,purchaseControls:aS}):D?(0,r.jsxs)("section",{className:"home-story".concat(K?" home-story-lead":""),"aria-labelledby":"home-intro-title",children:[(0,r.jsx)("div",{className:"home-story-copy".concat(K?" home-story-copy-lead":""),children:K?(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("div",{className:"home-lead-wordmark",style:ta(.05),children:(0,r.jsx)(l.default,{src:"/svgs/wordmark.svg",alt:"noware",width:200,height:30,priority:!0,className:"w-auto h-[22px] md:h-[30px] ".concat(V?"":"invert")})}),(0,r.jsx)("h2",{id:"home-intro-title",className:"sr-only",children:"PUFF"}),(0,r.jsx)(l.default,{src:V?"/assets/puff/puff-logo-black.svg":"/assets/puff/puff-logo.svg",alt:"PUFF",width:749,height:277,priority:!0,className:"home-lead-logo w-[min(58vw,300px)] h-auto",style:ta(.2)}),(0,r.jsx)("p",{className:"font-twk text-white text-[22px] md:text-[24px] leading-[1.3] tracking-[0.22px] md:tracking-[0.38px]",style:ta(.3),children:"Puff is a designer flash drive that reacts as you add files, play music, and move\xa0around."}),(0,r.jsx)("div",{className:"home-lead-purchase",style:ta(.4),children:aS})]}):(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("div",{className:"mb-6",style:ta(.1),children:(0,r.jsx)("div",{className:"w-[74px] h-[74px] rounded-full flex items-center justify-center transition-colors duration-500",style:{backgroundColor:eP},children:(0,r.jsx)(l.default,{src:"/assets/puff/puff-icon.svg",alt:"noware",width:40,height:40,className:"w-[40px] h-auto"})})}),(0,r.jsx)("p",{className:"font-mschn text-white text-[16px] tracking-[1.8px] leading-[1.1] mb-1",style:ta(.2),children:"INTRODUCING:"}),(0,r.jsx)("h2",{id:"home-intro-title",className:"font-twk text-white text-[38px] leading-[1.3] tracking-[0.38px] mb-8",style:ta(.3),children:"PUFF"}),(0,r.jsxs)("p",{className:"font-twk text-white text-[22px] md:text-[24px] leading-[1.3] tracking-[0.22px] md:tracking-[0.38px]",style:ta(.4),children:["Puff is a designer flash drive that reacts as you add files, play music, and move\xa0around.",(0,r.jsx)("br",{}),(0,r.jsx)("br",{}),"Style it how you like, personalize the animations, and discover a few surprises waiting\xa0inside..."]})]})}),(0,r.jsx)(es,{bleed:!0})]}):(0,r.jsx)(r.Fragment,{children:(0,r.jsx)("section",{className:"relative w-full aspect-[1.2] md:aspect-video md:max-h-[700px] overflow-hidden bg-[#111]",children:(0,r.jsx)(l.default,{src:e8,alt:"PUFF editorial with Yu Ling",fill:!0,className:"object-cover",sizes:"100vw",priority:!0})})})]}),"interactive"===B&&(0,r.jsx)(r.Fragment,{children:(0,r.jsx)("section",{className:"home-intro relative z-[2] p-margin max-w-[600px] md:max-w-[1400px] mx-auto pb-16 md:md-margin md:pb-0",children:(0,r.jsxs)("div",{className:"md:flex md:gap-16 md:items-start",children:[(0,r.jsxs)("div",{className:"md:w-[45%] md:shrink-0",children:[(0,r.jsx)("div",{className:"mb-6",style:ta(.1),children:(0,r.jsx)("div",{className:"w-[74px] h-[74px] rounded-full flex items-center justify-center transition-colors duration-500",style:{backgroundColor:eP},children:(0,r.jsx)(l.default,{src:"/assets/puff/puff-icon.svg",alt:"noware",width:40,height:40,className:"w-[40px] h-auto"})})}),(0,r.jsx)("p",{className:"font-mschn text-white text-[16px] tracking-[1.8px] leading-[1.1] mb-1",style:ta(.2),children:"INTRODUCING:"}),(0,r.jsx)("h2",{className:"font-twk text-white text-[38px] leading-[1.3] tracking-[0.38px] mb-8",style:ta(.3),children:"PUFF"}),(0,r.jsxs)("p",{className:"font-twk text-white text-[22px] md:text-[24px] leading-[1.3] tracking-[0.22px] md:tracking-[0.38px]",style:ta(.4),children:["Puff is a designer flash drive that reacts as you add files, play music, and move\xa0around.",(0,r.jsx)("br",{}),(0,r.jsx)("br",{}),"Style it how you like, personalize the animations, and discover a few surprises waiting\xa0inside..."]})]}),(0,r.jsxs)("div",{className:"mt-10 md:mb-0 md:mt-0 md:w-[55%] space-y-4 md:pt-[99px]",children:[(0,r.jsxs)("div",{className:"hidden md:flex w-full flex-row items-center justify-between",children:[(0,r.jsx)("div",{className:"flex-1",children:(0,r.jsxs)("p",{className:"font-mschn text-white text-[16px] tracking-[1.6px] leading-[1.1] md:text-left",children:["[01] > ",null!=(A=null==(s=e0.find(e=>e.key===eE))||null==(n=s.label)?void 0:n.toUpperCase())?A:"PUFF"]})}),(0,r.jsx)("div",{className:"flex items-center justify-center gap-[12px]",children:e0.map(e=>(0,r.jsx)("button",{"aria-label":e.label,onClick:()=>tm(e.key),className:"relative w-[16px] h-[16px] rounded-full transition-transform duration-200 hover:scale-110 focus:outline-none",style:{backgroundColor:e.swatch},children:eE===e.key&&(0,r.jsx)("span",{className:"absolute inset-[-3px] rounded-full border-[1.5px] border-white pointer-events-none"})},e.key))})]}),ek?(0,r.jsxs)("div",{className:"w-full flex flex-row items-center",children:[(0,r.jsx)("div",{className:"relative aspect-[0.6] overflow-hidden rounded-lg bg-black w-[40%]",children:Object.entries(e4).map(e=>{var t;let[a,n]=e;return(0,r.jsx)(l.default,{src:n.side,alt:"PUFF â ".concat(null==(t=e0.find(e=>e.key===a))?void 0:t.label," side view"),fill:!0,className:"object-contain transition-opacity duration-500",style:{opacity:+(eE===a)},sizes:"(max-width: 768px) 50vw, 28vw"},a)})}),(0,r.jsx)("div",{className:"relative aspect-[0.7] translate-y-[2%] scale-[0.7] w-[60%] overflow-hidden rounded-lg bg-black",children:Object.entries(e4).map(e=>
1{let[t,a]=e;return(0,r.jsx)("video",{ref:e=>{ax.current[t]=e},onPlaying:e=>ag(t,e.currentTarget),src:a.video,autoPlay:!0,loop:!0,muted:!0,playsInline:!0,className:"absolute inset-0 w-full h-full object-cover transition-opacity duration-500",style:{opacity:+(eE===t)}},t)})})]}):(0,r.jsx)("div",{className:"home-intro-photo w-full overflow-hidden relative aspect-[1.47]",children:Object.entries(e1).map(e=>{var t;let[a,n]=e,i=eE===a,s=eL===a;return(0,r.jsx)(l.default,{src:n,alt:"PUFF â ".concat(null==(t=e0.find(e=>e.key===a))?void 0:t.label),fill:!0,className:"object-cover",style:{opacity:i||s?1:0,zIndex:i?2:+!!s,transition:i?"opacity 500ms ease-out":"none"},sizes:"(max-width: 768px) 100vw, 55vw"},a)})}),(0,r.jsxs)("div",{className:"md:hidden w-full flex flex-row items-center justify-between",children:[(0,r.jsx)("div",{className:"flex-1",children:(0,r.jsxs)("p",{className:"font-mschn text-white text-[16px] tracking-[1.6px] leading-[1.1]",children:["[01] > ",null!=(_=null==(h=e0.find(e=>e.key===eE))||null==(o=h.label)?void 0:o.toUpperCase())?_:"PUFF"]})}),(0,r.jsx)("div",{className:"flex items-center justify-center gap-[12px]",children:e0.map(e=>(0,r.jsx)("button",{"aria-label":e.label,onClick:()=>tm(e.key),className:"relative w-[16px] h-[16px] rounded-full transition-transform duration-200 hover:scale-110 focus:outline-none",style:{backgroundColor:e.swatch},children:eE===e.key&&(0,r.jsx)("span",{className:"absolute inset-[-3px] rounded-full border-[1.5px] border-white pointer-events-none"})},e.key))})]})]})]})})}),Z?(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(er,{plainTitle:X,light:V,gemColor:eE,gemOptions:e0,onGemColorChange:tm}),X&&aE,(0,r.jsx)("section",{className:"home-board","aria-label":"Colors, tech specs, box contents and newsletter",children:(0,r.jsx)(eG,{spaciousBox:X,accent:V?eK:eP,colorLabel:(0,r.jsxs)("span",{className:"font-mschn text-white text-[clamp(11px,2.9vw,13px)] md:text-[clamp(12px,1.15vw,17px)] tracking-[1.4px] leading-[1.1] whitespace-nowrap",children:["[01] > ",null!=(U=null==(m=e0.find(e=>e.key===eE))||null==(p=m.label)?void 0:p.toUpperCase())?U:"PUFF"]}),photo:(0,r.jsx)("div",{className:"home-details-photo w-full h-full overflow-hidden relative",children:Object.entries(e1).map(e=>{var t;let[a,n]=e,i=eE===a,s=eL===a;return(0,r.jsx)(l.default,{src:n,alt:"PUFF â ".concat(null==(t=e0.find(e=>e.key===a))?void 0:t.label),fill:!0,className:"object-contain",style:{opacity:i||s?1:0,zIndex:i?2:+!!s,transition:i?"opacity 500ms ease-out":"none"},sizes:"(max-width: 768px) 100vw, 45vw"},a)})}),picker:(0,r.jsx)("div",{className:"flex items-center justify-center gap-[12px]",role:"group","aria-label":"Gem color",children:e0.map(e=>(0,r.jsx)("button",{"aria-label":e.label,"aria-pressed":eE===e.key,onClick:()=>tm(e.key),className:"relative w-[14px] h-[14px] md:w-[16px] md:h-[16px] rounded-full transition-transform duration-200 hover:scale-110 focus:outline-none",style:{backgroundColor:e.swatch},children:eE===e.key&&(0,r.jsx)("span",{className:"absolute inset-[-4px] rounded-full border-[1.5px] border-white pointer-events-none"})},e.key))}),specs:(0,r.jsx)("div",{className:"grid grid-cols-2 gap-x-[6%] h-full",children:[to.slice(0,3),to.slice(3)].map((e,t)=>(0,r.jsx)("div",{className:"grid h-full",style:{gridAutoRows:"1fr"},children:e.map(e=>{let[t,a]=e;return(0,r.jsxs)("div",{className:"flex items-center justify-between gap-2 min-w-0",style:{borderBottom:"1px solid var(--spec-ink, black)"},children:[(0,r.jsx)("span",{className:"font-mschn uppercase text-black text-[clamp(8px,2vw,12px)] md:text-[clamp(9px,0.9vw,13px)] tracking-[0.08em] leading-none whitespace-nowrap",children:t}),(0,r.jsx)("span",{className:"font-twk text-black text-[clamp(10px,2.8vw,15px)] md:text-[clamp(11px,1.05vw,15px)] leading-none text-right whitespace-nowrap",children:a})]},t)})},t))}),box:(0,r.jsx)("div",{className:"grid h-full",style:{gridAutoRows:"1fr"},children:tc.map(e=>{let[t,a]=e;return(0,r.jsxs)("div",{className:"flex items-center min-w-0",style:{borderBottom:"1px solid var(--spec-ink, black)"},children:[(0,r.jsx)("span",{className:"font-mschn uppercase text-black text-[clamp(8px,2.2vw,12px)] md:text-[clamp(9px,0.9vw,13px)] tracking-[0.08em] leading-none shrink-0 w-[12%]",children:t}),(0,r.jsx)("span",{className:"font-twk text-black text-[clamp(11px,3vw,15px)] md:text-[clamp(11px,1.05vw,15p
1x)] leading-none",children:X?a.replace("PUFF","Puff"):a})]},a)})})})})]}):(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("section",{className:"home-specs-mobile md:hidden px-margin pb-0 md:pb-16 max-w-[600px] mx-auto",children:(0,r.jsxs)("div",{className:"relative w-full",children:[(0,r.jsx)(eQ,{className:"w-full h-auto",style:{color:"#E4E4DC"}}),(0,r.jsxs)("div",{className:"absolute w-full h-full z-10 top-0 left-0",children:[(0,r.jsx)("div",{className:"absolute top-[7%] left-[1.5%] w-[46%] h-[13%] flex items-center justify-center",children:(0,r.jsx)("span",{className:"font-twk text-black text-[clamp(16px,4vw,36px)] leading-[1.3] tracking-[0.16px]",children:"TECH SPECS"})}),(0,r.jsx)("div",{className:"absolute top-[22%] left-[12%] right-[8%] bottom-[6%]",children:(0,r.jsx)("div",{className:"grid grid-cols-2 gap-x-[10px] h-full",children:[to.slice(0,3),to.slice(3)].map((e,t)=>(0,r.jsx)("div",{className:"flex flex-col justify-center",children:e.map(e=>{let[t,a]=e;return(0,r.jsxs)("div",{className:"flex justify-between items-baseline py-[4%]",style:{borderBottom:"1px solid var(--spec-ink, black)"},children:[(0,r.jsx)("span",{className:"font-mschn uppercase text-black text-[clamp(8px,2.2vw,13px)] tracking-[0.08em]",children:t}),(0,r.jsx)("span",{className:"font-twk text-black text-[clamp(11px,3vw,16px)]",children:a})]},t)})},t))})})]})]})}),!D&&(0,r.jsx)(r.Fragment,{children:(0,r.jsx)("section",{className:"px-margin md:pb-0 max-w-[600px] md:max-w-[1400px] mx-auto overflow-hidden",children:(0,r.jsxs)("div",{className:"relative w-full my-[-5%] aspect-[0.85] md:aspect-[1.25] bg-black rounded-lg overflow-hidden cursor-pointer",onClick:tZ,children:[tY.length>0&&(null==(y=tY[tg])?void 0:y.type)==="image"&&(0,r.jsx)(i.Suspense,{fallback:null,children:(0,r.jsx)(eJ,{src:tY[tg].src,prevSrc:tN,alt:tY[tg].alt,state:tb,duration:tj,onAnimationEnd:t$})}),0===tY.length&&(0,r.jsx)("div",{className:"absolute inset-0 bottom-[10%] flex items-center justify-center",children:(0,r.jsx)("svg",{viewBox:"0 0 202 160",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"w-[40px] h-auto",style:{animation:"snailPulse 1.6s ease-in-out infinite"},children:(0,r.jsx)("path",{d:"M186.385 1.13253C181.542 2.64057 178.344 7.29583 178.344 12.382L178.41 69.1255C178.41 73.2375 175.315 76.8343 171.219 77.0966C166.731 77.387 163 73.8276 163.01 69.3878L163.057 27.6029C163.057 25.383 164.048 23.2474 165.834 21.9454C169.181 19.51 171.201 15.3606 170.602 10.7709C169.892 5.32882 165.684 1.21683 160.242 0.607996C153.108 -0.188175 147.068 5.38502 147.068 12.3726C147.068 12.6255 146.684 114.142 146.684 114.142C146.684 118.376 143.449 122.057 139.242 122.188C135.034 122.319 131.341 118.816 131.341 114.47V46.6173C131.387 45.1093 131.247 36.9321 122.991 31.4058C118.718 28.5489 113.753 28.2492 108.648 23.1537C103.795 18.3111 103.842 13.9368 100.41 8.78514C94.3794 -0.272476 84.9731 0.439395 84.9731 0.439395H46.7682C46.7682 0.439395 37.4087 -0.356776 31.3217 8.78514C28.4699 13.0657 28.1707 18.0395 23.0842 23.1537C18.2501 28.015 13.8836 27.9682 8.74098 31.4058C-0.300652 37.4473 0.400612 46.8702 0.419312 46.8702V61.9881C0.643717 64.9292 1.93404 71.2705 8.71293 75.7946C12.9766 78.6421 17.9322 78.9418 23.0187 84.028C27.8621 88.8612 27.8154 93.2261 31.2375 98.3591C37.2591 107.398 46.6373 106.686 46.6467 106.686H65.9641C74.4167 106.686 81.2798 99.7641 81.2798 91.2591V58.1758C81.2798 52.6401 76.801 48.1628 71.2844 48.1628H61.074C56.3241 48.1628 52.4718 52.0219 52.4718 56.7802V68.9476C52.4718 73.0596 49.3769 76.647 45.2815 76.9186C40.7934 77.209 37.0627 73.6497 37.0627 69.2098V56.9207C37.0627 43.5731 47.8715 32.7452 61.1955 32.7452H71.0974C85.1133 32.7452 96.4832 44.1258 96.4925 58.1758L96.5112 93.1886C96.5112 108.681 84.2344 121.448 68.9375 122.188C68.9375 122.188 51.2563 122.207 47.2825 122.207C47.2825 122.207 43.4021 122.179 39.8023 123.2C33.9771 124.848 28.7597 128.258 25.2534 133.241C24.5615 134.224 23.7387 135.217 22.7289 136.219C17.9042 140.968 12.8083 143.525 8.15192 143.553C3.69188 143.553 0.400612 147.141 0.400612 151.562C0.400612 155.983 3.98174 159.58 8.40438 159.58H103.739L147.75 159.561C149.143 159.561 158.213 159.589 163.505 151.225C166.245 146.888 166.647 141.989 171.724 136.894C176.549 132.042 180.906 132.089 186.03 128.66C194.043 123.312 194.38 115.313 194.361 113.58V27.6029C194.361 25.3923 195.333 23.238 197.129 21.9454C200.083 19.8004 202 16.316 202 12.3726C202 4.60758 194.529 -1.41522 186.395 1.12317L186.385 1.13253Z",fill:"rgba(255,255,255,0.10)"})})}),tY.length>1&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("button",{"aria-label":"Previous",onClick:e=>{e.stopPropagation(),tQ((tg-1+tY.length)%tY.length)},className:"absolute left-0 top-1/2 -translate-y-1/2 z-20 w-12 h-24 flex items-center justify-center text-white/30 hover:text-white/60 transition-colors",style:tn(.5),children:(0,r.jsx)("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:(0,r.jsx)("path",{d:"M10 3L5 8L10 13",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}),(0,r.jsx)("button",{"aria-label":"Next",onClick:e=>{e.stopPropagation(),tQ((tg+1)%tY.length)},className:"absolute right-0 top-1/2 -translate-y-1/2 z-20 w-12 h-24 flex items-center justify-center text-white/30 hover:text-white/60 transition-colors",style:tn(.5),children:(0,r.jsx)("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:(0,r.jsx)("path",{d:"M6 3L11 8L6 13",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})})]}),tY.length>
11&&(0,r.jsx)("div",{className:"absolute bottom-[15%] left-[50%] translate-x-[-50%] flex justify-center items-center gap-[6px] mb-0 min-h-[8px]",children:tY.map((e,t)=>(0,r.jsx)("button",{"aria-label":"Gallery page ".concat(t+1),onClick:()=>tQ(t),className:"w-[8px] h-[8px] rounded-full transition-all duration-300 ".concat(tg===t?"bg-white":"!bg-[#444] hover:!bg-[rgba(1,1,1,0.7)]")},t))})]})})}),(0,r.jsx)("section",{className:"home-box-mobile md:hidden px-margin pb-16 max-w-[600px] mx-auto pt-6",children:(0,r.jsxs)("div",{className:"relative w-full",children:[(0,r.jsx)(eQ,{className:"w-full h-auto",style:{color:"#E4E4DC",transform:"scaleX(-1)"}}),(0,r.jsxs)("div",{className:"absolute w-full h-full z-10 top-0 left-0",children:[(0,r.jsx)("div",{className:"absolute top-[7%] right-[1.5%] w-[46%] h-[13%] flex items-center justify-center",children:(0,r.jsx)("span",{className:"font-twk text-black text-[clamp(16px,4vw,36px)] leading-[1.3] tracking-[0.16px]",children:"IN THE BOX"})}),(0,r.jsx)("div",{className:"absolute top-[22%] left-[8%] right-[12%] bottom-[6%]",children:(0,r.jsx)("div",{className:"flex flex-col justify-center h-full",children:tc.map(e=>{let[t,a]=e;return(0,r.jsxs)("div",{className:"flex items-baseline py-[2%]",style:{borderBottom:"1px solid var(--spec-ink, black)"},children:[(0,r.jsx)("span",{className:"font-mschn uppercase text-black text-[clamp(8px,2.2vw,13px)] tracking-[0.08em] shrink-0 w-[15%]",children:t}),(0,r.jsx)("span",{className:"font-twk text-black text-[clamp(11px,3vw,16px)]",children:a})]},a)})})})]})]})}),(0,r.jsx)("section",{className:"home-specs-desktop hidden md:block px-margin pb-16 md:max-w-[1400px] mx-auto",children:(0,r.jsxs)("div",{className:"md:grid md:grid-cols-2 md:gap-6 md:items-end",children:[(0,r.jsx)("div",{className:"pb-8 md:pb-0 md:w-full",children:(0,r.jsxs)("div",{className:"relative w-full",children:[(0,r.jsx)(eQ,{className:"w-full h-auto",style:{color:"#E4E4DC"}}),(0,r.jsxs)("div",{className:"absolute w-full h-full z-10 top-0 left-0",children:[(0,r.jsx)("div",{className:"absolute top-[7%] left-[1.5%] w-[46%] h-[13%] flex items-center justify-center",children:(0,r.jsx)("span",{className:"font-twk text-black text-[clamp(16px,4vw,36px)] md:text-[clamp(14px,1.8vw,28px)] leading-[1.3] tracking-[0.16px]",children:"TECH SPECS"})}),(0,r.jsx)("div",{className:"absolute top-[22%] left-[12%] right-[8%] bottom-[6%]",children:(0,r.jsx)("div",{className:"grid grid-cols-2 gap-x-[10px] h-full",children:[to.slice(0,3),to.slice(3)].map((e,t)=>(0,r.jsx)("div",{className:"flex flex-col justify-center",children:e.map(e=>{let[t,a]=e;return(0,r.jsxs)("div",{className:"flex justify-between items-baseline py-[4%]",style:{borderBottom:"1px solid var(--spec-ink, black)"},children:[(0,r.jsx)("span",{className:"font-mschn uppercase text-black text-[clamp(8px,2.2vw,13px)] md:text-[clamp(8px,1.1vw,14px)] tracking-[0.08em]",children:t}),(0,r.jsx)("span",{className:"font-twk text-black text-[clamp(11px,3vw,16px)] md:text-[clamp(11px,1.3vw,18px)]",children:a})]},t)})},t))})})]})]})}),(0,r.jsx)("div",{className:"md:w-full",children:(0,r.jsxs)("div",{className:"relative w-full",children:[(0,r.jsx)(eQ,{className:"w-full h-auto",style:{color:"#E4E4DC",transform:"scaleX(-1)"}}),(0,r.jsxs)("div",{className:"absolute w-full h-full z-10 top-0 left-0",children:[(0,r.jsx)("div",{className:"absolute top-[7%] right-[1.5%] w-[46%] h-[13%] flex items-center justify-center",children:(0,r.jsx)("span",{className:"font-twk text-black text-[clamp(16px,4vw,36px)] md:text-[clamp(14px,1.8vw,28px)] leading-[1.3] tracking-[0.16px]",children:"IN THE BOX"})}),(0,r.jsx)("div",{className:"absolute top-[22%] left-[8%] right-[12%] bottom-[6%]",children:(0,r.jsx)("div",{className:"flex flex-col justify-center h-full",children:tc.map(e=>{let[t,a]=e;return(0,r.jsxs)("div",{className:"flex items-baseline py-[2%]",style:{borderBottom:"1px solid var(--spec-ink, black)"},children:[(0,r.jsx)("span",{className:"font-mschn uppercase text-black text-[clamp(8px,2.2vw,13px)] md:text-[clamp(8px,1.1vw,14px)] tracking-[0.08em] shrink-0 w-[15%]",children:t}),(0,r.jsx)("span",{className:"font-twk text-black text-[clamp(11px,3vw,16px)] md:text-[clamp(11px,1.3vw,18px)]",children:a})]},a)})})})]})]})})]})})]}),"product"===B&&(0,r.jsx)(er,{light:V,gemColor:eE}),D&&!Z?(0,r.jsx)("section",{className:"home-newsletter px-margin py-16 max-w-[1000px] md:max-w-[1400px] mx-auto w-full flex flex-col justify-center items-center",children:(0,r.jsx)(eY.A,{title:"Newsletter",accentColor:V?eK:eP,variant:"pdp"})}):null,!X&&aE,D&&(0,r.jsxs)(r.Fragment,{children:[X?(0,r.jsxs)(x.P.button,{className:"home-cart-trigger pv-header-purchase",type:"button",layout:!0,layoutDependency:ae,transition:ti,initial:!1,animate:aM?{opacity:0,scale:.82,
1y:-8}:{opacity:1,scale:1,y:0},style:{pointerEvents:aM?"none":"auto"},"aria-hidden":aM||void 0,tabIndex:aM?-1:void 0,"data-at-top-empty":aM,"aria-label":ae>0?"Checkout now, ".concat(ae," ").concat(1===ae?"item":"items"):"Buy now","aria-haspopup":ae>0?"dialog":void 0,onClick:()=>{var e;if(L(eg())>0){ex(""),en(!0);return}let t=document.getElementById("choose-puff");window.scrollTo({top:0,left:0,behavior:matchMedia("(prefers-reduced-motion: reduce)").matches?"instant":"smooth"}),null==t||null==(e=t.querySelector('button[aria-pressed="true"]'))||e.focus({preventScroll:!0}),(0,P.F)("hero_cta_click",{placement:"header_buy_now"}),(0,u.u4)("puff_explore_colors",{placement:"header",hero_media:"loop"===q?"device-loop":"photos"})},children:[(0,r.jsxs)(v.N,{mode:"popLayout",initial:!1,children:[(0,r.jsx)(x.P.span,{layout:"position",initial:{opacity:0,y:6},animate:{opacity:1,y:0},exit:{opacity:0,y:-6},transition:{duration:.22,ease:[.22,1,.36,1]},children:ae>0?"Checkout now":"Buy now"},ae>0?"checkout":"buy"),ae>0&&(0,r.jsxs)(x.P.span,{layout:"position",className:"pv-header-cart-count",initial:{opacity:0,scale:.6},animate:{opacity:1,scale:1},exit:{opacity:0,scale:.6},transition:ti,children:["(",ae,")"]},"count-".concat(ae))]}),(0,r.jsx)(x.P.svg,{layout:"position",width:"12",height:"12",viewBox:"0 0 18 18",fill:"none","aria-hidden":"true",children:(0,r.jsx)("path",{d:"M4 14 14 4M4 4h10v10",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})]}):ae>0&&(0,r.jsxs)("button",{className:"home-cart-trigger",onClick:()=>{ex(""),en(!0)},"aria-label":"Open cart, ".concat(L(ee)," items"),"aria-haspopup":"dialog",children:[(0,r.jsxs)("svg",{width:"15",height:"16",viewBox:"0 0 15 16",fill:"none","aria-hidden":"true",children:[(0,r.jsx)("path",{d:"M2 5H13L14 15H1L2 5Z",stroke:"currentColor"}),(0,r.jsx)("path",{d:"M5 5V3A2.5 2.5 0 0 1 10 3V5",stroke:"currentColor"})]}),"Cart (",ae,")"]}),(0,r.jsx)(F,{productName:X?"Puff":"PUFF",open:ea,onClose:()=>en(!1),onChooseAnother:()=>requestAnimationFrame(()=>{let e=matchMedia("(prefers-reduced-motion: reduce)").matches?"instant":"smooth";window.scrollTo({top:0,left:0,behavior:e})}),lines:ee,onChange:e=>{et(e),ex("")},options:e0.map(e=>({variantId:e.variantId,label:e.label,image:e2[e.key]})),gallery:tE,discountCode:null!=eN?eN:void 0,note:ef})]}),X&&(0,r.jsx)(ep,{}),(0,r.jsx)(e$.A,{theme:V?"light":"dark",className:D?"home-footer pb-margin":"pb-margin",onSocialClick:e=>(0,u.u4)("puff_social_click",{platform:e})})]})}},4941:()=>{},5048:(e,t,a)=>{"use strict";a.d(t,{A:()=>r});var n=a(2115);class r extends n.Component{static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(e,t){var a,n;console.error("Client error boundary caught an error:",e,t),null==(a=(n=this.props).onError)||a.call(n,e,t)}render(){return this.state.hasError?this.props.fallback:this.props.children}constructor(...e){super(...e),this.state={hasError:!1}}}},5302:(e,t,a)=>{"use strict";a.d(t,{C:()=>l,u:()=>o});var n=a(2973),r=a(818),i=a(9057),s=a(5051);function l(){return(0,s.W)()&&!(0,i.a)(window.location.pathname)&&(0,r.Xj)().analytics}function o(e,t){if(!l()||!(0,i.IW)(e))return;let a=Object.fromEntries(Object.entries(null!=t?t:{}).filter(e=>
1{let[t,a]=e;return(0,i.IW)(t)&&("boolean"==typeof a||"number"==typeof a&&Number.isFinite(a)||"string"==typeof a&&!!(0,i.IW)(a))}));(0,n.u4)(e,a)}},5532:()=>{},6278:(e,t,a)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"default",{enumerable:!0,get:function(){return r}});let n=a(8140)._(a(1150));function r(e,t){var a;let r={};"function"==typeof e&&(r.loader=e);let i={...r,...t};return(0,n.default)({...i,modules:null==(a=i.loadableGenerated)?void 0:a.modules})}("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},6552:(e,t,a)=>{"use strict";function n(e){let{moduleIds:t}=e;return null}Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"PreloadChunks",{enumerable:!0,get:function(){return n}}),a(5155),a(7650),a(8567),a(7278)},6617:(e,t,a)=>{"use strict";a.d(t,{$X:()=>f,BR:()=>o,IE:()=>l,WJ:()=>n,Wp:()=>c,eK:()=>i,eu:()=>p,hU:()=>r,s$:()=>m,sj:()=>s});let n=48,r=64,i={count:4,speed:1,size:1},s={zoom:1,x:0,y:0,rotation:0,fit:"contain",brightness:0,contrast:1,dither:"atkinson",strength:1,inverted:!1},l=()=>new Int8Array(n*r);function o(e,t){let a=new Uint8Array(n*r);for(let n=0;n<a.length;n++)a[n]=1===t[n]?255:-1===t[n]?0:e?e[n]:0;return a}function c(e,t,a,i,s){let l=new Int8Array(e),o=(i-.5)**2+.25;for(let e=Math.max(0,Math.floor(a-i));e<=Math.min(r-1,Math.ceil(a+i));e++)for(let r=Math.max(0,Math.floor(t-i));r<=Math.min(n-1,Math.ceil(t+i));r++)(r-t)**2+(e-a)**2<=o&&(l[e*n+r]=s);return l}let d=[0,8,2,10,12,4,14,6,3,11,1,9,15,7,13,5],u=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:255;return Math.max(t,Math.min(a,e))};function h(e,t,a,n){let r=arguments.length>4&&void 0!==arguments[4]?arguments[4]:1,i=new Float32Array(Array.from(e)),s=new Uint8Array(t*a);for(let e=0;e<a;e++)for(let l=0;l<t;l++){let o=e*t+l,c="ordered"===n?128+((d[e%4*4+l%4]+.5)*16-128)*r:128,u=255*(i[o]>=c);if(s[o]=u,"atkinson"===n){let n=(i[o]-u)*r/8;l+1<t&&(i[o+1]+=n),l+2<t&&(i[o+2]+=n),e+1<a&&(l>0&&(i[o+t-1]+=n),i[o+t]+=n,l+1<t&&(i[o+t+1]+=n)),e+2<a&&(i[o+2*t]+=n)}else if("diffusion"===n){let n=(i[o]-u)*r;l+1<t&&(i[o+1]+=7*n/16),e+1<a&&(l>0&&(i[o+t-1]+=3*n/16),i[o+t]+=5*n/16,l+1<t&&(i[o+t+1]+=n/16))}}return s}function p(e,t){let a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:i,s=t/1e3*("metaball"===e?a.speed:1),l=new Uint8Array(n*r),o=Math.max(1,Math.round(a.count)),c=Array.from({length:o},(e,t)=>({x:24+Math.sin(.85*s+1.8*t)*(t%2?13:10),y:32+19*Math.cos(.65*s+1.6*t),radius:(6.5+t%4*.7)*a.size*Math.sqrt(4/o)}));for(let t=0;t<r;t++)for(let a=0;a<n;a++){let r=0;if("flower"===e){let e=a-23.5,n=t-24,i=Math.hypot(e,n),l=.88+.12*Math.sin(1.5*s),o=(14+6*Math.cos(6*Math.atan2(n,e)-.7*s))*l;t>24&&.8>Math.abs(a-(24+2*Math.sin(Math.max(0,t-40)/12)))&&(r=255),i<o&&(r=o-i<1.2?255:90+115*(1-i/o)),i<4.2&&(r=(a+t)%2?255:60);let c=(a-17+(t-49)*.7)**2/35+(t-49-(a-17)*.35)**2/7,d=(a-31-(t-55)*.7)**2/35+(t-55+(a-31)*.35)**2/7;(c<1||d<1)&&(r=190)}else{let e=0,n=0,i=0;for(let r of c){let s=a-r.x,l=t-r.y,o=s*s+l*l+1;e+=r.radius**2/o,n+=s*r.radius**2/o**2,i+=l*r.radius**2/o**2}if(e>1.25){let t=Math.max(0,(-(.65*n)-.76*i)/(Math.hypot(n,i)||1));r=e<1.5?255:38+217*t}}l[t*n+a]=u(r)}return h(l,n,r,"ordered",.8)}function m(e,t,a){e.width=n,e.height=r;let i=e.getContext("2d",{willReadFrequently:!0});i.fillStyle="#000",i.fillRect(0,0,n,r);let s=a.rotation%180!=0,l=s?t.height:t.width,o=s?t.width:t.height,c=("cover"===a.fit?Math.max:Math.min)(n/l,r/o)*a.zoom;i.save(),i.translate(n/2+a.x*n,r/2+a.y*r),i.rotate(a.rotation*Math.PI/180),i.imageSmoothingEnabled=!0,i.imageSmoothingQuality="high",i.drawImage(t,-t.width*c/2,-t.height*c/2,t.width*c,t.height*c),i.restore();let d=i.getImageData(0,0,n,r).data,p=new Uint8Array(n*r);for(let e=0;e<p.length;e++){let t=u((.2126*d[4*e]+.7152*d[4*e+1]+.0722*d[4*e+2]-128)*a.contrast+128+255*a.brightness);p[e]=a.inverted?255-t:t}return h(p,n,r,a.dither,a.strength)}function f(e,t){e.width=n,e.height=r;let a=e.getContext("2d"),i=a.createImageData(n,r);t.forEach((e,t)=>{i.data.fill(e,4*t,4*t+3),i.data[4*t+3]=255}),a.putImageData(i,0,0)}},7635:()=>{},7828:(e,t,a)=>{"use strict";
1Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"workAsyncStorageInstance",{enumerable:!0,get:function(){return n}});let n=(0,a(4054).createAsyncLocalStorage)()},8225:()=>{},8328:(e,t,a)=>{"use strict";a.d(t,{Ml:()=>y,Tf:()=>s,Zk:()=>i,_K:()=>d,bv:()=>l,gO:()=>g,kV:()=>o,oe:()=>v});var n=a(818),r=a(9057);let i="1059809643712020",s=!0,l="noware:meta-pixel-consent";function o(){try{let e=(0,n.Xj)();return e.marketing&&e.saleOfData&&"denied"!==window.localStorage.getItem("noware:meta-pixel-consent")}catch(e){return!1}}function c(){return s&&!!i&&!(0,r.a)(window.location.pathname)&&o()}function d(){let e=()=>{var e,t,a,n;o()?s&&(null==(e=(t=window).fbq)||e.call(t,"consent","grant")):(u.length=0,m(),null==(a=(n=window).fbq)||a.call(n,"consent","revoke"))};return document.addEventListener(n.YE,e),e(),()=>document.removeEventListener(n.YE,e)}let u=[],h=null,p=0;function m(){null!==h&&(clearInterval(h),h=null)}function f(e,t,a){var n,r;null==(n=(r=window).fbq)||n.call(r,"track",e,t,{eventID:a})}function x(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"undefined"!=typeof crypto&&"function"==typeof crypto.randomUUID?crypto.randomUUID():"".concat(Date.now().toString(36),"-").concat(Math.random().toString(36).slice(2,10));if(c())return window.fbq?f(e,t,a):(u.length<20&&u.push([e,t,a]),null===h&&(p=0,h=setInterval(()=>{p+=1,window.fbq?function(){if(!window.fbq)return;m();let e=u.splice(0,u.length);if(c())for(let[t,a,n]of e)f(t,a,n)}():p>=50&&(u.length=0,m())},100))),a}function v(e){return x("PageView",{},e)}function g(e){return x("ViewContent",{content_ids:[e.variantId],content_type:"product",content_name:e.name,currency:e.currency,value:e.value})}function y(e){return x("AddToCart",{content_ids:[e.variantId],content_type:"product",content_name:e.name,currency:e.currency,value:e.value,num_items:e.quantity})}},8567:(e,t,a)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"workAsyncStorage",{enumerable:!0,get:function(){return n.workAsyncStorageInstance}});let n=a(7828)},8644:()=>{},8993:()=>{},9504:()=>{}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.