.blob-stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.blob-x {
  position: absolute;
  top: 50%;
  left: 50%;
  animation: travelX 17s ease-in-out infinite alternate;
}

.blob-y {
  animation: travelY 23s ease-in-out infinite alternate;
}

.blob {
  width: 200px;
  height: 200px;
  opacity: 0.88;
  filter: blur(48px) saturate(1.9) brightness(1.5);
  background: radial-gradient(ellipse at 38% 40%,
      #5b8fd4 0%,
      #2f5faa 22%,
      #1b3a78 45%,
      #0d1f45 70%,
      #060d20 100%);
  animation:
    morph 20s ease-in-out infinite,
    breathe 8s ease-in-out infinite alternate;
  will-change: border-radius, transform;
}

.blob::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 3s ease;
  background: radial-gradient(ellipse at 38% 40%,
      #d48f5b 0%,
      #aa5f2f 22%,
      #783a1b 45%,
      #451f0d 70%,
      #200d06 100%);
}

body:has(.social-link:hover) .blob::after {
  opacity: 1;
}

/* Keyframes */

@keyframes breathe {
  from {
    transform: scale(0.93);
  }

  to {
    transform: scale(1.10);
  }
}

@keyframes travelX {
  from {
    transform: translateX(-38vw);
  }

  to {
    transform: translateX(38vw);
  }
}

@keyframes travelY {
  from {
    transform: translateY(-38vh);
  }

  to {
    transform: translateY(38vh);
  }
}

@keyframes morph {
  0% {
    border-radius: 62% 38% 46% 54% / 60% 44% 56% 40%;
  }

  12% {
    border-radius: 44% 56% 29% 71% / 50% 65% 35% 50%;
  }

  25% {
    border-radius: 33% 67% 58% 42% / 63% 36% 64% 37%;
  }

  37% {
    border-radius: 55% 45% 38% 62% / 40% 58% 42% 60%;
  }

  50% {
    border-radius: 71% 29% 52% 48% / 55% 42% 58% 45%;
  }

  62% {
    border-radius: 40% 60% 70% 30% / 47% 61% 39% 53%;
  }

  75% {
    border-radius: 57% 43% 33% 67% / 68% 32% 68% 32%;
  }

  87% {
    border-radius: 48% 52% 44% 56% / 52% 48% 55% 45%;
  }

  100% {
    border-radius: 62% 38% 46% 54% / 60% 44% 56% 40%;
  }
}

/* Media Queries */

@media (min-width: 768px) {
  .blob {
    width: 300px;
    height: 300px;
    margin: -150px 0 0 -150px;
  }
}

@media (min-width: 900px) {
  .blob {
    width: 400px;
    height: 400px;
    margin: -200px 0 0 -200px;
  }
}

@media (min-width: 1024px) {
  .blob {
    width: 500px;
    height: 500px;
    margin: -250px 0 0 -250px;
  }
}