@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom Animations used in TSX components */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

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

@keyframes zoomIn {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animate-shake {
  animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

.animate-in {
  animation-fill-mode: forwards;
  animation-duration: 0.3s;
  animation-timing-function: ease-out;
}

.slide-in-from-bottom {
  animation-name: slideInFromBottom;
}

.zoom-in {
  animation-name: zoomIn;
}

.fade-in {
  animation-name: fadeIn;
}

/* Utilities */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}