:root {
  --bg: #0b0b0f;
  --bg-2: #131318;
  --card: #17171d;
  --card-border: rgba(255, 255, 255, 0.06);
  --button: #1f1f27;
  --button-hover: #2b2b35;
  --text: #f5f5f7;
  --text-secondary: #9797a3;
  --accent: #6d6aff;
  --accent-2: #ff6723;
  --online: #23a55a;
  --idle: #f0b132;
  --dnd: #f23f43;
  --offline: #80848e;
}

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

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 currentColor; opacity: 0.5; }
  100% { box-shadow: 0 0 0 10px transparent; opacity: 0; }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(6px); }
}

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

@keyframes spotifyReveal {
  from { opacity: 0; transform: translateY(8px) scaleY(0.97); }
  to   { opacity: 1; transform: translateY(0) scaleY(1); }
}

@keyframes artPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(30, 215, 96, 0); }
  50%       { box-shadow: 0 0 0 5px rgba(30, 215, 96, 0.12); }
}

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

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

@keyframes glowSweep {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50%       { transform: translateY(7px); opacity: 1; }
}

@keyframes scrollHintPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(109, 106, 255, 0.35); }
  50%       { box-shadow: 0 0 0 8px rgba(109, 106, 255, 0); }
}