/**
 * CSS Animations pour les sections de la page d'accueil
 * Animations subtiles et professionnelles
 */

/* ============================================
   ANIMATIONS DES SECTIONS
   ============================================ */

/* État initial - sections invisibles */
.fade-in-section {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* État visible */
.fade-in-section.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   ANIMATIONS DES CARDS
   ============================================ */

/* État initial - cards invisibles */
.fade-in-card {
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* État visible */
.fade-in-card.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ============================================
   HOVER EFFECTS AMÉLIORÉS
   ============================================ */

/* Cards avec effet de lévitation */
.bg-white.rounded-2xl,
.bg-gray-50.rounded-2xl {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.bg-white.rounded-2xl:hover,
.bg-gray-50.rounded-2xl:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
}

/* Icônes avec rotation au hover */
.w-16.h-16.rounded-xl {
  transition: transform 0.4s ease;
}

.bg-white.rounded-2xl:hover .w-16.h-16.rounded-xl,
.bg-gray-50.rounded-2xl:hover .w-16.h-16.rounded-xl {
  transform: rotate(10deg) scale(1.1);
}

/* ============================================
   ANIMATIONS DES LOGOS CLIENTS
   ============================================ */

/* Logos qui apparaissent un par un */
.flex.flex-wrap.justify-center > div {
  opacity: 0;
  animation: fadeInLogo 0.6s ease-out forwards;
}

.flex.flex-wrap.justify-center > div:nth-child(1) { animation-delay: 0.1s; }
.flex.flex-wrap.justify-center > div:nth-child(2) { animation-delay: 0.2s; }
.flex.flex-wrap.justify-center > div:nth-child(3) { animation-delay: 0.3s; }
.flex.flex-wrap.justify-center > div:nth-child(4) { animation-delay: 0.4s; }
.flex.flex-wrap.justify-center > div:nth-child(5) { animation-delay: 0.5s; }

@keyframes fadeInLogo {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 0.6;
    transform: scale(1);
  }
}

/* Hover sur logos */
.flex.flex-wrap.justify-center > div {
  transition: all 0.3s ease;
}

.flex.flex-wrap.justify-center > div:hover {
  opacity: 1 !important;
  transform: scale(1.1);
}

/* ============================================
   ANIMATIONS DES SECTEURS
   ============================================ */

/* Grid de secteurs avec effet de vague */
.grid.md\\:grid-cols-4 > div {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInSector 0.5s ease-out forwards;
}

.grid.md\\:grid-cols-4 > div:nth-child(1) { animation-delay: 0.05s; }
.grid.md\\:grid-cols-4 > div:nth-child(2) { animation-delay: 0.1s; }
.grid.md\\:grid-cols-4 > div:nth-child(3) { animation-delay: 0.15s; }
.grid.md\\:grid-cols-4 > div:nth-child(4) { animation-delay: 0.2s; }
.grid.md\\:grid-cols-4 > div:nth-child(5) { animation-delay: 0.25s; }
.grid.md\\:grid-cols-4 > div:nth-child(6) { animation-delay: 0.3s; }
.grid.md\\:grid-cols-4 > div:nth-child(7) { animation-delay: 0.35s; }
.grid.md\\:grid-cols-4 > div:nth-child(8) { animation-delay: 0.4s; }

@keyframes fadeInSector {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hover secteurs */
.grid.md\\:grid-cols-4 > div {
  transition: all 0.3s ease;
  cursor: pointer;
}

.grid.md\\:grid-cols-4 > div:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.1);
}

/* ============================================
   COMPTEURS ANIMÉS
   ============================================ */

.text-4xl,
.text-5xl {
  transition: color 0.3s ease;
}

.text-4xl:hover,
.text-5xl:hover {
  color: #FFB800;
}

/* ============================================
   BOUTONS AVEC EFFET
   ============================================ */

a[class*="bg-"],
button[class*="bg-"] {
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

a[class*="bg-"]:hover,
button[class*="bg-"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.2);
}

/* Effet de brillance au hover */
a[class*="bg-"]::before,
button[class*="bg-"]::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: left 0.5s ease;
}

a[class*="bg-"]:hover::before,
button[class*="bg-"]:hover::before {
  left: 100%;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
  /* Réduire les effets sur mobile */
  .fade-in-section,
  .fade-in-card {
    transform: translateY(10px);
  }
  
  .bg-white.rounded-2xl:hover,
  .bg-gray-50.rounded-2xl:hover {
    transform: translateY(-4px);
  }
}

/* ============================================
   PERFORMANCE
   ============================================ */

.fade-in-section,
.fade-in-card,
.bg-white.rounded-2xl,
.bg-gray-50.rounded-2xl {
  will-change: transform, opacity;
  backface-visibility: hidden;
}