Blob Background

<!-- Blob Background — slow morphing backdrop -->
<div class="nuda-morph-bg" aria-hidden="true">
  <div class="nuda-morph-bg__blob nuda-morph-bg__blob--a"></div>
  <div class="nuda-morph-bg__blob nuda-morph-bg__blob--b"></div>
</div>

/* Blob Background
   Two slow, blurred blobs morph and drift behind content.
   Customize: --morph-bg-color-a, --morph-bg-color-b, --morph-bg-bg */

.nuda-morph-bg {
  --morph-bg-color-a: #e4ff54;
  --morph-bg-color-b: #a3b830;
  --morph-bg-bg: #09090b;
  position: relative;
  width: 100%;
  min-height: 120px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--morph-bg-bg);
}

.nuda-morph-bg__blob {
  position: absolute;
  width: 120px;
  height: 120px;
  filter: blur(18px);
  opacity: 0.55;
  will-change: border-radius, transform;
}

.nuda-morph-bg__blob--a {
  top: -30px;
  left: -20px;
  background: var(--morph-bg-color-a);
  animation: nuda-morph-bg-a 12s ease-in-out infinite;
}

.nuda-morph-bg__blob--b {
  bottom: -30px;
  right: -20px;
  background: var(--morph-bg-color-b);
  animation: nuda-morph-bg-b 14s ease-in-out infinite;
}

@keyframes nuda-morph-bg-a {
  0%   { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; transform: translate(0, 0) rotate(0deg); }
  50%  { border-radius: 67% 33% 38% 62% / 55% 62% 38% 45%; transform: translate(20px, 12px) rotate(180deg); }
  100% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; transform: translate(0, 0) rotate(360deg); }
}

@keyframes nuda-morph-bg-b {
  0%   { border-radius: 38% 62% 56% 44% / 63% 37% 63% 37%; transform: translate(0, 0) rotate(0deg); }
  50%  { border-radius: 58% 42% 33% 67% / 44% 56% 44% 56%; transform: translate(-18px, -10px) rotate(-180deg); }
  100% { border-radius: 38% 62% 56% 44% / 63% 37% 63% 37%; transform: translate(0, 0) rotate(-360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-morph-bg__blob {
    animation: none;
  }
}