.svg-blue-hover {
  color: #575757;
  --shadow: rgba(87, 87, 87, 0.2);
  transition: color 0.4s ease,
    filter 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  will-change: transform, filter;
  display: inline-block;
  transform: translateY(0);
}

/* One-time lift animation */
@keyframes liftOnce {
  0% {
    transform: translateY(0);
  }

  35% {
    transform: translateY(-15px);
  }

  65% {
    transform: translateY(-15px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes shadowOnce {
  0% {
    filter: drop-shadow(0 10px 20px rgba(87, 87, 87, 0.15));
  }

  35% {
    filter: drop-shadow(0 25px 35px rgba(3, 135, 188, 0.3));
  }

  65% {
    filter: drop-shadow(0 25px 35px rgba(3, 135, 188, 0.3));
  }

  100% {
    filter: drop-shadow(0 10px 20px rgba(87, 87, 87, 0.15));
  }
}

/* recolor only the grey paths */
.svg-blue-hover svg path[fill="#575757"],
.svg-blue-hover svg path[stroke="#575757"],
.svg-blue-hover svg path[fill="#2E2E2C"] {
  fill: currentColor;
  stroke: currentColor;
  transition: fill 0.3s ease, stroke 0.3s ease;
}

/* Target all linearGradient stops that contain grey colors */
.svg-blue-hover svg linearGradient[id*="paint1_linear"] stop:nth-child(1),
.svg-blue-hover svg linearGradient[id*="paint2_linear"] stop:nth-child(1) {
  stop-color: rgb(87, 87, 87);
  transition: stop-color 0.4s ease;
}

.svg-blue-hover svg linearGradient[id*="paint1_linear"] stop:nth-child(2),
.svg-blue-hover svg linearGradient[id*="paint2_linear"] stop:nth-child(2) {
  stop-color: #787A7B;
  transition: stop-color 0.4s ease;
}

.svg-blue-hover svg linearGradient[id*="paint1_linear"] stop:nth-child(3),
.svg-blue-hover svg linearGradient[id*="paint2_linear"] stop:nth-child(3) {
  stop-color: #575757;
  transition: stop-color 0.4s ease;
}

/* Hover state - triggers animation ONCE per hover */
.svg-blue-hover:hover {
  color: #0387BC;
  animation: liftOnce 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.svg-blue-hover:hover svg {
  animation: shadowOnce 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.svg-blue-hover:hover svg linearGradient[id*="paint1_linear"] stop:nth-child(1),
.svg-blue-hover:hover svg linearGradient[id*="paint2_linear"] stop:nth-child(1) {
  stop-color: rgb(3, 135, 188);
}

.svg-blue-hover:hover svg linearGradient[id*="paint1_linear"] stop:nth-child(2),
.svg-blue-hover:hover svg linearGradient[id*="paint2_linear"] stop:nth-child(2) {
  stop-color: #1CC1FF;
}

.svg-blue-hover:hover svg linearGradient[id*="paint1_linear"] stop:nth-child(3),
.svg-blue-hover:hover svg linearGradient[id*="paint2_linear"] stop:nth-child(3) {
  stop-color: #0387BC;
}

/* SVG shadow effect - base state */
.svg-blue-hover svg {
  filter: drop-shadow(0 10px 20px rgba(87, 87, 87, 0.15));
  transition: filter 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Image Circular Mask Reveal Effect */
.blog-image-mask-wrapper {
  position: relative;
  width: 100%;
  /* Start with a small circular mask */
  clip-path: circle(20% at 50% 50%);
  overflow: hidden;
  border-radius: 0.75rem;
  /* rounded-xl equivalent */
}

.blog-detail-img {
  /* Base scale for the grow effect */
  transform: scale(1.1);
  width: 100%;
  height: auto;
  display: block;
}