/* ============ DJ SITE — dark neon theme ============ */
:root{
  --bg:#07070d;
  --panel:#0e0e1a;
  --neon1:#b026ff;
  --neon2:#00e5ff;
  --neon3:#ff2d78;
  --text:#eaeaf2;
  --muted:#8a8aa3;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  overflow-x:hidden;
}
::selection{background:var(--neon1);color:#fff}

/* ---------- equalizer background ---------- */
.eq-bg{
  position:fixed;inset:auto 0 0 0;height:45vh;
  display:flex;align-items:flex-end;gap:6px;
  padding:0 10px;z-index:0;pointer-events:none;opacity:.35;
}
.eq-bg span{
  flex:1;min-width:8px;border-radius:6px 6px 0 0;
  background:linear-gradient(180deg,var(--neon2),var(--neon1) 60%,transparent);
  animation:eq 1.6s ease-in-out infinite;
  filter:blur(.4px);
}
@keyframes eq{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
.eq-bg span:nth-child(odd){animation-duration:1.1s}
.eq-bg span:nth-child(3n){animation-duration:2s;animation-delay:.3s}
.eq-bg span:nth-child(4n){animation-duration:1.4s;animation-delay:.6s}
.eq-bg span:nth-child(5n){animation-duration:1.8s;animation-delay:.15s}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 5vw;
  background:linear-gradient(180deg,rgba(7,7,13,.95),rgba(7,7,13,0));
}
.nav-logo{font-family:'Anton',sans-serif;font-size:1.4rem;letter-spacing:2px}
.nav-logo span{color:var(--neon2)}
.nav-links a{
  color:var(--muted);text-decoration:none;margin-left:26px;
  font-size:.8rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;
  transition:color .2s;
}
.nav-links a:hover{color:var(--neon2);text-shadow:0 0 12px var(--neon2)}

/* ---------- hero ---------- */
.hero{
  position:relative;z-index:1;min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:0 5vw;
}
.hero-kicker{
  color:var(--neon2);letter-spacing:6px;text-transform:uppercase;
  font-size:.8rem;font-weight:600;margin-bottom:14px;
}
.hero-title{
  font-family:'Anton',sans-serif;
  font-size:clamp(3rem,11vw,9rem);
  line-height:.95;letter-spacing:2px;text-transform:uppercase;
  background:linear-gradient(90deg,var(--neon1),var(--neon2),var(--neon3),var(--neon1));
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:flow 6s linear infinite;
  filter:drop-shadow(0 0 25px rgba(176,38,255,.45));
}
@keyframes flow{to{background-position:300% 0}}
.hero-tagline{color:var(--muted);margin-top:18px;font-size:1.05rem;letter-spacing:1px}
.hero-cta{
  margin-top:34px;display:inline-block;
  padding:14px 38px;border:1px solid var(--neon2);border-radius:999px;
  color:var(--neon2);text-decoration:none;font-weight:600;letter-spacing:2px;
  transition:.25s;
}
.hero-cta:hover{
  background:var(--neon2);color:#000;
  box-shadow:0 0 35px var(--neon2);
}
.scroll-hint{
  position:absolute;bottom:26px;color:var(--muted);
  font-size:.7rem;letter-spacing:3px;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.chev{width:10px;height:10px;border-right:2px solid var(--neon2);border-bottom:2px solid var(--neon2);
  transform:rotate(45deg);animation:bob 1.4s ease-in-out infinite}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 6px}}

/* ---------- sections ---------- */
.section{position:relative;z-index:1;padding:110px 5vw;max-width:1200px;margin:0 auto}
.section-title{
  font-family:'Anton',sans-serif;font-size:clamp(2.2rem,6vw,4.5rem);
  letter-spacing:3px;text-transform:uppercase;
}
.section-title em{
  font-style:normal;
  background:linear-gradient(90deg,var(--neon1),var(--neon2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.section-sub{color:var(--muted);margin:10px 0 44px;letter-spacing:1px}

/* ---------- released track cards ---------- */
.grid{
  display:grid;gap:26px;
  grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
}
.card{
  background:var(--panel);
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;overflow:hidden;cursor:pointer;
  transition:transform .25s,border-color .25s,box-shadow .25s;
}
.card:hover{
  transform:translateY(-6px);
  border-color:var(--neon1);
  box-shadow:0 18px 50px rgba(176,38,255,.28);
}
.card-thumb{position:relative;aspect-ratio:16/9;overflow:hidden}
.card-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.card:hover .card-thumb img{transform:scale(1.06)}
.card-play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(7,7,13,.35);opacity:0;transition:opacity .25s;
}
.card:hover .card-play{opacity:1}
.card-play span{
  width:64px;height:64px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,229,255,.9);color:#000;font-size:1.3rem;
  box-shadow:0 0 30px var(--neon2);
}
.card-body{padding:16px 18px;display:flex;align-items:center;gap:14px}
.card-num{
  font-family:'Anton',sans-serif;color:var(--neon1);
  font-size:1.4rem;min-width:38px;
}
.card-title{font-weight:600;letter-spacing:.5px}
.card-tag{
  margin-left:auto;font-size:.65rem;letter-spacing:2px;color:var(--neon2);
  border:1px solid rgba(0,229,255,.4);padding:4px 10px;border-radius:999px;
  white-space:nowrap;
}

/* ---------- inline player ---------- */
.player-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  background:rgba(7,7,13,.97);border-top:1px solid var(--neon1);
  padding:14px 5vw;display:flex;align-items:center;gap:16px;
  animation:slideup .3s ease;
  box-shadow:0 -10px 40px rgba(176,38,255,.3);
}
.player-bar[hidden]{display:none !important}
@keyframes slideup{from{transform:translateY(100%)}to{transform:translateY(0)}}
.player-frame-wrap{flex:1;max-width:560px;aspect-ratio:16/9;margin:0 auto}
.player-frame-wrap iframe{width:100%;height:100%;border:0;border-radius:10px}
.player-close{
  background:none;border:1px solid var(--muted);color:var(--text);
  width:38px;height:38px;border-radius:50%;cursor:pointer;font-size:1rem;
  transition:.2s;flex-shrink:0;
}
.player-close:hover{border-color:var(--neon3);color:var(--neon3);cursor:pointer}

/* ---------- upcoming ---------- */
.upcoming-list{display:flex;flex-direction:column;gap:16px}
.up-row{
  display:flex;align-items:center;gap:22px;
  background:var(--panel);border:1px solid rgba(255,255,255,.06);
  border-radius:14px;padding:20px 24px;
  transition:border-color .25s,transform .25s;
}
.up-row:hover{border-color:var(--neon2);transform:translateX(6px)}
.up-date{
  font-family:'Anton',sans-serif;text-align:center;min-width:64px;
  border-right:1px solid rgba(255,255,255,.08);padding-right:22px;
}
.up-date .d{font-size:1.8rem;color:var(--neon2);line-height:1}
.up-date .m{font-size:.7rem;letter-spacing:3px;color:var(--muted);text-transform:uppercase}
.up-info{flex:1}
.up-title{font-weight:800;font-size:1.15rem;letter-spacing:.5px}
.up-count{color:var(--muted);font-size:.85rem;margin-top:4px}
.up-status{
  font-size:.65rem;letter-spacing:2px;font-weight:600;
  padding:6px 14px;border-radius:999px;white-space:nowrap;
  border:1px solid var(--neon3);color:var(--neon3);
  box-shadow:0 0 14px rgba(255,45,120,.25);
}
.up-empty{color:var(--muted);padding:30px 0;letter-spacing:1px}

/* ---------- socials ---------- */
.social-row{display:flex;flex-wrap:wrap;gap:16px}
.social-row a{
  padding:13px 30px;border-radius:999px;text-decoration:none;
  border:1px solid rgba(255,255,255,.15);color:var(--text);
  font-weight:600;letter-spacing:1.5px;font-size:.85rem;text-transform:uppercase;
  transition:.25s;
}
.social-row a:hover{
  border-color:var(--neon2);color:var(--neon2);
  box-shadow:0 0 25px rgba(0,229,255,.3);
}
.footer{margin-top:80px;color:var(--muted);font-size:.75rem;letter-spacing:2px;text-align:center}

@media(max-width:640px){
  .nav-links a{margin-left:14px;font-size:.7rem}
  .up-row{flex-wrap:wrap}
  .player-frame-wrap{max-width:100%}
}