.spinner-item {
  border-radius: 50%;
  height: 100%;
  width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;

  /* Start animation immediately, but keep it PAUSED */
  animation: zoom 2s linear infinite;
  animation-play-state: paused;
}

/* Negative delays stagger their starting positions while paused */
.spinner-item--1 {
  animation-delay: 0s;
}
.spinner-item--2 {
  animation-delay: -0.66s;
}
.spinner-item--3 {
  animation-delay: -1.33s;
}

@keyframes zoom {
  0% {
    transform: translate(-50%, -50%) scale(0.2);
    opacity: 0; /* Kept above 0 so initial circles remain visible */
  }
  50% {
    opacity: 0.9;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

/* Instantly start moving the moment hover happens */
.productcardwrapper:hover .spinner-item {
  animation-play-state: running;
}

/* Image hover effect */
.productcardwrapper .imgwrapper img {
  transition: transform 0.5s linear;
}
.productcardwrapper:hover .imgwrapper img {
  transform: translateY(-20px);
}
.productcardwrapper .imgTilt {
  transform-style: preserve-3d;
}