Html – Need help achieving a hover animation effect

I’m currently working on a hover animation and aiming to achieve the following effect:
Link to expected animation

I’ve created a Code Sandbox to demonstrate my current approach.

Assets used in this animation can be found here.

I’m open to any suggestions or improvements on the hover animation. Any insights would be greatly appreciated. Thank you!

I am having hard time controlling the cycle of the animation.

<div class="wrapper">
  <div class="card">
    <div class="wrap"></div>
  </div>
</div>

body {
  background: #000;
}

.wrapper {
  width: 400px;
  height: 200px;
  margin: auto;
}
.card {
  z-index: 1;
  height: 200px;
  position: relative;
  background: #2c2c2c;
  border-radius: 8px;
  cursor: pointer;
}

.card::before {
  content: "";
  position: absolute;
  left: -2px;
  top: -2px;
  background-image: url("./bg-2.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  z-index: -1;
  transition: all 0.5s ease-in-out;
  clip-path: inset(0 0 0 0);
}

.card:hover::before {
  animation: clippath 0.9s linear forwards;
}

.card:not(:hover)::before {
  clip-path: inset(0 0 0 0);
  transition: all 0.5s ease-in-out;
  background-image: url("./bg-1.png");
}

.wrap {
  background: #2c2c2c;
  border-radius: 8px;
  height: 200px;
}

@keyframes clippath {
  0%,
  100% {
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
  }
  25% {
    -webkit-clip-path: inset(0 98% 0 0);
    clip-path: inset(0 0 0 98%);
  }
  50% {
    -webkit-clip-path: inset(98% 0 0 0);
    clip-path: inset(98% 0 0 0);
  }
  75% {
    -webkit-clip-path: inset(0 0 0 98%);
    clip-path: inset(0 98% 0 0);
  }
}