.elementor-2 .elementor-element.elementor-element-798eb1a6>.elementor-container>.elementor-column>.elementor-widget-wrap{align-content:center;align-items:center}.elementor-2 .elementor-element.elementor-element-798eb1a6 .elementor-container{justify-content:center}.elementor-2 .elementor-element.elementor-element-798eb1a6:not(.elementor-motion-effects-element-type-background),.elementor-2 .elementor-element.elementor-element-798eb1a6>.elementor-motion-effects-container>.elementor-motion-effects-layer{background-color:#E8F5F4}.elementor-2 .elementor-element.elementor-element-798eb1a6{overflow:hidden;transition:background 0.3s,border 0.3s,border-radius 0.3s,box-shadow 0.3s;padding:50px 15px 0 15px}.elementor-2 .elementor-element.elementor-element-798eb1a6>.elementor-background-overlay{opacity:.5;transition:background 1s,border-radius 0.3s,opacity 1s}.elementor-2 .elementor-element.elementor-element-798eb1a6:hover>.elementor-background-overlay{filter:brightness(100%) contrast(100%) saturate(100%) blur(0) hue-rotate(0deg)}.elementor-2 .elementor-element.elementor-element-2ce37429{z-index:99}.elementor-2 .elementor-element.elementor-element-f532670{width:var(--container-widget-width,53.695%);max-width:53.695%;--container-widget-width:53.695%;--container-widget-flex-grow:0;text-align:center}.elementor-2 .elementor-element.elementor-element-f532670.elementor-element{--flex-grow:0;--flex-shrink:0}.elementor-2 .elementor-element.elementor-element-f532670 .elementor-heading-title{font-weight:700;-webkit-text-stroke-color:#000;stroke:#000}.elementor-2 .elementor-element.elementor-element-73e2072{width:var(--container-widget-width,114.908%);max-width:114.908%;--container-widget-width:114.908%;--container-widget-flex-grow:0;text-align:center}.elementor-2 .elementor-element.elementor-element-73e2072.elementor-element{--flex-grow:0;--flex-shrink:0}.elementor-2 .elementor-element.elementor-element-73e2072 .elementor-heading-title{font-size:18px}.elementor-2 .elementor-element.elementor-element-5da0435{--divider-border-style:solid;--divider-color:#000;--divider-border-width:10px}.elementor-2 .elementor-element.elementor-element-5da0435 .elementor-divider-separator{width:100%}.elementor-2 .elementor-element.elementor-element-5da0435 .elementor-divider{padding-block-start:2px;padding-block-end:2px}.elementor-2 .elementor-element.elementor-element-d854ba8{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap}.elementor-2 .elementor-element.elementor-element-ecaacda{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap}.elementor-2 .elementor-element.elementor-element-55c3c3b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap}.elementor-2 .elementor-element.elementor-element-cf4a3e1{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap}@media(max-width:1024px) and (min-width:768px){.elementor-2 .elementor-element.elementor-element-2ce37429{width:50%}}@media(max-width:1024px){.elementor-2 .elementor-element.elementor-element-798eb1a6{padding:50px 15px 0 15px}.elementor-2 .elementor-element.elementor-element-2ce37429.elementor-column{-webkit-box-ordinal-group:calc(2 + 1);-ms-flex-order:2;order:2}.elementor-2 .elementor-element.elementor-element-f532670 .elementor-heading-title{font-size:100px}}@media(max-width:767px){.elementor-2 .elementor-element.elementor-element-798eb1a6{padding:50px 10px 50px 10px}.elementor-2 .elementor-element.elementor-element-2ce37429>.elementor-element-populated{padding:0 10px 10px 10px}.elementor-2 .elementor-element.elementor-element-f532670{width:100%;max-width:100%;padding:0 0 0 0}.elementor-2 .elementor-element.elementor-element-f532670.elementor-element{--align-self:center}.elementor-2 .elementor-element.elementor-element-f532670 .elementor-heading-title{font-size:45px}.elementor-2 .elementor-element.elementor-element-73e2072{--container-widget-width:0px;--container-widget-flex-grow:0;width:var(--container-widget-width,0);max-width:0;text-align:center}.elementor-2 .elementor-element.elementor-element-73e2072.elementor-element{--align-self:center;--flex-grow:1;--flex-shrink:0}}import{Renderer,Program,Mesh,Color,Triangle}from 'ogl';import{useEffect,useRef}from 'react';import './Aurora.css';const VERT=`#version 300 es in vec2 position;void main(){gl_Position=vec4(position,0,1)}`;const FRAG=`#version 300 es precision highp float;uniform float uTime;uniform float uAmplitude;uniform vec3 uColorStops[3];uniform vec2 uResolution;uniform float uBlend;out vec4 fragColor;vec3 permute(vec3 x){return mod(((x * 34)+1.0) * x,289)}float snoise(vec2 v){const vec4 C=vec4(.211324865405187,.366025403784439,-.577350269189626,.024390243902439);vec2 i=floor(v+dot(v,C.yy));vec2 x0=v - i+dot(i,C.xx);vec2 i1=(x0.x>x0.y) ? vec2(1,0):vec2(0,1);vec4 x12=x0.xyxy+C.xxzz;x12.xy -=i1;i=mod(i,289);vec3 p=permute(permute(i.y+vec3(0,i1.y,1))+i.x+vec3(0,i1.x,1));vec3 m=max(.5 - vec3(dot(x0,x0),dot(x12.xy,x12.xy),dot(x12.zw,x12.zw)),0);m=m * m;m=m * m;vec3 x=2.0 * fract(p * C.www) - 1;vec3 h=abs(x) - .5;vec3 ox=floor(x+0.5);vec3 a0=x - ox;m*=1.79284291400159 - .85373472095314 * (a0*a0+h*h);vec3 g;g.x=a0.x * x0.x+h.x * x0.y;g.yz=a0.yz * x12.xz+h.yz * x12.yw;return 130 * dot(m,g)}struct ColorStop{vec3 color;float position};#define COLOR_RAMP(colors,factor,finalColor){\ int index=0;\ for (int i=0;i < 2;i++){\ ColorStop currentColor=colors[i];\ bool isInBetween=currentColor.position <=factor;\ index=int(mix(float(index),float(i),float(isInBetween)));\}\ ColorStop currentColor=colors[index];\ ColorStop nextColor=colors[index+1];\ float range=nextColor.position - currentColor.position;\ float lerpFactor=(factor - currentColor.position) / range;\ finalColor=mix(currentColor.color,nextColor.color,lerpFactor);\}void main(){vec2 uv=gl_FragCoord.xy / uResolution;ColorStop colors[3];colors[0]=ColorStop(uColorStops[0],0);colors[1]=ColorStop(uColorStops[1],.5);colors[2]=ColorStop(uColorStops[2],1);vec3 rampColor;COLOR_RAMP(colors,uv.x,rampColor);float height=snoise(vec2(uv.x * 2.0+uTime * .1,uTime * .25)) * .5 * uAmplitude;height=exp(height);height=(uv.y * 2 - height+0.2);float intensity=0.6 * height;float midPoint=0.20;float auroraAlpha=smoothstep(midPoint - uBlend * .5,midPoint+uBlend * .5,intensity);vec3 auroraColor=intensity * rampColor;fragColor=vec4(auroraColor * auroraAlpha,auroraAlpha)}`;export default function Aurora(props){const{colorStops=['#5227FF','#7cff67','#5227FF'],amplitude=1.0,blend=0.5}=props;const propsRef=useRef(props);propsRef.current=props;const ctnDom=useRef(null);useEffect(()=>{const ctn=ctnDom.current;if (!ctn) return;const renderer=new Renderer({alpha:true,premultipliedAlpha:true,antialias:true});const gl=renderer.gl;gl.clearColor(0,0,0,0);gl.enable(gl.BLEND);gl.blendFunc(gl.ONE,gl.ONE_MINUS_SRC_ALPHA);gl.canvas.style.backgroundColor='transparent';let program;function resize(){if (!ctn) return;const width=ctn.offsetWidth;const height=ctn.offsetHeight;renderer.setSize(width,height);if (program){program.uniforms.uResolution.value=[width,height]}}window.addEventListener('resize',resize);const geometry=new Triangle(gl);if (geometry.attributes.uv){delete geometry.attributes.uv}const colorStopsArray=colorStops.map(hex=>{const c=new Color(hex);return [c.r,c.g,c.b]});program=new Program(gl,{vertex:VERT,fragment:FRAG,uniforms:{uTime:{value:0},uAmplitude:{value:amplitude},uColorStops:{value:colorStopsArray},uResolution:{value:[ctn.offsetWidth,ctn.offsetHeight]},uBlend:{value:blend}}});const mesh=new Mesh(gl,{geometry,program});ctn.appendChild(gl.canvas);let animateId=0;const update=t=>{animateId=requestAnimationFrame(update);const{time=t * .01,speed=1.0}=propsRef.current;program.uniforms.uTime.value=time * speed * .1;program.uniforms.uAmplitude.value=propsRef.current.amplitude ?? 1;program.uniforms.uBlend.value=propsRef.current.blend ?? blend;const stops=propsRef.current.colorStops ?? colorStops;program.uniforms.uColorStops.value=stops.map(hex=>{const c=new Color(hex);return [c.r,c.g,c.b]});renderer.render({scene:mesh})};animateId=requestAnimationFrame(update);resize();return ()=>{cancelAnimationFrame(animateId);window.removeEventListener('resize',resize);if (ctn && gl.canvas.parentNode===ctn){ctn.removeChild(gl.canvas)}gl.getExtension('WEBGL_lose_context')?.loseContext()};// eslint-disable-next-line react-hooks/exhaustive-deps},[amplitude]);return <div ref={ctnDom}className="aurora-container" />}