https://www.affirm.com/sections-ScrollingStory-2fa1300ed458249e6903.js

1"use strict";(self.__LOADABLE_LOADED_CHUNKS__=self.__LOADABLE_LOADED_CHUNKS__||[]).push([[484],{65048:function(t,e,n){n.d(e,{A:function(){return T}});var i=n(77387),a=n(96540),r=n(85237),s=n.n(r),o=n(6621),l=n(66835),c=n(11896),d=n(24908),m=n(82903),h="Blob-image--3WndI",p="Blob-imageActive--eYPb5",v="Blob-imageTransitionIn--5navC",u="Blob-imageTransitionOut--3qy12";let b=function(t){function e(e){var n;(n=t.call(this,e)||this).vbX=0,n.vbY=0,n.vbWidth=0,n.vbHeight=0,n.maxRadius=0,n.minRadius=0,n.minMiddleRadius=0,n.maxMiddleRadius=0,n.centerX=0,n.centerY=0,n.acceleration=1,n.destAcceleration=1,n.coefAcceleration=.2,n.path=void 0,n.clipPathId=void 0,n.points=[],n.startAngle=0,n.handleRAF=t=>{const{now:e}=t.detail;n.acceleration+=(n.destAcceleration-n.acceleration)*n.coefAcceleration;for(let i=0;i<n.points.length;i+=1){const t=n.points[i],a=(e-t.startAnim)/t.duration*n.acceleration;t.x=t.startX+(t.destX-t.startX)*(0,c.Di)(a),t.y=t.startY+(t.destY-t.startY)*(0,c.Di)(a),a>=1&&(t.reverseAnim?(t.startX=t.x,t.startY=t.y,t.destX=t.targetMaxX,t.destY=t.targetMaxY,t.reverseAnim=!1,t.startAnim=(0,l.h)()):(t.startX=t.x,t.startY=t.y,t.destX=t.targetMinX,t.destY=t.targetMinY,t.reverseAnim=!0,t.startAnim=(0,l.h)()))}n.path.current&&n.path.current.setAttribute("d",((t,e=1.2)=>{if(t&&Array.isArray(t)&&t.length>1){const n=t.length;if(n<1)return"M0 0";let i=`M ${t[0].x} ${t[0].y} C`;const a=6;for(let r=0;r<n;r+=1){const s=t[(r-1+n)%n],o=t[r],l=t[(r+1)%n],c=t[(r+2)%n];i+=` ${o.x+(l.x-s.x)/a*e} ${o.y+(l.y-s.y)/a*e} ${l.x-(c.x-o.x)/a*e} ${l.y-(c.y-o.y)/a*e} ${l.x} ${l.y}`}return`${i}z`}return""})(n.points))};const{angleOffset:i=0,images:r,viewBox:s=[0,0,100,100]}=n.props,[d,m,h,p]=s;return n.vbX=d,n.vbY=m,n.vbWidth=h,n.vbHeight=p,n.maxRadius=i<=0?.5*n.vbHeight:.45*n.vbHeight,n.minRadius=i<=0?43:38,n.minMiddleRadius=n.minRadius+.45*(n.maxRadius-n.minRadius),n.maxMiddleRadius=n.minRadius+.55*(n.maxRadius-n.minRadius),n.centerX=n.vbWidth/2,n.centerY=n.vbHeight/2,n.path=a.createRef(),r&&(n.clipPathId=(0,o.A)()),n}(0,i.A)(e,t);var n=e.prototype;return n.componentDidMount=function(){const{autoplay:t}=this.props;this.setPoints(),t&&this.eventsRAF(!0)},n.componentWillUnmount=function(){const{autoplay:t}=this.props;t&&this.eventsRAF(!1)},n.setPoints=function(){const{angleOffset:t=0,autoplay:e,maxDuration:n=2400,minDuration:i=2e3,numPoints:a=7}=this.props;this.points=[];const r=2*Math.PI/a;this.startAngle=(0,d.yT)(0,2*Math.PI);for(let s=0;s<a;s+=1){const a=(0,d.yT)(0,t),o=e?(0,l.h)()+s*(0,d.yT)(0,i):(0,l.h)(),c=this.startAngle+s*r+a,m=(0,d.yT)(i,n),h=this.centerX+Math.cos(c)*(0,d.yT)(this.minRadius,this.maxRadius),p=this.centerY+Math.sin(c)*(0,d.yT)(this.minRadius,this.maxRadius),v=this.centerX+Math.cos(c)*(0,d.yT)(this.minRadius,this.minMiddleRadius),u=this.centerY+Math.sin(c)*(0,d.yT)(this.minRadius,this.minMiddleRadius),b=this.centerX+Math.cos(c)*(0,d.yT)(this.maxMiddleRadius,this.maxRadius),g=this.centerY+Math.sin(c)*(0,d.yT)(this.maxMiddleRadius,this.maxRadius),f={angle:c,duration:m,startAnim:o,x:h,y:p,targetMinX:v,targetMinY:u,targetMaxX:b,targetMaxY:g,startX:h,startY:p,destX:b,destY:g};this.points.push(f)}},n.eventsRAF=function(t){t?(m.A.addItem(),window.addEventListener("RAF",this.handleRAF,!1)):(m.A.removeItem(),window.removeEventListener("RAF",this.handleRAF,!1))},n.render=function(){const{activeIndex:t,bkgColor:e,extraClassName:n,hoverImages:i,images:r,noTransition:o,startTransition:l}=this.props,c=s()("Blob-blob--191Jt",n);return r?a.createElement("svg",{className:c,viewBox:`${this.vbX} ${this.vbY} ${this.vbWidth} ${this.vbHeight}`},a.createElement("clipPath",{id:this.clipPathId},a.createElement("path",{ref:this.path})),a.createElement("g",{clipPath:`url(#${this.clipPathId})`},a.createElement("rect",{width:"100%",height:"100%",fill:e}),r.map((e,n)=>{const i=s()(h,{[p]:n===t,[u]:!o&&l,[v]:!o&&!1===l&&n===t});return a.createElement("image",{key:e,className:i,xlinkHref:e,width:"100",height:"100",preserveAspectRatio:"xMidYMid slice"})}),i&&i.map((e,n)=>{const i=s()(h,"Blob-hoverImage--29aG8",{[p]:n===t,[u]:!o&&l,[v]:!o&&!1===l&&n===t});return a.createElement("image",{key:e,className:i,xlinkHref:e,width:"100",height:"100",preserveAspectRatio:"xMidYMid slice"})}))):a.createElement("svg",{className:c,viewBox:`${this.vbX} ${this.vbY} ${this.vbWidth} ${this.vbHeight}`},a.createElement("path",{ref:this.path,fill:e}))},e}(a.Component);b.defaultProps={activeIndex:0,angleOffset:0,autoplay:!1,bkgColor:"none",extraClassName:null,hoverImages:null,images:null,maxDuration:2400,minDuration:2e3,noTransition:!1,numPoints:7,startTransition:null,viewBox:[0,0,100,100]};var g=b,f=n(99993),x=n(1846),R="BlobWithPattern-patternTransitionFast--480ip",y="BlobWithPattern-patternTransitionIn--1Gv1Q",O="BlobWithPattern-patternTransitionOut--2m6QY";let A=function(t){function e(e){var n;return(n=t.call(this,e)||this).imgRef=void 0,n.imgRef=a.createRef(),n}(0,i.A)(e,t);var n=e.prototype;return n.componentDidUpdate=function(t){const{pattern:e}=this.props;t.pattern!==e&&this.imgRef.current&&(this.imgRef.current.src="",this.imgRef.current.src=e)},n.render=function(){const{activeIndex:t,alt:e,bkgColor:n,enteredOnce:i,extraClassName:r,fastPatternTransition:o,hoverImages:l,images:c,noAppear:d,noBlob:m,noImageTransition:h,onRef:p,parallax:v,pattern:u,startTransition:b}=this.props,f=s()("BlobWithPattern-blobWithPattern--3g3TP appear",r,{enteredOnce:i,noAppear:d}),A=s()("BlobWithPattern-pattern--4PFR6",{[O]:b,[y]:!b,[R]:o});return a.createElement("div",{ref:p,className:f},a.createElement("div",{className:"BlobWithPattern-container--6epOG"},v?a.createElement(x.A,{speed:40,extraClassName:"BlobWithPattern-patternParallaxWrapper--6ITdY",reverse:!0,imageToLoad:u},a.createElement("img",{ref:this.imgRef,className:A,src:u,alt:""})):a.createElement("img",{ref:this.imgRef,className:A,src:u,alt:""}),a.createElement("div",{className:"BlobWithPattern-blobWrapper--6960f"},m?a.createElement("img",{className:"BlobWithPattern-image--6QSxV",src:c[0],alt:e}):a.createElement(g,{autoplay:!0,activeIndex:t,bkgColor:n,images:c,hoverImages:l,angleOffset:.3,noTransition:h,startTransition:b}))))},e}(a.Component);A.defaultProps={activeIndex:0,alt:"",bkgColor:"none",extraClassName:null,fastPatternTransition:!1,noBlob:!1,noImageTransition:!1,parallax:!0,startTransition:null};var T=(0,f.A)()(A)},85849:function(t,e,n){n.r(e),n.d(e,{default:function(){return A}});var i=n(77387),a=n(96540),r=n(85237),s=n.n(r),o=n(99993),l=n(50133),c=n(65048),d=n(99656),m=n(24287),h=n(48078),p=n(36195),v=n(36363),u=n(22759),b=n(33313);const g=a.forwardRef((t,e)=>{const{description:n,index:i,title:r}=t,{currentLocale:o,stringBank:l}=(0,p.tz)(),c={description:b.rf,panel:s()("Panel-panel--p5Rsm"),title:s()("Panel-title--3GJaF",b.h1)},d={renderMark:{[m.MARKS.BOLD]:t=>a.createElement("strong",{className:b.Cr},t),[m.MARKS.ITALIC]:t=>a.createElement("span",{className:b.TN},t)},renderNode:{[m.BLOCKS.PARAGRAPH]:(t,e)=>a.createElement(a.Fragment,null,e)},renderText:(0,v.Ci)(o,l)};return a.createElement("div",{className:c.panel,"data-index":i,ref:e},a.createElement("div",{className:"Panel-content--1pxoO"},(0,u.o)(r)&&a.createElement("div",{className:c.title},(0,h.C)(r,d)),(0,u.o)(n)&&a.createElement("p",{className:c.description},(0,h.C)(n,d))))});var f=g,x="ScrollingStory-blobFixed--vv9kf",R="ScrollingStory-blobWrapperBottom--d1xbx",y="ScrollingStory-blobWrapperFixed--1mFoz";let O=function(t){function e(e){var n;return(n=t.call(this,e)||this).state={activeIndex:0,blobBottom:!1,blobFixed:!1,startTransition:null},n.panelRefs={},n.storyRef=null,n.panelObserver=void 0,n.bottomObserver=void 0,n.topObserver=void 0,n.transitionTimeout=void 0,n.panelObserverOpts=void 0,n.storyBottomObserverOpts=void 0,n.storyTopObserverOpts=void 0,n.handlePanel=t=>{const{activeIndex:e}=n.state;t.forEach(t=>{if(t.isIntersecting&&t.target.dataset.index){const i=parseInt(t.target.dataset.index||"0",10);e!==i&&n.setState({startTransition:!0}),n.transitionTimeout&&clearTimeout(n.transitionTimeout),n.transitionTimeout=setTimeout(()=>{n.setState({activeIndex:i,startTransition:!1})},300)}})},n.handleBottom=t=>{t.forEach(t=>{const{boundingClientRect:{top:e},isIntersecting:i}=t;e<0&&(i?n.setState({blobBottom:!1,blobFixed:!0}):n.setState({blobBottom:!0,blobFixed:!1}))})},n.handleTop=t=>{t.forEach(t=>{const{boundingClientRect:{bottom:e,top:i},isIntersecting:a}=t;a&&i>0&&n.setState({blobBottom:!1,blobFixed:!0}),!a&&e>0&&n.setState({blobBottom:!1,blobFixed:!1})})},n.panelObserverOpts={rootMargin:"-20% 0% -20% 0%",threshold:[.5]},n.storyBottomObserverOpts={rootMargin:"-80% 0% 0% 0%"},n.storyTopObserverOpts={rootMargin:"0% 0% -80% 0%"},n}(0,i.A)(e,t);var n=e.prototype;return n.componentDidMount=function(){this.panelObserver=new IntersectionObserver(this.handlePanel,this.panelObserverOpts),Object.keys(this.panelRefs).forEac

1h(t=>{var e;const n=this.panelRefs[t].current;n&&(null===(e=this.panelObserver)||void 0===e||e.observe(n))}),this.bottomObserver=new IntersectionObserver(this.handleBottom,this.storyBottomObserverOpts),this.storyRef&&this.bottomObserver.observe(this.storyRef),this.topObserver=new IntersectionObserver(this.handleTop,this.storyTopObserverOpts),this.storyRef&&this.topObserver.observe(this.storyRef)},n.componentWillUnmount=function(){var t,e,n;null===(t=this.panelObserver)||void 0===t||t.disconnect(),null===(e=this.bottomObserver)||void 0===e||e.disconnect(),null===(n=this.topObserver)||void 0===n||n.disconnect(),this.transitionTimeout&&clearTimeout(this.transitionTimeout)},n.getOrCreateRef=function(t){return Object.prototype.hasOwnProperty.call(this.panelRefs,t)||(this.panelRefs[t]=a.createRef()),this.panelRefs[t]},n.render=function(){var t,e,n;const{enteredOnce:i,noAppear:r,onRef:o,panels:m}=this.props,{activeIndex:h,blobBottom:p,blobFixed:v,startTransition:u}=this.state,b=[],g=m[h].backgroundColorOfImage,O=m[h].pattern?(0,l.rt)((null===(t=m[h].pattern)||void 0===t||null===(e=t.file)||void 0===e?void 0:e.url)||"",1276):"",A=m[h].pattern?null===(n=m[h].pattern)||void 0===n?void 0:n.description:"";m.forEach(t=>{var e;const n=t.image?(0,l.rt)((null===(e=t.image.file)||void 0===e?void 0:e.url)||"",1134):"";b.push(n)});const T=s()("ScrollingStory-scrollingStory--3YzZj",{enteredOnce:i,noAppear:r}),E=s()("ScrollingStory-blobWrapper--7ktET",{[y]:v},{[R]:p}),I=s()("ScrollingStory-blob--6X1Q3",{[x]:v});return a.createElement(d.A,null,a.createElement("div",{className:T,ref:t=>{null==o||o(t),this.storyRef=t}},a.createElement("div",{className:"ScrollingStory-panels--4tFiS"},m.map((t,e)=>a.createElement(f,Object.assign({ref:this.getOrCreateRef(t.id),key:t.id},t,{index:e})))),a.createElement("div",{className:E},a.createElement("div",{className:I},a.createElement(c.A,{activeIndex:h,bkgColor:g,fastPatternTransition:!0,images:b,parallax:!1,pattern:O,noImageTransition:!0,startTransition:u,alt:null!=A?A:void 0,hoverImages:[]})))))},e}(a.Component);var A=(0,o.A)()(O)}}]);