.member-image-holder {
  position: relative;
  border: 4px solid #4f46e5; /* Tailwind indigo-500 */
  border-radius: 50%;
  transition: border 0.6s ease;
}

.member-image-holder::before {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border: 4px solid #4f46e5; /* Tailwind indigo-500 */
  border-radius: 50%;
  z-index: -1;
  transition:
    transform 0.6s ease,
    border-color 0.6s ease,
    border-style 0.6s ease;
}

.member-image-holder:hover::before {
  transform: rotate(360deg);
  border-color: #f59e0b; /* Tailwind amber-500 */
  border-style: dotted;
}

.member-image-holder::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  width: 8px;
  height: 8px;
  background-color: #ef4444; /* Tailwind red-500 */
  border-radius: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.member-image-holder:hover::after {
  opacity: 1;
  animation: trace-border 2s linear infinite;
}

@keyframes trace-border {
  0% {
    top: -4px;
    left: 50%;
  }
  25% {
    top: 50%;
    left: calc(100% + 4px);
  }
  50% {
    top: calc(100% + 4px);
    left: 50%;
  }
  75% {
    top: 50%;
    left: -4px;
  }
  100% {
    top: -4px;
    left: 50%;
  }
} 






/* Animations */

.animate-scale {
  animation: scale 4s infinite ease-in-out;
}

@keyframes scale {
  0% {
    transform: scale(1);
  }
  10% {
    transform: scale(1.02);
  }
  25% {
    transform: scale(1.04);
  }
  35%{
    transform: scale(1.02);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(0.98);
  }
  100% {
    transform: scale(0.96);
  }
}


.scale-up-center {
	-webkit-animation: scale-up-center 4s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate-reverse both;
	        animation: scale-up-center 4s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate-reverse both;
}

/* ----------------------------------------------
 * Generated by Animista on 2024-9-9 11:12:39
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation scale-up-center
 * ----------------------------------------
 */
 @-webkit-keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}


.animate-rotate-gradient {
  background: conic-gradient(
    from 309deg,
    #3d9970,
    /* Dark Blue */ #0074d9,
    /* Bright Blue */ #7fdbff,
    /* Light Blue */ #39cccc,
    /* Cyan */ #3d9970 /* Dark Blue (loop back to start) */
  );
  animation: rotateGradient 2s linear infinite;
  border-radius: 50%;
}


@keyframes rotateGradient {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}



.border-animation {
  position: relative;
  overflow: hidden;
}

.border-animation::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px; /* Adjust thickness as needed */
  background-color: rgba(0, 0, 0, 0.38); /* Color matching Tailwind gray-400 */
  transition: width 0.3s ease-in-out;
}

.border-animation:hover::after {
  width: 100%;
}