/* Grow/Scale card hover effect */
.grow-hover-card {
  position: relative;
  /* Ensure stacking context so ::before doesn't go behind page background */
  z-index: 0;
  /* We don't animate the container itself, just the pseudo-element */
}

/* The expanding background/border layer */
.grow-hover-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;

  /* Border Radius */
  border-radius: 20px;

  /* Border */
  border: 1px solid rgba(0, 0, 0, 0.08);

  /* Backgrounds: Pink line on top, then the card gradient */
  background: linear-gradient(#e91e63, #e91e63) top left / 100% 4px no-repeat,
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 255, 255, 0.85) 100%
    );

  /* Initial shadow */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);

  /* The magic: animate transform */
  transform-origin: center center;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  /* 100ms delay to match Stripe's intentional hover timing */
  transition-delay: 0.1s;
  will-change: transform, box-shadow;
}

/* Hover state */
.grow-hover-card:hover::before {
  /* Scale up the background/border */
  transform: scale(1.012);

  /* Deep shadow effect */
  box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25),
    0 8px 16px -8px rgba(0, 0, 0, 0.3);
}