/* Custom Base and Utility Styles for Miqas */

@layer base {
  body {
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #07101C;
}
::-webkit-scrollbar-thumb {
  background: #1E3E62;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #C5A059;
}

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

/* Active Nav tab styling */
.nav-tab {
  color: #94A3B8;
  border-bottom: 2px solid transparent;
}
.nav-tab.active {
  color: #C5A059;
  border-bottom: 2px solid #C5A059;
  background-color: rgba(197, 160, 89, 0.05);
}

.mobile-nav-btn.active {
  color: #C5A059;
}

/* Gold Gradient Shimmer */
.gold-shimmer {
  background: linear-gradient(90deg, #997736 0%, #E8D49E 50%, #997736 100%);
  background-size: 200% auto;
  animation: shine 4s linear infinite;
}

@keyframes shine {
  to {
    background-position: 200% center;
  }
}

/* Interactive SVG & Canvas Hover effects */
#thobeSvg path, #thobeSvg rect, #thobeSvg circle {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Pulse animation for active step in tracking */
@keyframes stepPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(197, 160, 89, 0.6);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 0 0 8px rgba(197, 160, 89, 0);
  }
}

.tracking-active-node {
  animation: stepPulse 2s infinite ease-in-out;
}

/* Smooth tab transitions */
.tab-content {
  animation: fadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Toast animations */
.toast-slide {
  animation: toastIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}