/* Animation master - Jump */

/*
  Usage:
    <div class="t-jump">...</div>

  Put `.t-jump` on any icon, badge, card, or control
  that should bounce upward with a squash-and-stretch motion.
*/

:root {
  --jump-dur: 1000ms;
  --jump-y: 59px;
  --jump-squash-x: 1.15;
  --jump-squash-y: 0.85;
  --jump-stretch-x: 0.85;
  --jump-stretch-y: 1.15;
}

.t-jump {
  animation: t-jump var(--jump-dur) infinite;
  transform-origin: center bottom;
  will-change: transform;
}

@keyframes t-jump {
  0%,
  3.33% {
    transform: translateY(0) scale(1, 1);
    animation-timing-function: ease-in-out;
  }

  23.33% {
    transform: translateY(0) scale(var(--jump-squash-x), var(--jump-squash-y));
    animation-timing-function: cubic-bezier(0.245, 0.53, 0.58, 1);
  }

  43.33% {
    transform:
      translateY(calc(var(--jump-y) * -1))
      scale(var(--jump-stretch-x), var(--jump-stretch-y));
    animation-timing-function: cubic-bezier(0.727, -0.016, 0.58, 1);
  }

  63.33% {
    transform: translateY(0) scale(var(--jump-squash-x), var(--jump-squash-y));
    animation-timing-function: ease-in-out;
  }

  75% {
    transform: translateY(0) scale(0.895, 1.067);
    animation-timing-function: cubic-bezier(0.393, 0, 0.55, 1);
  }

  85% {
    transform: translateY(0) scale(1.024, 0.945);
    animation-timing-function: cubic-bezier(0.494, 0.293, 0.58, 1);
  }

  95%,
  100% {
    transform: translateY(0) scale(1, 1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .t-jump {
    animation: none !important;
  }
}