* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Inter', sans-serif;
background: linear-gradient(to bottom, #121212, #000000);
color: white;
scroll-behavior: smooth;
}

/* Background image overlay */
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("album.jpg") no-repeat center/cover;
z-index: -1;
opacity: 0.2;
}

/* Navbar */
nav {
position: fixed;
width: 100%;
top: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 40px;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(255,255,255,0.1);
}

nav h1 {
font-size: 1.4rem;
letter-spacing: 2px;
}

nav a {
color: #b3b3b3;
margin-left: 20px;
text-decoration: none;
transition: 0.3s;
}

nav a:hover {
color: white;
}

/* Sections */
.section {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}

/* Home */
.overlay {
text-align: center;
}

.overlay h2 {
font-size: 3rem;
letter-spacing: 3px;
text-shadow: 0 0 20px rgba(29,185,84,0.5);
}

.overlay p {
margin-top: 10px;
color: #b3b3b3;
}

/* Tracklist */
.tracklist {
background: rgba(18,18,18,0.95);
padding: 30px;
border-radius: 12px;
width: 400px;
}

.tracklist h2 {
margin-bottom: 15px;
font-size: 1.5rem;
}

.tracklist ol {
list-style: none;
}

.tracklist li {
padding: 12px 10px;
border-radius: 6px;
display: flex;
justify-content: space-between;
transition: 0.2s;
color: #b3b3b3;
cursor: pointer;
}

.tracklist li:hover {
background: rgba(255,255,255,0.1);
color: white;
transform: translateX(5px);
}

/* Active song */
.tracklist li.active {
color: #1db954;
font-weight: bold;
}

/* Player */
.player {
margin-top: 20px;
text-align: center;
}

#nowPlaying {
margin-bottom: 10px;
color: #1db954;
font-weight: bold;
}

audio {
width: 100%;
filter: invert(1) hue-rotate(180deg);
}
/* ===== Track click animation ===== */
.tracklist li {
position: relative;
overflow: hidden;
}

.tracklist li::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: -100%;
background: rgba(29,185,84,0.2);
transition: 0.4s;
}

.tracklist li:active::after {
left: 0;
}

/* ===== Active pulse glow ===== */
.tracklist li.active {
color: #1db954;
font-weight: bold;
animation: pulseGlow 1.2s ease;
}

@keyframes pulseGlow {
0% { text-shadow: 0 0 0px #1db954; }
50% { text-shadow: 0 0 12px #1db954; }
100% { text-shadow: 0 0 0px #1db954; }
}

/* ===== Now Playing animation ===== */
#nowPlaying {
transition: all 0.4s ease;
}

.fade-out {
opacity: 0;
transform: translateY(10px);
}

.fade-in {
opacity: 1;
transform: translateY(0);
}

/* ===== Audio fade feel (visual smoothness) ===== */
audio {
transition: opacity 0.4s ease;
}
/* ===== Bio Section ===== */
.bio-container {
    background: rgba(18,18,18,0.95);
    padding: 30px;
    border-radius: 12px;
    width: 400px;
    text-align: center;
}

.bio-container button {
    margin-top: 15px;
    padding: 10px 20px;
    border: none;
    background: #1db954;
    color: white;
    cursor: pointer;
    border-radius: 6px;
    transition: 0.3s;
}

.bio-container button:hover {
    transform: scale(1.05);
}

/* ===== Modal Popup ===== */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    display: flex;
    justify-content: center;
    align-items: center;

    opacity: 0;
    pointer-events: none;
    transition: 0.3s ease;
}

.modal.show {
    opacity: 1;
    pointer-events: auto;
}

/* Pop-up animation */
.modal-content {
    background: #121212;
    padding: 30px;
    border-radius: 12px;
    width: 400px;
    text-align: center;
    transform: scale(0.7);
    transition: 0.3s ease;
}

.modal.show .modal-content {
    transform: scale(1);
}

#closeBio {
    position: absolute;
    right: 20px;
    top: 10px;
    font-size: 24px;
    cursor: pointer;
}