.bg-card-blob {
  overflow: hidden;
}

.bg-card-blob:before {
  position: absolute;
  inset: -90px;
  inset-block-start: -485px;

  background-image: radial-gradient(#3fd043 50%, rgba(63, 208, 67, .7) 60%, transparent 70%);
  background-size: 600px 570px;
  background-repeat: no-repeat;

  translate: 10% -5%;

  filter: blur(10px);

  content: '';

  animation-name: bg-card-blob-green-a;
  animation-timing-function: ease-in-out;
  animation-duration: 20s;
  animation-iteration-count: infinite;

  transition: inset-block-start 1s ease-in-out;
}

  .bg-card-blob:hover:before {
    inset-block-start: -350px;
  }

  .bg-card-blob:nth-child(2):before {
    animation-name: bg-card-blob-green-b;
    animation-duration: 50s;
  }

  .bg-card-blob:last-child:before {
    animation-name: bg-card-blob-green-c;
    animation-duration: 30s;
  }

.bg-card-blob:after {
  position: absolute;
  inset: -120px;
  inset-block-start: -480px;

  background-image: radial-gradient(#4593ec 40%, transparent 70%);
  background-size: 650px 500px;
  background-repeat: no-repeat;

  rotate: -20deg;
  translate: 15% 0;

  filter: blur(0);

  content: '';

  animation-name: bg-card-blob-blue-a;
  animation-timing-function: ease-in-out;
  animation-duration: 20s;
  animation-iteration-count: infinite;

  transition: inset-block-start 1.7s ease-in-out;
}

  .bg-card-blob:hover:after {
    inset-block-start: -350px;
  }

  .bg-card-blob:nth-child(2):after {
    animation-name: bg-card-blob-blue-b;
    animation-duration: 50s;
  }

  .bg-card-blob:last-child:after {
    animation-name: bg-card-blob-blue-c;
    animation-duration: 40s;
  }


@keyframes bg-card-blob-green-a {
  0% {
    translate: -10% -71px;
  }

  20% {
    translate: 10% -54px;
  }

  40% {
    translate: 25% -43px;
  }

  70% {
    translate: 5% -48px;
  }

  100% {
    translate: -10% -71px;
  }
}

@keyframes bg-card-blob-green-b {
  0% {
    translate: 30% -85px;
  }

  40% {
    translate: -10% -65px;
  }

  70% {
    translate: 20% -75px;
  }

  100% {
    translate: 30% -85px;
  }
}

@keyframes bg-card-blob-green-c {
  0% {
    translate: 80% -44px;
  }

  60% {
    translate: 0 -60px;
  }

  100% {
    translate: 80% -44px;
  }
}


@keyframes bg-card-blob-blue-a {
  0% {
    translate: 2% -25px;
    filter: blur(10px);
  }

  20% {
    translate: 25% 0;
    filter: blur(2px);
  }

  30% {
    translate: 45% 10px;
    filter: blur(6px);
  }

  50% {
    translate: 25% 10px;
    filter: blur(2px);
  }

  70% {
    translate: 10% 0;
    filter: blur(8px);
  }

  100% {
    translate: 2% -25px;
    filter: blur(10px);
  }
}


@keyframes bg-card-blob-blue-b {
  0% {
    translate: 50% -10px;
  }

  40% {
    translate: -7% 0;
  }

  70% {
    translate: 25% 10px;
  }

  100% {
    translate: 50% -10px;
  }
}


@keyframes bg-card-blob-blue-c {
  0% {
    translate: 92% 0;
  }

  40% {
    translate: 25% 0;
  }

  70% {
    translate: 60% 10px;
  }

  100% {
    translate: 92% 0;
  }
}



.bg-card-full {
  position: relative;
  overflow: hidden;

  background-color: #448cd8;
}

.bg-card-full > * {
  position: relative;
  z-index: 2;
}

.bg-card-full:before {
  width: 200%;
  height: 200%;

  position: absolute;
  inset-inline-end: -100%;
  inset-block-start: -70%;

  background-image: radial-gradient(#3fd43d 30%, transparent 60%);
  background-repeat: no-repeat;
  filter: blur(20px);

  content: '';
}

.bg-card-full:after {
  width: 200%;
  height: 100%;

  position: absolute;
  inset-block-end: -60%;
  inset-inline-start: -50%;

  background-image: radial-gradient(#3fd43d 30%, transparent 60%);
  background-repeat: no-repeat;

  content: '';

  animation-name: bg-card-full-green;
  animation-duration: 40s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.bg-card-full-gradient {
  width: 150%;
  height: 100%;

  position: absolute;
  z-index: 1;
  inset-block-end: -50%;
  inset-inline-start: 0;

  background-image: radial-gradient(#448cd8 30%, transparent 60%);
  background-repeat: no-repeat;

  content: '';

  animation-name: bg-card-full-gradient-blue;
  animation-duration: 30s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes bg-card-full-green {
  0% {
    translate: 0 0;
    rotate: 0;
  }

  50% {
    translate: -7% -3%;
    rotate: 40deg;
  }

  100% {
    translate: 0 0;
    rotate: 0;
  }
}

@keyframes bg-card-full-gradient-blue {
  0% {
    translate: 0 0;
    rotate: 0;
    filter: blur(0);
  }

  30% {
    translate: -10% 0;
    rotate: -5deg;
    filter: blur(10px);
  }

  40% {
    translate: -15% -5%;
    rotate: -20deg;
  }

  60% {
    translate: -20% 10%;
    rotate: -50deg;
    filter: blur(15px);
  }

  80% {
    translate: 0 15%;
    rotate: -15deg;
  }

  100% {
    translate: 0 0;
    rotate: 0;
    filter: blur(0);
  }
}