1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[369,9552],{44395:function(n,e,t){t.r(e),t.d(e,{SectionBreakdown:function(){return SectionBreakdown}});var i=t(73235),a=t(52322),s=t(41304),r=t(96577),o=t.n(r),l=t(51393),c=t(2784),d=t(4960),h=t(48828),p=t(45164),g=t(51526),m=t(84006),f=t(22713);function _templateObject(){let n=(0,i._)(["\n position: relative;\n\n &.is-active {\n .ms-scroller {\n cursor: col-resize;\n }\n }\n\n .reveal-image {\n position: absolute !important;\n width: 100%;\n top: 0;\n left: 0;\n pointer-events: none;\n user-select: none;\n }\n\n .ms-cursor {\n position: fixed;\n left: 0;\n top: 0;\n position: absolute;\n top: -17px;\n height: calc(100% + 22px);\n background-color: #000;\n width: 1px;\n\n &:before,\n &:after {\n content: '';\n position: absolute;\n top: 0;\n height: 11px;\n width: 6px;\n }\n\n &:before {\n background-image: url('/svg/chevron-right.svg');\n background-size: 100%;\n background-repeat: no-repeat;\n left: 11px;\n }\n &:after {\n background-image: url('/svg/chevron-left.svg');\n background-size: 100%;\n background-repeat: no-repeat;\n right: 11px;\n }\n }\n\n .ms-scroller {\n width: 100%;\n height: calc(100% + 47px);\n position: absolute;\n top: -20px;\n margin: 0;\n opacity: 0;\n cursor: grab;\n z-index: 1;\n }\n\n .flex-container {\n position: absolute;\n width: 100%;\n display: flex;\n justify-content: space-between;\n margin-top: 11px;\n }\n\n .images-container {\n overflow: hidden;\n position: relative;\n }\n\n input {\n width: max-content;\n }\n input[type='range']::-webkit-slider-thumb {\n width: 100px;\n height: 100px;\n background: red;\n }\n"]);return _templateObject=function(){return n},n}let x=f.ZP.div.withConfig({componentId:"sc-eef467a8-0"})(_templateObject()),SplitImage=n=>{let{data:e,scrollYProgress:t,isAnimated:i}=n,[s,r]=e,[f,u]=(0,c.useState)(!1),v=(0,c.useRef)(null),w=(0,d.c)(.5),b=(0,h.H)(w,[0,1],["0%","100%"],{clamp:!0}),j=(0,h.H)(w,[0,1],["inset(0 0 0 0%)","inset(0 0 0 100%)"]);(0,l.Z)();let changePosition=n=>{w.set(Number(n.target.value)/100)};return s&&r&&(0,a.jsxs)(x,{ref:v,className:"container-variant-4 ".concat(f?"is-active":""),children:[(0,a.jsxs)("div",{className:"images-container",children:[(0,a.jsx)(p.E.figure,{children:(0,a.jsx)(o(),{src:r.src,layout:"fill",alt:null==r?void 0:r.alt})}),(0,a.jsx)(g.M,{children:(0,a.jsx)(p.E.figure,{className:"reveal-image",style:{clipPath:j},children:(0,a.jsx)(o(),{src:s.src,layout:"fill",alt:null==s?void 0:s.alt})})})]}),(0,a.jsx)("input",{type:"range",min:"0",max:"100",className:"ms-scroller",onChange:n=>changePosition(n),onMouseUp:()=>u(!1),onMouseDown:()=>u(!0)}),(0,a.jsx)(g.M,{children:(0,a.jsx)(p.E.div,{style:{left:b},transition:{...(0,m.us)()},className:"ms-cursor"})}),(0,a.jsxs)("div",{className:"flex-container",children:[(0,a.jsx)("p",{className:"body-s uppercase",children:"Before"}),(0,a.jsx)("p",{className:"body-s uppercase",children:"After"})]})]})};var u=t(23925),v=t(50564),w=t(14025),b=t(24213),j=t(96995),y=t(17295);let N=0,k=0,S=0,z=!0;function Plane(n){let{location:e,imgSrc:t,negative:i,animationState:s,cosScalePlane:r}=n,o=(0,y.D)(j.TextureLoader,t);o.minFilter=j.LinearFilter;let l=new j.PlaneGeometry(2,1);return(0,c.useEffect)(()=>{let n=975/495,e=o.image.width/o.image.height;(N=975*o.image.height/(495*o.image.width))>1?(z=!1,N=1,k=495*o.image.width/(975*o.image.height),o.repeat.set(N,k),S=.5*(1-e/n),o.offset.y=S):(N=975*o.image.height/(495*o.image.width),k=1,S=.5*(1-n/e),o.repeat.set(N,k),o.offset.x=S)},[o]),(0,w.W)(s,"change",n=>{let e=n*i,t=e-3;z?o.offset.x=S+-(S*t*n*.3):o.offset.y=S+-(S*t*n*.3);let a=1+Math.abs(n)*(e-1)*.1;o.repeat.set(N*a,k*a)}),(0,a.jsx)(u.E.group,{position:e,children:(0,a.jsxs)("mesh",{children:[(0,a.jsx)("primitive",{attach:"geometry",object:l}),(0,a.jsx)("meshBasicMaterial",{attach:"material",map:o,opacity:1,toneMapped:!1,side:j.FrontSide})]})})}var J=t(33567),H=t(39069);
1function SectionVFX1_templateObject(){let n=(0,i._)(["\n grid-area: 1 / 1 / span 1 / span 1;\n\n .breakdown-container {\n position: sticky;\n top: 0;\n height: 100svh;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 100%;\n gap: 30px;\n padding: 0 var(--gap);\n\n "," {\n padding-top: 115px;\n padding-bottom: 105px;\n gap: var(--gap);\n }\n\n & > div {\n max-height: 495px; // 575px\n }\n\n .canvas-container {\n width: 100%;\n position: relative;\n height: ",";\n width: calc(100vw - 40px);\n bottom: ",";\n\n "," {\n height: ",";\n width: ",";\n bottom: ",";\n }\n\n .image-loader {\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n width: 100%;\n height: 100%;\n\n img {\n object-fit: cover;\n }\n }\n\n canvas {\n display: block;\n opacity: 0;\n }\n\n &.animated {\n .image-loader {\n opacity: 0;\n }\n canvas {\n opacity: 1;\n }\n }\n }\n\n .breakdown-text {\n "," {\n padding: 0;\n }\n\n "," {\n display: block;\n padding-inline: 0;\n\n h3 {\n ","\n margin-bottom: calc(var(--gap) / 2);\n max-width: 55%;\n }\n\n p {\n font-size: ",";\n line-height: ",";\n }\n }\n\n .left-col {\n grid-area: 1 /2 / span 1 / span 2;\n max-width: 300px;\n\n "," {\n @media (max-width: 1010px) {\n margin: 0 20px;\n grid-area: 1 / 1 / span 2 / span 2;\n }\n }\n }\n\n .right-col {\n grid-area: 1/4 / span 1 / span 2;\n\n "," {\n @media (max-width: 1010px) {\n margin: 0 20px;\n grid-area: 1/4 / span 1 / span 3;\n }\n }\n }\n }\n }\n\n &.redefine {\n .left-col {\n "," {\n font-size: 24px;\n }\n }\n }\n"]);return SectionVFX1_templateObject=function(){return n},n}let E=(0,f.ZP)(p.E.div).withConfig({componentId:"sc-5698cbc1-0"})(SectionVFX1_templateObject(),m.m7,(0,m.XB)(210,"mobile"),(0,m.XB)(3,"mobile"),m.YT,(0,m.Jc)(490),(0,m.Jc)(975),(0,m.Jc)(3),m.YT,m.m7,H.u$,(0,H.NN)(16,H.$H,"mobile"),(0,H.NN)(18,H.$H,"mobile"),m.YT,m.YT,m.YT),_=!1;function SectionVFX1(n){let{data:e,redefine:t=!1,scaleMovement:i=null,isAnimated:s=!1,scrollYProgress:r}=n,{subtitle:g,description:f,images:x}=e,j=(0,l.Z)(),y=(0,c.useRef)(null),[N,k]=(0,c.useState)(0),S=(0,c.useRef)(null),z=(0,c.useRef)(null),H=(0,d.c)(0),[P,Y]=(0,c.useState)(!1),T=(0,h.H)(H,[0,1],[1,.7]),B=(0,h.H)(H,[0,1],[1,1.2]),C=(0,h.H)(H,[0,1],[0,1]),X=(0,h.H)(H,[0,1],[0,-1]),[M,I]=(0,c.useState)(485),O=(0,h.H)(H,[0,1],[0,Math.PI/6*.2]),F=(0,h.H)(H,[0,1],[0,-Math.PI/6*1.2]);return(0,w.W)(r,"change",n=>{_||(n>.5&&!P&&Y(!0),n>.55&&!_?(_=!0,(0,b.j)(H,1,{type:"tween",ease:m.oI,duration:1}).then(()=>{_=!1})):(_=!0,(0,b.j)(H,0,{type:"tween",ease:m.oI,duration:1}).then(()=>{_=!1})))}),(0,c.useEffect)(()=>{x.map(n=>{let e=new Image;e.src=n.src,e.onload=()=>{}}),(0,b.j)(H,1,{duration:.1}).then(()=>{(0,b.j)(H,0,{duration:.1})})},[]),(0,c.useEffect)(()=>{let handleResize=()=>{let n=window.innerWidth;I(j?215*n/484:n>1512?485:485*n/1512)};return handleResize(),window.addEventListener("resize",handleResize),()=>window.removeEventListener("resize",handleResize)},[j]),x.length>=3&&(0,a.jsx)(E,{className:"".concat(t?"redefine":""),ref:z,children:(0,a.jsxs)(p.E.div,{style:{scale:i},className:"breakdown-container container",children:[(0,a.jsxs)("div",{className:"canvas-container ".concat(s&&P?"animated":""),children:[(0,a.jsx)("figure",{className:"image-loader",children:(0,a.jsx)(o(),{src:x[2].src,fill:!0})}),(0,a.jsxs)(v.Xz,{resize:{debounce:{scroll:5,resize:5}},gl:{antialias:!0,alpha:!0},ref:S,children:[(0,a.jsx)(J.i,{zoom:M,near:.3,far:1e7,position:[0,0,10],makeDefault:!0,ref:y}),(0,a.jsxs)(u.E.group,{scale:[T,T,T],rotation:[O,F,0],children:[x[0]&&(0,a.jsx)(Plane,{cosScalePlane:B,animationState:H,imgSrc:x[0].src,location:[0,0,X],negative:1}),x[1]&&(0,a.jsx)(Plane,{cosScalePlane:B,animationState:H,imgSrc:x[1].src,location:[0,0,0],negative:0}),x[2]&&(0,a.jsx)(Plane,{cosScalePlane:B,animationState:H,imgSrc:x[2].src,location:[0,0,C],negative:-1})]})]})]}),(0,a.jsxs)("div",{className:"container breakdown-text grid",children:[(0,a.jsx)("h3",{className:"left-col body-l white",children:g}),(0,a.jsx)("p",{className:"right-col body-s white",children:f.includes("\xae")?f.split("").map((n,e)=>"\xae"===n?(0,a.jsx)("sup",{children:n},e):(0,a.jsx)("span",{children:n},e)):f})]})]})})}
1var P=t(37830),Y=t(41842),T=t(79645);function SectionBreakdown_templateObject(){let n=(0,i._)(["\n &,\n * {\n /* outline: 1px solid pink; */\n }\n\n display: grid;\n height: 100svh;\n .bg-container {\n grid-area: 1 / 1 / span 1 / span 1;\n\n position: sticky;\n top: 0;\n width: 100%;\n height: 100%;\n z-index: 0;\n }\n\n .split-text-container {\n grid-area: 1 / 1 / span 1 / span 1;\n\n position: sticky;\n top: 0;\n pointer-events: none;\n user-select: none;\n margin: 0 20px;\n height: 100svh;\n\n "," {\n margin: 0 auto;\n width: 100%;\n }\n\n "," {\n &.sml {\n h3 {\n font-size: ",";\n }\n }\n }\n\n h3 {\n font-size: ",";\n max-width: calc(100% - 10px);\n\n "," {\n max-width: ",";\n font-size: ",";\n\n @media screen and (max-height: 740px) {\n font-size: ","vh;\n }\n }\n }\n\n .title-1 {\n z-index: 10;\n position: absolute;\n left: 50%;\n top: 50%;\n }\n\n .title-2 {\n z-index: 10;\n position: absolute;\n right: 50%;\n bottom: 50%;\n text-align: right;\n }\n }\n\n .variant-container {\n position: sticky;\n top: 0;\n height: 100svh;\n grid-area: 1 / 1 / span 1 / span 1;\n\n "," {\n grid-area: 1 / 1 / span 2 / span 1;\n }\n }\n\n &.variant-1 {\n height: 250svh;\n\n .split-text-container {\n height: 100svh;\n max-height: unset;\n color: var(--dneg-white-noise);\n\n "," {\n @media screen and (max-height: 790px) {\n h3 {\n font-size: ","vh;\n }\n }\n }\n\n "," {\n @media screen and (max-height: 950px) {\n h3 {\n font-size: ","vh;\n }\n }\n }\n }\n\n .variant-container {\n height: 100svh;\n }\n }\n\n &.variant-2 {\n section.alternative {\n grid-area: 1 / 2 / span 2 / span 4;\n justify-self: center;\n align-self: center;\n width: 100%;\n display: flex;\n flex-direction: column-reverse;\n\n "," {\n grid-column: 1/-1;\n }\n\n .fader {\n max-width: 100%;\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n "," {\n height: ",";\n width: ",";\n max-width: 100%;\n\n @media screen and (max-height: 950px) {\n height: 48vh;\n }\n\n figure {\n position: relative;\n height: ",";\n width: ",";\n }\n }\n\n "," {\n height: ",";\n width: 100%;\n\n figure {\n height: ",";\n width: 100%;\n }\n }\n }\n\n .flex-top {\n margin-top: 17px;\n }\n }\n }\n\n &.variant-3 {\n .split-text-container {\n "," {\n .title-1 {\n width: 60%;\n }\n }\n }\n .image-1 {\n grid-area: 1 / 2 / span 1 / span 2;\n padding-top: 120px;\n\n figure {\n width: ",";\n height: ",";\n\n "," {\n @media screen and (max-height: 950px) {\n height: ","vh;\n }\n }\n\n img {\n object-fit: cover;\n }\n }\n }\n\n .image-2 {\n grid-area: 2 / 2 / span 1 / span 2;\n align-self: end;\n margin-top: 120px;\n padding-bottom: 55px;\n\n figure {\n width: ",";\n height: ",";\n\n "," {\n @media screen and (max-height: 950px) {\n height: ","vh;\n }\n }\n\n img {\n object-fit: cover;\n }\n }\n }\n\n .image-3 {\n margin-top: 39%;\n grid-area: 1 / 4 / span 2 / span 3;\n\n figure {\n position: relative;\n width: ",";\n height: ",";\n\n img {\n object-fit: cover;\n }\n }\n\n "," {\n @media screen and (max-height: 950px) {\n margin-top: 29%;\n figure {\n height: ","vh;\n }\n }\n }\n }\n\n "," {\n .variant-container {\n grid-template-rows: repeat(4, 1fr);\n }\n\n .image-1 figure {\n width: 100%;\n height: ",";\n }\n\n .image-2 figure {\n width: ",";\n height: ",";\n }
1\n\n .title-2 {\n grid-row: 4;\n }\n\n .image-1 {\n grid-row: 1/3;\n grid-column: 4/-1;\n padding-top: 0;\n margin-right: calc(-1 * var(--gap));\n align-self: start;\n }\n\n .image-2 {\n grid-row: 2/3;\n grid-column: 1/4;\n }\n\n .image-3 {\n grid-row: 3/4;\n grid-column: 1/-1;\n margin-top: 0;\n /* overflow-x: hidden; */\n\n .container-variant-4 {\n "," {\n width: 100%;\n\n .images-container {\n width: 100%;\n }\n }\n }\n\n section {\n max-width: 100%;\n }\n\n figure {\n width: 100%;\n height: ",";\n max-width: 100%;\n aspect-ratio: 365 / 185;\n }\n }\n }\n }\n\n &.variant-4 {\n .image-3 {\n flex-grow: 0;\n flex: 1;\n display: flex;\n justify-content: center;\n align-items: center;\n align-self: center;\n justify-self: center;\n transform: translateY(-6px);\n\n height: auto;\n /* max-height: 100%; */\n width: auto;\n\n "," {\n grid-column-end: 6;\n width: 100%;\n }\n\n grid-area: 1 / 1 / span 1 / span 6;\n\n .container-variant-4 {\n "," {\n width: 100%;\n }\n\n figure {\n position: relative;\n\n "," {\n width: ",";\n height: ",";\n max-height: calc(100svh - 262px);\n max-width: 100%;\n aspect-ratio: 1223 / 620;\n }\n\n "," {\n width: 100%;\n height: ",";\n max-width: 100%;\n aspect-ratio: 365 / 185;\n /* height: ","; */\n }\n\n img {\n object-fit: cover;\n }\n }\n }\n }\n\n "," {\n section figure {\n }\n }\n }\n\n &.variant-5 {\n .video-container {\n padding: 0;\n grid-area: 1 / 1 / span 2 / span 5;\n justify-self: center;\n align-self: center;\n width: 100%;\n\n "," {\n grid-area: 1 / 2 / span 2 / span 4;\n }\n }\n }\n\n &.redefine {\n .sml {\n h3 {\n font-size: ",";\n }\n }\n h3 {\n font-size: ",";\n line-height: 87.5%;\n font-weight: 400;\n\n "," {\n font-size: ",";\n }\n }\n }\n\n .no-overflow {\n overflow: hidden;\n position: relative;\n }\n\n .container.klk {\n width: calc(100vw - 40px);\n\n "," {\n width: 100vw;\n }\n }\n"]);return SectionBreakdown_templateObject=function(){return n},n}let B=(0,f.ZP)(p.E.section).withConfig({componentId:"sc-8c7dd600-0"})(SectionBreakdown_templateObject(),m.YT,m.m7,(0,H.NN)(40,H.$H,"mobile"),(0,H.NN)(70,H.$H,"mobile"),m.YT,(0,m.Jc)(726),(0,m.Jc)(100),80/740*100,m.YT,m.m7,70/860*100,m.YT,75/950*100,m.m7,m.YT,(0,m.Jc)(565),(0,m.Jc)(975),(0,m.Jc)(565),(0,m.Jc)(975),m.m7,(0,m.XB)(209,"mobile"),(0,m.XB)(209,"mobile"),m.m7,(0,m.Jc)(314),(0,m.Jc)(436),m.YT,436/950*100,(0,m.Jc)(477),(0,m.Jc)(242),m.YT,242/950*100,(0,m.Jc)(726),(0,m.Jc)(368),m.YT,368/950*100,m.m7,(0,m.XB)(212,"mobile"),(0,m.XB)(194,"mobile"),(0,m.XB)(171,"mobile"),m.m7,(0,m.Jc)(185,"mobile"),m.m7,m.m7,m.YT,(0,m.Jc)(1223),(0,m.Jc)(620),m.m7,(0,m.Jc)(185,"mobile"),(0,m.Jc)(300,"mobile"),m.m7,m.YT,(0,H.NN)(50,H.$H,"mobile"),(0,m.Jc)(90),m.m7,(0,H.NN)(50,H.$H,"mobile"),m.YT),SectionBreakdown=n=>{let{data:e,redefine:t=!1}=n,{title1:i,title2:s,images:r,imagesBeforeAfter:g,video:f,variant:x}=e,u=Math.max(i.length,s.length),[v,j]=r,y=2===x?r.map(n=>({image:n})):[],[N,k]=(0,c.useState)(!1),[S,z]=(0,c.useState)(!1),J=(0,d.c)(0),H=(0,c.useRef)(null),E=(0,l.Z)(),{scrollYProgress:_}=(0,T.v)({target:H,offset:["start end","end end"]}),P=1===x?.45:.66,C=(0,h.H)(_,[0,P],[1===x?"-44%":E?"-18%":"-38%","0%"]),X=(0,h.H)(J,[0,1],[0,1]),M=(0,h.H)(J,[0,1],[t?"#fff":"#fbfbf0",1===x?"#2a282f":t?"#fff":"#fbfbf0"]),I=(0,h.H)(J,[0,1],["#2a2830",1===x?"#fbfbf0":"#2a2830"]),O=(0,h.H)(J,[0,1],[E?"0":"50%",E?"0%":"2%"]),F=(0,h.H)(J,[0,1],["50%","5%"]),R=(0,h.H)(J,[0,1],[E?"0%":"50%","0%"]),Z=(0,h.H)(J,[0,1],[E?"0%":"-50%","0%"]),V=(0,h.H)(J,[0,1],["100%","0%"]),$=(0,h.H)(J,[0,1],["-100%","0%"]);(0,h.H)(J,[0,1],[0,1]);let A=(0,h.H)(_,[0,P,1],[1,1,1.2]);(0,w.W)(_,"change",n=>{n>P&&!N&&(k(!0),(0,b.j)(J,1,{type:"tween",ease:m.oI,duration:1}).then(()=>{setTimeout(()=>{z(!0)},500)}))});let reset=()=>{k(!1),J.set(0)};return(0,c.useEffect)(()=>reset(),[]),(0,a.jsxs)(B,{ref:H,style:{backgroundColor:M},className:"".concat(1!==x?"container ":""," variant-").concat(x," ").concat(t?"redefine":""),children:[1===x&&(0,a.jsx)(SectionVFX1,{scaleMovement:X,isAnimated:S,scrollYProgress:_,redefine:t,data:e}),1!==x&&(0,a.jsxs)(p.E.div,{style:{scale:X},className:"variant-container grid ".concat(3!==x?"no-rows":""),children:[2===x&&(0,a.jsx)(Y.k,{scaleMovement:A,height:"100%",className:"alternative",slides:y}),3===x&&(0,a.jsxs)(a.Fragment,{children:[(null==v?void 0:v.src)&&(0,a.jsx)("div",{className:"no-overflow image-1",children:(0,a.jsx)(p.E.figure,{children:(0,a.jsx)(o(),{src:v.src,width:0,height:0,sizes:"100vw",style:{width:"100%",height:"100%"},alt:null==v?void 0:v.alt})})}),(null==j?void 0:j.src)&&(0,a.jsx)("div",{className:"no-overflow image-2",children:(0,a.jsx)(p.E.figure,{children:(0,a.jsx)(o(),{src:j.src,width:0,height:0,sizes:"100vw",style:{width:"100%",height:"100%"},alt:null==j?void 0:j.alt})})})]}),(4===x||3===x)&&(0,a.jsx)("div",{className:"image-3",children:(0,a.jsx)(SplitImage,{isA
1nimated:N,scrollYProgress:_,data:g})}),5===x&&f&&(0,a.jsx)(p.E.div,{className:"video-container",children:(0,a.jsx)(VideoComponent,{scaleMovement:A,data:f})})]}),(i||s)&&(0,a.jsx)(p.E.div,{style:{y:N?"0%":C},className:"split-text-container ".concat(1===x?"container klk":""," ").concat(u>20?"sml":""),children:(0,a.jsxs)(a.Fragment,{children:[i&&(0,a.jsx)(p.E.h3,{style:{top:F,left:O,x:Z,y:$,color:I},className:"title-1",children:i.includes("\xae")?i.split("").map((n,e)=>"\xae"===n?(0,a.jsx)("sup",{children:n},e):(0,a.jsx)("span",{children:n},e)):i}),s&&(0,a.jsx)(p.E.h3,{style:{bottom:F,right:O,x:R,y:V,color:I},className:"title-2",children:s.includes("\xae")?s.split("").map((n,e)=>"\xae"===n?(0,a.jsx)("sup",{children:n},e):(0,a.jsx)("span",{children:n},e)):s})]})},N)]})},VideoComponent=n=>{let{data:e,scaleMovement:t}=n,{caption:i,posterImage:r,video:o,title:l}=e,c=r&&r.fields?{src:(0,P.Jn)(r),alt:"Video - "+i}:null;return(0,a.jsx)(s.Y,{breakdown:!0,withCaption:!0,caption:i||l,url:o,poster:c.src,buttonRed:!0,active:!0,volume:1,scaleMovement:t})}},41842:function(n,e,t){t.d(e,{k:function(){return AlphaSlider}});var i=t(73235),a=t(52322),s=t(51393),r=t(2784),o=t(22713),l=t(96577),c=t.n(l),d=t(24991),h=t(6158);t(84173);var p=t(41304),g=t(84006),m=t(45164);function _templateObject(){let n=(0,i._)(["\n &.cta-slider {\n .fader {\n overflow: hidden;\n height: ",";\n width: ",";\n\n "," {\n width: calc(100vw - 40px);\n height: ",";\n }\n\n figure {\n position: relative;\n height: ",";\n width: ",";\n\n "," {\n width: calc(100vw - 40px);\n height: ",";\n }\n\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n }\n }\n }\n\n .fader__slide {\n width: 100%;\n height: 100%;\n grid-area: 1 / 1 / span 1 / span 1;\n pointer-events: none;\n user-select: none;\n\n &.active {\n pointer-events: initial;\n user-select: initial;\n }\n\n "," {\n .video-container,\n .video-container > div,\n .video-container > div > div {\n height: 100%;\n }\n }\n }\n\n .fader {\n position: relative;\n display: grid;\n overflow: hidden;\n\n &.no-video {\n aspect-ratio: 16 / 9;\n }\n\n "," {\n /* height: ",";\n width: calc(100vw - 40px); */\n\n .video-player-container {\n /* height: ","!important; */\n width: calc(100vw - 40px);\n }\n }\n\n figure {\n position: relative;\n width: ",";\n height: 100%;\n /* height: ","; */\n\n "," {\n /* height: ","!important; */\n width: calc(100vw - 40px);\n }\n\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n }\n }\n\n .flex {\n display: flex;\n justify-content: space-between;\n gap: 20px;\n }\n\n .flex-top {\n margin-bottom: 17px;\n }\n\n .flex-bottom {\n margin-top: 13px;\n }\n\n &.scale-movement {\n .fader {\n overflow: hidden;\n }\n }\n"]);return _templateObject=function(){return n},n}let f=o.ZP.section.withConfig({componentId:"sc-69f1c573-0"})(_templateObject(),(0,g.Jc)(610),(0,g.Jc)(975),g.m7,(0,g.XB)(380,"mobile"),(0,g.Jc)(610),(0,g.Jc)(975),g.m7,(0,g.XB)(380,"mobile"),g.m7,g.m7,(0,g.Jc)(257,"mobile"),(0,g.Jc)(257,"mobile"),(0,g.Jc)(726),(0,g.Jc)(455),g.m7,(0,g.Jc)(257,"mobile")),AlphaSlider=n=>{let{slides:e=[],className:t="",scaleMovement:i=null,redefine:o=!1}=n,[l,x]=(0,r.useState)([]),[u,v]=(0,r.useState)(0),w=(0,s.Z)(),b=(0,r.useRef)({slides:e.length,loop:!0,detailsChanged(n){let e=n.track.details.slides.map(n=>n.portion);x(e)},slideChanged:n=>{v(n.track.details.rel)}}),[j,y]=(0,h.E)(b.current);return(0,a.jsxs)(f,{ref:j,className:"alpha-slider ".concat(t," ").concat(i?"scale-movement":""),children:[e.length>1&&(0,a.jsxs)("div",{className:"flex flex-top",children:[(0,a.jsx)("button",{className:"body-s uppercase",onClick:()=>{var n;return null===(n=y.current)||void 0===n?void 0:n.prev()},children:d.ZP.t("slider-prev")}),(0,a.jsxs)("p",{className:"body-s uppercase",children:[u+1," - ",e.length]}),(0,a.jsx)("button",{className:"body-s uppercase",onClick:()=>{var n;return null===(n=y.current)||void 0===n?void 0:n.next()},children:d.ZP.t("slider-next")})]}),(0,a.jsx)("div",{className:"fader".concat((null==e?void 0:e.some(n=>!!(null==n?void 0:n.video)))?"":" no-video"),children:e.map((n,e)=>{let{image:t,video:i,caption:s,title:r}=n,{src:d,alt:h}=t||{};return(0,a.jsxs)(m.E.div,{className:"fader__slide ".concat(u===e?"active":""),style:{opacity:l[e]},transition:{...(0,g.us)(.3,!0)},children:[d&&!i&&(0,a.jsx)("figure",{children:(0,a.jsx)(c(),{src:d,layout:"fill",sizes:"100vw",alt:h})}),i&&(0,a.jsx)(a.Fragment,{children:(0,a.jsx)("div",{className:"video-container",children:(0,a.jsx)(p.Y,{withCaption:!0,showModal:w,caption:s||r||"",url:i,poster:d,inline:!0,redefine:o,volume:1,active:u===e})})})]},e)})})]})}}}]);
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.