/* ══════════════════════════════════════════════════════
   ANIMATIONS — Keyframes et transitions
══════════════════════════════════════════════════════ */

@keyframes lbar {
  0% {
    width: 0;
    margin-left: 0;
  }
  50% {
    width: 55%;
    margin-left: 15%;
  }
  100% {
    width: 0;
    margin-left: 100%;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes dropIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-7px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes stopRing {
  0% {
    transform: scale(.8);
    opacity: .5;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

@keyframes stopIn {
  from {
    opacity: 0;
    transform: scale(.5);
  }
  65% {
    transform: scale(1.08);
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes stopOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(.55);
  }
}

.lf-stop-inner.enter {
  animation: stopIn .3s var(--ease-spring) both;
}

.lf-stop-inner.leave {
  animation: stopOut .22s ease both;
}