/* Animation master - Blink swing */

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

  Put `.t-blink-swing` on any icon, badge, card, or control
  that should pop in, swing left and right, then blink out.
*/

:root {
  --blink-swing-dur: 1000ms;
  --blink-swing-scale-min: 0.001;
  --blink-swing-rotate-a: 20deg;
  --blink-swing-rotate-b: -20deg;
}

.t-blink-swing {
  animation: t-blink-swing var(--blink-swing-dur) infinite both;
  transform-origin: center;
  will-change: transform;
}

@keyframes t-blink-swing {
  0% {
    transform: rotate(var(--blink-swing-rotate-a)) scale(var(--blink-swing-scale-min));
    animation-timing-function: ease-in-out;
  }

  15% {
    transform: rotate(var(--blink-swing-rotate-a)) scale(1);
    animation-timing-function: ease-in-out;
  }

  30% {
    transform: rotate(var(--blink-swing-rotate-b)) scale(1);
    animation-timing-function: ease-in-out;
  }

  45% {
    transform: rotate(var(--blink-swing-rotate-a)) scale(1);
    animation-timing-function: ease-in-out;
  }

  58.33% {
    transform: rotate(var(--blink-swing-rotate-b)) scale(1);
    animation-timing-function: ease-in-out;
  }

  75% {
    transform: rotate(var(--blink-swing-rotate-a)) scale(1);
    animation-timing-function: linear;
  }

  88.33%,
  100% {
    transform: rotate(var(--blink-swing-rotate-a)) scale(var(--blink-swing-scale-min));
  }
}

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