{"version":3,"file":"shared-lib.B85A8We6.mjs","names":["useState","useMemo","ShaderMount","useMemo","useRef","ShaderMountVanilla","React.useContext","React.useMemo","React.Fragment","React.forwardRef","useRef","React.useId","useId","useRef","useCallback","fonts","css","className","fonts","css","className","metadata","metadataVersion","__FramerMetadata__","metadata","siteMetadata"],"sources":["https:/framerusercontent.com/modules/k76epLFsVsF4jlsF5pgg/vhK3G0ntf62fqS2tFDno/useColors.js","https:/framerusercontent.com/modules/NLpw4UPElXpirDfZ8gK3/pnnblFdmCm84r7TGjG3U/shader_mount.js","https:/framerusercontent.com/modules/zIDOp1iaNFIXSAIx7ljo/VX06XYWdAlD95B9usTKm/warp.js","https:/framerusercontent.com/modules/r591zLdRh7n2CKaaHRG7/PCYxubr6wk68eTxKLhEH/get_shader_color_from_string.js","https:/framerusercontent.com/modules/q3nWgGXMhG0Ina6vgRVz/PVl4bshKvCOZO36e3vK1/index.js","https:/framer.com/m/index-uMsj.js@PVl4bshKvCOZO36e3vK1","https:/framerusercontent.com/modules/xx99X8dO7V1Egbc8GwnH/7uqzHTHLUXDXpMKwmC2a/AnimatedLiquidBackground_Prod.js","https:/framerusercontent.com/modules/2K0JSripGEKjNNhMfi7u/s527R4bbTkkER2TPPJBs/IYmDo4Yhz.js","https:/framerusercontent.com/modules/KAbtiVvsuSa9tcVkY7Fa/tXCvSlGPoWnOpSEqxlTX/StudioOverrides.js","https:/framerusercontent.com/modules/iSENGRzL8E4XWpxs0Lmj/g8FUjY5sz9Nd3SlpjIwT/BqZNshx9b.js","https:/framerusercontent.com/modules/c2AAyDpOGCl8gxnMemiX/u35MoKgByaqTKzfMpt7p/kNJXnX6jJ.js","https:/framerusercontent.com/modules/gmSzQYqU5VKHGQ39GW7c/xwMSlmrKQxxw5EbM0cjn/t61Gt151h.js","https:/framerusercontent.com/modules/m4lc4UtcLHVPQumDXPaL/FcEpSSrFH91sO3g0dEUd/augiA20Il.js","https:/framerusercontent.com/modules/aYWewYOyRfHC1itmYEak/nJSzpY1nxjFIpFOprboS/siteMetadata.js","https:/framerusercontent.com/modules/hZK3hF8XZBoS11lK5Tj2/RvwEZaS8TTS3aQQKJUNI/gSWbG5WG4.js"],"sourcesContent":["import{RenderTarget}from\"framer\";import{useEffect,useState,useMemo}from\"react\";const cssVariableRegex=/var\\s*\\(\\s*(--[\\w-]+)(?:\\s*,\\s*((?:[^)(]+|\\((?:[^)(]+|\\([^)(]*\\))*\\))*))?\\s*\\)/;export function useColors(...colors){const isCanvas=RenderTarget.current()===RenderTarget.canvas;const isOptimizing=typeof window===\"undefined\";const darkMode=useDarkMode();const[styleValues,setStyleValues]=useState(()=>extractStyleValues(colors.map(extractCSSVariableName)));useEffect(()=>{if(!isCanvas)return;const div=document.body.querySelector(\"main > div\");if(!div)return;const observer=new MutationObserver(()=>{setStyleValues(extractStyleValues(colors.map(extractCSSVariableName)));});observer.observe(div,{attributes:true,attributeFilter:[\"style\"]});return()=>observer.disconnect();},colors);const variableNames=useMemo(()=>colors.map(extractCSSVariableName),[colors]);if(isOptimizing){return colors.map(color=>extractDefaultValue(color));}let values=[];for(let i=0;i div\");if(div){const style=div.getAttribute(\"style\");if(style){const vars=parseVariables(style);lightVars=vars;darkVars=vars;}}}else{const{light,dark}=extractColorStyles();lightVars=parseVariables(light);darkVars=parseVariables(dark);}// Include all variables\nconst allVarNames=new Set([...Object.keys(lightVars),...Object.keys(darkVars)]);allVarNames.forEach(varName=>{result[varName]={light:lightVars[varName]||\"\",dark:darkVars[varName]||\"\"};});return result;}function extractColorStyles(){let lightSection=\"\";let darkSection=\"\";if(typeof document!==\"undefined\"){const styles=document.head.querySelectorAll(\"style[data-framer-css], style[data-framer-css-ssr], style[data-framer-css-ssr-minified]\");for(const style of styles){const rules=style.sheet?.cssRules;if(!rules)continue;const styleRules=[];for(const rule of rules){if(rule instanceof CSSStyleRule){styleRules.push([rule,false]);}else if(rule instanceof CSSMediaRule){if(rule.conditionText===\"(prefers-color-scheme: dark)\"){for(const subrule of rule.cssRules){if(subrule instanceof CSSStyleRule){styleRules.push([subrule,true]);}}}}}for(const[rule,isDarkMedia]of styleRules){const css=rule.cssText;const hasVars=css.includes(\"--token-\");if(!hasVars)continue;const isDark=isDarkMedia?rule.selectorText===\"body\":rule.selectorText==='body[data-framer-theme=\"dark\"]';const isLight=!isDarkMedia&&rule.selectorText===\"body\";if(!isDark&&!isLight)continue;if(isDark){if(!darkSection){darkSection=css.substring(css.indexOf(\"{\")+1,css.lastIndexOf(\"}\")).trim();}}else{if(!lightSection){lightSection=css.substring(css.indexOf(\"{\")+1,css.lastIndexOf(\"}\")).trim();}}if(darkSection&&lightSection)break;}if(darkSection&&lightSection)break;}}return{light:lightSection,dark:darkSection};}export function useDarkMode(){const isPreview=typeof window!==\"undefined\"&&window.location.origin.endsWith(\"framercanvas.com\");const[isDarkMode,setIsDarkMode]=useState(()=>{if(typeof window===\"undefined\"){return false;}else if(isPreview&&typeof document!==\"undefined\"){return document.body.getAttribute(\"data-framer-theme\")===\"dark\";}else{return window.matchMedia(\"(prefers-color-scheme: dark)\").matches;}});useEffect(()=>{if(isPreview){const observer=new MutationObserver(mutations=>{mutations.forEach(mutation=>{if(mutation.attributeName===\"data-framer-theme\"){const theme=document.body.getAttribute(\"data-framer-theme\");setIsDarkMode(theme===\"dark\");}});});observer.observe(document.body,{attributes:true,attributeFilter:[\"data-framer-theme\"]});return()=>observer.disconnect();}else{const mediaQuery=window.matchMedia(\"(prefers-color-scheme: dark)\");const handleChange=e=>{setIsDarkMode(e.matches);};// Update initial value\nif(mediaQuery.matches!==isDarkMode){setIsDarkMode(mediaQuery.matches);}mediaQuery.addListener(handleChange);return()=>mediaQuery.removeListener(handleChange);}},[isPreview]);return isDarkMode;}function extractCSSVariableName(cssString){if(!cssString||!cssString.startsWith(\"var(\")){return\"\";}const match=cssVariableRegex.exec(cssString);if(match){const variableName=match[1];return variableName||\"\";}return\"\";}function parseVariables(section){const vars={};if(!section)return vars;const declarations=section.split(\";\").filter(Boolean);declarations.forEach(declaration=>{const[name,value]=declaration.split(\":\").map(s=>s.trim());if(name&&value){vars[name]=value;}});return vars;}function extractDefaultValue(cssVar){// Check if the string starts with \"var(\"\nif(!cssVar||!cssVar.startsWith(\"var(\")){return cssVar// Return the original value if it doesn't start with \"var(\"\n;}// Remove \"var(\" from the beginning and \")\" from the end\nconst content=cssVar.slice(4,-1);// Split the content by comma\nconst parts=content.split(\",\");// If there's more than one part, the second part is the default value\nif(parts.length>1){// Trim any whitespace from the default value\nreturn parts.slice(1).join(\",\").trim();}// If there's no comma, return an empty string or null\nreturn\"\";}\nexport const __FramerMetadata__ = {\"exports\":{\"useDarkMode\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"useColors\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./useColors.map","function _define_property(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}export class ShaderMount{constructor(canvas,fragmentShader,uniforms={},webGlContextAttributes,/** The speed of the animation, or 0 to stop it. Supports negative values to play in reverse. */speed=1,/** Pass a seed to offset the starting u_time value and give deterministic results*/seed=0){_define_property(this,\"canvas\",void 0);_define_property(this,\"gl\",void 0);_define_property(this,\"program\",null);_define_property(this,\"uniformLocations\",{});/** The fragment shader that we are using */_define_property(this,\"fragmentShader\",void 0);/** Stores the RAF for the render loop */_define_property(this,\"rafId\",null);/** Time of the last rendered frame */_define_property(this,\"lastFrameTime\",0);/** Total time that we have played any animation, passed as a uniform to the shader for time-based VFX */_define_property(this,\"totalAnimationTime\",0);/** The current speed that we progress through animation time (multiplies by delta time every update). Allows negatives to play in reverse. If set to 0, rAF will stop entirely so static shaders have no recurring performance costs */_define_property(this,\"speed\",1);/** Uniforms that are provided by the user for the specific shader being mounted (not including uniforms that this Mount adds, like time and resolution) */_define_property(this,\"providedUniforms\",void 0);/** Just a sanity check to make sure frames don't run after we're disposed */_define_property(this,\"hasBeenDisposed\",false);/** If the resolution of the canvas has changed since the last render */_define_property(this,\"resolutionChanged\",true);_define_property(this,\"initWebGL\",()=>{const program=createProgram(this.gl,vertexShaderSource,this.fragmentShader);if(!program)return;this.program=program;this.setupPositionAttribute();this.setupUniforms();});_define_property(this,\"setupPositionAttribute\",()=>{const positionAttributeLocation=this.gl.getAttribLocation(this.program,\"a_position\");const positionBuffer=this.gl.createBuffer();this.gl.bindBuffer(this.gl.ARRAY_BUFFER,positionBuffer);const positions=[-1,-1,1,-1,-1,1,-1,1,1,-1,1,1];this.gl.bufferData(this.gl.ARRAY_BUFFER,new Float32Array(positions),this.gl.STATIC_DRAW);this.gl.enableVertexAttribArray(positionAttributeLocation);this.gl.vertexAttribPointer(positionAttributeLocation,2,this.gl.FLOAT,false,0,0);});_define_property(this,\"setupUniforms\",()=>{this.uniformLocations={u_time:this.gl.getUniformLocation(this.program,\"u_time\"),u_pixelRatio:this.gl.getUniformLocation(this.program,\"u_pixelRatio\"),u_resolution:this.gl.getUniformLocation(this.program,\"u_resolution\"),...Object.fromEntries(Object.keys(this.providedUniforms).map(key=>[key,this.gl.getUniformLocation(this.program,key)]))};});_define_property(this,\"resizeObserver\",null);_define_property(this,\"setupResizeObserver\",()=>{this.resizeObserver=new ResizeObserver(()=>this.handleResize());this.resizeObserver.observe(this.canvas);this.handleResize();});_define_property(this,\"handleResize\",()=>{const pixelRatio=window.devicePixelRatio;const newWidth=this.canvas.clientWidth*pixelRatio;const newHeight=this.canvas.clientHeight*pixelRatio;if(this.canvas.width!==newWidth||this.canvas.height!==newHeight){this.canvas.width=newWidth;this.canvas.height=newHeight;this.resolutionChanged=true;this.gl.viewport(0,0,this.gl.canvas.width,this.gl.canvas.height);this.render(performance.now())// this is necessary to avoid flashes while resizing (the next scheduled render will set uniforms)\n;}});_define_property(this,\"render\",currentTime=>{if(this.hasBeenDisposed)return;// Calculate the delta time\nconst dt=currentTime-this.lastFrameTime;this.lastFrameTime=currentTime;// Increase the total animation time by dt * animationSpeed\nif(this.speed!==0){this.totalAnimationTime+=dt*this.speed;}// Clear the canvas\nthis.gl.clear(this.gl.COLOR_BUFFER_BIT);// Update uniforms\nthis.gl.useProgram(this.program);// Update the time uniform\nthis.gl.uniform1f(this.uniformLocations.u_time,this.totalAnimationTime*.001);// If the resolution has changed, we need to update the uniform\nif(this.resolutionChanged){this.gl.uniform2f(this.uniformLocations.u_resolution,this.gl.canvas.width,this.gl.canvas.height);this.gl.uniform1f(this.uniformLocations.u_pixelRatio,window.devicePixelRatio);this.resolutionChanged=false;}this.gl.drawArrays(this.gl.TRIANGLES,0,6);// Loop if we're animating\nif(this.speed!==0){this.requestRender();}else{this.rafId=null;}});_define_property(this,\"requestRender\",()=>{if(this.rafId!==null){cancelAnimationFrame(this.rafId);}this.rafId=requestAnimationFrame(this.render);});_define_property(this,\"updateProvidedUniforms\",()=>{this.gl.useProgram(this.program);Object.entries(this.providedUniforms).forEach(([key,value])=>{const location=this.uniformLocations[key];if(location){if(Array.isArray(value)){switch(value.length){case 2:this.gl.uniform2fv(location,value);break;case 3:this.gl.uniform3fv(location,value);break;case 4:this.gl.uniform4fv(location,value);break;default:if(value.length===9){this.gl.uniformMatrix3fv(location,false,value);}else if(value.length===16){this.gl.uniformMatrix4fv(location,false,value);}else{console.warn(`Unsupported uniform array length: ${value.length}`);}}}else if(typeof value===\"number\"){this.gl.uniform1f(location,value);}else if(typeof value===\"boolean\"){this.gl.uniform1i(location,value?1:0);}else{console.warn(`Unsupported uniform type for ${key}: ${typeof value}`);}}});});/** Set a seed to get a deterministic result */_define_property(this,\"setSeed\",newSeed=>{const oneFrameAt120Fps=1e3/120;this.totalAnimationTime=newSeed*oneFrameAt120Fps;this.lastFrameTime=performance.now();this.render(performance.now());});/** Set an animation speed (or 0 to stop animation) */_define_property(this,\"setSpeed\",(newSpeed=1)=>{// Set the new animation speed\nthis.speed=newSpeed;if(this.rafId===null&&newSpeed!==0){// Moving from 0 to animating, kick off a new rAF loop\nthis.lastFrameTime=performance.now();this.rafId=requestAnimationFrame(this.render);}if(this.rafId!==null&&newSpeed===0){// Moving from animating to not animating, cancel the rAF loop\ncancelAnimationFrame(this.rafId);this.rafId=null;}});/** Update the uniforms that are provided by the outside shader */_define_property(this,\"setUniforms\",newUniforms=>{this.providedUniforms={...this.providedUniforms,...newUniforms};// If we need to allow users to add uniforms after the shader has been created, we can do that here\n// But right now we're expecting the uniform list to be predictable and static\n// this.setupUniforms();\nthis.updateProvidedUniforms();this.render(performance.now());});/** Dispose of the shader mount, cleaning up all of the WebGL resources */_define_property(this,\"dispose\",()=>{// Immediately mark as disposed to prevent future renders from leaking in\nthis.hasBeenDisposed=true;// Cancel the rAF loop\nif(this.rafId!==null){cancelAnimationFrame(this.rafId);this.rafId=null;}if(this.gl&&this.program){this.gl.deleteProgram(this.program);this.program=null;// Reset the WebGL context\nthis.gl.bindBuffer(this.gl.ARRAY_BUFFER,null);this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER,null);this.gl.bindRenderbuffer(this.gl.RENDERBUFFER,null);this.gl.bindFramebuffer(this.gl.FRAMEBUFFER,null);// Clear any errors\nthis.gl.getError();}if(this.resizeObserver){this.resizeObserver.disconnect();this.resizeObserver=null;}this.uniformLocations={};});this.canvas=canvas;this.fragmentShader=fragmentShader;this.providedUniforms=uniforms;// Base our starting animation time on the provided seed value\nthis.totalAnimationTime=seed;const gl=canvas.getContext(\"webgl2\",webGlContextAttributes);if(!gl){throw new Error(\"WebGL not supported\");}this.gl=gl;this.initWebGL();this.setupResizeObserver();// Set the animation speed after everything is ready to go\nthis.setSpeed(speed);// Mark canvas as paper shader mount\nthis.canvas.setAttribute(\"data-paper-shaders\",\"true\");}}/** Vertex shader for the shader mount */const vertexShaderSource=`#version 300 es\nlayout(location = 0) in vec4 a_position;\n\nvoid main() {\n gl_Position = a_position;\n}\n`;function createShader(gl,type,source){const shader=gl.createShader(type);if(!shader)return null;gl.shaderSource(shader,source);gl.compileShader(shader);if(!gl.getShaderParameter(shader,gl.COMPILE_STATUS)){console.error(\"An error occurred compiling the shaders: \"+gl.getShaderInfoLog(shader));gl.deleteShader(shader);return null;}return shader;}function createProgram(gl,vertexShaderSource,fragmentShaderSource){const vertexShader=createShader(gl,gl.VERTEX_SHADER,vertexShaderSource);const fragmentShader=createShader(gl,gl.FRAGMENT_SHADER,fragmentShaderSource);if(!vertexShader||!fragmentShader)return null;const program=gl.createProgram();if(!program)return null;gl.attachShader(program,vertexShader);gl.attachShader(program,fragmentShader);gl.linkProgram(program);if(!gl.getProgramParameter(program,gl.LINK_STATUS)){console.error(\"Unable to initialize the shader program: \"+gl.getProgramInfoLog(program));gl.deleteProgram(program);gl.deleteShader(vertexShader);gl.deleteShader(fragmentShader);return null;}// Clean up shaders after successful linking\ngl.detachShader(program,vertexShader);gl.detachShader(program,fragmentShader);gl.deleteShader(vertexShader);gl.deleteShader(fragmentShader);return program;}\nexport const __FramerMetadata__ = {\"exports\":{\"ShaderMount\":{\"type\":\"class\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./shader_mount.map","export const PatternShapes={Checks:0,Stripes:1,Edge:2};/**\n * 3d Perlin noise with exposed parameters\n *\n * Uniforms include:\n * u_scale - the scale applied to user space\n * u_rotation - the rotation applied to user space\n * u_color1 - the first pattern color\n * u_color2 - the second pattern color\n * u_color3 - the third pattern color\n * u_proportion (0 .. 1) - the proportion between colors (on 0.5 colors are equally distributed)\n * u_softness (0 .. 1) - the color blur (0 for pronounced edges, 1 for gradient)\n * u_shape (0 ... 2) - the color pattern to be distorted with noise & swirl\n * - u_shape = 0 is checks\n * - u_shape = 1 is stripes\n * - u_shape = 2 is 2 halves of canvas (mapping the canvas height regardless of resolution)\n * u_shapeScale - the scale of color pattern (appies over the global scaling)\n * u_distortion - the noisy distortion over the UV coordinate (applied before the overlapping swirl)\n * u_swirl - the power of swirly distortion\n * u_swirlIterations - the number of swirl iterations (layering curves effect)\n *\n */export const warpFragmentShader=`#version 300 es\nprecision highp float;\n\nuniform float u_time;\nuniform float u_pixelRatio;\nuniform vec2 u_resolution;\n\nuniform float u_scale;\nuniform float u_rotation;\nuniform vec4 u_color1;\nuniform vec4 u_color2;\nuniform vec4 u_color3;\nuniform float u_proportion;\nuniform float u_softness;\nuniform float u_shape;\nuniform float u_shapeScale;\nuniform float u_distortion;\nuniform float u_swirl;\nuniform float u_swirlIterations;\n\n\nout vec4 fragColor;\n\n#define TWO_PI 6.28318530718\n#define PI 3.14159265358979323846\n\nvec2 rotate(vec2 uv, float th) {\n return mat2(cos(th), sin(th), -sin(th), cos(th)) * uv;\n}\n\nfloat random(vec2 st) {\n return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);\n}\nfloat noise(vec2 st) {\n vec2 i = floor(st);\n vec2 f = fract(st);\n float a = random(i);\n float b = random(i + vec2(1.0, 0.0));\n float c = random(i + vec2(0.0, 1.0));\n float d = random(i + vec2(1.0, 1.0));\n\n // Smoothstep for interpolation\n vec2 u = f * f * (3.0 - 2.0 * f);\n\n // Do the interpolation as two nested mix operations\n // If you try to do this in one big operation, there's enough precision loss to be off by 1px at cell boundaries\n float x1 = mix(a, b, u.x);\n float x2 = mix(c, d, u.x);\n return mix(x1, x2, u.y);\n\n}\n\nvec4 blend_colors(vec4 c1, vec4 c2, vec4 c3, float mixer, float edgesWidth, float edge_blur) {\n vec3 color1 = c1.rgb * c1.a;\n vec3 color2 = c2.rgb * c2.a;\n vec3 color3 = c3.rgb * c3.a;\n\n float r1 = smoothstep(.0 + .35 * edgesWidth, .7 - .35 * edgesWidth + .5 * edge_blur, mixer);\n float r2 = smoothstep(.3 + .35 * edgesWidth, 1. - .35 * edgesWidth + edge_blur, mixer);\n\n vec3 blended_color_2 = mix(color1, color2, r1);\n float blended_opacity_2 = mix(c1.a, c2.a, r1);\n\n vec3 c = mix(blended_color_2, color3, r2);\n float o = mix(blended_opacity_2, c3.a, r2);\n return vec4(c, o);\n}\n\nvoid main() {\n vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n vec2 uv_original = uv;\n\n float t = .5 * u_time;\n\n float noise_scale = .0005 + .006 * u_scale;\n\n uv -= .5;\n uv *= (noise_scale * u_resolution);\n uv = rotate(uv, u_rotation * .5 * PI);\n uv /= u_pixelRatio;\n uv += .5;\n\n float n1 = noise(uv * 1. + t);\n float n2 = noise(uv * 2. - t);\n float angle = n1 * TWO_PI;\n uv.x += 4. * u_distortion * n2 * cos(angle);\n uv.y += 4. * u_distortion * n2 * sin(angle);\n\n float iterations_number = ceil(clamp(u_swirlIterations, 1., 30.));\n for (float i = 1.; i <= iterations_number; i++) {\n uv.x += clamp(u_swirl, 0., 2.) / i * cos(t + i * 1.5 * uv.y);\n uv.y += clamp(u_swirl, 0., 2.) / i * cos(t + i * 1. * uv.x);\n }\n\n float proportion = clamp(u_proportion, 0., 1.);\n\n float shape = 0.;\n float mixer = 0.;\n if (u_shape < .5) {\n vec2 checks_shape_uv = uv * (.5 + 3.5 * u_shapeScale);\n shape = .5 + .5 * sin(checks_shape_uv.x) * cos(checks_shape_uv.y);\n mixer = shape + .48 * sign(proportion - .5) * pow(abs(proportion - .5), .5);\n } else if (u_shape < 1.5) {\n vec2 stripes_shape_uv = uv * (.25 + 3. * u_shapeScale);\n float f = fract(stripes_shape_uv.y);\n shape = smoothstep(.0, .55, f) * smoothstep(1., .45, f);\n mixer = shape + .48 * sign(proportion - .5) * pow(abs(proportion - .5), .5);\n } else {\n float sh = 1. - uv.y;\n sh -= .5;\n sh /= (noise_scale * u_resolution.y);\n sh += .5;\n float shape_scaling = .2 * (1. - u_shapeScale);\n shape = smoothstep(.45 - shape_scaling, .55 + shape_scaling, sh + .3 * (proportion - .5));\n mixer = shape;\n }\n\n vec4 color_mix = blend_colors(u_color1, u_color2, u_color3, mixer, 1. - clamp(u_softness, 0., 1.), .01 + .01 * u_scale);\n\n fragColor = vec4(color_mix.rgb, color_mix.a);\n}\n`;\nexport const __FramerMetadata__ = {\"exports\":{\"WarpUniforms\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"warpFragmentShader\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"PatternShapes\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"PatternShape\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./warp.map","/** Convert color string from HSL, RGB, or hex to 0-to-1-range-RGBA array */export function getShaderColorFromString(colorString,fallback=[0,0,0,1]){// If the color string is already an array of 3 or 4 numbers, return it (with alpha=1 if needed)\nif(Array.isArray(colorString)){if(colorString.length===4)return colorString;if(colorString.length===3)return[...colorString,1];return getShaderColorFromString(fallback);}// If the color string is not a string, return the fallback\nif(typeof colorString!==\"string\"){return getShaderColorFromString(fallback);}let r,g,b,a=1;if(colorString.startsWith(\"#\")){[r,g,b,a]=hexToRgba(colorString);}else if(colorString.startsWith(\"rgb\")){[r,g,b,a]=parseRgba(colorString);}else if(colorString.startsWith(\"hsl\")){[r,g,b,a]=hslaToRgba(parseHsla(colorString));}else{console.error(\"Unsupported color format\",colorString);return getShaderColorFromString(fallback);}return[clamp(r,0,1),clamp(g,0,1),clamp(b,0,1),clamp(a,0,1)];}/** Convert hex to RGBA (0 to 1 range) */function hexToRgba(hex){// Remove # if present\nhex=hex.replace(/^#/,\"\");// Expand three-letter hex to six-letter\nif(hex.length===3){hex=hex.split(\"\").map(char=>char+char).join(\"\");}// Expand six-letter hex to eight-letter (add full opacity if no alpha)\nif(hex.length===6){hex=hex+\"ff\";}// Parse the components\nconst r=parseInt(hex.slice(0,2),16)/255;const g=parseInt(hex.slice(2,4),16)/255;const b=parseInt(hex.slice(4,6),16)/255;const a=parseInt(hex.slice(6,8),16)/255;return[r,g,b,a];}/** Parse RGBA string to RGBA (0 to 1 range) */function parseRgba(rgba){// Match both rgb and rgba patterns\nconst match=rgba.match(/^rgba?\\s*\\(\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*(\\d+)\\s*(?:,\\s*([0-9.]+))?\\s*\\)$/i);if(!match)return[0,0,0,1];return[parseInt(match[1]??\"0\")/255,parseInt(match[2]??\"0\")/255,parseInt(match[3]??\"0\")/255,match[4]===undefined?1:parseFloat(match[4])];}/** Parse HSLA string */function parseHsla(hsla){const match=hsla.match(/^hsla?\\s*\\(\\s*(\\d+)\\s*,\\s*(\\d+)%\\s*,\\s*(\\d+)%\\s*(?:,\\s*([0-9.]+))?\\s*\\)$/i);if(!match)return[0,0,0,1];return[parseInt(match[1]??\"0\"),parseInt(match[2]??\"0\"),parseInt(match[3]??\"0\"),match[4]===undefined?1:parseFloat(match[4])];}/** Convert HSLA to RGBA (0 to 1 range) */function hslaToRgba(hsla){const[h,s,l,a]=hsla;const hDecimal=h/360;const sDecimal=s/100;const lDecimal=l/100;let r,g,b;if(s===0){r=g=b=lDecimal// achromatic\n;}else{const hue2rgb=(p,q,t)=>{if(t<0)t+=1;if(t>1)t-=1;if(t<1/6)return p+(q-p)*6*t;if(t<1/2)return q;if(t<2/3)return p+(q-p)*(2/3-t)*6;return p;};const q=lDecimal<.5?lDecimal*(1+sDecimal):lDecimal+sDecimal-lDecimal*sDecimal;const p=2*lDecimal-q;r=hue2rgb(p,q,hDecimal+1/3);g=hue2rgb(p,q,hDecimal);b=hue2rgb(p,q,hDecimal-1/3);}return[r,g,b,a];}export const clamp=(n,min,max)=>Math.min(Math.max(n,min),max);\nexport const __FramerMetadata__ = {\"exports\":{\"clamp\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getShaderColorFromString\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./get_shader_color_from_string.map","/** The core Shader Mounting class. Pass it a canvas element and a fragment shader to get started. */import{jsx as _jsx}from\"react/jsx-runtime\";export{ShaderMount}from\"https://framerusercontent.com/modules/NLpw4UPElXpirDfZ8gK3/pnnblFdmCm84r7TGjG3U/shader_mount.js\";// ----- Warping Distortion ----- //\n/** Warp: distortion + swirl + underlying shapes */export{warpFragmentShader,PatternShapes}from\"https://framerusercontent.com/modules/zIDOp1iaNFIXSAIx7ljo/VX06XYWdAlD95B9usTKm/warp.js\";// ----- Uniform conversion utils ----- //\nexport{getShaderColorFromString}from\"https://framerusercontent.com/modules/r591zLdRh7n2CKaaHRG7/PCYxubr6wk68eTxKLhEH/get_shader_color_from_string.js\";export default function A(props){return /*#__PURE__*/_jsx(\"div\",{});}\nexport const __FramerMetadata__ = {\"exports\":{\"PatternShapes\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"PatternShape\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"ShaderMount\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getShaderColorFromString\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"default\":{\"type\":\"reactComponent\",\"name\":\"A\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"warpFragmentShader\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"WarpUniforms\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./index.map","/*\n * index\n *\n * Learn More: https://www.framer.com/asset-urls\n */\n\nexport * from \"https://framerusercontent.com/modules/q3nWgGXMhG0Ina6vgRVz/PVl4bshKvCOZO36e3vK1/index.js\"\nexport { default } from \"https://framerusercontent.com/modules/q3nWgGXMhG0Ina6vgRVz/PVl4bshKvCOZO36e3vK1/index.js\"\n","import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType,RenderTarget,useIsStaticRenderer}from\"framer\";import{useEffect,useRef,useMemo}from\"react\";import{useColors}from\"https://framerusercontent.com/modules/k76epLFsVsF4jlsF5pgg/vhK3G0ntf62fqS2tFDno/useColors.js\";import{getShaderColorFromString,warpFragmentShader,PatternShapes,ShaderMount as ShaderMountVanilla}from\"https://framer.com/m/index-uMsj.js@PVl4bshKvCOZO36e3vK1\";import{cubicBezier}from\"framer-motion\";const speedEase=cubicBezier(.65,0,.88,.77);const templates={Prism:{color1:\"#050505\",color2:\"#66B3FF\",color3:\"#FFFFFF\",rotation:-50,proportion:1,scale:.01,speed:30,distortion:0,swirl:50,swirlIterations:16,softness:47,offset:-299,shape:\"Checks\",shapeSize:45},Lava:{color1:\"#FF9F21\",color2:\"#FF0303\",color3:\"#000000\",rotation:114,proportion:100,scale:.52,speed:30,distortion:7,swirl:18,swirlIterations:20,softness:100,offset:717,shape:\"Edge\",shapeSize:12},Plasma:{color1:\"#B566FF\",color2:\"#000000\",color3:\"#000000\",rotation:0,proportion:63,scale:.75,speed:30,distortion:5,swirl:61,swirlIterations:5,softness:100,offset:-168,shape:\"Checks\",shapeSize:28},Pulse:{color1:\"#66FF85\",color2:\"#000000\",color3:\"#000000\",rotation:-167,proportion:92,scale:0,speed:20,distortion:54,swirl:75,swirlIterations:3,softness:28,offset:-813,shape:\"Checks\",shapeSize:79},Vortex:{color1:\"#000000\",color2:\"#FFFFFF\",color3:\"#000000\",rotation:50,proportion:41,scale:.4,speed:20,distortion:0,swirl:100,swirlIterations:3,softness:5,offset:-744,shape:\"Stripes\",shapeSize:80},Mist:{color1:\"#050505\",color2:\"#FF66B8\",color3:\"#050505\",rotation:0,proportion:33,scale:.48,speed:39,distortion:4,swirl:65,swirlIterations:5,softness:100,offset:-235,shape:\"Edge\",shapeSize:48}};/**\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n *\n * @framerDisableUnlink\n *\n * @framerIntrinsicWidth 400\n * @framerIntrinsicHeight 400\n */export default function AnimatedGradientBackground(props){const isStaticRenderer=useIsStaticRenderer();const isCanvas=RenderTarget.current()===RenderTarget.canvas;const useCustomColors=props.preset===\"custom\"||props.colorMode===\"custom\";const values=props.preset===\"custom\"?props:templates[props.preset]||Object.values(templates)[0];const[color1,color2,color3]=useColors(props.color1,props.color2,props.color3);return /*#__PURE__*/_jsxs(\"div\",{style:{borderRadius:props.radius,overflow:\"hidden\",position:\"relative\",...props.style},children:[/*#__PURE__*/_jsx(Warp,{color1:useCustomColors?color1:values.color1,color2:useCustomColors?color2:values.color2,color3:useCustomColors?color3:values.color3,scale:values.scale,proportion:values.proportion/100,distortion:values.distortion/50,swirl:values.swirl/100,swirlIterations:values.swirl===0?0:values.swirlIterations,rotation:values.rotation*Math.PI/180,speed:!isStaticRenderer||isCanvas&&props.preview?speedEase(props.speed/100)*5:0,seed:values.offset*10,shape:PatternShapes[values.shape],shapeScale:values.shapeSize/100,softness:values.softness/100,style:props.style}),props.noise&&props.noise.opacity>0&&/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",inset:0,backgroundImage:`url(\"https://framerusercontent.com/images/g0QcWrxr87K0ufOxIUFBakwYA8.png\")`,backgroundSize:props.noise.scale*200,backgroundRepeat:\"repeat\",opacity:props.noise.opacity/2}})]});}AnimatedGradientBackground.displayName=\"Animated Gradient Background\";addPropertyControls(AnimatedGradientBackground,{preset:{type:ControlType.Enum,defaultValue:Object.keys(templates)[0],options:[...Object.keys(templates),\"custom\"],optionTitles:[...Object.keys(templates),\"Custom\"]},preview:{type:ControlType.Boolean,defaultValue:false},colorMode:{type:ControlType.Enum,defaultValue:\"preset\",options:[\"preset\",\"custom\"],optionTitles:[\"Preset\",\"Custom\"],displaySegmentedControl:true,title:\"Colors\",hidden:props=>props.preset===\"custom\"},color1:{type:ControlType.Color,defaultValue:\"#262626\",hidden:props=>props.preset!==\"custom\"&&props.colorMode===\"preset\"},color2:{type:ControlType.Color,defaultValue:\"#75c1f0\",hidden:props=>props.preset!==\"custom\"&&props.colorMode===\"preset\"},color3:{type:ControlType.Color,defaultValue:\"#ffffff\",hidden:props=>props.preset!==\"custom\"&&props.colorMode===\"preset\"},noise:{type:ControlType.Object,optional:true,icon:\"effect\",controls:{opacity:{type:ControlType.Number,defaultValue:.5,min:0,max:1,step:.01},scale:{type:ControlType.Number,defaultValue:1,min:.2,max:2,step:.1}}},rotation:{type:ControlType.Number,defaultValue:0,min:-360,max:360,step:1,unit:\"\\xb0\",hidden:props=>props.preset!==\"custom\"},proportion:{type:ControlType.Number,defaultValue:35,min:0,max:100,step:1,hidden:props=>props.preset!==\"custom\"},scale:{type:ControlType.Number,defaultValue:1,min:0,max:10,step:.01,hidden:props=>props.preset!==\"custom\"},speed:{type:ControlType.Number,defaultValue:25,step:1,min:0,max:100},distortion:{type:ControlType.Number,defaultValue:12,min:0,max:100,step:1,hidden:props=>props.preset!==\"custom\"},swirl:{type:ControlType.Number,defaultValue:80,min:0,max:100,step:1,hidden:props=>props.preset!==\"custom\"},swirlIterations:{type:ControlType.Number,defaultValue:10,min:0,max:20,step:1,title:\"Iterations\",hidden:props=>props.swirl===0||props.preset!==\"custom\"},softness:{type:ControlType.Number,defaultValue:100,min:0,max:100,step:1,hidden:props=>props.preset!==\"custom\"},offset:{type:ControlType.Number,defaultValue:0,min:-1e3,max:1e3,step:1,hidden:props=>props.preset!==\"custom\"},shape:{type:ControlType.Enum,defaultValue:\"Checks\",options:Object.keys(PatternShapes),hidden:props=>props.preset!==\"custom\"},shapeSize:{type:ControlType.Number,defaultValue:10,min:0,max:100,step:1,hidden:props=>props.preset!==\"custom\"},radius:{type:ControlType.BorderRadius,defaultValue:\"0px\"}});//////////////////////////////\nconst defaultPreset={name:\"Default\",params:{scale:1,rotation:0,speed:20,seed:0,color1:\"hsla(0, 0%, 15%, 1)\",color2:\"hsla(203, 80%, 70%, 1)\",color3:\"hsla(0, 0%, 100%, 1)\",proportion:.35,softness:1,distortion:.25,swirl:.8,swirlIterations:10,shapeScale:.1,shape:PatternShapes.Checks}};// Due to Leva controls limitation:\n// 1) keep default colors in HSLA format to keep alpha channel\n// 2) don't use decimal values on HSL values (to avoid button highlight bug)\nconst Warp=props=>{const uniforms=useMemo(()=>{return{u_scale:props.scale??defaultPreset.params.scale,u_rotation:props.rotation??defaultPreset.params.rotation,u_color1:getShaderColorFromString(props.color1,defaultPreset.params.color1),u_color2:getShaderColorFromString(props.color2,defaultPreset.params.color2),u_color3:getShaderColorFromString(props.color3,defaultPreset.params.color2),u_proportion:props.proportion??defaultPreset.params.proportion,u_softness:props.softness??defaultPreset.params.softness,u_distortion:props.distortion??defaultPreset.params.distortion,u_swirl:props.swirl??defaultPreset.params.swirl,u_swirlIterations:props.swirlIterations??defaultPreset.params.swirlIterations,u_shapeScale:props.shapeScale??defaultPreset.params.shapeScale,u_shape:props.shape??defaultPreset.params.shape};},[props.scale,props.rotation,props.color1,props.color2,props.color3,props.proportion,props.softness,props.distortion,props.swirl,props.swirlIterations,props.shapeScale,props.shape]);return /*#__PURE__*/_jsx(ShaderMount,{...props,fragmentShader:warpFragmentShader,uniforms:uniforms});};const ShaderMount=({ref,fragmentShader,style,uniforms={},webGlContextAttributes,speed=1,seed=0})=>{const canvasRef=ref??useRef(null);const shaderMountRef=useRef(null);useEffect(()=>{if(canvasRef.current){shaderMountRef.current=new ShaderMountVanilla(canvasRef.current,fragmentShader,uniforms,webGlContextAttributes,speed,seed);}return()=>{shaderMountRef.current?.dispose();};},[fragmentShader,webGlContextAttributes]);useEffect(()=>{shaderMountRef.current?.setUniforms(uniforms);},[uniforms]);useEffect(()=>{shaderMountRef.current?.setSpeed(speed);},[speed]);useEffect(()=>{shaderMountRef.current?.setSeed(seed);},[seed]);return /*#__PURE__*/_jsx(\"canvas\",{ref:canvasRef,style:style});};function mapRange(value,fromLow,fromHigh,toLow,toHigh){if(fromLow===fromHigh){return toLow;}const percentage=(value-fromLow)/(fromHigh-fromLow);return toLow+percentage*(toHigh-toLow);}\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"AnimatedGradientBackground\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"fixed\",\"framerDisableUnlink\":\"*\",\"framerSupportedLayoutWidth\":\"fixed\",\"framerIntrinsicHeight\":\"400\",\"framerIntrinsicWidth\":\"400\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}","// Generated by Framer (ed41f9e)\nimport{jsx as _jsx}from\"react/jsx-runtime\";import{addFonts,addPropertyControls,ControlType,cx,useComponentViewport,useLocaleInfo,useVariantState,withCSS}from\"framer\";import{LayoutGroup,motion,MotionConfigContext}from\"framer-motion\";import*as React from\"react\";import{useRef}from\"react\";const cycleOrder=[\"Exgz6DBd5\",\"zmLk8qXsN\"];const serializationHash=\"framer-2UaGv\";const variantClassNames={Exgz6DBd5:\"framer-v-41w26u\",zmLk8qXsN:\"framer-v-1siibz4\"};function addPropertyOverrides(overrides,...variants){const nextOverrides={};variants?.forEach(variant=>variant&&Object.assign(nextOverrides,overrides[variant]));return nextOverrides;}const transition1={damping:60,delay:0,mass:1,stiffness:500,type:\"spring\"};const Transition=({value,children})=>{const config=React.useContext(MotionConfigContext);const transition=value??config.transition;const contextValue=React.useMemo(()=>({...config,transition}),[JSON.stringify(transition)]);return /*#__PURE__*/_jsx(MotionConfigContext.Provider,{value:contextValue,children:children});};const Variants=motion.create(React.Fragment);const humanReadableVariantMap={\"Main Button\":\"Exgz6DBd5\",\"phone btn\":\"zmLk8qXsN\"};const getProps=({height,id,width,...props})=>{return{...props,variant:humanReadableVariantMap[props.variant]??props.variant??\"Exgz6DBd5\"};};const createLayoutDependency=(props,variants)=>{if(props.layoutDependency)return variants.join(\"-\")+props.layoutDependency;return variants.join(\"-\");};const Component=/*#__PURE__*/React.forwardRef(function(props,ref){const fallbackRef=useRef(null);const refBinding=ref??fallbackRef;const defaultLayoutId=React.useId();const{activeLocale,setLocale}=useLocaleInfo();const componentViewport=useComponentViewport();const{style,className,layoutId,variant,...restProps}=getProps(props);const{baseVariant,classNames,clearLoadingGesture,gestureHandlers,gestureVariant,isLoading,setGestureState,setVariant,variants}=useVariantState({cycleOrder,defaultVariant:\"Exgz6DBd5\",ref:refBinding,variant,variantClassNames});const layoutDependency=createLayoutDependency(props,variants);const sharedStyleClassNames=[];const scopingClassNames=cx(serializationHash,...sharedStyleClassNames);return /*#__PURE__*/_jsx(LayoutGroup,{id:layoutId??defaultLayoutId,children:/*#__PURE__*/_jsx(Variants,{animate:variants,initial:false,children:/*#__PURE__*/_jsx(Transition,{value:transition1,children:/*#__PURE__*/_jsx(motion.div,{...restProps,...gestureHandlers,className:cx(scopingClassNames,\"framer-41w26u\",className,classNames),\"data-framer-name\":\"Main Button\",layoutDependency:layoutDependency,layoutId:\"Exgz6DBd5\",ref:refBinding,style:{rotate:0,...style},variants:{zmLk8qXsN:{rotate:8}},...addPropertyOverrides({zmLk8qXsN:{\"data-framer-name\":\"phone btn\"}},baseVariant,gestureVariant),children:/*#__PURE__*/_jsx(motion.div,{className:\"framer-1l7inir\",\"data-framer-name\":\"container\",layoutDependency:layoutDependency,layoutId:\"obD20UnRa\",style:{backgroundColor:\"rgb(59, 59, 59)\",borderBottomLeftRadius:11.5,borderBottomRightRadius:11.5,borderTopLeftRadius:11.5,borderTopRightRadius:11.5,boxShadow:\"0px 1px 9px 0px rgba(255, 255, 255, 0)\"},children:/*#__PURE__*/_jsx(motion.div,{className:\"framer-1nxf6cu\",\"data-framer-name\":\"white\",layoutDependency:layoutDependency,layoutId:\"ZujaPd2aH\",style:{backgroundColor:\"var(--token-67527bae-cc15-4839-8636-c9b28351e4d7, rgb(255, 255, 255))\",filter:\"blur(8px)\",WebkitFilter:\"blur(8px)\"}})})})})})});});const css=[\"@supports (aspect-ratio: 1) { body { --framer-aspect-ratio-supported: auto; } }\",\".framer-2UaGv.framer-1dk6y11, .framer-2UaGv .framer-1dk6y11 { display: block; }\",\".framer-2UaGv.framer-41w26u { align-content: center; align-items: center; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 10px; height: min-content; justify-content: center; overflow: visible; padding: 0px; position: relative; width: min-content; }\",\".framer-2UaGv .framer-1l7inir { align-content: center; align-items: center; align-self: stretch; display: flex; flex: none; flex-direction: column; flex-wrap: nowrap; gap: 10px; height: min-content; justify-content: center; min-height: 41px; overflow: hidden; padding: 1.4px; position: relative; width: auto; will-change: var(--framer-will-change-override, transform); z-index: 2; }\",\".framer-2UaGv .framer-1nxf6cu { bottom: -17px; flex: none; height: 34px; left: -22px; overflow: hidden; position: absolute; width: 40px; z-index: 1; }\",\".framer-2UaGv.framer-v-1siibz4 .framer-1l7inir { padding: 0.85px; }\",\".framer-2UaGv.framer-v-1siibz4 .framer-1nxf6cu { bottom: -14px; left: -8px; right: -30px; width: unset; }\"];/**\n * This is a generated Framer component.\n * @framerIntrinsicHeight 41\n * @framerIntrinsicWidth 3\n * @framerCanvasComponentVariantDetails {\"propertyName\":\"variant\",\"data\":{\"default\":{\"layout\":[\"auto\",\"auto\"]},\"zmLk8qXsN\":{\"layout\":[\"auto\",\"auto\"]}}}\n * @framerImmutableVariables true\n * @framerDisplayContentsDiv false\n * @framerAutoSizeImages true\n * @framerComponentViewportWidth true\n * @framerColorSyntax true\n */const FramerIYmDo4Yhz=withCSS(Component,css,\"framer-2UaGv\");export default FramerIYmDo4Yhz;FramerIYmDo4Yhz.displayName=\"Button\";FramerIYmDo4Yhz.defaultProps={height:41,width:3};addPropertyControls(FramerIYmDo4Yhz,{variant:{options:[\"Exgz6DBd5\",\"zmLk8qXsN\"],optionTitles:[\"Main Button\",\"phone btn\"],title:\"Variant\",type:ControlType.Enum}});addFonts(FramerIYmDo4Yhz,[{explicitInter:true,fonts:[]}],{supportsExplicitInterCodegen:true});\nexport const __FramerMetadata__ = {\"exports\":{\"Props\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"default\":{\"type\":\"reactComponent\",\"name\":\"FramerIYmDo4Yhz\",\"slots\":[],\"annotations\":{\"framerIntrinsicHeight\":\"41\",\"framerAutoSizeImages\":\"true\",\"framerColorSyntax\":\"true\",\"framerDisplayContentsDiv\":\"false\",\"framerContractVersion\":\"1\",\"framerIntrinsicWidth\":\"3\",\"framerImmutableVariables\":\"true\",\"framerComponentViewportWidth\":\"true\",\"framerCanvasComponentVariantDetails\":\"{\\\"propertyName\\\":\\\"variant\\\",\\\"data\\\":{\\\"default\\\":{\\\"layout\\\":[\\\"auto\\\",\\\"auto\\\"]},\\\"zmLk8qXsN\\\":{\\\"layout\\\":[\\\"auto\\\",\\\"auto\\\"]}}}\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./IYmDo4Yhz.map","import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{forwardRef,useCallback,useEffect,useId,useRef}from\"react\";// @ts-ignore\nimport{RenderTarget}from\"framer\";const SECTION_IDS=[\"work\",\"services\",\"results\",\"brands\",\"faq\"];const ACTIVE_COLOR=\"#D9531E\";const CONTACT_IDS=[\"contact\"];const METRIC_FINAL_VALUES=[\"160+\",\"20+\",\"8.3M+\",\"5/5\",\"100%\"];function getClosestAnchor(target){if(!(target instanceof Element))return null;const anchor=target.closest(\"a\");return anchor instanceof HTMLAnchorElement?anchor:null;}function isTrackedHref(href){return SECTION_IDS.some(id=>href===`/#${id}`||href===`#${id}`);}function isContactHref(href){return CONTACT_IDS.some(id=>href===`/#${id}`||href===`#${id}`);}// Stable class name: identical on the server-rendered (published) HTML and in the\n// browser. Math.random() produced a different class on each side, so on the\n// published site the injected styles never matched the elements.\nfunction useScopeClass(prefix){const id=useId();return`${prefix}-${id.replace(/[^a-zA-Z0-9_-]/g,\"\")}`;}function mergeClassName(baseClass,incoming){return incoming?`${incoming} ${baseClass}`:baseClass;}function assignForwardedRef(ref,value){if(!ref)return;if(typeof ref===\"function\"){ref(value);}else{ref.current=value;}}export function withStudioNavigation(Component){return /*#__PURE__*/forwardRef((props,ref)=>{const wrapperRef=useRef(null);const scopeClass=useScopeClass(\"studio-nav-scope\");const closeExpandedMobileMenu=useCallback(()=>{if(typeof window===\"undefined\"||typeof document===\"undefined\")return;if(window.innerWidth>=810)return;const wrapper=wrapperRef.current;if(!wrapper)return;const header=wrapper.querySelector(\"header\");if(!(header instanceof HTMLElement))return;if(header.getBoundingClientRect().height<=100)return;const toggleButton=document.querySelector('button[aria-label=\"Toggle navigation\"]');if(!toggleButton)return;toggleButton.dispatchEvent(new MouseEvent(\"click\",{bubbles:true,cancelable:true}));},[]);useEffect(()=>{if(typeof document===\"undefined\"||typeof window===\"undefined\")return;const styleId=`studio-nav-style-${scopeClass}`;if(!document.getElementById(styleId)){const style=document.createElement(\"style\");style.id=styleId;style.textContent=`\nhtml {\n scroll-behavior: smooth;\n}\n@media (prefers-reduced-motion: reduce) {\n html {\n scroll-behavior: auto;\n }\n * {\n animation: none !important;\n transition: none !important;\n }\n}\n.${scopeClass} {\n position: sticky;\n top: 0;\n z-index: 8;\n}\n.${scopeClass} .studio-nav-inner {\n position: relative;\n width: 100%;\n}\n@media (max-width: 809px) {\n .${scopeClass} {\n height: 72px;\n }\n .${scopeClass} .studio-nav-inner {\n position: absolute;\n top: 0;\n left: 0;\n }\n}\n.${scopeClass} a[href=\"/#work\"],\n.${scopeClass} a[href=\"#work\"],\n.${scopeClass} a[href=\"/#services\"],\n.${scopeClass} a[href=\"#services\"],\n.${scopeClass} a[href=\"/#results\"],\n.${scopeClass} a[href=\"#results\"],\n.${scopeClass} a[href=\"/#brands\"],\n.${scopeClass} a[href=\"#brands\"],\n.${scopeClass} a[href=\"/#faq\"],\n.${scopeClass} a[href=\"#faq\"] {\n position: relative;\n text-decoration: none;\n background-image: linear-gradient(currentColor, currentColor);\n background-size: 0% 1px;\n background-repeat: no-repeat;\n background-position: 0 100%;\n transition: color 220ms ease, background-size 220ms ease;\n}\n.${scopeClass} a[href=\"/#work\"]:hover,\n.${scopeClass} a[href=\"#work\"]:hover,\n.${scopeClass} a[href=\"/#services\"]:hover,\n.${scopeClass} a[href=\"#services\"]:hover,\n.${scopeClass} a[href=\"/#results\"]:hover,\n.${scopeClass} a[href=\"#results\"]:hover,\n.${scopeClass} a[href=\"/#brands\"]:hover,\n.${scopeClass} a[href=\"#brands\"]:hover,\n.${scopeClass} a[href=\"/#faq\"]:hover,\n.${scopeClass} a[href=\"#faq\"]:hover {\n background-size: 100% 1px;\n}\n.${scopeClass} a[data-studio-active=\"true\"] {\n color: ${ACTIVE_COLOR} !important;\n background-size: 100% 1px;\n}\n.${scopeClass} a[data-studio-active=\"true\"] * {\n color: ${ACTIVE_COLOR} !important;\n}\n@media (prefers-reduced-motion: reduce) {\n .${scopeClass} a[href=\"/#work\"],\n .${scopeClass} a[href=\"#work\"],\n .${scopeClass} a[href=\"/#services\"],\n .${scopeClass} a[href=\"#services\"],\n .${scopeClass} a[href=\"/#results\"],\n .${scopeClass} a[href=\"#results\"],\n .${scopeClass} a[href=\"/#brands\"],\n .${scopeClass} a[href=\"#brands\"],\n .${scopeClass} a[href=\"/#faq\"],\n .${scopeClass} a[href=\"#faq\"] {\n transition: none;\n }\n}\n`;document.head.appendChild(style);}return()=>{const styleTag=document.getElementById(styleId);if(styleTag?.parentNode)styleTag.parentNode.removeChild(styleTag);};},[scopeClass]);useEffect(()=>{if(typeof window===\"undefined\")return;const reduceMotion=window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;if(!reduceMotion)return;const wrapper=wrapperRef.current;if(!wrapper)return;const videos=Array.from(wrapper.querySelectorAll(\"video\"));videos.forEach(video=>{if(video instanceof HTMLVideoElement)video.pause();});},[]);useEffect(()=>{if(typeof window===\"undefined\"||typeof document===\"undefined\")return;const wrapper=wrapperRef.current;if(!wrapper)return;const getScopedAnchors=()=>Array.from(wrapper.querySelectorAll(\"a\")).filter(a=>isTrackedHref(a.getAttribute(\"href\")||\"\"));const updateActiveAnchor=activeId=>{const anchors=getScopedAnchors();anchors.forEach(anchor=>{const href=anchor.getAttribute(\"href\")||\"\";const isActive=activeId?href===`/#${activeId}`||href===`#${activeId}`:false;if(isActive){anchor.setAttribute(\"data-studio-active\",\"true\");}else{anchor.removeAttribute(\"data-studio-active\");}});};let rafId=0;let ticking=false;const onScrollOrResize=()=>{if(ticking)return;ticking=true;rafId=window.requestAnimationFrame(()=>{let currentId=null;for(const id of SECTION_IDS){const el=document.getElementById(id);if(!el)continue;const rect=el.getBoundingClientRect();if(rect.top<=100&&rect.bottom>=100){currentId=id;break;}}updateActiveAnchor(currentId);ticking=false;});};window.addEventListener(\"scroll\",onScrollOrResize,{passive:true});window.addEventListener(\"resize\",onScrollOrResize,{passive:true});onScrollOrResize();const delegatedClick=event=>{const anchor=getClosestAnchor(event.target);if(!anchor)return;const href=anchor.getAttribute(\"href\")||\"\";if(!isContactHref(href))return;window.requestAnimationFrame(()=>closeExpandedMobileMenu());};wrapper.addEventListener(\"click\",delegatedClick,true);return()=>{wrapper.removeEventListener(\"click\",delegatedClick,true);window.removeEventListener(\"scroll\",onScrollOrResize);window.removeEventListener(\"resize\",onScrollOrResize);if(rafId)window.cancelAnimationFrame(rafId);};},[closeExpandedMobileMenu]);return /*#__PURE__*/_jsx(\"div\",{ref:wrapperRef,className:scopeClass,style:{position:\"sticky\",top:0,zIndex:8,width:\"100%\",overflow:\"visible\"},children:/*#__PURE__*/_jsx(\"div\",{className:\"studio-nav-inner\",style:{width:\"100%\"},children:/*#__PURE__*/_jsx(Component,{ref:ref,...props})})});});}export function withStudioButton(Component){return /*#__PURE__*/forwardRef((props,ref)=>{const shouldReduceMotion=typeof window!==\"undefined\"&&typeof window.matchMedia===\"function\"&&window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;return /*#__PURE__*/_jsx(Component,{ref:ref,...props,whileHover:shouldReduceMotion?undefined:{scale:1.03},whileTap:shouldReduceMotion?undefined:{scale:.98},transition:shouldReduceMotion?{duration:0}:{type:\"spring\",stiffness:420,damping:28,mass:.4},style:{...props.style}});});}export function withStudioMetrics(Component){return /*#__PURE__*/forwardRef((props,ref)=>{const rootRef=useRef(null);const scopeClass=useScopeClass(\"studio-metrics-scope\");const didRunRef=useRef(false);useEffect(()=>{if(typeof document===\"undefined\")return;const styleId=`studio-metrics-style-${scopeClass}`;if(document.getElementById(styleId))return;const style=document.createElement(\"style\");style.id=styleId;style.textContent=`\n.${scopeClass} {\n display: flex !important;\n flex-wrap: wrap !important;\n gap: 24px !important;\n justify-content: center !important;\n align-items: stretch !important;\n}\n.${scopeClass} > * {\n width: auto !important;\n min-width: 0 !important;\n max-width: none !important;\n flex: 1 1 calc((100% - 96px) / 5) !important;\n}\n@media (max-width: 1199px) {\n .${scopeClass} > * {\n flex: 0 1 calc((100% - 48px) / 3) !important;\n }\n}\n@media (max-width: 809px) {\n .${scopeClass} > * {\n flex: 0 1 calc((100% - 24px) / 2) !important;\n }\n}\n.${scopeClass} [data-framer-name=\"Metric number\"] {\n min-width: 0 !important;\n}\n`;document.head.appendChild(style);return()=>{const styleTag=document.getElementById(styleId);if(styleTag?.parentNode)styleTag.parentNode.removeChild(styleTag);};},[scopeClass]);useEffect(()=>{if(typeof window===\"undefined\"||typeof document===\"undefined\")return;const root=rootRef.current;if(!root)return;const reduceMotion=window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;const cards=Array.from(root.children);const numberNodes=Array.from(root.querySelectorAll('[data-framer-name=\"Metric number\"]'));const targets=numberNodes.map((node,index)=>{const styledChild=node.querySelector(\"p, h1, h2, h3\");const textNode=styledChild||node;const finalText=METRIC_FINAL_VALUES[index]||\"\";textNode.style.fontVariantNumeric=\"tabular-nums\";if(styledChild){const measurer=document.createElement(\"span\");measurer.textContent=finalText;measurer.style.position=\"absolute\";measurer.style.visibility=\"hidden\";measurer.style.whiteSpace=\"nowrap\";measurer.style.pointerEvents=\"none\";measurer.style.fontFamily=window.getComputedStyle(styledChild).fontFamily;measurer.style.fontSize=window.getComputedStyle(styledChild).fontSize;measurer.style.fontWeight=window.getComputedStyle(styledChild).fontWeight;measurer.style.letterSpacing=window.getComputedStyle(styledChild).letterSpacing;node.appendChild(measurer);const reserved=Math.max(node.getBoundingClientRect().width,measurer.getBoundingClientRect().width);node.removeChild(measurer);if(reserved>0)node.style.minWidth=`${reserved}px`;}return{node,textNode,finalText};});const setFinalValues=()=>{targets.forEach(target=>{target.textNode.textContent=target.finalText||target.textNode.textContent||\"\";});};const setZeroValues=()=>{targets.forEach((target,index)=>{switch(index){case 0:case 1:target.textNode.textContent=\"0+\";break;case 2:target.textNode.textContent=\"0.0M+\";break;case 3:target.textNode.textContent=\"0.0/5\";break;case 4:target.textNode.textContent=\"0%\";break;}});};const animateCards=()=>{cards.forEach((card,index)=>{if(reduceMotion){card.style.opacity=\"1\";card.style.transform=\"translateY(0px)\";return;}card.animate([{opacity:0,transform:\"translateY(16px)\"},{opacity:1,transform:\"translateY(0px)\"}],{duration:500,easing:\"cubic-bezier(0.22, 1, 0.36, 1)\",delay:index*100,fill:\"forwards\"});});};const animateNumbers=()=>{if(reduceMotion){setFinalValues();return;}const start=window.performance.now();const duration=1200;const easeOutCubic=t=>1-Math.pow(1-t,3);let rafId=0;const render=now=>{const elapsed=now-start;const progress=Math.min(1,elapsed/duration);const eased=easeOutCubic(progress);targets.forEach((target,index)=>{switch(index){case 0:{const value=Math.round(160*eased);target.textNode.textContent=`${value}+`;break;}case 1:{const value=Math.round(20*eased);target.textNode.textContent=`${value}+`;break;}case 2:{const value=(8.3*eased).toFixed(1);target.textNode.textContent=`${value}M+`;break;}case 3:{const value=(5*eased).toFixed(1);target.textNode.textContent=`${value}/5`;break;}case 4:{const value=Math.round(100*eased);target.textNode.textContent=`${value}%`;break;}}});if(progress<1){rafId=window.requestAnimationFrame(render);}else{setFinalValues();}};rafId=window.requestAnimationFrame(render);return()=>window.cancelAnimationFrame(rafId);};const isCanvas=RenderTarget.current()===RenderTarget.canvas;if(isCanvas){setFinalValues();cards.forEach(card=>{card.style.opacity=\"1\";card.style.transform=\"translateY(0px)\";});return;}setZeroValues();let cancelNumberAnimation;let observer=new IntersectionObserver(entries=>{const isVisible=entries.some(entry=>entry.isIntersecting);if(!isVisible||didRunRef.current)return;didRunRef.current=true;animateCards();cancelNumberAnimation=animateNumbers();observer?.disconnect();observer=null;},{threshold:.2});observer.observe(root);return()=>{if(observer)observer.disconnect();if(typeof cancelNumberAnimation===\"function\")cancelNumberAnimation();};},[]);return /*#__PURE__*/_jsx(Component,{ref:node=>{rootRef.current=node;assignForwardedRef(ref,node);},...props,className:mergeClassName(scopeClass,props.className),style:{...props.style}});});}export function withStudioTile(Component){return /*#__PURE__*/forwardRef((props,ref)=>{const scopeClass=useScopeClass(\"studio-tile-scope\");useEffect(()=>{if(typeof document===\"undefined\")return;const styleId=`studio-tile-style-${scopeClass}`;if(document.getElementById(styleId))return;const style=document.createElement(\"style\");style.id=styleId;style.textContent=`\n@media (hover: hover) and (pointer: fine) and (min-width: 810px) {\n .${scopeClass}:hover [data-framer-name=\"Project label pill\"] {\n background: #D9531E !important;\n }\n .${scopeClass}:hover [data-framer-name*=\"Play\" i] svg,\n .${scopeClass}:hover [aria-label*=\"play\" i] svg {\n opacity: 1 !important;\n filter: brightness(1.2);\n }\n}\n`;document.head.appendChild(style);return()=>{const styleTag=document.getElementById(styleId);if(styleTag?.parentNode)styleTag.parentNode.removeChild(styleTag);};},[scopeClass]);return /*#__PURE__*/_jsx(Component,{ref:ref,...props,className:mergeClassName(scopeClass,props.className),style:{...props.style}});});}export function withStudioLogo(Component){return /*#__PURE__*/forwardRef((props,ref)=>{const existingStyle=props.style||{};const hasBackgroundImage=typeof existingStyle.backgroundImage===\"string\"&&existingStyle.backgroundImage.trim().length>0&&existingStyle.backgroundImage!==\"none\";const fallbackStyle=hasBackgroundImage?existingStyle:{...existingStyle,backgroundImage:\"url('https://framerusercontent.com/images/rBeAZrEdJrKuDJrMqhIpWi6dk.png')\",backgroundSize:existingStyle.backgroundSize||\"contain\",backgroundRepeat:existingStyle.backgroundRepeat||\"no-repeat\",backgroundPosition:existingStyle.backgroundPosition||\"center\"};return /*#__PURE__*/_jsx(Component,{ref:ref,...props,style:fallbackStyle});});}export function withPlaceholderLink(Component){return /*#__PURE__*/forwardRef((props,ref)=>{const rootRef=useRef(null);useEffect(()=>{if(typeof window===\"undefined\"||typeof document===\"undefined\")return;const root=rootRef.current;if(!root)return;const patchLinks=()=>{const links=Array.from(root.querySelectorAll(\"a\"));if(root.matches(\"a\"))links.unshift(root);links.forEach(link=>{const hrefAttr=link.getAttribute(\"href\")||\"\";if(hrefAttr!==\"/#top\"&&hrefAttr!==\"#top\")return;link.setAttribute(\"href\",\"#\");if(link.target===\"_blank\"){link.setAttribute(\"target\",\"_blank\");}});};patchLinks();const observer=new MutationObserver(()=>patchLinks());observer.observe(root,{childList:true,subtree:true,attributes:true,attributeFilter:[\"href\"]});return()=>observer.disconnect();},[]);return /*#__PURE__*/_jsx(Component,{ref:node=>{rootRef.current=node;assignForwardedRef(ref,node);},...props,style:{...props.style}});});}// Apply this override to the frame that holds the brand logos (the Ticker / logo row\n// inside the \"Brands We've Worked With\" section). It keeps your design and motion\n// exactly the same, but makes sure the logo cards and images can never stay hidden\n// on the published site (e.g. stuck at opacity 0 from an appear/scroll effect,\n// or images that never finished lazy-loading inside the scrolling row).\nexport function withVisibleBrandLogos(Component){return /*#__PURE__*/forwardRef((props,ref)=>{const rootRef=useRef(null);const scopeClass=useScopeClass(\"studio-brands-scope\");useEffect(()=>{if(typeof document===\"undefined\")return;const styleId=`studio-brands-style-${scopeClass}`;if(!document.getElementById(styleId)){const style=document.createElement(\"style\");style.id=styleId;style.textContent=`\n.${scopeClass},\n.${scopeClass} li,\n.${scopeClass} ul,\n.${scopeClass} a,\n.${scopeClass} img,\n.${scopeClass} [data-framer-background-image-wrapper],\n.${scopeClass} [data-framer-component-type] {\n opacity: 1 !important;\n visibility: visible !important;\n}\n`;document.head.appendChild(style);}const root=rootRef.current;if(!root)return;// Load every logo image straight away instead of waiting for lazy-load.\nconst imgs=Array.from(root.querySelectorAll(\"img\"));imgs.forEach(img=>{if(img.loading===\"lazy\")img.loading=\"eager\";});// On the published site the Ticker measures its row before the logos and\n// fonts have loaded, gets a width of 0 and never starts moving. A resize\n// event makes it measure again once everything has its real size.\nconst timers=[];const remeasure=()=>window.dispatchEvent(new Event(\"resize\"));[100,400,1e3,2e3].forEach(ms=>timers.push(window.setTimeout(remeasure,ms)));imgs.forEach(img=>{if(!img.complete)img.addEventListener(\"load\",remeasure,{once:true});});window.addEventListener(\"load\",remeasure,{once:true});const fonts=document.fonts;if(fonts&&fonts.ready)fonts.ready.then(remeasure).catch(()=>{});// Re-measure when the row first scrolls into view as well.\nconst observer=new IntersectionObserver(entries=>{if(entries.some(e=>e.isIntersecting))remeasure();});observer.observe(root);return()=>{observer.disconnect();timers.forEach(t=>window.clearTimeout(t));window.removeEventListener(\"load\",remeasure);const styleTag=document.getElementById(styleId);if(styleTag?.parentNode)styleTag.parentNode.removeChild(styleTag);};},[scopeClass]);return /*#__PURE__*/_jsx(Component,{ref:node=>{rootRef.current=node;assignForwardedRef(ref,node);},...props,className:mergeClassName(scopeClass,props.className),style:{...props.style}});});}// ---------------------------------------------------------------------------\n// withLogoMarquee: scrolls the brand logos left forever, driven by our own code\n// (same method as the stats count-up, which works on the published site).\n//\n// HOW TO USE: do NOT apply this to Framer's Ticker (the Ticker moves too, so the\n// two speeds add up and it races in Preview, then stalls when published).\n// Put the logo cards in a normal horizontal Stack (Direction: Horizontal,\n// Gap 16) and apply this override to that Stack.\n// ---------------------------------------------------------------------------\nconst MARQUEE_SPEED=30// pixels per second: 20 = slow, 30 = calm, 50 = brisk\n;const MARQUEE_GAP=16// space between the end of the row and its copy\n;export function withLogoMarquee(Component){return /*#__PURE__*/forwardRef((props,ref)=>{const viewportRef=useRef(null);const trackRef=useRef(null);const firstRef=useRef(null);useEffect(()=>{if(typeof window===\"undefined\")return;const viewport=viewportRef.current;const track=trackRef.current;const first=firstRef.current;if(!viewport||!track||!first)return;// Keep it still inside the Framer editor so it's easy to edit.\nif(RenderTarget.current()===RenderTarget.canvas)return;// Smooth scrolling: the browser's own animation engine (Web Animations)\n// runs the movement on the GPU, so it stays smooth even when the page is\n// busy (Framer Preview, videos, other effects).\nlet animation=null;let currentWidth=0;const start=()=>{const width=Math.round(first.getBoundingClientRect().width+MARQUEE_GAP);if(width<=MARQUEE_GAP+1||width===currentWidth)return;const progress=animation&¤tWidth?(animation.currentTime||0)/(currentWidth/MARQUEE_SPEED*1e3):0;const wasPaused=animation?.playState===\"paused\";animation?.cancel();currentWidth=width;const duration=width/MARQUEE_SPEED*1e3;animation=track.animate([{transform:\"translate3d(0,0,0)\"},{transform:`translate3d(-${width}px,0,0)`}],{duration,iterations:Infinity,easing:\"linear\"});animation.currentTime=progress%1*duration;if(wasPaused)animation.pause();};start();const resizeObserver=new ResizeObserver(()=>start());resizeObserver.observe(first);Array.from(first.querySelectorAll(\"img\")).forEach(img=>{const image=img;if(image.loading===\"lazy\")image.loading=\"eager\";if(!image.complete)image.addEventListener(\"load\",()=>start(),{once:true});});const onLoad=()=>start();window.addEventListener(\"load\",onLoad,{once:true});const pause=()=>animation?.pause();const resume=()=>animation?.play();viewport.addEventListener(\"mouseenter\",pause);viewport.addEventListener(\"mouseleave\",resume);return()=>{animation?.cancel();resizeObserver.disconnect();window.removeEventListener(\"load\",onLoad);viewport.removeEventListener(\"mouseenter\",pause);viewport.removeEventListener(\"mouseleave\",resume);};},[]);const{id,...cloneProps}=props;// Strip Framer's positioning (absolute/fill/centering) so the row keeps its\n// real width inside the scrolling track.\nconst{position,top,left,right,bottom,inset,transform,width,...restStyle}=props.style||{};const rowStyle={...restStyle,position:\"relative\",width:\"max-content\",flexShrink:0,flexWrap:\"nowrap\",opacity:1};return /*#__PURE__*/_jsx(\"div\",{ref:viewportRef,style:{position:\"relative\",width:\"100%\",overflow:\"hidden\",WebkitMaskImage:\"linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%)\",maskImage:\"linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%)\"},children:/*#__PURE__*/_jsxs(\"div\",{ref:trackRef,style:{display:\"flex\",width:\"max-content\",gap:MARQUEE_GAP,willChange:\"transform\",backfaceVisibility:\"hidden\",transform:\"translate3d(0,0,0)\"},children:[/*#__PURE__*/_jsx(\"div\",{ref:firstRef,style:{flexShrink:0},children:/*#__PURE__*/_jsx(Component,{ref:ref,...props,style:rowStyle})}),/*#__PURE__*/_jsx(\"div\",{\"aria-hidden\":true,style:{flexShrink:0},children:/*#__PURE__*/_jsx(Component,{...cloneProps,style:rowStyle})}),/*#__PURE__*/_jsx(\"div\",{\"aria-hidden\":true,style:{flexShrink:0},children:/*#__PURE__*/_jsx(Component,{...cloneProps,style:rowStyle})})]})});});}// ---------------------------------------------------------------------------\n// withHeroBadge: turns the small line above the hero headline into a pill with an\n// orange light that orbits its border nonstop, plus a soft glow behind it.\n// - desktop: full line on one line, 13px\n// - tablet & phone (under 900px): switches to the short line BADGE_MOBILE_TEXT\n//\n// HOW TO USE: select the text layer \"Your Content Growth Partner & ...\" and in the\n// right panel set Code Overrides -> File: StudioOverrides, Override: withHeroBadge.\n// Effects show in Preview and on the published site (not on the canvas).\n// ---------------------------------------------------------------------------\nconst BADGE_COLOR=ACTIVE_COLOR// same orange as the active nav link\n;const BADGE_LIGHT=\"#FFD0B5\"// bright tip of the orbiting light\n;const BADGE_SPEED=\"4.5s\"// one full orbit; higher = slower\n;const BADGE_MOBILE_TEXT=\"Building Top Personal Brands\";// The CSS is rendered as a