/* Rotating Hover Effects System */
/* Each card will get a different hover animation that changes on page refresh */

/* Shared card base styles */
.hoverable-card {
  position: relative;
  transition: all 0.3s ease;
}

/* Effect 1: Default (Blue border + shadow) */
[data-hover-effect="hover-default"] .hoverable-card:hover {
  border-color: rgb(59 130 246) !important;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important;
}

/* Effect 2: Glow - Animated glowing border */
@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 3px rgba(59, 130, 246, 0.3),
                0 0 6px rgba(59, 130, 246, 0.2),
                0 0 10px rgba(59, 130, 246, 0.1);
  }
  50% {
    box-shadow: 0 0 6px rgba(59, 130, 246, 0.5),
                0 0 12px rgba(59, 130, 246, 0.3),
                0 0 18px rgba(59, 130, 246, 0.2);
  }
}

[data-hover-effect="hover-glow"] .hoverable-card:hover {
  border-color: rgb(59 130 246) !important;
  animation: glow 1.5s ease-in-out infinite;
}

/* Effect 3: Lift & Tilt - 3D transform with rotation */
[data-hover-effect="hover-lift"] .hoverable-card {
  transform-style: preserve-3d;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

[data-hover-effect="hover-lift"] .hoverable-card:hover {
  transform: translateY(-8px) rotateX(2deg) rotateY(2deg);
  border-color: rgb(59 130 246) !important;
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.15),
              0 8px 10px -6px rgb(0 0 0 / 0.1),
              0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* Ensure text color changes work with all effects */
[data-hover-effect] .hoverable-card:hover .card-title {
  color: rgb(37 99 235) !important;
}