/* Animation master - Blink */

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

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

:root {
  --blink-dur: 1000ms;
  --blink-scale-min: 0.001;
  --blink-scale-max: 1;
  --blink-ease-in: cubic-bezier(0.218, 0.809, 0.58, 1);
}

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

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

  25% {
    transform: scale(var(--blink-scale-max));
    animation-timing-function: ease-in-out;
  }

  50% {
    transform: scale(var(--blink-scale-min));
    animation-timing-function: ease-out;
  }

  75% {
    transform: scale(var(--blink-scale-max));
    animation-timing-function: ease-in-out;
  }

  100% {
    transform: scale(var(--blink-scale-min));
  }
}

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