/* ========================================
   ANIMATIONS CSS
   Animations et transitions Drivise
   ======================================== */

/* ========================================
   FADE ANIMATIONS
   ======================================== */

.fade {
  transition: opacity 0.15s linear;
}

@media (prefers-reduced-motion: reduce) {
  .fade {
    transition: none;
  }
}

.fade:not(.show) {
  opacity: 0;
}

/* ========================================
   COLLAPSE ANIMATIONS
   ======================================== */

.collapse:not(.show) {
  display: none;
}

.collapsing {
  height: 0;
  transition: height 0.15s;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .collapsing {
    transition: none;
  }
}

.collapsing.collapse-horizontal {
  width: 0;
  height: auto;
  transition: width 0.35s;
}

@media (prefers-reduced-motion: reduce) {
  .collapsing.collapse-horizontal {
    transition: none;
  }
}

/* ========================================
   KEYFRAMES ANIMATIONS
   ======================================== */

@keyframes ping {
  75%,
  to {
    opacity: 0;
    transform: scale(2);
  }
}

@keyframes pulse {
  50% {
    opacity: 0.5;
  }
}

@keyframes bounce {
  0%,
  to {
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    transform: translateY(-25%);
  }
  50% {
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    transform: none;
  }
}

@keyframes slideLeft {
  0% {
    transform: translate(0);
  }
  to {
    transform: translate(-100%);
  }
}

@keyframes slideRight {
  0% {
    transform: translate(-100%);
  }
  to {
    transform: translate(0);
  }
}

/* ========================================
   END ANIMATIONS CSS
   ======================================== */