<style>

  .hero-bg {
    left: 0%;
    top: 0%;
    right: 0%;
    bottom: 0%;

    border-style: solid;
    border-width: 1px;
    border-color: hsla(0, 0%, 100%, 0.32);
    border-radius: 0.625em;
    background-image: radial-gradient(circle farthest-corner at 50% 50%, #3d3d3d, #1a1a1a);
    position: relative;
    display: flex;
    overflow: hidden;
    width: 100%;
    align-items: center;

  }

  .oval-blur-img {
    position: absolute;
    width: 19em;
    height: 19em;
    filter: blur(50px);
    transition: opacity 0.5s ease;
  }

  .oval-blur-img {
    height: 250px;
    background-color: white;
    aspect-ratio: 1;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(to right, aquamarine, mediumpurple);
    animation: rotate 6s linear infinite;
  }

  @keyframes rotate {
    0% {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }

</style>




<style>

    .hero-title {
    position: relative;
    color: #fff;
    font-weight: 700;
    text-align: center;
    text-transform: capitalize;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    cursor: default;
    mix-blend-mode: overlay;
}



.button {
    position: relative;
    z-index: 3;
    overflow: hidden;
    padding: 0.30em;
    border-style: solid;
    border-width: 1px;
    border-color: hsla(0, 0%, 100%, 0.24);
    border-radius: 100vw;
    background-color: #242424;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.24);
    text-decoration: none;
    color: #ffffff;
    transition: transform 0.5s ease;
}

.button::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background-image: url('#');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.5s ease, filter 0.5s ease;
    animation: rotate 3s linear infinite;
    z-index: -1;
}


.button:hover::before {
    opacity: 1;
    filter: blur(40px);
}

.button:hover {
    transform: translateY(-15px);
}

</style>




<script>
const container = document.querySelector(".hero-bg");
const blob = container.querySelector(".oval-blur-img");
const button = document.querySelector(".button");
let isMouseOverButton = false;

container.addEventListener("mouseenter", () => {
  isMouseOverButton = false;
});

button.addEventListener("mouseenter", () => {
  isMouseOverButton = true;
  blob.style.opacity = "0";
});

button.addEventListener("mouseleave", () => {
  isMouseOverButton = false;
  blob.style.opacity = "1";
});

container.addEventListener("mouseleave", (e) => {
  if (!isMouseOverButton) {
    blob.style.opacity = "1";
    blob.style.transition = "left 0.5s ease, top 0.5s ease";
    blob.style.left = "50%";
    blob.style.top = "50%";

    setTimeout(() => {
      blob.style.transition = "";
    }, 500);
  }
});

container.addEventListener("mousemove", (e) => {
  if (!isMouseOverButton) {
    const { clientX, clientY } = e;
    const offsetX = clientX - container.getBoundingClientRect().left;
    const offsetY = clientY - container.getBoundingClientRect().top;
    blob.style.left = `${offsetX}px`;
    blob.style.top = `${offsetY}px`;
  }
});


</script>