.parallax1 > use {
  animation: move-forever1 30s linear infinite;
  &:nth-child(1) {
    animation-delay: -6s;
  }
}
.parallax2 > use {
  animation: move-forever2 24s linear infinite;
  &:nth-child(1) {
    animation-delay: -6s;
  }
}
.parallax3 > use {
  animation: move-forever3 18s linear infinite;
  &:nth-child(1) {
    animation-delay: -6s;
  }
}
.parallax4 > use {
  animation: move-forever4 12s linear infinite;
  &:nth-child(1) {
    animation-delay: -6s;
  }
}
@keyframes move-forever1 {
  0% {
    transform: translate(85px, 0%);
  }
  100% {
    transform: translate(-90px, 0%);
  }
}
@keyframes move-forever2 {
  0% {
    transform: translate(-90px, 0%);
  }
  100% {
    transform: translate(85px, 0%);
  }
}
@keyframes move-forever3 {
  0% {
    transform: translate(85px, 0%);
  }
  100% {
    transform: translate(-90px, 0%);
  }
}
@keyframes move-forever4 {
  0% {
    transform: translate(-90px, 0%);
  }
  100% {
    transform: translate(85px, 0%);
  }
}

.wave {
  position: relative;
  z-index: 1;
}

.footer-wave {
  padding-top: 0;
}

.wave-left {
  max-width: 4em;
  height: 100%;
  background-repeat: no-repeat;
  background-size: auto;
}

.wave svg {
  display: flex;
  height: 2em;
  width: 100%;
}

.top-shadow {
  filter: drop-shadow(-5px -10px 5px #00000033);
}

.wave-top svg {
  margin-top: -2em;
}

.rotate-wave {
  transform: rotate(180deg);
}

.wave-over-image {
  margin-top: -1.95em !important;
  transform: scaleY(-1);
  -webkit-transform: scaleY(-1);
  position: relative;
}

.wave-white path {
  fill: white;
}

@property --mx1 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 20%;
}

@property --my1 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 20%;
}

@property --mx2 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 80%;
}

@property --my2 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 20%;
}

@property --mx3 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 70%;
}

@property --my3 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 85%;
}

@property --ms1 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 50%;
}

@property --ms2 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 50%;
}

@property --ms3 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 50%;
}


.bg-mesh-grain {
  background-color: #282034;

  background-image:
    /* Fine dust */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='dust'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='3.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23dust)'/%3E%3C/svg%3E"),

    /* Large organic noise */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"),

    /* Mesh */
    radial-gradient(
      circle at 20% 20%,
      #ff769e 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 20%,
      #655cff 0%,
      transparent 52%
    ),
    radial-gradient(
      circle at 70% 85%,
      #5ed5b8 0%,
      transparent 50%
    );

  background-size:
    200px 200px,
    200% 100%,
    100% 100%,
    100% 100%,
    100% 100%;

  background-position:
    center,
    center,
    center,
    center,
    center;

  background-blend-mode:
    overlay,
    overlay,
    normal,
    normal,
    normal;
}

.blob {
  clip-path: path("M 19 13 C 32 5 48 7 61 13 C 76 20 91 29 92 44 C 94 59 83 72 73 82 C 61 94 45 94 32 87 C 18 80 8 70 9 56 C 10 44 6 35 10 25 C 12 20 15 16 19 13 Z");
}