/* Fonts and Core Custom Styles */
body {
  font-family: 'Inter', sans-serif;
  background-color: #020617; /* slate-950 */
}

h1, h2, h3, h4, h5, h6, .font-outfit {
  font-family: 'Outfit', sans-serif;
}

/* Custom Glassmorphism style */
.glass-panel {
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Glowing card outline */
.glow-card-purple {
  box-shadow: 0 0 25px -5px rgba(139, 92, 246, 0.15);
  border-color: rgba(139, 92, 246, 0.3);
}

.glow-card-cyan {
  box-shadow: 0 0 25px -5px rgba(6, 182, 212, 0.15);
  border-color: rgba(6, 182, 212, 0.3);
}

/* Animations */
@keyframes bounce-slow {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

.animate-bounce-slow {
  animation: bounce-slow 3s infinite ease-in-out;
}

/* Shake animation for wrong answers */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.animate-shake {
  animation: shake 0.4s ease-in-out;
}

/* Pop animation for correct answers */
@keyframes pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

.animate-pop {
  animation: pop 0.3s ease-out;
}

/* Custom transitions and scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.6);
}

::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.3);
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 92, 246, 0.5);
}

/* Fade in class */
.fade-in {
  opacity: 0;
  transform: translateY(8px);
  animation: fadeIn 0.4s forwards cubic-bezier(0.16, 1, 0.3, 1);
}

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