/* ================================================
   variable-animation.css — Design & Icons Visualizer
   Animations CSS extraites d'Animate.css + custom
   HTML : <link rel="stylesheet" href="styles/variable-animation.css">
   CSS  : @import './styles/variable-animation.css';
   ================================================ */

@keyframes bounce {
  0%,
  20%,
  53%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
    transform: translate3d(0, -30px, 0) scaleY(1.1);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
    transform: translate3d(0, -15px, 0) scaleY(1.05);
  }
  80% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translateZ(0) scaleY(0.95);
    transform: translateZ(0) scaleY(0.95);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
    transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
}
@keyframes sliderAutomatique {
  0% {
    /* Début de slideInLeft : hors écran à gauche */
    transform: translate3d(-100%, 0, 0);
    opacity: 0;
  }

  8% {
    /* Fin de slideInLeft : arrivé au centre */
    transform: translateZ(0);
    opacity: 1;
  }

  25% {
    /* Pause visible au centre */
    transform: translateZ(0);
    opacity: 1;
  }

  33% {
    /* Début de slideOutRight : départ vers la droite */
    transform: translate3d(100%, 0, 0);
    opacity: 0;
  }

  100% {
    /* Reste caché à droite en attendant son tour */
    transform: translate3d(100%, 0, 0);
    opacity: 0;
  }
}