/**
 * Feature Card Icon Rotating Border Effect
 * Each icon gets a rotating border that matches its background color
 * Green (1st card), Blue (2nd card), Purple (3rd card)
 */

/* Card hover effect - lift up the entire card */
.feature-card {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* Add position relative to icon containers for the rotating border */
.feature-card .w-14.h-14 {
  position: relative;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base rotating gradient border (hidden by default) */
.feature-card .w-14.h-14::before {
  content: '';
  position: absolute;
  inset: -2px; /* Slightly larger than the icon */
  border-radius: 0.75rem; /* Match the rounded-xl */
  opacity: 0;
  animation: iconRotate 3s linear infinite;
  animation-play-state: paused;
  z-index: -1;
  transition: opacity 0.4s ease;
}

/* Card 1: GREEN Icon - Rotating Green Border */
.feature-card:nth-child(1) .w-14.h-14::before {
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(34, 197, 94, 0.5) 90deg,
    rgba(34, 197, 94, 0.8) 180deg,
    rgba(34, 197, 94, 0.5) 270deg,
    transparent 360deg
  );
}

/* Card 2: BLUE Icon - Rotating Blue Border */
.feature-card:nth-child(2) .w-14.h-14::before {
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(59, 130, 246, 0.5) 90deg,
    rgba(59, 130, 246, 0.8) 180deg,
    rgba(59, 130, 246, 0.5) 270deg,
    transparent 360deg
  );
}

/* Card 3: PURPLE Icon - Rotating Purple Border */
.feature-card:nth-child(3) .w-14.h-14::before {
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(168, 85, 247, 0.5) 90deg,
    rgba(168, 85, 247, 0.8) 180deg,
    rgba(168, 85, 247, 0.5) 270deg,
    transparent 360deg
  );
}

/* Show and animate the rotating border on card hover */
.feature-card:hover .w-14.h-14::before {
  opacity: 1;
  animation-play-state: running;
}

/* Enhanced icon scale on hover */
.feature-card:hover .w-14.h-14 {
  transform: scale(1.15);
}

/* Color-specific glow effects */
.feature-card:nth-child(1):hover .w-14.h-14 {
  box-shadow: 0 0 25px rgba(34, 197, 94, 0.4); /* Green glow */
}

.feature-card:nth-child(2):hover .w-14.h-14 {
  box-shadow: 0 0 25px rgba(59, 130, 246, 0.4); /* Blue glow */
}

.feature-card:nth-child(3):hover .w-14.h-14 {
  box-shadow: 0 0 25px rgba(168, 85, 247, 0.4); /* Purple glow */
}

/* Rotation animation */
@keyframes iconRotate {
  to {
    transform: rotate(360deg);
  }
}

/* Responsive: Simplify effects on mobile */
@media (max-width: 768px) {
  /* Reduce card lift on mobile */
  .feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.12);
  }

  /* DISABLE rotating border on mobile for better performance */
  .feature-card .w-14.h-14::before {
    display: none; /* No rotation animation on mobile */
  }

  /* Keep simple icon scale on mobile */
  .feature-card:hover .w-14.h-14 {
    transform: scale(1.08);
  }

  /* Keep color-specific glow effects on mobile */
  .feature-card:nth-child(1):hover .w-14.h-14 {
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.3);
  }

  .feature-card:nth-child(2):hover .w-14.h-14 {
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.3);
  }

  .feature-card:nth-child(3):hover .w-14.h-14 {
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.3);
  }
}

/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .feature-card,
  .feature-card .w-14.h-14,
  .feature-card .w-14.h-14::before {
    animation: none !important;
    transition: none !important;
  }

  /* Still allow subtle lift without animation */
  .feature-card:hover {
    transform: translateY(-4px);
  }

  .feature-card:hover .w-14.h-14 {
    transform: scale(1.05);
  }

  .feature-card:hover .w-14.h-14::before {
    opacity: 0.5;
  }
}