/* Features v2 Component - Using Design System */

/* Custom enhancements for features component */
.features-v2 {
  position: relative;
}

/* Add subtle background pattern */
.features-v2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 103, 56, 0.08) 1px, transparent 0);
  background-size: 20px 20px;
  pointer-events: none;
}

/* Enhanced card hover effects */
.features-v2 .feature-card-v2:hover {
  box-shadow: var(--ds-shadow-card);
}

/* Icon glow effect */
.features-v2 .feature-icon-v2 div {
  position: relative;
}

.features-v2 .feature-icon-v2 div::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  background: var(--gradient-v2-orange);
  border-radius: var(--radius-md);
  opacity: 0;
  transition: opacity var(--transition-base);
  z-index: -1;
}

.features-v2 .group:hover .feature-icon-v2 div::before {
  opacity: 1;
}

/* Arrow animation */
.features-v2 .feature-arrow-v2 svg {
  transform: translateX(-10px);
  transition: transform var(--transition-base);
}

.features-v2 .group:hover .feature-arrow-v2 svg {
  transform: translateX(0);
}

/* Stagger animation for cards */
.features-v2 .feature-card-v2 {
  animation: fadeInUp 0.6s ease forwards;
  opacity: 0;
  transform: translateY(30px);
}

.features-v2 .feature-card-v2:nth-child(1) { animation-delay: 0.1s; }
.features-v2 .feature-card-v2:nth-child(2) { animation-delay: 0.2s; }
.features-v2 .feature-card-v2:nth-child(3) { animation-delay: 0.3s; }
.features-v2 .feature-card-v2:nth-child(4) { animation-delay: 0.4s; }
.features-v2 .feature-card-v2:nth-child(5) { animation-delay: 0.5s; }
.features-v2 .feature-card-v2:nth-child(6) { animation-delay: 0.6s; }

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Dark mode support */
/* Dark mode automatically handled by design tokens */
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .features-v2 .feature-card-v2,
  .features-v2 .feature-icon-v2 div,
  .features-v2 .feature-arrow-v2 svg {
    animation: none;
    transition: none;
  }
  
  .features-v2 .feature-card-v2 {
    opacity: 1;
    transform: none;
  }
}