/* Animation master - Heartbeat */

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

  Put `.t-heartbeat` on any icon, badge, card, or control
  that should pulse with a repeated heartbeat rhythm.
*/

:root {
  --heartbeat-dur: 1000ms;
  --heartbeat-scale-a: 0.7;
  --heartbeat-scale-b: 0.77;
  --heartbeat-scale-c: 0.895;
}

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

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

  16.67% {
    transform: scale(var(--heartbeat-scale-a));
    animation-timing-function: ease-in-out;
  }

  35% {
    transform: scale(1);
    animation-timing-function: ease-in-out;
  }

  51.67% {
    transform: scale(var(--heartbeat-scale-b));
    animation-timing-function: ease-in-out;
  }

  70% {
    transform: scale(1);
    animation-timing-function: cubic-bezier(0.478, 0.279, 0.458, 1.186);
  }

  85% {
    transform: scale(var(--heartbeat-scale-c));
    animation-timing-function: cubic-bezier(0.586, 0.07, 0.415, 0.973);
  }

  100% {
    transform: scale(1);
  }
}

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