.eclipse-hover-widget {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  perspective: 1000px;
}

/* Hover Image Style */
.image-stack {
  position: relative;
  transition: transform 0.5s ease-in-out;
}

.image-stack img {
  width: 100%;
  border-radius: 16px;
  transition: all 0.5s ease-in-out;
}

.image-front {
  z-index: 2;
  position: relative;
}

.image-back {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transform: rotateZ(-5deg) translate(20px, 20px);
}

.image-stack:hover .image-back {
  opacity: 1;
  transform: rotateZ(0deg) translate(0px, 0px);
}

/* Eclipse Button Style */
.eclipse-ring-button {
  display: inline-flex;
  align-items: center;
  font-family: 'Plus Jakarta Sans', sans-serif;
  cursor: pointer;
  gap: 10px;
  transition: all 0.4s ease;
  flex-direction: row-reverse;
}

.eclipse-ring-button a {
  color: #fff;
  font-weight: 700;
  font-size: 25px;
  text-decoration: none;
  position: relative;
  z-index: 2;
  margin-left: -52px;
  transition: all 0.4s ease;
}

.eclipse-ring {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(268deg, rgba(220,30,100,1), rgba(128,77,151,1), rgba(44,31,87,1));
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
}

.eclipse-ring-button:hover .eclipse-ring {
    background: linear-gradient(268deg, rgb(255 255 255), rgb(255 255 255), rgb(255 255 255));
}

.eclipse-ring::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  background-color: black;
  border-radius: 50%;
  z-index: 1;
  transition: all 0.4s ease;
}

.arrow-icon {
  position: relative;
  z-index: 2;
  font-size: 22px;
  font-weight: bold;
  background: linear-gradient(268deg, rgba(220,30,100,1), rgba(128,77,151,1));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.3s ease;
}

.eclipse-ring-button:hover .eclipse-ring::after {
  background-color: white;
}

.eclipse-ring-button:hover a {
  margin-left: 5px !important;
}

.eclipse-ring-button:hover .arrow-icon {
  opacity: 1;
  transform: scale(1);
}

/* Container */
.hover-image-stack {
  position: relative;
  width: fit-content;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Shared styles for all stacked images */
.hover-image-stack .stack-img {
  border-radius: 15px;
  position: absolute;
  transform-origin: bottom left;
  transition: transform 0.6s ease-in-out, z-index 0.3s ease;
}

/* Default image positions */
.hover-image-stack .front {
  z-index: 3;
  transform: rotate(0deg);
  position: relative;
}

.hover-image-stack .middle {
  z-index: 2;
  transform: rotate(-0deg);
}

.hover-image-stack .back {
  z-index: 1;
  transform: rotate(-0deg);
}

/* On hover, images move forward and rotate */

.hover-image-stack:hover .front {
    transform: translate(-70px, -35px) rotate(-18deg);
    z-index: 3;
}
.hover-image-stack:hover .middle {
      transform: translate(-35px, -15px) rotate(-10deg);
    z-index: 3;
}

.hover-image-stack:hover .back {
  transform: rotate(0deg);
  z-index: 2;
}