.elementor-20 .elementor-element.elementor-element-5f6d091{--display:flex;--min-height:85vh;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-20 .elementor-element.elementor-element-5f6d091:not(.elementor-motion-effects-element-type-background), .elementor-20 .elementor-element.elementor-element-5f6d091 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}.elementor-20 .elementor-element.elementor-element-4b06378{--display:flex;}.elementor-20 .elementor-element.elementor-element-0f49de3{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-20 .elementor-element.elementor-element-7480b0b{--display:flex;--justify-content:center;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-20 .elementor-element.elementor-element-7480b0b.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-20 .elementor-element.elementor-element-fa8d9af{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;text-align:left;font-family:"Inter", Sans-serif;font-size:60px;font-weight:700;line-height:60px;}.elementor-20 .elementor-element.elementor-element-fa8d9af p{margin-bottom:0px;}.elementor-20 .elementor-element.elementor-element-1d29735{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;column-gap:0px;text-align:left;font-family:"Inter", Sans-serif;font-size:16px;font-weight:600;color:#FFFFFF;}.elementor-20 .elementor-element.elementor-element-1d29735 p{margin-bottom:0px;}.elementor-20 .elementor-element.elementor-element-321c86c{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-20 .elementor-element.elementor-element-5461dcf .elementor-button{background-color:#FB6100;font-family:"Inter", Sans-serif;font-size:16px;font-weight:500;fill:#FFFFFF;color:#FFFFFF;border-radius:15px 15px 15px 15px;padding:20px 20px 20px 20px;}.elementor-20 .elementor-element.elementor-element-5461dcf:hover{--e-transform-scale:1.05;}.elementor-20 .elementor-element.elementor-element-5461dcf .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-20 .elementor-element.elementor-element-45683a4 .elementor-button{background-color:#FB610000;font-family:"Inter", Sans-serif;font-size:16px;font-weight:500;fill:#FFFFFF;color:#FFFFFF;border-style:solid;border-width:2px 2px 2px 2px;border-color:#FFFFFF;border-radius:15px 15px 15px 15px;padding:20px 20px 20px 20px;}.elementor-20 .elementor-element.elementor-element-45683a4:hover{--e-transform-scale:1.05;}.elementor-20 .elementor-element.elementor-element-45683a4 .elementor-button:hover, .elementor-20 .elementor-element.elementor-element-45683a4 .elementor-button:focus{border-color:#FB6100;}.elementor-20 .elementor-element.elementor-element-7d1005d{--display:flex;--justify-content:center;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-20 .elementor-element.elementor-element-7d1005d.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-20 .elementor-element.elementor-element-e30debd img{width:80%;border-radius:30px 30px 30px 30px;}.elementor-20 .elementor-element.elementor-element-b1eb93e{--display:flex;}.elementor-20 .elementor-element.elementor-element-9ce56ef{--display:flex;--min-height:80vh;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-20 .elementor-element.elementor-element-9ce56ef:not(.elementor-motion-effects-element-type-background), .elementor-20 .elementor-element.elementor-element-9ce56ef > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#E0E0E0;}.elementor-20 .elementor-element.elementor-element-2df1585{--display:flex;}.elementor-20 .elementor-element.elementor-element-b8eec41{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-20 .elementor-element.elementor-element-720875c{--display:flex;--justify-content:center;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--padding-top:0px;--padding-bottom:50px;--padding-left:20px;--padding-right:20px;}.elementor-20 .elementor-element.elementor-element-720875c.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-20 .elementor-element.elementor-element-6adb7bd{column-gap:0px;font-family:"Inter", Sans-serif;font-size:20px;font-weight:600;line-height:50px;color:#000000;}.elementor-20 .elementor-element.elementor-element-6adb7bd p{margin-bottom:0px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-20 .elementor-element.elementor-element-5291cd0 .elementor-heading-title{font-family:"Inter", Sans-serif;font-size:50px;font-weight:500;color:#000000;}.elementor-20 .elementor-element.elementor-element-21a8ea6{--display:flex;}.elementor-20 .elementor-element.elementor-element-ba0d204{--display:flex;--min-height:100vh;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-20 .elementor-element.elementor-element-ba0d204:not(.elementor-motion-effects-element-type-background), .elementor-20 .elementor-element.elementor-element-ba0d204 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}.elementor-20 .elementor-element.elementor-element-13c9ba0{--display:flex;}.elementor-20 .elementor-element.elementor-element-bd43b62{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-20 .elementor-element.elementor-element-a74cf21{--display:flex;--justify-content:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-20 .elementor-element.elementor-element-a74cf21.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-20 .elementor-element.elementor-element-44cd7f0{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--border-radius:0px 0px 0px 0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-20 .elementor-element.elementor-element-848d1ef:hover{background-color:#141414;border-style:solid;border-width:0px 0px 0px 5px;border-color:#FB6100;}.elementor-20 .elementor-element.elementor-element-848d1ef{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:20px 20px 10px 20px;transition:background 0.5s, border 0.5s, border-radius 0.5s, box-shadow 0.5s;border-style:solid;border-width:0px 0px 0px 5px;border-color:#02010100;border-radius:0px 10px 10px 0px;column-gap:0px;text-align:left;font-family:"Inter", Sans-serif;font-size:16px;font-weight:600;line-height:10px;color:#FFFFFF;}.elementor-20 .elementor-element.elementor-element-848d1ef p{margin-bottom:0px;}.elementor-20 .elementor-element.elementor-element-d1378d3:hover{background-color:#141414;border-style:solid;border-width:0px 0px 0px 5px;border-color:#FB6100;}.elementor-20 .elementor-element.elementor-element-d1378d3{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:20px 20px 10px 20px;transition:background 0.5s, border 0.5s, border-radius 0.5s, box-shadow 0.5s;border-style:solid;border-width:0px 0px 0px 5px;border-color:#02010100;border-radius:0px 10px 10px 0px;column-gap:0px;text-align:left;font-family:"Inter", Sans-serif;font-size:16px;font-weight:600;line-height:10px;color:#FFFFFF;}.elementor-20 .elementor-element.elementor-element-d1378d3 p{margin-bottom:0px;}.elementor-20 .elementor-element.elementor-element-d00b880:hover{background-color:#141414;border-style:solid;border-width:0px 0px 0px 5px;border-color:#FB6100;}.elementor-20 .elementor-element.elementor-element-d00b880{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:20px 20px 10px 20px;transition:background 0.5s, border 0.5s, border-radius 0.5s, box-shadow 0.5s;border-style:solid;border-width:0px 0px 0px 5px;border-color:#02010100;border-radius:0px 10px 10px 0px;column-gap:0px;text-align:left;font-family:"Inter", Sans-serif;font-size:16px;font-weight:600;line-height:10px;color:#FFFFFF;}.elementor-20 .elementor-element.elementor-element-d00b880 p{margin-bottom:0px;}.elementor-20 .elementor-element.elementor-element-fbf5adb:hover{background-color:#141414;border-style:solid;border-width:0px 0px 0px 5px;border-color:#FB6100;}.elementor-20 .elementor-element.elementor-element-fbf5adb{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:20px 20px 10px 20px;transition:background 0.5s, border 0.5s, border-radius 0.5s, box-shadow 0.5s;border-style:solid;border-width:0px 0px 0px 5px;border-color:#02010100;border-radius:0px 10px 10px 0px;column-gap:0px;text-align:left;font-family:"Inter", Sans-serif;font-size:16px;font-weight:600;line-height:10px;color:#FFFFFF;}.elementor-20 .elementor-element.elementor-element-fbf5adb p{margin-bottom:0px;}.elementor-20 .elementor-element.elementor-element-a13947e:hover{background-color:#141414;border-style:solid;border-width:0px 0px 0px 5px;border-color:#FB6100;}.elementor-20 .elementor-element.elementor-element-a13947e{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:20px 20px 10px 20px;transition:background 0.5s, border 0.5s, border-radius 0.5s, box-shadow 0.5s;border-style:solid;border-width:0px 0px 0px 5px;border-color:#02010100;border-radius:0px 10px 10px 0px;column-gap:0px;text-align:left;font-family:"Inter", Sans-serif;font-size:16px;font-weight:600;line-height:10px;color:#FFFFFF;}.elementor-20 .elementor-element.elementor-element-a13947e p{margin-bottom:0px;}.elementor-20 .elementor-element.elementor-element-d1ca103:hover{background-color:#141414;border-style:solid;border-width:0px 0px 0px 5px;border-color:#FB6100;}.elementor-20 .elementor-element.elementor-element-d1ca103{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:20px 20px 10px 20px;transition:background 0.5s, border 0.5s, border-radius 0.5s, box-shadow 0.5s;border-style:solid;border-width:0px 0px 0px 5px;border-color:#02010100;border-radius:0px 10px 10px 0px;column-gap:0px;text-align:left;font-family:"Inter", Sans-serif;font-size:16px;font-weight:600;line-height:10px;color:#FFFFFF;}.elementor-20 .elementor-element.elementor-element-d1ca103 p{margin-bottom:0px;}.elementor-20 .elementor-element.elementor-element-a2c8ab7{--display:flex;--justify-content:center;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-20 .elementor-element.elementor-element-a2c8ab7.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-20 .elementor-element.elementor-element-fd4efb0{--display:flex;}.elementor-20 .elementor-element.elementor-element-0471283{--display:flex;--min-height:100vh;--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;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--e-transform-origin-x:center;--e-transform-origin-y:center;}.elementor-20 .elementor-element.elementor-element-0471283:not(.elementor-motion-effects-element-type-background), .elementor-20 .elementor-element.elementor-element-0471283 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#373839;}.elementor-20 .elementor-element.elementor-element-7de1269{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;z-index:1;}.elementor-20 .elementor-element.elementor-element-c53793c{--display:flex;--min-height:80vh;--justify-content:center;--padding-top:0px;--padding-bottom:0px;--padding-left:50px;--padding-right:50px;--z-index:3;}.elementor-20 .elementor-element.elementor-element-433e972{--display:flex;}.elementor-20 .elementor-element.elementor-element-4eb5cde{--display:flex;}body.elementor-page-20{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}@media(min-width:768px){.elementor-20 .elementor-element.elementor-element-4b06378{--width:80px;}.elementor-20 .elementor-element.elementor-element-0f49de3{--width:1140px;}.elementor-20 .elementor-element.elementor-element-7480b0b{--width:49.53%;}.elementor-20 .elementor-element.elementor-element-7d1005d{--width:52.018%;}.elementor-20 .elementor-element.elementor-element-b1eb93e{--width:80px;}.elementor-20 .elementor-element.elementor-element-2df1585{--width:80px;}.elementor-20 .elementor-element.elementor-element-b8eec41{--width:1140px;}.elementor-20 .elementor-element.elementor-element-720875c{--width:100%;}.elementor-20 .elementor-element.elementor-element-21a8ea6{--width:80px;}.elementor-20 .elementor-element.elementor-element-13c9ba0{--width:80px;}.elementor-20 .elementor-element.elementor-element-bd43b62{--width:1140px;}.elementor-20 .elementor-element.elementor-element-a74cf21{--width:39.96%;}.elementor-20 .elementor-element.elementor-element-a2c8ab7{--width:59.96%;}.elementor-20 .elementor-element.elementor-element-fd4efb0{--width:80px;}.elementor-20 .elementor-element.elementor-element-0471283{--width:100%;}.elementor-20 .elementor-element.elementor-element-c53793c{--width:100%;}.elementor-20 .elementor-element.elementor-element-433e972{--width:60%;}.elementor-20 .elementor-element.elementor-element-4eb5cde{--width:80%;}}/* Start custom CSS for container, class: .elementor-element-0471283 */<canvas id="threeCanvas"></canvas>

<!-- THREE.js library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

<style>
  #threeCanvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2; /* Zorg dat het bovenop video zit */
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  .ripple-bg {
    position: relative; /* Nodig om canvas te positioneren binnen deze container */
    overflow: hidden;
  }
</style>

<script>
document.addEventListener("DOMContentLoaded", () => {
  const canvasEl = document.getElementById("threeCanvas");
  const container = document.querySelector(".ripple-bg");

  // Zorg dat canvas de grootte van ripple-bg aanneemt
  const rect = container.getBoundingClientRect();
  canvasEl.width = rect.width * window.devicePixelRatio;
  canvasEl.height = rect.height * window.devicePixelRatio;

  const scene = new THREE.Scene();
  const simScene = new THREE.Scene();
  const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);

  const renderer = new THREE.WebGLRenderer({
    canvas: canvasEl,
    antialias: true,
    alpha: true,
    preserveDrawingBuffer: true,
  });

  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
  renderer.setSize(rect.width, rect.height);

  const mouse = new THREE.Vector2();
  let frame = 0;

  const width = canvasEl.width;
  const height = canvasEl.height;

  const options = {
    format: THREE.RGBAFormat,
    type: THREE.FloatType,
    minFilter: THREE.LinearFilter,
    magFilter: THREE.LinearFilter,
    stencilBuffer: false,
    depthBuffer: false,
  };

  let rtA = new THREE.WebGLRenderTarget(width, height, options);
  let rtB = new THREE.WebGLRenderTarget(width, height, options);

  const simMaterial = new THREE.ShaderMaterial({
    uniforms: {
      textureA: { value: null },
      mouse: { value: mouse },
      resolution: { value: new THREE.Vector2(width, height) },
      time: { value: 0 },
      frame: { value: 0 },
    },
    vertexShader: `varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }`,
    fragmentShader: `uniform sampler2D textureA;
      uniform vec2 mouse;
      uniform vec2 resolution;
      uniform float time;
      uniform int frame;
      varying vec2 vUv;

      const float delta = 1.4;

      void main() {
        vec2 uv = vUv;
        if (frame == 0) {
            gl_FragColor = vec4(0.0);
            return;
        }

        vec4 data = texture2D(textureA, uv);
        float pressure = data.x;
        float pVel = data.y;

        vec2 texelSize = 1.0 / resolution;
        float p_right = texture2D(textureA, uv + vec2(texelSize.x, 0.0)).x;
        float p_left = texture2D(textureA, uv + vec2(-texelSize.x, 0.0)).x;
        float p_up = texture2D(textureA, uv + vec2(0.0, texelSize.y)).x;
        float p_down = texture2D(textureA, uv + vec2(0.0, -texelSize.y)).x;

        pVel += delta * (-2.0 * pressure + p_right + p_left) / 4.0;
        pVel += delta * (-2.0 * pressure + p_up + p_down) / 4.0;

        pressure += delta * pVel;
        pVel -= 0.005 * delta * pressure;
        pVel *= 1.0 - 0.002 * delta;
        pressure *= 0.999;

        vec2 mouseUV = mouse / resolution;
        if(mouse.x > 0.0) {
            float dist = distance(uv, mouseUV);
            if(dist <= 0.02) {
                pressure += 2.0 * (1.0 - dist / 0.02);
            }
        }

        gl_FragColor = vec4(pressure, pVel, 
            (p_right - p_left) / 2.0, 
            (p_up - p_down) / 2.0);
      }`,
  });

  const renderMaterial = new THREE.ShaderMaterial({
    uniforms: {
      textureA: { value: null },
      textureB: { value: null },
    },
    vertexShader: `varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }`,
    fragmentShader: `uniform sampler2D textureA;
      uniform sampler2D textureB;
      varying vec2 vUv;

      void main() {
        vec4 data = texture2D(textureA, vUv);
        vec2 distortion = 0.3 * data.zw;
        vec4 base = texture2D(textureB, vUv + distortion);
        gl_FragColor = base;
      }`,
    transparent: true,
  });

  const plane = new THREE.PlaneGeometry(2, 2);
  const simQuad = new THREE.Mesh(plane, simMaterial);
  const renderQuad = new THREE.Mesh(plane, renderMaterial);

  simScene.add(simQuad);
  scene.add(renderQuad);

  const video = document.querySelector(".ripple-bg video");
  const videoTexture = new THREE.VideoTexture(video);
  videoTexture.minFilter = THREE.LinearFilter;
  videoTexture.magFilter = THREE.LinearFilter;
  videoTexture.format = THREE.RGBAFormat;

  renderMaterial.uniforms.textureB.value = videoTexture;

  container.addEventListener("mousemove", (e) => {
    const bounds = container.getBoundingClientRect();
    mouse.x = (e.clientX - bounds.left) * window.devicePixelRatio;
    mouse.y = (bounds.bottom - e.clientY) * window.devicePixelRatio;
  });

  container.addEventListener("mouseleave", () => {
    mouse.set(-1, -1);
  });

  const animate = () => {
    simMaterial.uniforms.frame.value = frame++;
    simMaterial.uniforms.time.value = performance.now() / 1000;

    simMaterial.uniforms.textureA.value = rtA.texture;
    renderer.setRenderTarget(rtB);
    renderer.render(simScene, camera);

    renderMaterial.uniforms.textureA.value = rtB.texture;
    renderer.setRenderTarget(null);
    renderer.render(scene, camera);

    const temp = rtA;
    rtA = rtB;
    rtB = temp;

    requestAnimationFrame(animate);
  };

  animate();
});
</script>/* End custom CSS */