/* ===================================================================
   EFFETS PARALLAX SUBTILS POUR LES IMAGES
   Animations naturelles basées sur le scroll et la navigation
   ================================================================== */

/* Images principales avec effet parallax */
.hero img, 
.mock, 
img[src*="illustration"], 
img[src*="badge"], 
img[src*="icon-"] {
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

/* Effet parallax différentiel selon la position */
.hero .mock {
  transform-origin: center center;
}

/* Animation au scroll pour les images avec espace */
.parallax-element {
  transition: transform 0.3s ease-out;
}

/* Mouvements amples et dynamiques */
@keyframes bigFloatDiagonal {
  0% { transform: translate(0px, 0px) rotate(0deg); }
  25% { transform: translate(40px, -60px) rotate(2deg); }
  50% { transform: translate(-30px, -80px) rotate(-1deg); }
  75% { transform: translate(-50px, 30px) rotate(1.5deg); }
  100% { transform: translate(0px, 0px) rotate(0deg); }
}

@keyframes bigFloatHorizontal {
  0% { transform: translateX(0px) scale(1); }
  50% { transform: translateX(80px) scale(1.05); }
  100% { transform: translateX(0px) scale(1); }
}

@keyframes bigFloatVertical {
  0% { transform: translateY(0px) rotate(0deg); }
  33% { transform: translateY(-70px) rotate(-2deg); }
  66% { transform: translateY(50px) rotate(2deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes bigCircular {
  0% { transform: translate(0px, 0px) rotate(0deg); }
  25% { transform: translate(60px, -40px) rotate(90deg); }
  50% { transform: translate(0px, -80px) rotate(180deg); }
  75% { transform: translate(-60px, -40px) rotate(270deg); }
  100% { transform: translate(0px, 0px) rotate(360deg); }
}

/* Application des animations amples - UNIQUEMENT sur les images hero */
.hero img[src*="illustration-bot"] {
  animation: bigFloatDiagonal 15s ease-in-out infinite;
}

.hero .mock {
  animation: bigFloatVertical 18s ease-in-out infinite;
  animation-delay: -4s;
}

.hero img[src*="badge-excellence"] {
  animation: bigCircular 20s ease-in-out infinite;
  animation-delay: -5s;
}

.hero img[src*="badge-trust"] {
  animation: bigFloatHorizontal 16s ease-in-out infinite;
  animation-delay: -2s;
}

/* Mouvement au hover - UNIQUEMENT pour les images hero, plus doux */
.hero img:hover {
  transform: scale(1.08) translateY(-15px) rotate(3deg) translateX(10px);
  filter: brightness(1.1) saturate(1.1);
  transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Effets légers pour les autres éléments */
img[src*="badge"]:hover {
  transform: scale(1.05) rotate(-2deg);
  transition: all 0.5s ease;
}

img[src*="icon-"]:hover {
  transform: scale(1.1) rotate(5deg);
  transition: all 0.4s ease;
}

/* Effet de depth pour les logos */
.logo img {
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.logo img:hover {
  transform: scale(1.03);
  filter: drop-shadow(0 5px 15px rgba(212, 175, 55, 0.3));
}

/* Effet de mouvement au scroll pour les accents */
img[src*="accent-bars"] {
  transition: transform 0.8s ease-out;
  will-change: transform;
}

/* Mouvement différentiel basé sur la section */
.section:nth-child(odd) img[src*="icon-"] {
  animation-direction: reverse;
}

.section:nth-child(even) img[src*="badge-"] {
  animation-delay: -3s;
}

/* Optimisations responsive */
@media (max-width: 768px) {
  /* Réduction des effets sur mobile */
  .hero img, .mock, img[src*="illustration"] {
    animation-duration: 8s;
  }
  
  .hero img:hover {
    transform: scale(1.01) translateY(-2px);
  }
  
  img[src*="badge"]:hover, img[src*="icon-"]:hover {
    transform: scale(1.05);
  }
}

/* Respect des préférences utilisateur */
@media (prefers-reduced-motion: reduce) {
  .hero img, 
  .mock, 
  img[src*="illustration"], 
  img[src*="badge"], 
  img[src*="icon-"] {
    animation: none !important;
    transition: none !important;
  }
  
  .parallax-element {
    transform: none !important;
    transition: none !important;
  }
}

/* Effets spéciaux pour certaines images */
.excellence img, 
.features img {
  transition: all 0.5s ease;
}

.excellence img:hover {
  transform: translateX(10px) scale(1.02);
  filter: brightness(1.1);
}

/* Animation d'entrée pour les images au chargement */
@keyframes imageSlideIn {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.hero img, .mock {
  animation: imageSlideIn 1s ease-out;
}

/* Mouvement au scroll pour les grandes images */
.hero-image-container {
  overflow: hidden;
}

.hero-image-container img {
  transition: transform 0.6s ease-out;
}

/* Animations spécialisées pour les sections avec beaucoup d'espace */
@keyframes crazyBounce {
  0% { transform: translate(0px, 0px) rotate(0deg) scale(1); }
  20% { transform: translate(80px, -60px) rotate(45deg) scale(1.3); }
  40% { transform: translate(-70px, 40px) rotate(-30deg) scale(0.8); }
  60% { transform: translate(60px, 80px) rotate(60deg) scale(1.2); }
  80% { transform: translate(-80px, -30px) rotate(-45deg) scale(0.9); }
  100% { transform: translate(0px, 0px) rotate(0deg) scale(1); }
}

@keyframes wildSwing {
  0% { transform: translateX(0px) rotate(0deg); }
  25% { transform: translateX(150px) rotate(20deg); }
  50% { transform: translateX(-100px) rotate(-15deg); }
  75% { transform: translateX(120px) rotate(25deg); }
  100% { transform: translateX(0px) rotate(0deg); }
}

/* Animations légères pour les autres éléments */
.excellence img {
  transition: transform 0.6s ease;
}

img[src*="accent-bars"] {
  transition: transform 0.8s ease;
}

/* Classes utilitaires pour le JavaScript - Amplifiées */
.parallax-slow { 
  transform: translate(calc(var(--parallax-x, 0) * 2), calc(var(--parallax-y, 0) * 2)) rotate(calc(var(--parallax-rotation, 0) * 1deg)); 
}
.parallax-medium { 
  transform: translate(calc(var(--parallax-x, 0) * 4), calc(var(--parallax-y, 0) * 3)) rotate(calc(var(--parallax-rotation, 0) * 2deg));
}
.parallax-fast { 
  transform: translate(calc(var(--parallax-x, 0) * 6), calc(var(--parallax-y, 0) * 5)) rotate(calc(var(--parallax-rotation, 0) * 3deg));
}