:root {
  /* Animation tokens */
  --ease-1: cubic-bezier(0.25, 0, 0.5, 1);
  --ease-2: cubic-bezier(0.25, 0, 0.4, 1);
  --ease-3: cubic-bezier(0.25, 0, 0.3, 1);
  --ease-4: cubic-bezier(0.25, 0, 0.2, 1);
  --ease-5: cubic-bezier(0.25, 0, 0.1, 1);
  --ease-elastic-1: cubic-bezier(0.5, 0.75, 0.75, 1.25);
  --ease-elastic-2: cubic-bezier(0.5, 1, 0.75, 1.25);
  --ease-elastic-3: cubic-bezier(0.5, 1.25, 0.75, 1.25);
  --ease-elastic-4: cubic-bezier(0.5, 1.5, 0.75, 1.25);
  --ease-elastic-5: cubic-bezier(0.5, 1.75, 0.75, 1.25);
  --ease-squish-1: cubic-bezier(0.5, -0.1, 0.1, 1.5);
  --ease-squish-2: cubic-bezier(0.5, -0.3, 0.1, 1.5);
  --ease-squish-3: cubic-bezier(0.5, -0.5, 0.1, 1.5);
  --ease-squish-4: cubic-bezier(0.5, -0.7, 0.1, 1.5);
  --ease-squish-5: cubic-bezier(0.5, -0.9, 0.1, 1.5);
  --ease-step-1: steps(2);
  --ease-step-2: steps(3);
  --ease-step-3: steps(4);
  --ease-step-4: steps(7);
  --ease-step-5: steps(10);
  --animation-fade: fade;
  --animation-scale: scale;
  --animation-scale-50: scale-50;
  --animation-slide-vertical: slide-vertical;
  --animation-slide-vertical-50: slide-vertical-50;
  --animation-slide-vertical-10: slide-vertical-10;
  --animation-slide-vertical-alt: slide-vertical-alt;
  --animation-slide-vertical-alt-50: slide-vertical-alt-50;
  --animation-slide-vertical-alt-10: slide-vertical-alt-10;
  --animation-slide-horizontal: slide-horizontal;
  --animation-slide-horizontal-50: slide-horizontal-50;
  --animation-slide-horizontal-10: slide-horizontal-10;
  --animation-slide-horizontal-alt: slide-horizontal-alt;
  --animation-slide-horizontal-alt-50: slide-horizontal-alt-50;
  --animation-slide-horizontal-alt-10: slide-horizontal-alt-10;
  --animation-shake-x: shake-x;
  --animation-shake-y: shake-y;
  --animation-spin: spin;
  --animation-ping: ping;
  --animation-blink: blink;
  --animation-float: float;
  --animation-bounce: bounce;
  --animation-pulse: pulse;
}

/* animation keyframes */
@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes scale {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
@keyframes scale-50 {
  from {
    transform: scale(0.5);
  }
  to {
    transform: scale(1);
  }
}
@keyframes slide-vertical {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes slide-vertical-50 {
  from {
    transform: translateY(-50%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes slide-vertical-10 {
  from {
    transform: translateY(-10%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes slide-vertical-alt {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes slide-vertical-alt-50 {
  from {
    transform: translateY(50%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes slide-vertical-alt-10 {
  from {
    transform: translateY(10%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes slide-horizontal {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes slide-horizontal-50 {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes slide-horizontal-10 {
  from {
    transform: translateX(-10%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes slide-horizontal-alt {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes slide-horizontal-alt-50 {
  from {
    transform: translateX(50%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes slide-horizontal-alt-10 {
  from {
    transform: translateX(10%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes shake-x {
  0%,
  100% {
    transform: translateX(0%);
  }
  20% {
    transform: translateX(-5%);
  }
  40% {
    transform: translateX(5%);
  }
  60% {
    transform: translateX(-5%);
  }
  80% {
    transform: translateX(5%);
  }
}
@keyframes shake-y {
  0%,
  100% {
    transform: translateY(0%);
  }
  20% {
    transform: translateY(-5%);
  }
  40% {
    transform: translateY(5%);
  }
  60% {
    transform: translateY(-5%);
  }
  80% {
    transform: translateY(5%);
  }
}
@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}
@keyframes ping {
  90%,
  100% {
    transform: scale(2);
    opacity: 0;
  }
}
@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
@keyframes float {
  50% {
    transform: translateY(-25%);
  }
}
@keyframes bounce {
  25% {
    transform: translateY(-20%);
  }
  40% {
    transform: translateY(-3%);
  }
  0%,
  60%,
  100% {
    transform: translateY(0);
  }
}
@keyframes pulse {
  50% {
    transform: scale(0.9, 0.9);
  }
}

/* Transition classes for Vue */

/* --------------------------------------
  Fade animation
---------------------------------------*/
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  animation-fill-mode: both;
}
.fade-enter-active,
.fade-leave-active {
  animation: var(--animation-fade) var(--duration-500);
  animation-timing-function: var(--ease-1);
}
.fade-leave-active {
  animation-direction: reverse;
  animation-duration: var(--duration-300);
  animation-timing-function: var(--ease-5);
}

/* --------------------------------------
  Scale animation
---------------------------------------*/
.scale-enter-from,
.scale-leave-to {
  trasnform: scale(0);
  animation-fill-mode: both;
}
.scale-enter-active,
.scale-leave-active {
  animation: var(--animation-scale) var(--duration-500);
  animation-timing-function: var(--ease-elastic-3);
}
.scale-50-enter-active,
.scale-50-leave-active {
  animation: var(--animation-scale-50) var(--duration-500);
  animation-timing-function: var(--ease-elastic-3);
}
.scale-leave-active,
.scale-50-leave-active {
  animation-direction: reverse;
  animation-duration: var(--duration-300);
}

/* --------------------------------------
  Slide Vertical animation
---------------------------------------*/
.slide-vertical-enter-from,
.slide-vertical-leave-to {
  animation-fill-mode: both;
}
.slide-vertical-enter-active,
.slide-vertical-leave-active {
  animation: var(--animation-slide-vertical) var(--duration-500);
  animation-timing-function: var(--ease-elastic-1);
}
.slide-vertical-10-enter-active,
.slide-vertical-10-leave-active {
  animation: var(--animation-slide-vertical-10) var(--duration-150);
  animation-timing-function: var(--ease-elastic-1);
}
.slide-vertical-50-enter-active,
.slide-vertical-50-leave-active {
  animation: var(--animation-slide-vertical-50) var(--duration-300);
  animation-timing-function: var(--ease-elastic-1);
}
.slide-vertical-alt-enter-active,
.slide-vertical-alt-leave-active {
  animation: var(--animation-slide-vertical-alt) var(--duration-500);
  animation-timing-function: var(--ease-elastic-1);
}
.slide-vertical-alt-10-enter-active,
.slide-vertical-alt-10-leave-active {
  animation: var(--animation-slide-vertical-alt-10) var(--duration-150);
  animation-timing-function: var(--ease-elastic-1);
}
.slide-vertical-alt-50-enter-active,
.slide-vertical-alt-50-leave-active {
  animation: var(--animation-slide-vertical-alt-50) var(--duration-300);
  animation-timing-function: var(--ease-elastic-1);
}

/* Exit animations */
.slide-vertical-leave-active,
.slide-vertical-alt-leave-active {
  animation-direction: reverse;
  animation-duration: var(--duration-300);
  animation-timing-function: var(--ease-squish-1);
}
.slide-vertical-10-leave-active,
.slide-vertical-alt-10-leave-active {
  animation-direction: reverse;
  animation-duration: var(--duration-100);
  animation-timing-function: var(--ease-squish-1);
}
.slide-vertical-50-leave-active,
.slide-vertical-alt-50-leave-active {
  animation-direction: reverse;
  animation-duration: var(--duration-150);
  animation-timing-function: var(--ease-squish-1);
}

/* --------------------------------------
  Slide Horizontal animation
---------------------------------------*/
.slide-horizontal-enter-from,
.slide-horizontal-leave-to {
  animation-fill-mode: both;
}
.slide-horizontal-enter-active,
.slide-horizontal-leave-active {
  animation: var(--animation-slide-horizontal) var(--duration-500);
  animation-timing-function: var(--ease-elastic-1);
}
.slide-horizontal-10-enter-active,
.slide-horizontal-10-leave-active {
  animation: var(--animation-slide-horizontal-10) var(--duration-150);
  animation-timing-function: var(--ease-elastic-1);
}
.slide-horizontal-50-enter-active,
.slide-horizontal-50-leave-active {
  animation: var(--animation-slide-horizontal-50) var(--duration-300);
  animation-timing-function: var(--ease-elastic-1);
}
.slide-horizontal-alt-enter-active,
.slide-horizontal-alt-leave-active {
  animation: var(--animation-slide-horizontal-alt) var(--duration-500);
  animation-timing-function: var(--ease-elastic-1);
}
.slide-horizontal-alt-10-enter-active,
.slide-horizontal-alt-10-leave-active {
  animation: var(--animation-slide-horizontal-alt-10) var(--duration-150);
  animation-timing-function: var(--ease-elastic-1);
}
.slide-horizontal-alt-50-enter-active,
.slide-horizontal-alt-50-leave-active {
  animation: var(--animation-slide-horizontal-alt-50) var(--duration-300);
  animation-timing-function: var(--ease-elastic-1);
}

/* Exit animations */
.slide-horizontal-leave-active,
.slide-horizontal-alt-leave-active {
  animation-direction: reverse;
  animation-duration: var(--duration-300);
  animation-timing-function: var(--ease-squish-1);
}
.slide-horizontal-10-leave-active,
.slide-horizontal-alt-10-leave-active {
  animation-direction: reverse;
  animation-duration: var(--duration-100);
  animation-timing-function: var(--ease-squish-1);
}
.slide-horizontal-50-leave-active,
.slide-horizontal-alt-50-leave-active {
  animation-direction: reverse;
  animation-duration: var(--duration-150);
  animation-timing-function: var(--ease-squish-1);
}

/* --------------------------------------
  Fade Scale animation
---------------------------------------*/
.fade-scale-enter-from,
.fade-scale-leave-to {
  animation-fill-mode: both;
}
.fade-scale-enter-active,
.fade-scale-leave-active {
  animation: var(--animation-scale), var(--animation-fade);
  animation-duration: var(--duration-500);
  animation-timing-function: var(--ease-elastic-3);
}
.fade-scale-50-enter-active,
.fade-scale-50-leave-active {
  animation: var(--animation-scale-50), var(--animation-fade);
  animation-duration: var(--duration-300);
  animation-timing-function: var(--ease-elastic-1);
}
/* Exit animation */
.fade-scale-leave-active {
  animation-direction: reverse;
  animation-duration: var(--duration-300);
}
.fade-scale-50-leave-active {
  animation-direction: reverse;
  animation-duration: var(--duration-150);
  animation-timing-function: var(--ease-elastic-1);
}

/* --------------------------------------
  Fade Vertical animation
---------------------------------------*/
.fade-vertical-enter-from,
.fade-vertical-leave-to {
  animation-fill-mode: both;
}
.fade-vertical-enter-active,
.fade-vertical-leave-active {
  animation: var(--animation-fade), var(--animation-slide-vertical);
  animation-duration: var(--duration-500);
  animation-timing-function: var(--ease-elastic-1);
}
.fade-vertical-10-enter-active,
.fade-vertical-10-leave-active {
  animation: var(--animation-fade), var(--animation-slide-vertical-10);
  animation-duration: var(--duration-100);
  animation-timing-function: var(--ease-elastic-1);
}
.fade-vertical-50-enter-active,
.fade-vertical-50-leave-active {
  animation: var(--animation-fade), var(--animation-slide-vertical-50);
  animation-duration: var(--duration-300);
  animation-timing-function: var(--ease-elastic-1);
}
.fade-vertical-alt-enter-active,
.fade-vertical-alt-leave-active {
  animation: var(--animation-fade), var(--animation-slide-vertical-alt);
  animation-duration: var(--duration-500);
  animation-timing-function: var(--ease-elastic-1);
}
.fade-vertical-alt-10-enter-active,
.fade-vertical-alt-10-leave-active {
  animation: var(--animation-fade), var(--animation-slide-vertical-alt-10);
  animation-duration: var(--duration-150);
  animation-timing-function: var(--ease-elastic-1);
}
.fade-vertical-alt-50-enter-active,
.fade-vertical-alt-50-leave-active {
  animation: var(--animation-fade), var(--animation-slide-vertical-alt-50);
  animation-duration: var(--duration-300);
  animation-timing-function: var(--ease-elastic-1);
}

/* Exit animations */
.fade-vertical-leave-active,
.fade-vertical-alt-leave-active {
  animation-direction: reverse;
  animation-duration: var(--duration-300);
  animation-timing-function: var(--ease-squish-1);
}
.fade-vertical-10-leave-active,
.fade-vertical-alt-10-leave-active {
  animation-direction: reverse;
  animation-duration: var(--duration-100);
  animation-timing-function: var(--ease-squish-1);
}
.fade-vertical-50-leave-active,
.fade-vertical-alt-50-leave-active {
  animation-direction: reverse;
  animation-duration: var(--duration-150);
  animation-timing-function: var(--ease-squish-1);
}

/* --------------------------------------
  Fade Horizontal animation
---------------------------------------*/
.fade-horizontal-enter-from,
.fade-horizontal-leave-to {
  animation-fill-mode: both;
}
.fade-horizontal-enter-active,
.fade-horizontal-leave-active {
  animation: var(--animation-fade), var(--animation-slide-horizontal);
  animation-duration: var(--duration-500);
  animation-timing-function: var(--ease-elastic-1);
}
.fade-horizontal-10-enter-active,
.fade-horizontal-10-leave-active {
  animation: var(--animation-fade), var(--animation-slide-horizontal-10);
  animation-duration: var(--duration-100);
  animation-timing-function: var(--ease-elastic-1);
}
.fade-horizontal-50-enter-active,
.fade-horizontal-50-leave-active {
  animation: var(--animation-fade), var(--animation-slide-horizontal-50);
  animation-duration: var(--duration-300);
  animation-timing-function: var(--ease-elastic-1);
}
.fade-horizontal-alt-enter-active,
.fade-horizontal-alt-leave-active {
  animation: var(--animation-fade), var(--animation-slide-horizontal-alt);
  animation-duration: var(--duration-500);
  animation-timing-function: var(--ease-elastic-1);
}
.fade-horizontal-alt-10-enter-active,
.fade-horizontal-alt-10-leave-active {
  animation: var(--animation-fade), var(--animation-slide-horizontal-alt-10);
  animation-duration: var(--duration-150);
  animation-timing-function: var(--ease-elastic-1);
}
.fade-horizontal-alt-50-enter-active,
.fade-horizontal-alt-50-leave-active {
  animation: var(--animation-fade), var(--animation-slide-horizontal-alt-50);
  animation-duration: var(--duration-300);
  animation-timing-function: var(--ease-elastic-1);
}

/* Exit animations */
.fade-horizontal-leave-active,
.fade-horizontal-alt-leave-active {
  animation-direction: reverse;
  animation-duration: var(--duration-300);
  animation-timing-function: var(--ease-squish-1);
}
.fade-horizontal-10-leave-active,
.fade-horizontal-alt-10-leave-active {
  animation-direction: reverse;
  animation-duration: var(--duration-100);
  animation-timing-function: var(--ease-squish-1);
}
.fade-horizontal-50-leave-active,
.fade-horizontal-alt-50-leave-active {
  animation-direction: reverse;
  animation-duration: var(--duration-150);
  animation-timing-function: var(--ease-squish-1);
}