/* ============================================
   BLOBS – dekoracyjne kształty w tle
   ============================================ */

.blob-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.blob-wrap + * { position: relative; z-index: 1; }
.blob-wrap ~ * { position: relative; z-index: 1; }

/* każdy blob to SVG z border-radius trick */
.blob {
  position: absolute;
  border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  opacity: 0.18;
}

/* KOLORY */
.blob--teal   { background: #0d9488; }
.blob--orange { background: #f97316; }
.blob--green  { background: #22c55e; }
.blob--pink   { background: #ec4899; }
.blob--white  { background: #ffffff; opacity: 0.08; }

/* ROZMIARY */
.blob--sm  { width: 120px; height: 120px; }
.blob--md  { width: 200px; height: 200px; }
.blob--lg  { width: 300px; height: 300px; }
.blob--xl  { width: 420px; height: 380px; }

/* POZYCJE */
.blob--tl { top: -40px;  left: -40px;  }
.blob--tr { top: -40px;  right: -40px; }
.blob--bl { bottom: -40px; left: -40px; }
.blob--br { bottom: -40px; right: -40px; }
.blob--tc { top: -60px;  left: 50%; transform: translateX(-50%); }
.blob--bc { bottom: -60px; left: 50%; transform: translateX(-50%); }
.blob--ml { top: 50%; left: -60px; transform: translateY(-50%); }
.blob--mr { top: 50%; right: -60px; transform: translateY(-50%); }

/* KSZTAŁTY WARIANTY */
.blob--v2 { border-radius: 70% 30% 50% 50% / 30% 60% 40% 70%; }
.blob--v3 { border-radius: 50% 50% 30% 70% / 60% 40% 60% 40%; }
.blob--v4 { border-radius: 60% 40% 40% 60% / 50% 60% 40% 50%; }

/* ANIMACJA (subtelna) */
@media (prefers-reduced-motion: no-preference) {
  .blob--anim {
    animation: blobFloat 8s ease-in-out infinite alternate;
  }
  .blob--anim-slow {
    animation: blobFloat 12s ease-in-out infinite alternate;
  }
}

@keyframes blobFloat {
  0%   { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; transform: translate(0, 0) scale(1); }
  50%  { border-radius: 60% 40% 30% 70% / 50% 60% 40% 50%; transform: translate(8px, -8px) scale(1.03); }
  100% { border-radius: 30% 70% 50% 50% / 40% 30% 70% 60%; transform: translate(-4px, 6px) scale(0.98); }
}
