/* Animation master - Float rise */

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

  Put `.t-float-rise` on any icon, badge, card, or control
  that should drift upward and softly rotate back.
*/

:root {
  --float-rise-dur: 1000ms;
  --float-rise-y: 57px;
  --float-rise-rotate: 27deg;
}

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

@keyframes t-float-rise {
  0% {
    transform: translateY(0) rotate(0deg);
    animation-timing-function: ease-in-out;
  }

  50% {
    transform: translateY(calc(var(--float-rise-y) * -1)) rotate(var(--float-rise-rotate));
    animation-timing-function: ease-in-out;
  }

  100% {
    transform: translateY(0) rotate(0deg);
  }
}

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