/* Custom styles for Echo Music Discovery */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

body {
  font-family: var(--font-sans);
  background-color: #0b0f19;
  color: #f1f5f9;
  overflow-x: hidden;
}

/* Glassmorphism effects */
.glass-panel {
  background: rgba(18, 24, 38, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-card {
  background: rgba(22, 30, 49, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-card:hover {
  background: rgba(30, 41, 67, 0.75);
  border-color: rgba(139, 92, 246, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(139, 92, 246, 0.1);
}

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

::-webkit-scrollbar-track {
  background: #0b0f19;
}

::-webkit-scrollbar-thumb {
  background: #1f293d;
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #374151;
}

/* Music equalizer animated bars */
.equalizer-bar {
  display: inline-block;
  width: 3px;
  background: #a855f7;
  border-radius: 9999px;
  animation: equalize 1.2s ease-in-out infinite alternate;
}

.equalizer-bar:nth-child(1) { height: 16px; animation-delay: 0.1s; }
.equalizer-bar:nth-child(2) { height: 22px; animation-delay: 0.3s; }
.equalizer-bar:nth-child(3) { height: 12px; animation-delay: 0.5s; }
.equalizer-bar:nth-child(4) { height: 18px; animation-delay: 0.2s; }

@keyframes equalize {
  0% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
  100% { transform: scaleY(0.6); }
}

/* Glowing badge */
.glow-primary {
  box-shadow: 0 0 20px -3px rgba(139, 92, 246, 0.35);
}

/* Vue Cloak to prevent raw delimiter flicker */
[v-cloak] {
  display: none !important;
}