/**
 * Interpêche CI - Animations CSS
 * Styles pour les animations au défilement et effets visuels
 */

/* Animation de base */
.animate__animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

/* Durées personnalisées */
.animate__animated.animate__faster {
  animation-duration: 0.5s;
}

.animate__animated.animate__fast {
  animation-duration: 0.8s;
}

.animate__animated.animate__slow {
  animation-duration: 1.5s;
}

.animate__animated.animate__slower {
  animation-duration: 2s;
}

/* Animation de fondu */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animate__fadeIn {
  animation-name: fadeIn;
}

/* Animation de fondu vers le haut */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 40px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.animate__fadeInUp {
  animation-name: fadeInUp;
}

/* Animation de fondu vers le bas */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -40px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.animate__fadeInDown {
  animation-name: fadeInDown;
}

/* Animation de fondu depuis la gauche */
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-40px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.animate__fadeInLeft {
  animation-name: fadeInLeft;
}

/* Animation de fondu depuis la droite */
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(40px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.animate__fadeInRight {
  animation-name: fadeInRight;
}

/* Animation de zoom */
@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}

.animate__zoomIn {
  animation-name: zoomIn;
}

/* Animation de rebond */
@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

.animate__bounceIn {
  animation-name: bounceIn;
  animation-duration: 0.75s;
}

/* Animation de flip horizontal */
@keyframes flipInX {
  from {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    animation-timing-function: ease-in;
  }

  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    transform: perspective(400px);
  }
}

.animate__flipInX {
  animation-name: flipInX;
  backface-visibility: visible !important;
}

/* Animation de flip vertical */
@keyframes flipInY {
  from {
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    animation-timing-function: ease-in;
  }

  60% {
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    transform: perspective(400px);
  }
}

.animate__flipInY {
  animation-name: flipInY;
  backface-visibility: visible !important;
}

/* Animation de pulsation */
@keyframes pulse {
  from {
    transform: scale3d(1, 1, 1);
  }

  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    transform: scale3d(1, 1, 1);
  }
}

.animate__pulse {
  animation-name: pulse;
  animation-timing-function: ease-in-out;
}

/* Animation de flottement */
@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

.float-animation {
  animation: float 3s ease-in-out infinite;
}

/* Animation d'ondulation pour les éléments océaniques */
@keyframes wave {
  0% {
    transform: translateX(0) translateZ(0) scaleY(1);
  }
  50% {
    transform: translateX(-25%) translateZ(0) scaleY(0.95);
  }
  100% {
    transform: translateX(-50%) translateZ(0) scaleY(1);
  }
}

.wave-animation {
  animation: wave 12s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
  transform-origin: center bottom;
}

/* Animation de vagues pour le footer */
.wave-footer {
  position: relative;
  overflow: hidden;
}

.wave-footer::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  width: 200%;
  height: 20px;
  background: url('../assets/img/wave.svg') repeat-x;
  animation: wave 12s linear infinite;
}

/* Animation pour les cartes de service */
.service-card {
  transition: all 0.3s ease;
}

.service-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 102, 204, 0.1);
}

/* Animation pour les icônes de service */
.service-icon {
  transition: all 0.3s ease;
}

.service-card:hover .service-icon {
  transform: scale(1.1);
  color: #00b4d8;
}

/* Animation pour les statistiques */
.stat-card {
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 102, 204, 0.1);
}

/* Animation pour les nombres de statistiques */
.stat-card h3 {
  transition: all 0.3s ease;
}

.stat-card:hover h3 {
  color: #00b4d8;
  transform: scale(1.1);
}

/* Optimisations pour le carrousel */
.carousel-fade .carousel-item {
  opacity: 0;
  transition-property: opacity;
  transform: none;
}

.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-left,
.carousel-fade .carousel-item-prev.carousel-item-right {
  opacity: 1;
}

.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-right {
  opacity: 0;
}

.carousel-fade .carousel-item-next,
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item.active,
.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-prev {
  transform: translateX(0);
}

/* Optimisation des transitions du carrousel */
.carousel-inner {
  will-change: transform;
}

.carousel-bg {
  transition: transform 0.5s ease, opacity 0.5s ease;
  will-change: transform, opacity;
}

/* Animation de chargement pour les images */
.lazy-load {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.lazy-load.loaded {
  opacity: 1;
}

/* Animation pour les boutons */
.btn {
  transition: all 0.3s ease;
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Animation pour les liens du footer */
.footer-links a {
  transition: all 0.3s ease;
  position: relative;
}

.footer-links a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -3px;
  left: 0;
  background-color: #00b4d8;
  transition: width 0.3s ease;
}

.footer-links a:hover::after {
  width: 100%;
}

/* Animation pour les réseaux sociaux */
.footer-social a {
  transition: all 0.3s ease;
}

.footer-social a:hover {
  transform: translateY(-5px);
  color: #00b4d8;
}