/* Sina Content Slider Pro - Animations avancées fade + translation */

/* =========================================================
   ANIMATIONS IN (Entrée)
   ========================================================= */

/* Fade + Slide From Left */
@keyframes fadeSlideInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeSlideInLeft {
  animation-name: fadeSlideInLeft;
  animation-duration: 0.8s;
  animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Fade + Slide From Right */
@keyframes fadeSlideInRight {
  from {
    opacity: 0;
    transform: translate3d(100px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeSlideInRight {
  animation-name: fadeSlideInRight;
  animation-duration: 0.8s;
  animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Fade + Slide Down */
@keyframes fadeSlideInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -80px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeSlideInDown {
  animation-name: fadeSlideInDown;
  animation-duration: 0.8s;
  animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Fade + Slide Up */
@keyframes fadeSlideInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 80px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeSlideInUp {
  animation-name: fadeSlideInUp;
  animation-duration: 0.8s;
  animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Scale In (zoom doux) */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale3d(0.85, 0.85, 0.85);
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}
.scaleIn {
  animation-name: scaleIn;
  animation-duration: 0.8s;
  animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Fade In (version smooth) */
@keyframes fadeInSmooth {
  from { opacity: 0; }
  to { opacity: 1; }
}
.fadeInSmooth {
  animation-name: fadeInSmooth;
  animation-duration: 0.6s;
  animation-timing-function: ease-out;
}

/* =========================================================
   ANIMATIONS OUT (Sortie)
   ========================================================= */

/* Fade + Slide To Left */
@keyframes fadeSlideOutLeft {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(-100px, 0, 0);
  }
}
.fadeSlideOutLeft {
  animation-name: fadeSlideOutLeft;
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

/* Fade + Slide To Right */
@keyframes fadeSlideOutRight {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(100px, 0, 0);
  }
}
.fadeSlideOutRight {
  animation-name: fadeSlideOutRight;
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

/* Fade + Slide Up */
@keyframes fadeSlideOutUp {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -80px, 0);
  }
}
.fadeSlideOutUp {
  animation-name: fadeSlideOutUp;
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

/* Fade + Slide Down */
@keyframes fadeSlideOutDown {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 80px, 0);
  }
}
.fadeSlideOutDown {
  animation-name: fadeSlideOutDown;
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

/* Scale Out */
@keyframes scaleOut {
  from {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
  to {
    opacity: 0;
    transform: scale3d(0.85, 0.85, 0.85);
  }
}
.scaleOut {
  animation-name: scaleOut;
  animation-duration: 0.5s;
  animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

/* Fade Out (version smooth) */
@keyframes fadeOutSmooth {
  from { opacity: 1; }
  to { opacity: 0; }
}
.fadeOutSmooth {
  animation-name: fadeOutSmooth;
  animation-duration: 0.4s;
  animation-timing-function: ease-in;
}

/* =========================================================
   TRANSITIONS SMOOTH pour sliders multi-items (Owl Carousel)
   ========================================================= */

/* Effet de parallaxe subtil sur hover des items */
.sina-content-slider.owl-carousel .sina-cs-item {
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity 0.4s ease;
}
.sina-content-slider.owl-carousel .sina-cs-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Effet de fade subtil sur les items non-centrés (mode center) */
.sina-content-slider.owl-carousel .owl-item:not(.active) .sina-cs-item {
  opacity: 0.5;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.sina-content-slider.owl-carousel .owl-item.active .sina-cs-item {
  opacity: 1;
}

/* =========================================================
   OVERRIDES pour animate.css (durée plus courte = plus pro)
   ========================================================= */

.sina-content-slider .owl-item.active .animated {
  animation-duration: 0.8s;
}

/* Slide In with stronger translation */
@keyframes slideInLeftPro {
  from {
    transform: translate3d(-120px, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.slideInLeftPro {
  animation-name: slideInLeftPro;
}

@keyframes slideInRightPro {
  from {
    transform: translate3d(120px, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.slideInRightPro {
  animation-name: slideInRightPro;
}