:root {
  --accent-color: #00d8a5;
  --accent2-color: #f2ea02;
  --accent3-color: #e6248e;
  --accent4-color: #2c62f8;
  --accent5-color: #ff5722;
  --primary-color: #1db954;
  --dark-text-color: #ffffff;
  --gray-text-color: #b3b3b3;
  --button-padding-x: 20px;
  --button-padding-y: 10px;
  --font-family-body: 'Nunito', sans-serif;
  --light-text-color: #000000;
  --dark-border-color: #282828;
  --light-border-color: #d9f8e7;
  --font-family-heading: 'Poppins', sans-serif;
  --button-rounded-radius: 50px;
  --dark-background-color: #121212;
  --light-background-color: #aaf0c8;
  --medium-background-color: #8ee6b5;
  --primary-button-text-color: #ffffff;
  --secondary-button-bg-color: #181818;
  --secondary-button-text-color: #ffffff;
  --primary-button-hover-bg-color: #1ed760;
  --primary-button-hover-text-color: #ffffff;
  --secondary-button-hover-bg-color: #282828;
  --secondary-button-hover-text-color: #ffffff;
}
html {
  scroll-behavior: smooth;
}
/* THIS IS THE FIX: Prevents animations from creating horizontal overflow */
body {
  margin: 0;
  padding: 0;
  border: none;
  background-color: var(--dark-background-color);
  font-family: var(--font-family-body);
  overflow-x: hidden;
}
* {
  box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
}
.modal-content {
  max-height: 80vh;
}

/* --- Scroll Animation Styles --- */
.scroll-animate {
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  transition: opacity 1.2s cubic-bezier(0.19, 1, 0.22, 1), transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}
.scroll-animate.animate-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.scroll-animate.slide-from-right {
  opacity: 0;
  transform: translateX(50px) scale(0.98);
  transition: opacity 1.2s cubic-bezier(0.19, 1, 0.22, 1), transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}
.scroll-animate.slide-from-right.animate-visible {
  opacity: 1;
  transform: translateX(0) scale(1);
}

/* --- Hero Element Animations --- */
@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(180deg); }
}
@keyframes float-delayed {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(-180deg); }
}
@keyframes float-slow {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(90deg); }
}
.animate-float {
  animation: float 6s ease-in-out infinite;
}
.animate-float-delayed {
  animation: float-delayed 8s ease-in-out infinite;
}
.animate-float-slow {
  animation: float-slow 10s ease-in-out infinite;
}

/* --- Equalizer Styles --- */
.equalizer-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
}
.equalizer-label {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}
.equalizer {
  display: flex;
  align-items: flex-end;
  height: 30px;
  width: 60px;
  gap: 2px;
  background-color: transparent;
  border-radius: 2px;
}
.bar {
  width: 4px;
  background-color: var(--primary-color);
  border-radius: 1px;
  height: 5px;
  transition: height 0.6s ease-in-out;
}

/* --- Helper Classes --- */
.equalizer-title-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.filter-btn.active {
  background-color: var(--primary-color);
  color: var(--primary-button-text-color);
  border-color: var(--primary-color);
}