/* Animation master - Float */

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

  Put `.t-float` on any element that should gently float.
*/

:root {
  --float-dur: 1000ms;
  --float-y: 20px;
  --float-rot-a: -1.5deg;
  --float-rot-b: 8deg;
  --float-rot-c: -8deg;
}

.t-float {
  transform-origin: center center;
  animation:
    t-float-y var(--float-dur) infinite,
    t-float-rotate var(--float-dur) infinite;
  will-change: translate, rotate;
}

@keyframes t-float-y {
  0% {
    translate: 0 0;
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  }

  50% {
    translate: 0 calc(var(--float-y) * -1);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  }

  100% {
    translate: 0 0;
  }
}

@keyframes t-float-rotate {
  0% {
    rotate: var(--float-rot-a);
    animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
  }

  25% {
    rotate: var(--float-rot-b);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  }

  75% {
    rotate: var(--float-rot-c);
    animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
  }

  100% {
    rotate: var(--float-rot-a);
  }
}

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