/* ===== DJ Basit · Basit Musik — midnight studio (dark, premium, light-weight) ===== */
:root{
  --bg:#0A0B12;
  --bg-2:#0E0F1A;
  --surface:#14152200;          /* cards use translucent fill */
  --card:rgba(255,255,255,.035);
  --card-hover:rgba(255,255,255,.06);
  --text:#ECEDF6;
  --muted:#8B8DA6;
  --faint:#6A6C84;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.05);
  --a1:#7B6CFF;                  /* indigo */
  --a2:#FF6FB1;                  /* pink   */
  --grad:linear-gradient(120deg,var(--a1),var(--a2));
  --accent-soft:rgba(123,108,255,.16);
  --bar-h:84px;
  --radius:16px;
  --shadow:0 10px 40px rgba(0,0,0,.45);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
  padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom));
  overflow-x:hidden;
}
h1,h2,h3{font-family:"Space Grotesk",sans-serif; letter-spacing:-.02em; margin:0; line-height:1.04}
a{color:inherit; text-decoration:none}
button{font-family:inherit}
::selection{background:var(--accent-soft)}
img{-webkit-user-drag:none}

/* =========================================================
   Lightweight ambient background — compositor only, no blur filter
   ========================================================= */
.bg{position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
  background:
    radial-gradient(1200px 700px at 75% -5%, rgba(123,108,255,.10), transparent 60%),
    radial-gradient(900px 600px at 10% 110%, rgba(255,111,177,.08), transparent 60%),
    var(--bg)}
/* faint static dot texture (free) */
.bg::after{content:""; position:absolute; inset:0; opacity:.35;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:42px 42px}
/* outer = JS parallax layer · inner <i> = slow CSS drift (transform only) */
.orb{position:absolute; width:50vmax; height:50vmax; will-change:transform; transition:transform 1s var(--ease)}
.orb i{display:block; width:100%; height:100%; border-radius:50%; will-change:transform; opacity:.55;
  animation:drift 22s var(--ease) infinite alternate}
.orb-a{top:-20%; left:-12%}
.orb-a i{background:radial-gradient(circle at 50% 50%, rgba(123,108,255,.55), transparent 62%)}
.orb-b{bottom:-26%; right:-14%}
.orb-b i{background:radial-gradient(circle at 50% 50%, rgba(255,111,177,.42), transparent 62%); animation-duration:28s; animation-delay:-6s}
.orb-c{top:28%; left:42%}
.orb-c i{background:radial-gradient(circle at 50% 50%, rgba(80,180,255,.30), transparent 62%); animation-duration:34s; animation-delay:-12s; opacity:.4}
.beam{position:absolute; top:-30%; left:50%; width:140%; height:60%; transform:translateX(-50%) rotate(-8deg);
  background:linear-gradient(90deg,transparent, rgba(123,108,255,.05) 45%, rgba(255,111,177,.05) 55%, transparent);
  filter:none}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(6%,4%,0) scale(1.12)}
}

/* ----- Nav ----- */
.nav{position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:24px;
  padding:15px clamp(18px,5vw,56px); transition:background .3s, box-shadow .3s, border-color .3s;
  border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(10,11,18,.72); backdrop-filter:blur(10px); border-bottom-color:var(--line)}
.brand{display:flex; align-items:center; gap:11px; margin-right:auto}
.brand-mark{display:flex; align-items:flex-end; gap:3px; height:22px}
.brand-mark i{width:3px; border-radius:2px; height:40%; background:var(--a1);
  animation:eq 1.1s var(--ease) infinite alternate}
.brand-mark i:nth-child(2){height:90%; animation-delay:.15s; background:var(--a2)}
.brand-mark i:nth-child(3){height:55%; animation-delay:.3s}
.brand-mark i:nth-child(4){height:75%; animation-delay:.45s; background:var(--a2)}
.brand-text strong{display:block; font-family:"Space Grotesk"; font-size:15px; letter-spacing:.05em}
.brand-text small{display:block; font-size:10px; letter-spacing:.26em; color:var(--muted); text-transform:uppercase}
.links{display:flex; gap:4px}
.links a{padding:8px 14px; border-radius:999px; font-size:14px; font-weight:500; color:var(--muted);
  transition:color .2s, background .2s}
.links a:hover{color:var(--text)}
.links a.active{color:#fff; background:var(--accent-soft)}
.menu-btn{display:none; flex-direction:column; gap:5px; width:40px; height:40px; align-items:center;
  justify-content:center; background:var(--card); border:1px solid var(--line); border-radius:12px; cursor:pointer}
.menu-btn span{width:18px; height:2px; background:var(--text); border-radius:2px; transition:.25s}
.menu-btn[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* ----- Layout ----- */
.wrap{max-width:1120px; margin:0 auto; padding:0 clamp(18px,5vw,56px)}
.eyebrow{font-size:11px; letter-spacing:.26em; text-transform:uppercase; font-weight:600;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.muted{color:var(--muted)}
section{margin:clamp(48px,8vw,100px) 0}

.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.in{opacity:1; transform:none}

/* ----- Hero ----- */
.hero{padding:clamp(64px,13vw,140px) 0 0}
.hero .eyebrow{margin-bottom:18px; opacity:0; animation:rise .7s var(--ease) .05s forwards}
.hero h1{font-size:clamp(52px,13vw,150px); font-weight:700}
.hero h1 .line{display:block; overflow:hidden}
.hero h1 .line span{display:block; transform:translateY(110%); animation:rise .9s var(--ease) forwards}
.hero h1 .line:nth-child(1) span{animation-delay:.12s}
.hero h1 .line:nth-child(2) span{animation-delay:.24s; background:var(--grad);
  -webkit-background-clip:text; background-clip:text; color:transparent}
.hero p.lead{max-width:560px; margin:26px 0 34px; font-size:clamp(16px,2vw,19px); color:var(--muted);
  opacity:0; animation:rise .8s var(--ease) .4s forwards}
.hero .cta{display:flex; gap:12px; flex-wrap:wrap; opacity:0; animation:rise .8s var(--ease) .52s forwards}
.btn{display:inline-flex; align-items:center; gap:9px; padding:13px 22px; border-radius:999px;
  font-weight:600; font-size:14.5px; border:1px solid var(--line); background:var(--card); color:var(--text);
  cursor:pointer; transition:transform .2s var(--ease), box-shadow .2s, border-color .2s, background .2s}
.btn svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.btn.primary{background:var(--grad); color:#0A0B12; border-color:transparent; font-weight:700}
.btn.primary:hover{box-shadow:0 8px 28px rgba(123,108,255,.35)}
.btn:hover{transform:translateY(-2px); border-color:var(--line)}
.btn:not(.primary):hover{background:var(--card-hover)}

.platforms{display:flex; flex-wrap:wrap; gap:10px; margin-top:48px}
.platforms a{display:inline-flex; align-items:center; gap:8px; padding:9px 15px; border-radius:999px;
  background:var(--card); border:1px solid var(--line); font-size:13px; font-weight:500; color:var(--muted); transition:.2s}
.platforms a:hover{color:var(--text); border-color:var(--a1); transform:translateY(-2px)}
.platforms .dot{width:7px; height:7px; border-radius:50%; background:var(--grad)}

/* ----- Section heads ----- */
.shead{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:26px}
.shead h2{font-size:clamp(26px,4vw,42px)}
.shead .eyebrow{margin-bottom:8px}

/* ----- Release rail ----- */
.rail{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(230px,1fr); gap:18px;
  overflow-x:auto; padding-bottom:10px; scroll-snap-type:x mandatory; scrollbar-width:thin}
.card{scroll-snap-align:start; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; cursor:pointer; transition:transform .25s var(--ease), border-color .25s, background .25s}
.card:hover{transform:translateY(-4px); border-color:var(--line); background:var(--card-hover)}
.card .thumb{position:relative; aspect-ratio:16/9; background:#15161f; overflow:hidden}
.card .thumb img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s var(--ease)}
.card:hover .thumb img{transform:scale(1.05)}
.card .play-fab{position:absolute; right:12px; bottom:12px; width:44px; height:44px; border-radius:50%;
  background:var(--grad); display:grid; place-items:center; opacity:0; transform:translateY(8px) scale(.9);
  transition:.25s var(--ease); box-shadow:0 8px 22px rgba(123,108,255,.5)}
.card:hover .play-fab{opacity:1; transform:none}
.card .play-fab svg{width:16px; height:16px; fill:#0A0B12; margin-left:2px}
.card .info{padding:13px 15px}
.card .info b{font-size:14px; font-weight:600; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.35}
.card .info span{font-size:12px; color:var(--faint)}

/* ----- Audio list ----- */
.tracklist{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.track{display:grid; grid-template-columns:34px 52px 1fr auto; align-items:center; gap:14px;
  padding:10px 16px; cursor:pointer; border-bottom:1px solid var(--line-2); transition:background .15s}
.track:last-child{border-bottom:0}
.track:hover{background:var(--card-hover)}
.track .idx{font-size:13px; color:var(--faint); text-align:center; font-variant-numeric:tabular-nums}
.track:hover .idx{color:var(--text)}
.track .art{width:52px; height:52px; border-radius:10px; object-fit:cover; background:#15161f}
.track .tname{font-weight:500; font-size:14.5px; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden}
.track .tsub{font-size:12.5px; color:var(--faint)}
.track .dur{font-size:13px; color:var(--faint); font-variant-numeric:tabular-nums}
.track.playing{background:var(--accent-soft)}
.track.playing .tname{color:#fff}
.track.playing .idx{display:none}
.track .live-eq{display:none; gap:2px; align-items:flex-end; height:16px; justify-content:center}
.track.playing .live-eq{display:flex}
.track .live-eq i{width:2.5px; background:var(--a2); border-radius:2px; height:30%; animation:eq .9s var(--ease) infinite alternate}
.track .live-eq i:nth-child(2){animation-delay:.2s; background:var(--a1)} .track .live-eq i:nth-child(3){animation-delay:.4s}

/* ----- Spotify ----- */
.spotify{margin-top:22px; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line)}
.spotify iframe{display:block; width:100%; border:0}

/* ----- Video page (stage scrolls naturally; player tracks it on this route only) ----- */
.videopage .stage-wrap{margin-bottom:30px}
.video-stage{width:100%; aspect-ratio:16/9; border-radius:var(--radius); background:#000;
  border:1px solid var(--line); overflow:hidden; box-shadow:var(--shadow)}
.stage-cap{margin-top:12px; font-family:"Space Grotesk"; font-size:18px; font-weight:600}
.video-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:18px}

/* ----- About ----- */
.about{display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(30px,6vw,72px); align-items:start}
.about h2{font-size:clamp(30px,5vw,56px); margin-bottom:20px}
.about p{color:var(--muted); margin:0 0 16px; max-width:48ch}
.contact{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px}
.contact h3{font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:14px}
.social{display:flex; flex-direction:column}
.social a{display:flex; align-items:center; justify-content:space-between; padding:14px 4px;
  border-bottom:1px solid var(--line-2); font-weight:500; transition:.2s}
.social a:last-child{border-bottom:0}
.social a:hover{color:#fff; padding-left:8px}
.social a .h{color:var(--faint); font-weight:400; font-size:13px}

/* ----- States ----- */
.state{text-align:center; padding:56px 20px; color:var(--muted)}
.state b{display:block; color:var(--text); font-family:"Space Grotesk"; font-size:18px; margin-bottom:6px}
.state .btn{margin-top:18px}
.skeleton .track{pointer-events:none}
.skeleton .art,.skeleton .tname,.skeleton .tsub{background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.09) 37%,rgba(255,255,255,.04) 63%);
  background-size:400% 100%; animation:shimmer 1.4s infinite; color:transparent; border-radius:6px}
.skeleton .tname{height:13px; width:60%} .skeleton .tsub{height:11px; width:35%; margin-top:6px}
.loadmore{margin:26px auto 0; display:block}

/* ----- Footer ----- */
.foot{border-top:1px solid var(--line); margin-top:60px; padding:30px 0; color:var(--faint); font-size:13px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px}

/* ===== Player engine host ===== */
.player-host{position:fixed; z-index:30; border-radius:12px; overflow:hidden; background:#000;
  box-shadow:var(--shadow); opacity:0; pointer-events:none;
  transition:top .34s var(--ease), left .34s var(--ease), width .34s var(--ease), height .34s var(--ease), opacity .3s}
.player-host.live{opacity:1; pointer-events:auto}
.player-host.no-anim{transition:opacity .3s}
.player-host #ytFrame,.player-host iframe{width:100%; height:100%; border:0; display:block}

/* ===== Bottom bar (solid translucent, no backdrop blur on scroll = cheaper) ===== */
.bar{position:fixed; left:0; right:0; bottom:0; z-index:40; height:var(--bar-h);
  display:grid; grid-template-columns:minmax(190px,1fr) minmax(280px,2fr) minmax(160px,1fr);
  align-items:center; gap:18px; padding:0 clamp(16px,4vw,40px); padding-bottom:env(safe-area-inset-bottom);
  background:rgba(12,13,22,.94); border-top:1px solid var(--line)}
.bar-eq{position:absolute; top:0; left:0; right:0; height:2px; display:flex; opacity:0; transition:opacity .3s}
.bar[data-state="playing"] .bar-eq{opacity:1}
.bar-eq i{flex:1; background:var(--grad); transform-origin:left; animation:wave 1.6s var(--ease) infinite}
.bar-eq i:nth-child(2){animation-delay:.2s}.bar-eq i:nth-child(3){animation-delay:.4s}
.bar-eq i:nth-child(4){animation-delay:.6s}.bar-eq i:nth-child(5){animation-delay:.8s}

.bar-now{display:flex; align-items:center; gap:13px; min-width:0}
.bar-cover{position:relative; width:58px; height:58px; flex:none; border-radius:12px; overflow:hidden;
  background:#15161f; display:grid; place-items:center; border:1px solid var(--line); cursor:pointer;
  transition:box-shadow .3s, transform .2s var(--ease)}
.bar-cover:hover{transform:translateY(-1px)}
.bar-cover #barCover{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none}
.bar:not([data-state="idle"]) .bar-cover #barCover{display:block}
.bar[data-state="playing"] .bar-cover{box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 8px 22px rgba(123,108,255,.4)}
.cover-ph{color:var(--faint); font-size:20px}
.bar[data-state="idle"] .cover-ph{display:block}
.bar:not([data-state="idle"]) .cover-ph{display:none}
.bar-meta{min-width:0}
.bar-title{font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bar-sub{font-size:12px; color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.bar-controls{display:flex; flex-direction:column; gap:7px; align-items:center; min-width:0}
.bar-buttons{display:flex; align-items:center; gap:14px}
.ctl{width:36px; height:36px; border-radius:50%; border:0; background:transparent; cursor:pointer;
  display:grid; place-items:center; color:var(--text); transition:transform .18s var(--ease), background .2s, color .2s}
.ctl svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linejoin:round; stroke-linecap:round}
.ctl:hover{background:var(--card-hover)}
.ctl:active{transform:scale(.92)}
.ctl-play{width:44px; height:44px; background:var(--grad); color:#0A0B12}
.ctl-play:hover{box-shadow:0 6px 20px rgba(123,108,255,.45)}
.ctl-play svg{width:20px; height:20px; fill:#0A0B12; stroke:none}
.ctl-play .ic-pause{display:none}
.bar[data-state="playing"] .ctl-play .ic-play{display:none}
.bar[data-state="playing"] .ctl-play .ic-pause{display:block}
.bar-seek{display:flex; align-items:center; gap:10px; width:100%}
.t{font-size:11px; color:var(--faint); font-variant-numeric:tabular-nums; min-width:34px; text-align:center}

.bar-extra{display:flex; align-items:center; gap:10px; justify-content:flex-end}
.ctl-sm{width:34px; height:34px}
.ctl-sm svg{width:16px; height:16px}
.ic-mute{display:none}
.bar.muted .ic-vol{display:none}
.bar.muted .ic-mute{display:block; stroke:var(--a2)}

/* range inputs */
input[type=range]{-webkit-appearance:none; appearance:none; height:4px; border-radius:99px; background:var(--line); cursor:pointer; outline:none}
.seek{flex:1}
.vol{width:90px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:13px; height:13px; border-radius:50%;
  background:#fff; border:0; box-shadow:0 1px 4px rgba(0,0,0,.5); transition:transform .15s}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.25)}
input[type=range]::-moz-range-thumb{width:13px; height:13px; border-radius:50%; background:#fff; border:0}
.seek{background:linear-gradient(var(--a1),var(--a2)) no-repeat var(--line); background-size:var(--fill,0%) 100%}
.vol{background:var(--a1) no-repeat var(--line); background-size:var(--vfill,80%) 100%}

/* ===== Animations ===== */
@keyframes eq{from{height:25%}to{height:100%}}
@keyframes rise{to{transform:none; opacity:1}}
@keyframes wave{0%,100%{transform:scaleX(.4); opacity:.6}50%{transform:scaleX(1); opacity:1}}
@keyframes shimmer{to{background-position:-400% 0}}

/* ===== Responsive ===== */
@media (max-width:860px){
  .links{position:fixed; inset:62px 0 auto 0; flex-direction:column; gap:0; background:rgba(10,11,18,.97);
    backdrop-filter:blur(12px); border-bottom:1px solid var(--line); padding:8px clamp(18px,5vw,56px) 14px;
    transform:translateY(-130%); transition:transform .3s var(--ease); z-index:45}
  .links.open{transform:none}
  .links a{padding:13px 4px; border-radius:0}
  .menu-btn{display:flex}
  .about{grid-template-columns:1fr}
}
@media (max-width:680px){
  body{font-size:14px}
  .bar{grid-template-columns:1fr auto; gap:10px; height:auto; padding-top:8px; padding-bottom:calc(8px + env(safe-area-inset-bottom))}
  .bar-controls{order:3; grid-column:1/-1}
  .bar-extra{display:none}
  .bar-cover{width:48px}
  :root{--bar-h:118px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  .orb i,.beam{animation:none}
  .hero h1 .line span,.hero .eyebrow,.hero p.lead,.hero .cta{opacity:1; transform:none}
  .reveal{opacity:1; transform:none}
}