@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

* {
  font-family: 'Inter', sans-serif;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

*::-webkit-scrollbar {
  display: none;
}

body {
  transition: background-color 0.3s ease, color 0.3s ease;
}


/* Classic checkerboard transparency pattern */
.bg-checker {
  background-image: linear-gradient(45deg, #f1f5f9 25%, transparent 25%), 
                    linear-gradient(-45deg, #f1f5f9 25%, transparent 25%), 
                    linear-gradient(45deg, transparent 75%, #f1f5f9 75%), 
                    linear-gradient(-45deg, transparent 75%, #f1f5f9 75%);
  background-size: 14px 14px;
  background-position: 0 0, 0 7px, 7px -7px, -7px 0px;
  background-color: #ffffff;
}

.dark .bg-checker {
  background-image: linear-gradient(45deg, #0f172a 25%, transparent 25%), 
                    linear-gradient(-45deg, #0f172a 25%, transparent 25%), 
                    linear-gradient(45deg, transparent 75%, #0f172a 75%), 
                    linear-gradient(-45deg, transparent 75%, #0f172a 75%);
  background-color: #1e293b;
}

/* Slider horizontal scrolling animations & behaviors */
#cardsSlider {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.card-item {
  scroll-snap-align: start;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-item:hover {
  transform: translateY(-2px);
}

/* Spin animation for gear processing state */
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.animate-spin-slow {
  animation: spin-slow 3s linear infinite;
}

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

.animate-in {
  animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Custom Format Pill Styles */
.format-pill {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Tab button transition styling */
.tab-btn {
  position: relative;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.tab-btn::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2.5px;
  background-color: #f97316; /* orange-500 */
  transform: scaleX(0);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.tab-btn:hover::after {
  transform: scaleX(0.4);
}

.tab-btn.active::after {
  transform: scaleX(1) !important;
}

/* Zebra striped animating progress bar for card loading */
.progress-bar-striped {
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
  );
  background-size: 16px 16px;
}

@keyframes progress-bar-stripes {
  0% { background-position: 0 0; }
  100% { background-position: 16px 0; }
}

.animate-stripes {
  animation: progress-bar-stripes 0.6s linear infinite;
}