/* Styles pour les cartes de services avec effet 3D */

.perspective-1000 {
  perspective: 1000px;
}

.hover\:rotateY-12:hover {
  transform: rotateY(12deg) scale(1.05);
}

.hover\:scale-110:hover {
  transform: scale(1.1);
}

/* Animation de rotation 3D fluide */
.group:hover .transform {
  transform: rotateY(12deg) scale(1.05);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Effet de brillance orange */
.group:hover .bg-gradient-to-br {
  background: linear-gradient(135deg, 
    rgba(251, 146, 60, 0.1) 0%, 
    rgba(251, 146, 60, 0.05) 50%, 
    rgba(251, 146, 60, 0.15) 100%);
}

/* Ombre portée 3D */
.group:hover .shadow-2xl {
  box-shadow: 
    0 25px 50px -12px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(251, 146, 60, 0.1),
    0 0 20px rgba(251, 146, 60, 0.1);
}

/* Animation du bouton - Bleu par défaut, orange au hover */
.group .bg-gradient-to-r {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.2);
}

.group:hover .bg-gradient-to-r {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  box-shadow: 0 10px 25px rgba(251, 146, 60, 0.3);
}

/* Effet de pulsation sur l'icône */
.group:hover .w-12 {
  animation: pulse-orange 2s infinite;
}

@keyframes pulse-orange {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(251, 146, 60, 0.4);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(251, 146, 60, 0);
  }
}

/* Transition fluide pour tous les éléments */
.group * {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Effet de profondeur sur le texte */
.group:hover h3 {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Animation des puces */
.group:hover .w-1\.5 {
  transform: scale(1.2);
  background-color: #f97316;
}