Animated Blob Morphing Background

.bga-12, .bga-12 *, .bga-12 *::before, .bga-12 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.bga-12 {
  min-height: 460px;
  display: grid;
  place-items: stretch;
}

.bga-12__scene {
  width: 100%;
  min-height: 460px;
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, #1a1033, #0a0618);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Big morphing blob driven by animated border-radius */
.bga-12__blob {
  width: 420px;
  height: 420px;
  background: linear-gradient(135deg, #ff3cac, #784ba0, #2b86c5);
  background-size: 200% 200%;
  box-shadow: 0 0 80px rgba(255,60,172,0.5),
              0 0 160px rgba(43,134,197,0.4);
  animation: bga-12-morph 8s ease-in-out infinite,
             bga-12-spin 20s linear infinite,
             bga-12-hue 10s linear infinite;
}

/* A second, offset blob for layered depth */
.bga-12__blob2 {
  position: absolute;
  width: 280px;
  height: 280px;
  background: linear-gradient(135deg, #43e97b, #38f9d7);
  opacity: 0.55;
  filter: blur(6px);
  animation: bga-12-morph2 10s ease-in-out infinite,
             bga-12-spin 16s linear infinite reverse;
  mix-blend-mode: screen;
}

@keyframes bga-12-morph {
  0%,100% { border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; }
  33%     { border-radius: 70% 30% 46% 54% / 30% 60% 40% 70%; }
  66%     { border-radius: 34% 66% 60% 40% / 65% 35% 65% 35%; }
}
@keyframes bga-12-morph2 {
  0%,100% { border-radius: 60% 40% 30% 70% / 50% 60% 40% 50%; }
  50%     { border-radius: 30% 70% 70% 30% / 60% 40% 60% 40%; }
}
@keyframes bga-12-spin { to { transform: rotate(360deg); } }
@keyframes bga-12-hue { to { filter: hue-rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .bga-12__blob,
  .bga-12__blob2 {
    animation: none !important;
  }
}

.bga-12, .bga-12 *, .bga-12 *::before, .bga-12 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.bga-12 {
  min-height: 460px;
  display: grid;
  place-items: stretch;
}

.bga-12__scene {
  width: 100%;
  min-height: 460px;
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, #1a1033, #0a0618);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Big morphing blob driven by animated border-radius */
.bga-12__blob {
  width: 420px;
  height: 420px;
  background: linear-gradient(135deg, #ff3cac, #784ba0, #2b86c5);
  background-size: 200% 200%;
  box-shadow: 0 0 80px rgba(255,60,172,0.5),
              0 0 160px rgba(43,134,197,0.4);
  animation: bga-12-morph 8s ease-in-out infinite,
             bga-12-spin 20s linear infinite,
             bga-12-hue 10s linear infinite;
}

/* A second, offset blob for layered depth */
.bga-12__blob2 {
  position: absolute;
  width: 280px;
  height: 280px;
  background: linear-gradient(135deg, #43e97b, #38f9d7);
  opacity: 0.55;
  filter: blur(6px);
  animation: bga-12-morph2 10s ease-in-out infinite,
             bga-12-spin 16s linear infinite reverse;
  mix-blend-mode: screen;
}

@keyframes bga-12-morph {
  0%,100% { border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; }
  33%     { border-radius: 70% 30% 46% 54% / 30% 60% 40% 70%; }
  66%     { border-radius: 34% 66% 60% 40% / 65% 35% 65% 35%; }
}
@keyframes bga-12-morph2 {
  0%,100% { border-radius: 60% 40% 30% 70% / 50% 60% 40% 50%; }
  50%     { border-radius: 30% 70% 70% 30% / 60% 40% 60% 40%; }
}
@keyframes bga-12-spin { to { transform: rotate(360deg); } }
@keyframes bga-12-hue { to { filter: hue-rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .bga-12__blob,
  .bga-12__blob2 {
    animation: none !important;
  }
}