*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Poppins, sans-serif;
}

body{
height:100vh;
overflow:hidden;
background:linear-gradient(270deg,#0b0b0f,#4c1d95,#9333ea,#0b0b0f);
background-size:600% 600%;
animation:bgMove 15s ease infinite;
color:white;
}

@keyframes bgMove{
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}

.hero{
height:100vh;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
position:relative;
z-index:2;
}

h1{
font-size:70px;
font-weight:600;
text-shadow:0 0 25px rgba(147,51,234,0.8);
}

.subtitle{
margin-top:10px;
font-size:20px;
opacity:0.8;
}

button{
margin-top:40px;
padding:5px 25px;;
font-size:18px;
border:none;
border-radius:40px;
background:#9333ea;
color:white;
cursor:pointer;
transition:0.3s;
box-shadow:0 0 20px rgba(147,51,234,0.7);
}

button:hover{
transform:scale(1.08);
box-shadow:0 0 35px rgba(147,51,234,1);
}

#particles{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1;
pointer-events:none;

}

.cursor-light{
position:fixed;
width:300px;
height:300px;
background:radial-gradient(circle,rgba(147,51,234,0.35),transparent 60%);
pointer-events:none;
transform:translate(-50%,-50%);
}



/* ------- */
#music-categories{
opacity:0;
transform:translateY(80px);
transition:1s;
padding:120px 10%;
}

#music-categories.show{
opacity:1;
transform:translateY(0);
}

.cards-container{
display:flex;
justify-content:center;
gap:30px;
flex-wrap:wrap;
}

.music-card{
width:220px;
border-radius:20px;
overflow:hidden;
background:rgba(255,255,255,0.05);
backdrop-filter:blur(15px);
box-shadow:0 0 30px rgba(170,0,255,0.4);
transition:0.4s;
cursor:pointer;
animation:float 6s ease-in-out infinite;
}

.music-card:hover{
transform:translateY(-15px) scale(1.05);
box-shadow:0 0 60px rgba(170,0,255,0.8);
}

.music-card img{
width:100%;
height:200px;
object-fit:cover;
}

.music-card h3{
color:white;
padding:10px;
}

.music-card p{
color:#aaa;
padding:0 10px 15px;
font-size:14px;
}

@keyframes float{
0%{transform:translateY(0)}
50%{transform:translateY(-12px)}
100%{transform:translateY(0)}
}


#backBtn{
  position: fixed;
  top: 30px;
  left: 30px;

  width: 52px;
  height: 52px;
  padding: 0;

  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;

  background: rgba(0,0,0,0.22);
  color: #fff;

  font-size: 20px;
  font-weight: 600;
  line-height: 52px;
  text-align: center;

  cursor: pointer;
  z-index: 9999;

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  box-shadow: 0 0 26px rgba(170,0,255,0.55);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;

  display: none; /* با JS روشن/خاموش میشه */
}

#backBtn:hover{
  transform: scale(1.08);
  background: rgba(0,0,0,0.30);
  box-shadow: 0 0 44px rgba(170,0,255,0.95);
}

.music-card-link {
  display: block;          /* لینک کل بلوک کارت باشد */
  text-decoration: none;   /* خط زیر متن نداشته باشد */
  color: inherit;          /* رنگ متن همان رنگ قبلی بماند */
}