<div class="stage-10">
  <div class="card-morph">
    <h4>Blob Shape</h4>
    <p>border-radius morphs into a completely different blob on hover</p>
  </div>
</div>

.card-morph {
  width: 200px;
  padding: 22px;
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  background: linear-gradient(135deg, #7c6cff 0%, #ff6c8a 100%);
  transition:
    border-radius 0.6s ease,
    transform 0.3s;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 140px;
}

.card-morph:hover {
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  transform: scale(1.04);
}

.card-morph h4 {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 4px;
}

.card-morph p {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.4;
}

/* parent stage backdrop (so the demo renders standalone) */
[class^="stage-"] {
  width: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2.5rem 1.5rem;
  box-sizing: border-box;
}

.stage-10 {
  background: #0a0a0f;
}