/* Hover & Touch Effect for Cards - Increased Specificity & Mobile Optimized */
.scrolling-profile-card.visible:hover,
.profile-card.visible:hover,
.scrolling-profile-card.visible:active,
.profile-card.visible:active {
  transform: translateY(-15px) scale(1.05) !important; /* Lifts up and slightly enlarges */
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6) !important; /* Stronger shadow for depth */
  z-index: 100 !important; /* Ensures the hovered card is above others */
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease !important; /* Bouncy effect */
}

/* Reduced lift for smaller mobile screens to prevent cutting off */
@media (max-width: 576px) {
  .scrolling-profile-card.visible:hover,
  .profile-card.visible:hover,
  .scrolling-profile-card.visible:active,
  .profile-card.visible:active {
    transform: translateY(-10px) scale(1.03) !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5) !important;
  }
}

/* Base Transition for normal state return & Performance */
.scrolling-profile-card,
.profile-card {
  will-change: transform, opacity; /* Hardware acceleration hint */
  backface-visibility: hidden; /* Prevent flickering */
}

.scrolling-profile-card.visible,
.profile-card.visible {
  transition: transform 0.4s ease, box-shadow 0.4s ease, opacity 0.6s ease-out;
}

/* Scroll Reveal Animation */
.scroll-reveal {
  opacity: 0;
  transform: translateY(30px);
  pointer-events: none; /* Prevent interaction during entry */
}

.scroll-reveal.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto; /* Re-enable interaction after it's visible */
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}