/* ==================================
   FADE IN
================================== */

@keyframes fadeIn {

  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}

/* ==================================
   SLIDE IN RIGHT
================================== */

@keyframes slideInRight {

  from {
    opacity: 0;
    transform: translateX(30px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }

}

/* ==================================
   SCALE IN
================================== */

@keyframes scaleIn {

  from {
    opacity: 0;
    transform: scale(.96);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }

}

/* ==================================
   FLOAT
================================== */

@keyframes float {

  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }

  100% {
    transform: translateY(0);
  }

}

/* ==================================
   GLOW PULSE
================================== */

@keyframes glowPulse {

  0% {
    box-shadow:
      0 10px 30px rgba(124,92,255,.35),
      0 0 20px rgba(124,92,255,.15);
  }

  50% {
    box-shadow:
      0 10px 35px rgba(124,92,255,.45),
      0 0 40px rgba(124,92,255,.30);
  }

  100% {
    box-shadow:
      0 10px 30px rgba(124,92,255,.35),
      0 0 20px rgba(124,92,255,.15);
  }

}

/* ==================================
   BUTTON PRESS
================================== */

@keyframes buttonPress {

  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(.95);
  }

  100% {
    transform: scale(1);
  }

}

/* ==================================
   RIPPLE
================================== */

@keyframes ripple {

  from {
    transform: scale(0);
    opacity: .5;
  }

  to {
    transform: scale(4);
    opacity: 0;
  }

}

/* ==================================
   DRAWER OPEN
================================== */

@keyframes drawerOpen {

  from {
    opacity: 0;
    transform: translateX(30px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }

}

/* ==================================
   HISTORY OPEN
================================== */

@keyframes historyOpen {

  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}

/* ==================================
   READY CLASSES
================================== */

.fade-in {
  animation: fadeIn .4s ease;
}

.scale-in {
  animation: scaleIn .3s ease;
}

.slide-in-right {
  animation: slideInRight .35s ease;
}

.float {
  animation: float 3s ease-in-out infinite;
}

/* ==================================
   ACCESSIBILITY
================================== */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {

    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;

    scroll-behavior: auto !important;
  }

}