/* Animation master - Drift down */

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

  Put `.t-drift-down` on any icon, badge, card, or control
  that should appear, rotate, and drift downward.
*/

:root {
  --drift-down-dur: 1000ms;
  --drift-down-y: 128px;
  --drift-down-rotate: 129deg;
  --drift-down-scale-min: 0.001;
}

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

@keyframes t-drift-down {
  0% {
    transform: translateY(0) rotate(0deg) scale(var(--drift-down-scale-min));
    animation-timing-function: ease-in-out;
  }

  13.33% {
    transform: translateY(0) rotate(17deg) scale(1);
    animation-timing-function: ease-in-out;
  }

  76.67% {
    transform: translateY(calc(var(--drift-down-y) * 0.75)) rotate(99deg) scale(1);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  }

  100% {
    transform: translateY(var(--drift-down-y)) rotate(var(--drift-down-rotate)) scale(var(--drift-down-scale-min));
  }
}

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