/* Animation master - Click */

/*
  Usage:
    <button class="t-click">...</button>

  Put `.t-click` on any button, icon, card, or control
  that should show a repeated pointer click motion.
*/

:root {
  --click-dur: 1000ms;
  --click-ease: ease-in-out;
  --click-scale: 0.88;
  --click-rotate: -25deg;
  --click-x: 4.75px;
  --click-y: 10.1px;
}

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

@keyframes t-click {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }

  25% {
    transform:
      translate(var(--click-x), var(--click-y))
      rotate(var(--click-rotate))
      scale(var(--click-scale));
  }

  50% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }

  75% {
    transform:
      translate(var(--click-x), var(--click-y))
      rotate(var(--click-rotate))
      scale(var(--click-scale));
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  }

  100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
}

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