:root {
  --blur: 100px;
  --anim-time: 15s;
  --color1: #70675c;
  --color2: #1a4134;
  --color3: #2c5e4d;
  --color4: #336d5c;
}

/* animated background */
.blob-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  perspective: 1000px;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.blob-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 20px 2px rgba(255, 255, 255, 0.2);
  z-index: 2;
}

.blob {
  position: absolute;
  border-radius: 100%;
  filter: blur(calc(var(--blur) * 0.85)) saturate(150%) brightness(115%)
    contrast(125%);
  opacity: 0.8;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: optimizeQuality;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0) scale(1, 1);
  transform-style: preserve-3d;
}

.noise-bg {
  position: absolute;
  inset: 0;
  opacity: 0.06;
  pointer-events: none;
  mix-blend-mode: lighten;
  background-image: url("/assets/images/noise.png");
  background-repeat: repeat;
  background-size: 50% 50%;
}

.blob--one {
  background: radial-gradient(
    circle at center,
    var(--color1) 0%,
    var(--color1) 80%,
    transparent 80%
  );
  filter: blur(100px) saturate(150%) brightness(150%) contrast(155%);
  opacity: 0.7;
  width: 70vmax;
  height: 35vmax;
  transform: rotate(130.94deg);
}

.blob--two {
  background: radial-gradient(
    circle at center,
    var(--color2) 0%,
    var(--color2) 50%,
    transparent 90%
  );
  width: 65vmax;
  height: 70vmax;
}

.blob--three {
  background: radial-gradient(
    circle at center,
    var(--color3) 0%,
    var(--color3) 50%,
    transparent 90%
  );
  width: 100vmax;
  height: 100vmax;
}

.blob--four {
  background: radial-gradient(
    circle at center,
    var(--color4) 0%,
    var(--color4) 50%,
    transparent 90%
  );
  width: 120vmax;
  height: 120vmax;
}