/* Animations CSS - All animation keyframes */

/* Enter animations */
@keyframes enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Leave animations */
@keyframes leave {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* Pulse animation */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* Expand animations */
@keyframes expand-1 {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes expand-2 {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes expand-3 {
  from {
    transform: scale(0.85);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes expand-4 {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes expand-5 {
  from {
    transform: scale(0.75);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes expand-6 {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

/* Gradient shift animation */
@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Notification animations */
@keyframes notification-enter {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes notification-leave {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* Transaction animations */
@keyframes transaction-enter {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes transaction-leave {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-100%);
    opacity: 0;
  }
}

/* Warning animations */
@keyframes warning-pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* Animation utility classes */
.animate-enter {
  animation: enter var(--animation-duration-normal) ease-out forwards;
}

.animate-leave {
  animation: leave var(--animation-duration-normal) ease-in forwards;
}

.animate-pulse {
  animation: pulse 2s infinite;
}

.animate-expand-1 {
  animation: expand-1 var(--animation-duration-normal) ease-out forwards;
}

.animate-expand-2 {
  animation: expand-2 var(--animation-duration-normal) ease-out forwards;
}

.animate-expand-3 {
  animation: expand-3 var(--animation-duration-normal) ease-out forwards;
}

.animate-expand-4 {
  animation: expand-4 var(--animation-duration-normal) ease-out forwards;
}

.animate-expand-5 {
  animation: expand-5 var(--animation-duration-normal) ease-out forwards;
}

.animate-expand-6 {
  animation: expand-6 var(--animation-duration-normal) ease-out forwards;
}

.animate-gradient-shift {
  animation: gradient-shift 15s ease infinite;
  background-size: 200% 200%;
}

.animate-notification-enter {
  animation: notification-enter var(--animation-duration-normal) ease-out
    forwards;
}

.animate-notification-leave {
  animation: notification-leave var(--animation-duration-normal) ease-in
    forwards;
}

.animate-transaction-enter {
  animation: transaction-enter var(--animation-duration-normal) ease-out
    forwards;
}

.animate-transaction-leave {
  animation: transaction-leave var(--animation-duration-normal) ease-in forwards;
}

.animate-warning-pulse {
  animation: warning-pulse 1s infinite;
}