@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --background: #121212;
  --foreground: #FFFFFF;

  /* Spotify Colors */
  --spotify-base: #121212;
  --spotify-sidebar: #000000;
  --spotify-player: #000000;
  --spotify-highlight: #1DB954;
  --spotify-hover: #282828;
  --spotify-text-main: #FFFFFF;
  --spotify-text-muted: #B3B3B3;
  --spotify-text-subdued: #A7A7A7;
}

@layer utilities {
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

  .no-scrollbar {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
  }
}

body {
  background: var(--spotify-base);
  color: var(--spotify-text-main);
  /* font-family set in layout via className */
}

/* Soundwave Animations for Logo */
@keyframes soundwave-1 {
  0%, 100% { height: 12px; }
  50% { height: 8px; }
}

@keyframes soundwave-2 {
  0%, 100% { height: 20px; }
  50% { height: 10px; }
}

@keyframes soundwave-3 {
  0%, 100% { height: 16px; }
  50% { height: 6px; }
}

@keyframes soundwave-4 {
  0%, 100% { height: 8px; }
  50% { height: 14px; }
}

.animate-soundwave-1 { animation: soundwave-1 0.8s ease-in-out infinite; }
.animate-soundwave-2 { animation: soundwave-2 0.6s ease-in-out infinite; }
.animate-soundwave-3 { animation: soundwave-3 0.7s ease-in-out infinite; }
.animate-soundwave-4 { animation: soundwave-4 0.9s ease-in-out infinite; }

/* Fade-in animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-in { animation: fadeIn 0.5s ease-out forwards; }