:root {
  --blue-dark: #262a72;
  --blue: #383c8f;
  --blue-soft: #5a58a0;
  --purple: #8258a0;
  --pink: #d85f83;
  --orange: #f56d37;
  --yellow: #f79c34;
  --yellow-front: #ffc267;
  --yellow-core: #f8b755;
}

html,
body {
  margin: 0;
  height: 100%;
  background: var(--blue-dark);
  overflow: hidden;
}

.bg {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--blue-dark);
}

.blob {
  position: absolute;
  left: 50%;
  border-radius: 50%;
  transform: translateX(-50%) scale(1);
  transform-origin: 50% 100%;
  will-change: transform;
}

.blob-blue {
  bottom: -170%;
  width: 120vw;
  height: 110vw;
  background: var(--purple);
  filter: blur(65px);
  opacity: 0.85;
  animation: breathe-blue 8s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}

.blob-pink {
  bottom: -130%;
  width: 90vw;
  height: 85vw;
  background: var(--pink);
  filter: blur(55px);
  opacity: 0.8;
  animation: breathe-pink 8s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}

.blob-orange {
  bottom: -80%;
  width: 68vw;
  height: 60vw;
  background: var(--orange);
  filter: blur(55px);
  opacity: 0.85;
  animation: breathe-orange 8s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}

.blob-yellow {
  bottom: -52%;
  width: 38vw;
  height: 38vw;
  background: var(--yellow-core);
  filter: blur(55px);
  opacity: 0.8;
  animation: breathe-yellow 8s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}

/* .blob-yellow-front {
  bottom: -30%;
  width: 20vw;
  height: 20vw;
  background: var(--yellow-front);
  filter: blur(45px);
  opacity: 0.9;
  animation: breathe-yellow-front 8s cubic-bezier(0.37, 0, 0.63, 1) infinite;
} */

@keyframes breathe-blue {

  0%,
  100% {
    transform: translateX(-50%) scale(0.955);
  }

  35% {
    transform: translateX(-50%) scale(1.073);
  }
}

@keyframes breathe-pink {

  0%,
  100% {
    transform: translateX(-50%) scale(0.918);
  }

  35% {
    transform: translateX(-50%) scale(1.082);
  }
}

@keyframes breathe-orange {

  0%,
  100% {
    transform: translateX(-50%) scale(0.9);
  }

  55% {
    transform: translateX(-50%) scale(1.1);
  }
}

@keyframes breathe-yellow {

  0%,
  100% {
    transform: translateX(-50%) scale(0.842);
  }

  55% {
    transform: translateX(-50%) scale(1.158);
  }
}

/* @keyframes breathe-yellow-front {

  0%,
  100% {
    transform: translateX(-50%) scale(0.85);
  }

  85% {
    transform: translateX(-50%) scale(1.158);
  }
} */

/* animated film-grain noise overlay */
.grain {
  position: absolute;
  inset: -10%;
  pointer-events: none;
  opacity: 0.28;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter>\
<rect width='100%25' height='100%25' filter='url(%23n)'/>\
</svg>");
  background-size: 160px 160px;
  animation: grain-move 0.8s steps(6) infinite;
}

@keyframes grain-move {
  0% {
    transform: translate(0, 0);
  }

  20% {
    transform: translate(-3%, 2%);
  }

  40% {
    transform: translate(2%, -4%);
  }

  60% {
    transform: translate(-2%, -2%);
  }

  80% {
    transform: translate(3%, 3%);
  }

  100% {
    transform: translate(0, 0);
  }
}