@import "tailwindcss";

@keyframes owed-shake {
  0% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-4px);
  }
  40% {
    transform: translateX(4px);
  }
  60% {
    transform: translateX(-2px);
  }
  80% {
    transform: translateX(2px);
  }
  100% {
    transform: translateX(0);
  }
}

.owed-shake {
  /* display: inline-block; */
  animation: owed-shake 0.45s ease-out;
}

@keyframes owed-highlight {
  0% {
    background-color: rgb(255 255 255);
    transform: scale(1);
  }

  35% {
    background-color: rgb(255 255 255);
    transform: scale(1);
  }

  60% {
    background-color: rgb(250 204 21); /* yellow-400 */
    transform: scale(1.02);
  }

  100% {
    background-color: rgb(254 249 195); /* yellow-100 */
    transform: scale(1);
  }
}

.owed-highlight {
  animation: owed-highlight 1.8s ease-out forwards;
}

@keyframes owed-glow {
  0% {
    box-shadow: 0 0 0 rgba(250, 204, 21, 0);
  }

  50% {
    box-shadow: 0 0 14px rgba(250, 204, 21, 0.45);
  }

  100% {
    box-shadow: 0 0 0 rgba(250, 204, 21, 0);
  }
}

@keyframes owed-rise {
  0% {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.owed-animate {
  animation:
    owed-rise 0.45s ease-out,
    owed-glow 1.4s ease-out;
}

@keyframes table-fade-in {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.995);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.table-fade-in {
  animation: table-fade-in 0.7s ease-out forwards;
}

@keyframes money-pop {
  0% {
    transform: scale(1);
  }

  30% {
    transform: scale(2);
  }

  100% {
    transform: scale(1);
  }
}

.money-pop {
  display: inline-block;
  animation: money-pop 1.8s ease-out;
  animation-delay: 1.8s; /* waits for highlight to mostly finish */
  animation-fill-mode: both;
}