/*
 * Markething Herba — dynamic blob.
 * Add the CSS class "dynamic-blob" to any Elementor container/widget that has
 * a background colour to turn it into an organic, irregular "blob" shape.
 * The exact shape of each blob is randomized per element by dynamic-blob.js;
 * the value below is the graceful fallback when JS is unavailable.
 *
 * Add "mh-blob-animate" alongside "dynamic-blob" for a slow morphing motion.
 */

.dynamic-blob {
  border-radius: 42% 58% 63% 37% / 41% 44% 56% 59% !important;
  transition: border-radius 0.6s ease;
}

/*
 * Randomized position for the subtle Elementor background-overlay pattern,
 * which Elementor renders as the container's ::before. dynamic-blob.js sets
 * --mh-bg-pos per card so every box shows the pattern in a slightly different
 * spot. Position only — the image, size and opacity stay as set in Elementor.
 * Only affects cards that already have an overlay image (no content = no ::before).
 */
.dynamic-blob::before {
  background-position: var(--mh-bg-pos, 100% 50%) !important;
  background-size: 1300px auto !important;
}

/* Optional slow morph (opt-in via the "mh-blob-animate" class). */
@keyframes mh-blob-morph {
  0%,
  100% {
    border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
  }
  33% {
    border-radius: 60% 40% 45% 55% / 55% 48% 52% 45%;
  }
  66% {
    border-radius: 38% 62% 58% 42% / 60% 38% 62% 40%;
  }
}

.dynamic-blob.mh-blob-animate {
  animation: mh-blob-morph 16s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .dynamic-blob.mh-blob-animate {
    animation: none;
  }
}