/* Animation master - Meteor */

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

  Put `.t-meteor` on any icon, badge, card, or control
  that should shoot upward diagonally and fade out.
*/

:root {
  --meteor-dur: 1000ms;
  --meteor-x: 140px;
  --meteor-y: -167px;
  --meteor-rotate: 311deg;
  --meteor-scale-min: 0.001;
}

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

@keyframes t-meteor {
  0%,
  3.33% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(var(--meteor-scale-min));
    animation-timing-function: ease-in-out;
  }

  11.67% {
    opacity: 1;
    transform: translate(0, 0) rotate(45deg) scale(1);
    animation-timing-function: ease-in-out;
  }

  70% {
    opacity: 1;
  }

  80% {
    opacity: 1;
    transform: translate(var(--meteor-x), var(--meteor-y)) rotate(var(--meteor-rotate)) scale(1);
  }

  81.67%,
  100% {
    opacity: 0;
    transform: translate(var(--meteor-x), var(--meteor-y)) rotate(var(--meteor-rotate)) scale(1);
  }
}

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