/* ============================================================
   PLAYER DOCK — persistent SoundCloud-driven bar
   ------------------------------------------------------------
   The audio itself comes from a hidden SoundCloud widget iframe
   (see js/player.js). This is only the skin: SoundCloud gets the
   play count, the site gets the interface.
   ============================================================ */

/* The real widget, parked offscreen. Keep it in the layout (not
   display:none) — hidden iframes get throttled or refuse to play. */
.sc-host{
  position:fixed; bottom:0; left:0;
  width:1px; height:1px; opacity:.001;
  pointer-events:none; border:0; z-index:-1;
}

.dock{
  position:fixed; left:0; right:0; z-index:90;
  bottom:0;
  transform:translateY(101%);
  transition:transform .34s var(--ease);
  background:rgba(8,3,14,.94);
  backdrop-filter:blur(20px) saturate(130%);
  border-top:1px solid var(--border-strong);
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
.dock.up{ transform:translateY(0); }

/* Seek bar sits flush on the dock's top edge. */
.dock-seek{
  position:relative; height:12px; margin-top:-6px; cursor:pointer;
  display:flex; align-items:center;
}
.dock-seek::before{
  content:""; position:absolute; left:0; right:0; height:2px; background:rgba(90,255,170,.18);
}
.dock-fill{
  position:absolute; left:0; height:2px; width:0%;
  background:var(--accent); box-shadow:0 0 10px var(--glow);
  transition:width .18s linear;
}
.dock-knob{
  position:absolute; top:50%; left:0; width:9px; height:9px; border-radius:50%;
  background:var(--accent-2); transform:translate(-50%,-50%) scale(0);
  transition:transform .18s var(--ease); box-shadow:0 0 12px var(--glow);
}
.dock-seek:hover .dock-knob,
.dock-seek:focus-visible .dock-knob{ transform:translate(-50%,-50%) scale(1); }

.dock-body{
  height:var(--dock-h);
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:12px;
  max-width:var(--maxw); margin:0 auto; padding:0 14px;
}

.dock-art{
  width:44px; height:44px; flex:none; overflow:hidden;
  border:1px solid var(--border); border-radius:2px; background:var(--bg-3);
}
.dock-art img{ width:100%; height:100%; object-fit:cover; }

.dock-meta{ min-width:0; }
.dock-title{
  font-family:var(--font-mono); font-weight:700; font-size:.78rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dock-sub{
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.12em;
  color:var(--muted-2); margin-top:3px;
  font-variant-numeric:tabular-nums;
}

.dock-ctrls{ display:flex; align-items:center; gap:2px; }
.dock-btn{
  width:44px; height:44px; display:grid; place-items:center;
  color:var(--muted); border-radius:2px;
  transition:color .16s, background .16s;
}
.dock-btn:hover{ color:var(--text); background:var(--surface); }
.dock-btn svg{ width:16px; height:16px; fill:currentColor; }
.dock-btn.play{
  color:var(--on-accent); background:var(--accent);
  width:44px; height:44px;
}
.dock-btn.play:hover{ background:var(--accent-2); }
.dock-btn.play svg{ width:15px; height:15px; fill:var(--on-accent); }

/* Loading shimmer on the play button while the widget buffers */
.dock-btn.play.busy{ opacity:.6; }
.dock-btn.play.busy svg{ animation:dockPulse 1s ease-in-out infinite; }
@keyframes dockPulse{ 0%,100%{ opacity:.4 } 50%{ opacity:1 } }

.dock-out{
  display:none; width:44px; height:44px; place-items:center; color:var(--muted-2);
  transition:color .16s;
}
.dock-out:hover{ color:var(--accent-2); }
.dock-out svg{ width:14px; height:14px; }
@media (min-width:520px){ .dock-out{ display:grid; } }

/* Push page content up so the dock never covers the last row. */
body.dock-on{ padding-bottom:var(--dock-h); }