@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  --bg-primary: #080a10;
  --bg-secondary: #0f1422;
  --bg-card: rgba(22, 28, 45, 0.65);
  --border-card: rgba(255, 255, 255, 0.08);
  --primary-accent: #a855f7;
  --secondary-accent: #ec4899;
  --cyan-accent: #06b6d4;
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
}

html {
  scroll-behavior: smooth;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-main);
  overflow-x: hidden;
}

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

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #080a10;
}
::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #334155;
}

/* Glassmorphism Styles */
.glass-panel {
  background: rgba(15, 20, 34, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-card {
  background: rgba(20, 26, 43, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-card:hover {
  border-color: rgba(168, 85, 247, 0.35);
  transform: translateY(-4px);
  box-shadow: 0 16px 36px -10px rgba(168, 85, 247, 0.15);
}

.glass-button {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.2s ease;
}

.glass-button:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Gradient Text & Highlights */
.gradient-text {
  background: linear-gradient(135deg, #c084fc 0%, #f472b6 45%, #38bdf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-text-gold {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #f97316 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Ambient Radial Glows */
.ambient-glow {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
}

.glow-purple {
  background: radial-gradient(circle, #9333ea, transparent 70%);
}

.glow-pink {
  background: radial-gradient(circle, #db2777, transparent 70%);
}

.glow-cyan {
  background: radial-gradient(circle, #0284c7, transparent 70%);
}

/* Equalizer Bars Animation */
.eq-bar {
  width: 4px;
  background: linear-gradient(to top, #8b5cf6, #ec4899);
  border-radius: 2px;
  animation: equalize 1.2s infinite ease-in-out alternate;
}

.eq-bar:nth-child(1) { height: 12px; animation-delay: 0.1s; }
.eq-bar:nth-child(2) { height: 26px; animation-delay: 0.3s; }
.eq-bar:nth-child(3) { height: 38px; animation-delay: 0.15s; }
.eq-bar:nth-child(4) { height: 22px; animation-delay: 0.4s; }
.eq-bar:nth-child(5) { height: 32px; animation-delay: 0.25s; }
.eq-bar:nth-child(6) { height: 16px; animation-delay: 0.35s; }

.paused .eq-bar {
  animation-play-state: paused;
  height: 6px !important;
  opacity: 0.4;
}

@keyframes equalize {
  0% { height: 8px; }
  50% { height: 36px; }
  100% { height: 14px; }
}

/* Pulsing Badge Indicator */
.live-pulse {
  position: relative;
}
.live-pulse::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 50%;
  background: inherit;
  animation: ripple 1.8s infinite ease-out;
  opacity: 0.6;
}

@keyframes ripple {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* Rotating CD / Disc */
.rotating-disc {
  animation: spin 14s linear infinite;
}
.rotating-disc.paused {
  animation-play-state: paused;
}
@keyframes spin {
  100% { transform: rotate(360deg); }
}

/* Tab active state */
.tab-btn.active {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.25), rgba(236, 72, 153, 0.25));
  border-color: rgba(168, 85, 247, 0.6);
  color: #ffffff;
  box-shadow: 0 0 15px rgba(168, 85, 247, 0.2);
}

/* Audio Player Floating Bar */
.player-dock {
  background: rgba(11, 15, 26, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 25px rgba(168, 85, 247, 0.15);
}

/* Micro-badge */
.tech-badge {
  background: rgba(168, 85, 247, 0.1);
  border: 1px solid rgba(168, 85, 247, 0.25);
  color: #d8b4fe;
}