.effect-heart div {
  position: relative;
  overflow: hidden;
}

.effect-heart div svg {
    position: relative;
}

.effect-heart.active div svg {
    fill: red;
    stroke-width: 0;
    animation: heart 1.3s  cubic-bezier(0.075, 0.82, 0.165, 1) 1 ;
}


.effect-heart div::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  clip-path: circle(10% at bottom left);
  background-color: var(--color-secondary-foreground);
  transition: 0.5s;
}
.effect-heart div:hover::before {
  clip-path: circle(70% at center center);
}

@keyframes heart {
    0% {
        transform: scale(0.8);
    }
    70% {

        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}