class MiniGl {
  constructor(canvas, width, height, debug = false) {
    const _miniGl = this,
      debug_output = -1 !== document.location.search.toLowerCase().indexOf("debug=webgl");
    _miniGl.canvas = canvas, _miniGl.gl = _miniGl.canvas.getContext("webgl", {
      antialias: true
    }), _miniGl.meshes = [];
    const context = _miniGl.gl;
    width && height && this.setSize(width, height), _miniGl.lastDebugMsg, _miniGl.debug = debug && debug_output ? function (e) {
      const t = new Date();
      t - _miniGl.lastDebugMsg > 1e3 && console.log("---"), console.log(t.toLocaleTimeString() + Array(Math.max(0, 32 - e.length)).join(" ") + e + ": ", ...Array.from(arguments).slice(1)), _miniGl.lastDebugMsg = t;
    } : () => {}, Object.defineProperties(_miniGl, {
      Material: {
        enumerable: false,
        value: class {
          constructor(vertexShaders, fragments, uniforms = {}) {
            const material = this;
            function getShaderByType(type, source) {
              const shader = context.createShader(type);
              return context.shaderSource(shader, source), context.compileShader(shader), context.getShaderParameter(shader, context.COMPILE_STATUS) || console.error(context.getShaderInfoLog(shader)), _miniGl.debug("Material.compileShaderSource", {
                source: source
              }), shader;
            }
            function getUniformVariableDeclarations(uniforms, type) {
              return Object.entries(uniforms).map(([uniform, value]) => value.getDeclaration(uniform, type)).join("\n");
            }
            material.uniforms = uniforms, material.uniformInstances = [];
            const prefix = "\n              precision highp float;\n            ";
            material.vertexSource = `\n              ${prefix}\n              attribute vec4 position;\n              attribute vec2 uv;\n              attribute vec2 uvNorm;\n              ${getUniformVariableDeclarations(_miniGl.commonUniforms, "vertex")}\n              ${getUniformVariableDeclarations(uniforms, "vertex")}\n              ${vertexShaders}\n            `, material.Source = `\n              ${prefix}\n              ${getUniformVariableDeclarations(_miniGl.commonUniforms, "fragment")}\n              ${getUniformVariableDeclarations(uniforms, "fragment")}\n              ${fragments}\n            `, material.vertexShader = getShaderByType(context.VERTEX_SHADER, material.vertexSource), material.fragmentShader = getShaderByType(context.FRAGMENT_SHADER, material.Source), material.program = context.createProgram(), context.attachShader(material.program, material.vertexShader), context.attachShader(material.program, material.fragmentShader), context.linkProgram(material.program), context.getProgramParameter(material.program, context.LINK_STATUS) || console.error(context.getProgramInfoLog(material.program)), context.useProgram(material.program), material.attachUniforms(void 0, _miniGl.commonUniforms), material.attachUniforms(void 0, material.uniforms);
          }
          //t = uniform
          attachUniforms(name, uniforms) {
            //n  = material
            const material = this;
            void 0 === name ? Object.entries(uniforms).forEach(([name, uniform]) => {
              material.attachUniforms(name, uniform);
            }) : "array" == uniforms.type ? uniforms.value.forEach((uniform, i) => material.attachUniforms(`${name}[${i}]`, uniform)) : "struct" == uniforms.type ? Object.entries(uniforms.value).forEach(([uniform, i]) => material.attachUniforms(`${name}.${uniform}`, i)) : (_miniGl.debug("Material.attachUniforms", {
              name: name,
              uniform: uniforms
            }), material.uniformInstances.push({
              uniform: uniforms,
              location: context.getUniformLocation(material.program, name)
            }));
          }
        }
      },
      Uniform: {
        enumerable: !1,
        value: class {
          constructor(e) {
            this.type = "float", Object.assign(this, e);
            this.typeFn = {
              float: "1f",
              int: "1i",
              vec2: "2fv",
              vec3: "3fv",
              vec4: "4fv",
              mat4: "Matrix4fv"
            }[this.type] || "1f", this.update();
          }
          update(value) {
            void 0 !== this.value && context[`uniform${this.typeFn}`](value, 0 === this.typeFn.indexOf("Matrix") ? this.transpose : this.value, 0 === this.typeFn.indexOf("Matrix") ? this.value : null);
          }
          //e - name
          //t - type
          //n - length
          getDeclaration(name, type, length) {
            const uniform = this;
            if (uniform.excludeFrom !== type) {
              if ("array" === uniform.type) return uniform.value[0].getDeclaration(name, type, uniform.value.length) + `\nconst int ${name}_length = ${uniform.value.length};`;
              if ("struct" === uniform.type) {
                let name_no_prefix = name.replace("u_", "");
                return name_no_prefix = name_no_prefix.charAt(0).toUpperCase() + name_no_prefix.slice(1), `uniform struct ${name_no_prefix}
                                  {\n` + Object.entries(uniform.value).map(([name, uniform]) => uniform.getDeclaration(name, type).replace(/^uniform/, "")).join("") + `\n} ${name}${length > 0 ? `[${length}]` : ""};`;
              }
              return `uniform ${uniform.type} ${name}${length > 0 ? `[${length}]` : ""};`;
            }
          }
        }
      },
      PlaneGeometry: {
        enumerable: !1,
        value: class {
          constructor(width, height, n, i, orientation) {
            context.createBuffer(), this.attributes = {
              position: new _miniGl.Attribute({
                target: context.ARRAY_BUFFER,
                size: 3
              }),
              uv: new _miniGl.Attribute({
                target: context.ARRAY_BUFFER,
                size: 2
              }),
              uvNorm: new _miniGl.Attribute({
                target: context.ARRAY_BUFFER,
                size: 2
              }),
              index: new _miniGl.Attribute({
                target: context.ELEMENT_ARRAY_BUFFER,
                size: 3,
                type: context.UNSIGNED_SHORT
              })
            }, this.setTopology(n, i), this.setSize(width, height, orientation);
          }
          setTopology(e = 1, t = 1) {
            const n = this;
            n.xSegCount = e, n.ySegCount = t, n.vertexCount = (n.xSegCount + 1) * (n.ySegCount + 1), n.quadCount = n.xSegCount * n.ySegCount * 2, n.attributes.uv.values = new Float32Array(2 * n.vertexCount), n.attributes.uvNorm.values = new Float32Array(2 * n.vertexCount), n.attributes.index.values = new Uint16Array(3 * n.quadCount);
            for (let e = 0; e <= n.ySegCount; e++) for (let t = 0; t <= n.xSegCount; t++) {
              const i = e * (n.xSegCount + 1) + t;
              if (n.attributes.uv.values[2 * i] = t / n.xSegCount, n.attributes.uv.values[2 * i + 1] = 1 - e / n.ySegCount, n.attributes.uvNorm.values[2 * i] = t / n.xSegCount * 2 - 1, n.attributes.uvNorm.values[2 * i + 1] = 1 - e / n.ySegCount * 2, t < n.xSegCount && e < n.ySegCount) {
                const s = e * n.xSegCount + t;
                n.attributes.index.values[6 * s] = i, n.attributes.index.values[6 * s + 1] = i + 1 + n.xSegCount, n.attributes.index.values[6 * s + 2] = i + 1, n.attributes.index.values[6 * s + 3] = i + 1, n.attributes.index.values[6 * s + 4] = i + 1 + n.xSegCount, n.attributes.index.values[6 * s + 5] = i + 2 + n.xSegCount;
              }
            }
            n.attributes.uv.update(), n.attributes.uvNorm.update(), n.attributes.index.update(), _miniGl.debug("Geometry.setTopology", {
              uv: n.attributes.uv,
              uvNorm: n.attributes.uvNorm,
              index: n.attributes.index
            });
          }
          setSize(width = 1, height = 1, orientation = "xz") {
            const geometry = this;
            geometry.width = width, geometry.height = height, geometry.orientation = orientation, geometry.attributes.position.values && geometry.attributes.position.values.length === 3 * geometry.vertexCount || (geometry.attributes.position.values = new Float32Array(3 * geometry.vertexCount));
            const o = width / -2,
              r = height / -2,
              segment_width = width / geometry.xSegCount,
              segment_height = height / geometry.ySegCount;
            for (let yIndex = 0; yIndex <= geometry.ySegCount; yIndex++) {
              const t = r + yIndex * segment_height;
              for (let xIndex = 0; xIndex <= geometry.xSegCount; xIndex++) {
                const r = o + xIndex * segment_width,
                  l = yIndex * (geometry.xSegCount + 1) + xIndex;
                geometry.attributes.position.values[3 * l + "xyz".indexOf(orientation[0])] = r, geometry.attributes.position.values[3 * l + "xyz".indexOf(orientation[1])] = -t;
              }
            }
            geometry.attributes.position.update(), _miniGl.debug("Geometry.setSize", {
              position: geometry.attributes.position
            });
          }
        }
      },
      Mesh: {
        enumerable: !1,
        value: class {
          constructor(geometry, material) {
            const mesh = this;
            mesh.geometry = geometry, mesh.material = material, mesh.wireframe = !1, mesh.attributeInstances = [], Object.entries(mesh.geometry.attributes).forEach(([e, attribute]) => {
              mesh.attributeInstances.push({
                attribute: attribute,
                location: attribute.attach(e, mesh.material.program)
              });
            }), _miniGl.meshes.push(mesh), _miniGl.debug("Mesh.constructor", {
              mesh: mesh
            });
          }
          draw() {
            context.useProgram(this.material.program), this.material.uniformInstances.forEach(({
              uniform: e,
              location: t
            }) => e.update(t)), this.attributeInstances.forEach(({
              attribute: e,
              location: t
            }) => e.use(t)), context.drawElements(this.wireframe ? context.LINES : context.TRIANGLES, this.geometry.attributes.index.values.length, context.UNSIGNED_SHORT, 0);
          }
          remove() {
            _miniGl.meshes = _miniGl.meshes.filter(e => e != this);
          }
        }
      },
      Attribute: {
        enumerable: !1,
        value: class {
          constructor(e) {
            this.type = context.FLOAT, this.normalized = !1, this.buffer = context.createBuffer(), Object.assign(this, e), this.update();
          }
          update() {
            void 0 !== this.values && (context.bindBuffer(this.target, this.buffer), context.bufferData(this.target, this.values, context.STATIC_DRAW));
          }
          attach(e, t) {
            const n = context.getAttribLocation(t, e);
            return this.target === context.ARRAY_BUFFER && (context.enableVertexAttribArray(n), context.vertexAttribPointer(n, this.size, this.type, this.normalized, 0, 0)), n;
          }
          use(e) {
            context.bindBuffer(this.target, this.buffer), this.target === context.ARRAY_BUFFER && (context.enableVertexAttribArray(e), context.vertexAttribPointer(e, this.size, this.type, this.normalized, 0, 0));
          }
        }
      }
    });
    const a = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
    _miniGl.commonUniforms = {
      projectionMatrix: new _miniGl.Uniform({
        type: "mat4",
        value: a
      }),
      modelViewMatrix: new _miniGl.Uniform({
        type: "mat4",
        value: a
      }),
      resolution: new _miniGl.Uniform({
        type: "vec2",
        value: [1, 1]
      }),
      aspectRatio: new _miniGl.Uniform({
        type: "float",
        value: 1
      })
    };
  }
  setSize(e = 640, t = 480) {
    this.width = e, this.height = t, this.canvas.width = e, this.canvas.height = t, this.gl.viewport(0, 0, e, t), this.commonUniforms.resolution.value = [e, t], this.commonUniforms.aspectRatio.value = e / t, this.debug("MiniGL.setSize", {
      width: e,
      height: t
    });
  }
  //left, right, top, bottom, near, far
  setOrthographicCamera(e = 0, t = 0, n = 0, i = -2e3, s = 2e3) {
    this.commonUniforms.projectionMatrix.value = [2 / this.width, 0, 0, 0, 0, 2 / this.height, 0, 0, 0, 0, 2 / (i - s), 0, e, t, n, 1], this.debug("setOrthographicCamera", this.commonUniforms.projectionMatrix.value);
  }
  render() {
    this.gl.clearColor(0, 0, 0, 0), this.gl.clearDepth(1), this.meshes.forEach(e => e.draw());
  }
}
class r {
  constructor({
    threshold: r,
    requireThreshold: s,
    onlyOnce: t,
    rootMargin: o,
    root: n
  }) {
    e(this, "__intersectHandlers", []), e(this, "__separateHandlers", []), e(this, "__observer", void 0), this.__observer = new IntersectionObserver(e => {
      !s || e[0].intersectionRatio >= r ? (this.__intersectHandlers.forEach(r => {
        r(e);
      }), t && this.disconnect()) : this.__separateHandlers.forEach(r => {
        r(e);
      });
    }, {
      threshold: r,
      rootMargin: o,
      root: n
    });
  }
  observe(e) {
    this.__observer.observe(e);
  }
  onIntersect(e) {
    this.__intersectHandlers.push(e);
  }
  onSeparate(e) {
    this.__separateHandlers.push(e);
  }
  disconnect() {
    this.__observer.disconnect();
  }
}
const s = {
  create: function (e = 1, s = !1, t = !0, o = "0px 0px 0px 0px", n = null) {
    return new Promise(i => {
      function c() {
        i(new r({
          threshold: e,
          requireThreshold: t,
          onlyOnce: s,
          rootMargin: o,
          root: n
        }));
      }
      c();
    });
  }
};
const e = (object, propertyName, val) => {
  return propertyName in object ? Object.defineProperty(object, propertyName, {
    value: val,
    enumerable: !0,
    configurable: !0,
    writable: !0
  }) : object[propertyName] = val, object;
};
class Gradient {
  constructor(...t) {
    e(this, "el", void 0), e(this, "cssVarRetries", 0), e(this, "maxCssVarRetries", 200), e(this, "angle", 0), e(this, "isLoadedClass", !1), e(this, "isScrolling", !1), /*e(this, "isStatic", o.disableAmbientAnimations()),*/e(this, "scrollingTimeout", void 0), e(this, "scrollingRefreshDelay", 200), e(this, "isIntersecting", !1), e(this, "shaderFiles", void 0), e(this, "vertexShader", void 0), e(this, "sectionColors", void 0), e(this, "computedCanvasStyle", void 0), e(this, "conf", void 0), e(this, "uniforms", void 0), e(this, "t", 1253106), e(this, "last", 0), e(this, "width", void 0), e(this, "minWidth", 1111), e(this, "height", 600), e(this, "xSegCount", void 0), e(this, "ySegCount", void 0), e(this, "mesh", void 0), e(this, "material", void 0), e(this, "geometry", void 0), e(this, "minigl", void 0), e(this, "scrollObserver", void 0), e(this, "amp", 320), e(this, "seed", 5), e(this, "freqX", 14e-5), e(this, "freqY", 29e-5), e(this, "freqDelta", 1e-5), e(this, "activeColors", [1, 1, 1, 1]), e(this, "isMetaKey", !1), e(this, "isGradientLegendVisible", !1), e(this, "isMouseDown", !1), e(this, "handleScroll", () => {
      clearTimeout(this.scrollingTimeout), this.scrollingTimeout = setTimeout(this.handleScrollEnd, this.scrollingRefreshDelay), this.isGradientLegendVisible && this.hideGradientLegend(), this.conf.playing && (this.isScrolling = !0, this.pause());
    }), e(this, "handleScrollEnd", () => {
      this.isScrolling = !1, this.isIntersecting && this.play();
    }), e(this, "resize", () => {
      this.width = window.innerWidth, this.minigl.setSize(this.width, this.height), this.minigl.setOrthographicCamera(), this.xSegCount = Math.ceil(this.width * this.conf.density[0]), this.ySegCount = Math.ceil(this.height * this.conf.density[1]), this.mesh.geometry.setTopology(this.xSegCount, this.ySegCount), this.mesh.geometry.setSize(this.width, this.height), this.mesh.material.uniforms.u_shadow_power.value = this.width < 600 ? 5 : 6;
    }), e(this, "handleMouseDown", e => {
      this.isGradientLegendVisible && (this.isMetaKey = e.metaKey, this.isMouseDown = !0, !1 === this.conf.playing && requestAnimationFrame(this.animate));
    }), e(this, "handleMouseUp", () => {
      this.isMouseDown = !1;
    }), e(this, "animate", e => {
      if (!this.shouldSkipFrame(e) || this.isMouseDown) {
        if (this.t += Math.min(e - this.last, 1e3 / 15), this.last = e, this.isMouseDown) {
          let e = 160;
          this.isMetaKey && (e = -160), this.t += e;
        }
        this.mesh.material.uniforms.u_time.value = this.t, this.minigl.render();
      }
      if (0 !== this.last && this.isStatic) return this.minigl.render(), void this.disconnect();
      (this.isIntersecting && this.conf.playing || this.isMouseDown) && requestAnimationFrame(this.animate);
    }), e(this, "addIsLoadedClass", () => {
      this.isIntersecting && !this.isLoadedClass && (this.isLoadedClass = !0, this.el.classList.add("isLoaded"), setTimeout(() => {
        this.el.parentElement.classList.add("isLoaded");
      }, 3e3));
    }), e(this, "pause", () => {
      this.conf.playing = false;
    }), e(this, "play", () => {
      requestAnimationFrame(this.animate), this.conf.playing = true;
    }), e(this, "initGradient", (selector, colors) => {
      this.el = document.querySelector(selector);
      this.connect();
      this.sectionColors = colors;
      return this;
    });
  }
  async connect() {
    this.shaderFiles = {
      vertex: "varying vec3 v_color;\n\nvoid main() {\n  float time = u_global.noiseSpeed == 0.01 ? u_static_time + u_mouse_time : u_mouse_time + u_time * u_global.noiseSpeed;\n\n  vec2 noiseCoord = resolution * uvNorm * u_global.noiseFreq;\n\n  vec2 st = 1. - uvNorm.xy;\n\n  //\n  // Tilting the plane\n  //\n\n  // Front-to-back tilt\n  float tilt = resolution.y / 2.0 * uvNorm.y;\n\n  // Left-to-right angle\n  float incline = resolution.x * uvNorm.x / 2.0 * u_vertDeform.incline;\n\n  // Up-down shift to offset incline\n  float offset = resolution.x / 2.0 * u_vertDeform.incline * mix(u_vertDeform.offsetBottom, u_vertDeform.offsetTop, uv.y);\n\n  //\n  // Vertex noise\n  //\n\n  float noise = snoise(vec3(\n    noiseCoord.x * u_vertDeform.noiseFreq.x + time * u_vertDeform.noiseFlow,\n    noiseCoord.y * u_vertDeform.noiseFreq.y,\n    time * u_vertDeform.noiseSpeed + u_vertDeform.noiseSeed\n  )) * u_vertDeform.noiseAmp;\n\n  // Fade noise to zero at edges\n  noise *= 1.0 - pow(abs(uvNorm.y), 2.0);\n\n  // Clamp to 0\n  noise = max(0.0, noise);\n\n  vec3 pos = vec3(\n    position.x,\n    position.y + tilt + incline + noise - offset,\n    position.z\n  );\n\n  //\n  // Vertex color, to be passed to fragment shader\n  //\n\n  if (u_active_colors[0] == 1.) {\n    v_color = u_baseColor;\n  }\n\n  for (int i = 0; i < u_waveLayers_length; i++) {\n    if (u_active_colors[i + 1] == 1.) {\n      WaveLayers layer = u_waveLayers[i];\n\n      float noise = smoothstep(\n        layer.noiseFloor,\n        layer.noiseCeil,\n        snoise(vec3(\n          noiseCoord.x * layer.noiseFreq.x + time * layer.noiseFlow,\n          noiseCoord.y * layer.noiseFreq.y,\n          time * layer.noiseSpeed + layer.noiseSeed\n        )) / 2.0 + 0.5\n      );\n\n      v_color = blendNormal(v_color, layer.color, pow(noise, 4.));\n    }\n  }\n\n  //\n  // Finish\n  //\n\n  gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);\n}",
      noise: "//\n// Description : Array and textureless GLSL 2D/3D/4D simplex\n//               noise functions.\n//      Author : Ian McEwan, Ashima Arts.\n//  Maintainer : stegu\n//     Lastmod : 20110822 (ijm)\n//     License : Copyright (C) 2011 Ashima Arts. All rights reserved.\n//               Distributed under the MIT License. See LICENSE file.\n//               https://github.com/ashima/webgl-noise\n//               https://github.com/stegu/webgl-noise\n//\n\nvec3 mod289(vec3 x) {\n  return x - floor(x * (1.0 / 289.0)) * 289.0;\n}\n\nvec4 mod289(vec4 x) {\n  return x - floor(x * (1.0 / 289.0)) * 289.0;\n}\n\nvec4 permute(vec4 x) {\n    return mod289(((x*34.0)+1.0)*x);\n}\n\nvec4 taylorInvSqrt(vec4 r)\n{\n  return 1.79284291400159 - 0.85373472095314 * r;\n}\n\nfloat snoise(vec3 v)\n{\n  const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;\n  const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);\n\n// First corner\n  vec3 i  = floor(v + dot(v, C.yyy) );\n  vec3 x0 =   v - i + dot(i, C.xxx) ;\n\n// Other corners\n  vec3 g = step(x0.yzx, x0.xyz);\n  vec3 l = 1.0 - g;\n  vec3 i1 = min( g.xyz, l.zxy );\n  vec3 i2 = max( g.xyz, l.zxy );\n\n  //   x0 = x0 - 0.0 + 0.0 * C.xxx;\n  //   x1 = x0 - i1  + 1.0 * C.xxx;\n  //   x2 = x0 - i2  + 2.0 * C.xxx;\n  //   x3 = x0 - 1.0 + 3.0 * C.xxx;\n  vec3 x1 = x0 - i1 + C.xxx;\n  vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y\n  vec3 x3 = x0 - D.yyy;      // -1.0+3.0*C.x = -0.5 = -D.y\n\n// Permutations\n  i = mod289(i);\n  vec4 p = permute( permute( permute(\n            i.z + vec4(0.0, i1.z, i2.z, 1.0 ))\n          + i.y + vec4(0.0, i1.y, i2.y, 1.0 ))\n          + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));\n\n// Gradients: 7x7 points over a square, mapped onto an octahedron.\n// The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)\n  float n_ = 0.142857142857; // 1.0/7.0\n  vec3  ns = n_ * D.wyz - D.xzx;\n\n  vec4 j = p - 49.0 * floor(p * ns.z * ns.z);  //  mod(p,7*7)\n\n  vec4 x_ = floor(j * ns.z);\n  vec4 y_ = floor(j - 7.0 * x_ );    // mod(j,N)\n\n  vec4 x = x_ *ns.x + ns.yyyy;\n  vec4 y = y_ *ns.x + ns.yyyy;\n  vec4 h = 1.0 - abs(x) - abs(y);\n\n  vec4 b0 = vec4( x.xy, y.xy );\n  vec4 b1 = vec4( x.zw, y.zw );\n\n  //vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0;\n  //vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;\n  vec4 s0 = floor(b0)*2.0 + 1.0;\n  vec4 s1 = floor(b1)*2.0 + 1.0;\n  vec4 sh = -step(h, vec4(0.0));\n\n  vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;\n  vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;\n\n  vec3 p0 = vec3(a0.xy,h.x);\n  vec3 p1 = vec3(a0.zw,h.y);\n  vec3 p2 = vec3(a1.xy,h.z);\n  vec3 p3 = vec3(a1.zw,h.w);\n\n//Normalise gradients\n  vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));\n  p0 *= norm.x;\n  p1 *= norm.y;\n  p2 *= norm.z;\n  p3 *= norm.w;\n\n// Mix final noise value\n  vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);\n  m = m * m;\n  return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1),\n                                dot(p2,x2), dot(p3,x3) ) );\n}",
      blend: "//\n// https://github.com/jamieowen/glsl-blend\n//\n\n// Normal\n\nvec3 blendNormal(vec3 base, vec3 blend) {\n\treturn blend;\n}\n\nvec3 blendNormal(vec3 base, vec3 blend, float opacity) {\n\treturn (blendNormal(base, blend) * opacity + base * (1.0 - opacity));\n}\n",
      fragment: "varying vec3 v_color;\n\nvoid main() {\n  vec3 color = v_color;\n  if (u_darken_top == 1.0) {\n    vec2 st = gl_FragCoord.xy/resolution.xy;\n    color.g -= pow(st.y + sin(-12.0) * st.x, u_shadow_power) * 0.4;\n  }\n  gl_FragColor = vec4(color, 1.0);\n}"
    }, this.conf = {
      presetName: "",
      wireframe: false,
      density: [.06, .16],
      zoom: 1,
      rotation: 0,
      playing: true
    }, this.minigl = new MiniGl(this.el, null, null, !0),
    //   requestAnimationFrame(() => {
    //       this.el && (this.computedCanvasStyle = getComputedStyle(this.el), this.waitForCssVars())
    //   }),
    this.scrollObserver = await s.create(0, !1, !1, "150px 0px 150px 0px"), this.scrollObserver.observe(this.el), this.scrollObserver.onSeparate(() => {
      window.removeEventListener("scroll", this.handleScroll), window.removeEventListener("mousedown", this.handleMouseDown), window.removeEventListener("mouseup", this.handleMouseUp), window.removeEventListener("keydown", this.handleKeyDown), this.isIntersecting = !1, this.conf.playing && this.pause();
    }), this.scrollObserver.onIntersect(() => {
      window.addEventListener("scroll", this.handleScroll), window.addEventListener("mousedown", this.handleMouseDown), window.addEventListener("mouseup", this.handleMouseUp), window.addEventListener("keydown", this.handleKeyDown), this.isIntersecting = !0, this.addIsLoadedClass(), this.play();
    });
    //   */
  }
  disconnect() {
    this.scrollObserver && (window.removeEventListener("scroll", this.handleScroll), window.removeEventListener("mousedown", this.handleMouseDown), window.removeEventListener("mouseup", this.handleMouseUp), window.removeEventListener("keydown", this.handleKeyDown), this.scrollObserver.disconnect()), window.removeEventListener("resize", this.resize);
  }
  initMaterial() {
    this.uniforms = {
      u_time: new this.minigl.Uniform({
        value: 0
      }),
      u_static_time: new this.minigl.Uniform({
        value: 0
      }),
      u_mouse_time: new this.minigl.Uniform({
        value: 0
      }),
      u_static: new this.minigl.Uniform({
        value: 0
      }),
      u_shadow_power: new this.minigl.Uniform({
        value: 5
      }),
      u_darken_top: new this.minigl.Uniform({
        value: "" === this.el.dataset.jsDarkenTop ? 1 : 0
      }),
      u_active_colors: new this.minigl.Uniform({
        value: this.activeColors,
        type: "vec4"
      }),
      u_global: new this.minigl.Uniform({
        value: {
          noiseFreq: new this.minigl.Uniform({
            value: [this.freqX, this.freqY],
            type: "vec2"
          }),
          noiseSpeed: new this.minigl.Uniform({
            value: 5e-6
          })
        },
        type: "struct"
      }),
      u_vertDeform: new this.minigl.Uniform({
        value: {
          incline: new this.minigl.Uniform({
            value: Math.sin(this.angle) / Math.cos(this.angle)
          }),
          offsetTop: new this.minigl.Uniform({
            value: -.5
          }),
          offsetBottom: new this.minigl.Uniform({
            value: -.5
          }),
          noiseFreq: new this.minigl.Uniform({
            value: [3, 4],
            type: "vec2"
          }),
          noiseAmp: new this.minigl.Uniform({
            value: this.amp
          }),
          noiseSpeed: new this.minigl.Uniform({
            value: 10
          }),
          noiseFlow: new this.minigl.Uniform({
            value: 3
          }),
          noiseSeed: new this.minigl.Uniform({
            value: this.seed
          })
        },
        type: "struct",
        excludeFrom: "fragment"
      }),
      u_baseColor: new this.minigl.Uniform({
        value: this.sectionColors[0],
        type: "vec3",
        excludeFrom: "fragment"
      }),
      u_waveLayers: new this.minigl.Uniform({
        value: [],
        excludeFrom: "fragment",
        type: "array"
      })
    };
    for (let e = 1; e < this.sectionColors.length; e += 1) this.uniforms.u_waveLayers.value.push(new this.minigl.Uniform({
      value: {
        color: new this.minigl.Uniform({
          value: this.sectionColors[e],
          type: "vec3"
        }),
        noiseFreq: new this.minigl.Uniform({
          value: [2 + e / this.sectionColors.length, 3 + e / this.sectionColors.length],
          type: "vec2"
        }),
        noiseSpeed: new this.minigl.Uniform({
          value: 11 + .3 * e
        }),
        noiseFlow: new this.minigl.Uniform({
          value: 6.5 + .3 * e
        }),
        noiseSeed: new this.minigl.Uniform({
          value: this.seed + 10 * e
        }),
        noiseFloor: new this.minigl.Uniform({
          value: .1
        }),
        noiseCeil: new this.minigl.Uniform({
          value: .63 + .07 * e
        })
      },
      type: "struct"
    }));
    return this.vertexShader = [this.shaderFiles.noise, this.shaderFiles.blend, this.shaderFiles.vertex].join("\n\n"), new this.minigl.Material(this.vertexShader, this.shaderFiles.fragment, this.uniforms);
  }
  initMesh() {
    this.material = this.initMaterial(), this.geometry = new this.minigl.PlaneGeometry(), this.mesh = new this.minigl.Mesh(this.geometry, this.material);
  }
  shouldSkipFrame(e) {
    return !!window.document.hidden || !this.conf.playing || parseInt(e, 10) % 2 == 0 || void 0;
  }
  updateFrequency(e) {
    this.freqX += e, this.freqY += e;
  }
  toggleColor(index) {
    this.activeColors[index] = 0 === this.activeColors[index] ? 1 : 0;
  }
  showGradientLegend() {
    this.width > this.minWidth && (this.isGradientLegendVisible = !0, document.body.classList.add("isGradientLegendVisible"));
  }
  hideGradientLegend() {
    this.isGradientLegendVisible = !1, document.body.classList.remove("isGradientLegendVisible");
  }
  init() {
    this.initMesh(), this.resize(), requestAnimationFrame(this.animate), window.addEventListener("resize", this.resize);
  }

  //TODO: cleanup next 2 methods
  /*
  * Waiting for the css variables to become available, usually on page load before we can continue.
  * Using default colors assigned below if no variables have been found after maxCssVarRetries
  */
  waitForCssVars() {
    if (this.computedCanvasStyle && -1 !== this.computedCanvasStyle.getPropertyValue("--ui-fluid-1").indexOf("#")) this.init(), this.addIsLoadedClass();else {
      if (this.cssVarRetries += 1, this.cssVarRetries > this.maxCssVarRetries) {
        return this.sectionColors = [16711680, 16711680, 16711935, 65280, 255], void this.init();
      }
      requestAnimationFrame(() => this.waitForCssVars());
    }
  }
  /*
  * Initializes the four section colors by retrieving them from css variables.
  */
  initGradientColors() {
    this.sectionColors = ["--ui-fluid-1", "--ui-fluid-2", "--ui-fluid-3", "--ui-fluid-4"].map(cssPropertyName => {
      let hex = this.computedCanvasStyle.getPropertyValue(cssPropertyName).trim();
      //Check if shorthand hex value was used and double the length so the conversion in normalizeColor will work.
      if (4 === hex.length) {
        const hexTemp = hex.substr(1).split("").map(hexTemp => hexTemp + hexTemp).join("");
        hex = `#${hexTemp}`;
      }
      return hex && `0x${hex.substr(1)}`;
    }).filter(Boolean);
  }
}
window['uiAnimated_Animation-6'] = (el, canvas, userSettings) => {
  var id = Math.floor(1000 + Math.random() * 9000);
  canvas.setAttribute('id', 'ui-fluid-canvas-' + id);
  canvas.setAttribute('data-transition-in', '');
  const normalizeSettings = raw => {
    return raw;
  };
  const gradient = new Gradient();
  gradient.initGradient("#ui-fluid-canvas-" + id, userSettings.colorArray);
  gradient.init();
  let mouse = [0, 0];
  const updateMousePosition = e => {
    const rect = el.getBoundingClientRect();
    mouse[0] = (e.clientX - rect.left) / rect.width;
    mouse[1] = 1 - (e.clientY - rect.top) / rect.height;
    gradient.material.uniforms.u_mouse_time.value = (mouse[0] + mouse[1]) * 0.003;
  };
  const customUpdateSettings = raw => {
    // const normalized = normalizeSettings(raw);
    for (const [k, v] of Object.entries(raw)) {
      switch (k) {
        case "colorArray":
          gradient.material.uniforms.u_baseColor.value = v[0];
          for (let i = 1; i < v.length; i++) {
            if (gradient.material.uniforms.u_waveLayers.value[i - 1]) {
              gradient.material.uniforms.u_waveLayers.value[i - 1].value.color.value = v[i];
            }
          }
          break;
        case "scale":
          gradient.material.uniforms.u_vertDeform.value.noiseAmp.value = v * 16;
          break;
        case 'static':
          gradient.material.uniforms.u_static.value = v ? 1 : 0;
          break;
        case 'progress':
          if (gradient.material.uniforms.u_global.value.noiseSpeed.value === 0.01) {
            gradient.material.uniforms.u_static_time.value = v * 0.003; // 1e5;
          }
          break;
        case "speed":
          if (v === 0) {
            gradient.pause();
            gradient.material.uniforms.u_global.value.noiseSpeed.value = 0.01;
            break;
          }
          const baseSpeed = 5e-6;
          const minSpeed = 0;
          const maxSpeed = 1.2e-5;
          const speedFactor = (v - 40) / 60;
          const finalSpeed = baseSpeed + speedFactor * (speedFactor < 0 ? baseSpeed - minSpeed : maxSpeed - baseSpeed);
          gradient.material.uniforms.u_global.value.noiseSpeed.value = finalSpeed;
          gradient.play();
          break;
        case "intensity":
          const base = [0.00014, 0.00028]; // intensity 50
          const min = [0.00001, 0.00002];
          const max = [0.00050, 0.00060];
          const factor = (v - 50) / 50; // Normalize intensity between -1 and 1
          gradient.material.uniforms.u_global.value.noiseFreq.value = [base[0] + factor * (factor < 0 ? base[0] - min[0] : max[0] - base[0]), base[1] + factor * (factor < 0 ? base[1] - min[1] : max[1] - base[1])];
          break;
        case 'mouseInteractive':
          if (v) {
            el.addEventListener('mousemove', updateMousePosition);
          } else {
            el.removeEventListener('mousemove', updateMousePosition);
            gradient.material.uniforms.u_mouse_time.value = 0;
          }
          break;
      }
    }
  };
  customUpdateSettings(userSettings);
  el.animatedBackground = {
    normalizeSettings,
    customUpdateSettings,
    custom: true
  };
};