/* ============================================================
   discogs.css
   + DISCOGS view (js/discogs-route.js + js/discogs/discogs.js).
   Everything is scoped under #discogs / .dg-* so nothing here can
   leak into the site, and site classes (.sec, .nav, ...) can't leak in.
   Site tokens (css/base.css) win over the original artifact's own:
   --text / --muted / --accent / --font-mono / --font-sans.
   Full-viewport, no scroll: the fixed site header paints on top of the
   1920x1080 stage (where the artifact drew its own header), the project
   footer (js/site-footer.js) is pinned at the bottom.
   ============================================================ */

#discogs {
  position: fixed;
  inset: 0;
  z-index: 990; /* above .wp-panel (900) / .wp-project (999 — never open together), below header (10000) */
  display: none;
  overflow: hidden;
  background: #050505;
  color: var(--text);
  font-family: var(--font-mono);
  touch-action: none;
  overscroll-behavior: none;
}
#discogs.is-open { display: block; }

#discogs .dg-mount {
  position: absolute;
  inset: 0;
}

/* size + scale set by js/discogs/discogs.js (fit): the 1920x1080 design
   frame extended to the viewport aspect, so it always fills it */
#discogs .dg-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1920px;
  height: 1080px;
  transform-origin: center;
  overflow: hidden;
  background: #050505;
}

/* Canvases: .dg-gl = the single WebGL renderer, .dg-snap = 2D copy of
   the shelf shown (blurred) behind the record detail. */
#discogs .dg-gl,
#discogs .dg-snap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 2;
}
#discogs .dg-snap {
  display: none;
  pointer-events: none;
}
#discogs .dg-gl { z-index: 3; }
#discogs .dg-gl,
#discogs .dg-snap {
  transition: filter 0.9s ease, transform 0.9s ease;
}
#discogs .dg-stage.d .dg-snap,
#discogs .dg-gl.dg-blur {
  filter: blur(10px) brightness(0.5);
  transform: scale(1.04);
}

#discogs .dg-shade {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(rgba(5,5,5,.92) 0, rgba(5,5,5,.75) 110px, rgba(5,5,5,0) 190px),
    linear-gradient(90deg, rgba(5,5,5,.75), rgba(5,5,5,0) 9%, rgba(5,5,5,0) 91%, rgba(5,5,5,.75)),   /* the neighbouring columns' strips fade into the edges */
    radial-gradient(ellipse at 50% 50%, transparent 52%, rgba(5,5,5,.85) 100%);
}
#discogs .dg-stage.d .dg-shade { background: rgba(5,5,5,.25); }

#discogs .dg-grain {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: .16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 1.2 -.1'/></filter><rect width='300' height='300' filter='url(%23n)'/></svg>");
}

#discogs .dg-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 260px;
  background: linear-gradient(to top, rgba(0,0,0,.92), rgba(0,0,0,.7) 45%, rgba(0,0,0,0));
  pointer-events: none;
  z-index: 3;
}
#discogs .dg-stage.d .dg-fade { display: none; }

/* --- caption (browse) --- */
#discogs .dg-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 50px;
  z-index: 5;
  text-align: center;
  pointer-events: none;
}
#discogs .dg-cap h2 {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .02em;
}
#discogs .dg-cap p {
  margin: 7px 0 14px;
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #c9c5bb;
  text-shadow: 0 1px 6px #000, 0 0 14px #000;
}
#discogs .dg-row {
  display: inline-flex;
  align-items: center;
  gap: 18px;
}
#discogs .dg-pill {
  display: inline-block;
  padding: 8px 18px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 99px;
  background: rgba(0,0,0,.35);
  font-size: 10px;
  letter-spacing: .12em;
}
#discogs .dg-arr {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 50%;
  background: rgba(0,0,0,.35);
  font-size: 14px;
  user-select: none;
}
#discogs .dg-pill,
#discogs .dg-arr {
  pointer-events: auto;
  cursor: pointer;
  transition: background .2s;
}
#discogs .dg-arr:hover,
#discogs .dg-pill:hover { background: rgba(255,255,255,.14); }

#discogs .dg-hint {
  position: absolute;
  right: 57px;
  bottom: 44px;
  z-index: 5;
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--accent);
  text-shadow: 0 1px 6px #000;
}

/* --- detail panel ---
   left: set live by js/discogs/discogs.js (placeDetail) on the header's
   "FRANÇOIS DEVAUCHELLE" column; top keeps the design offset from the
   sleeve's centre line (318px in the 1080 frame = centre - 222px). */
#discogs .dg-panel {
  position: absolute;
  left: 514px;
  top: calc(50% - 222px);
  width: 420px;
  z-index: 5;
  display: none;
  pointer-events: auto;
}
#discogs .dg-stage.d .dg-panel { display: block; }
/* the vinyl now sits further right, behind the text: a soft local shade keeps the text first */
#discogs .dg-panel::before {
  content: "";
  position: absolute;
  inset: -110px -90px -110px -150px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(5,5,5,.6), rgba(5,5,5,.42) 55%, rgba(5,5,5,0) 100%);   /* fades out inside its box: no edge */
}
#discogs .dg-next .dg-panel::before { display: none; }

/* detail: "CLICK TO CLOSE" under the sleeve, fades in while the sleeve is hovered (placed by placeDetail) */
#discogs .dg-close-hint {
  position: absolute;
  z-index: 5;
  display: none;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--muted);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
#discogs .dg-stage.d .dg-close-hint { display: block; }
#discogs .dg-close-hint.on { opacity: 1; }

/* detail: still preview of the next release on the right (js/discogs/discogs.js, PREVIEW_*).
   Stacked copies, each blurred more and masked to a band (masks / blur / transform set live). */
#discogs .dg-next {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: none;
  pointer-events: none;
  opacity: 0;
}
#discogs .dg-stage.d .dg-next { display: block; }
#discogs .dg-next * { pointer-events: none !important; }
#discogs .dg-next-c {
  position: absolute;
  inset: 0;
  will-change: transform, opacity;
}
#discogs .dg-next .dg-panel { display: block; left: var(--pv-p, 514px); }
#discogs .dg-pv-sl {
  position: absolute;
  left: var(--pv-sl, 972px);
  top: var(--pv-st, 316px);
  width: var(--pv-sw, 399px);
  height: var(--pv-sw, 399px);
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
}
#discogs .dg-next-hit {
  position: absolute;
  right: 0;
  z-index: 6;
  display: none;
  cursor: pointer;
}
#discogs .dg-stage.d .dg-next-hit { display: block; }
#discogs .dg-stage.d .dg-cap,
#discogs .dg-stage.d .dg-hint { display: none; }

#discogs .dg-no {
  font-size: 10.5px;
  letter-spacing: .08em;
  color: var(--muted);
}
/* long titles ("Blind Jacks Journey presents The Return Trip Vol.4") wrap,
   balanced, 3 lines at most */
#discogs .dg-panel h1 {
  margin: 9px 0 6px;
  font-family: var(--font-sans);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.12;                  /* descenders (p, y) clear the clamp's overflow edge */
  letter-spacing: -.005em;
  text-wrap: balance;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
#discogs .dg-artist {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  overflow-wrap: anywhere;
}
#discogs .dg-meta {
  margin-top: 6px;
  font-size: 10.5px;
  line-height: 1.5;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  overflow-wrap: anywhere;
}
/* a release's original text (notes, credits, "Released ..."): the source page's line breaks and links;
   long ones cut at NOTES_COLLAPSED (js) with a fade and "+ MORE" */
#discogs .dg-notes { margin: 10px 0 0; }
#discogs .dg-notes-text {
  font-size: 10.5px;
  line-height: 1.55;
  color: #b9b5ab;
  overflow-wrap: anywhere;
  white-space: pre-line;
  max-height: 130px;
  overflow: hidden;
}
#discogs .dg-notes.clip .dg-notes-text {
  -webkit-mask-image: linear-gradient(#000 55%, transparent);
  mask-image: linear-gradient(#000 55%, transparent);
}
#discogs .dg-notes.open .dg-notes-text { overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; }
#discogs .dg-notes-text a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(255,255,255,.35); }
#discogs .dg-notes-text a:hover { text-decoration-color: currentColor; }
#discogs .dg-more {
  display: none;
  margin: 5px 0 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  color: var(--text);
  cursor: pointer;
}
#discogs .dg-notes.clip .dg-more,
#discogs .dg-notes.open .dg-more { display: inline-block; }
#discogs .dg-next .dg-more { display: none !important; }
#discogs .dg-tabs {
  display: flex;
  gap: 18px;
  margin: 16px 0 6px;
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--muted);
}
#discogs .dg-tabs span { cursor: pointer; }
#discogs .dg-tabs .on {
  padding-bottom: 5px;
  border-bottom: 1px solid var(--text);
  color: var(--text);
}
#discogs .dg-tr {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
  font-size: 12px;
  color: #b9b5ab;
}
#discogs .dg-tr i {
  flex: 0 0 18px;
  font-style: normal;
  font-size: 10px;
  color: var(--muted);
}
#discogs .dg-tr span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#discogs .dg-tr em {
  flex: 0 0 auto;
  font-style: normal;
  font-size: 10.5px;
  color: var(--muted);
}
/* album tracks pick the track the Bandcamp player starts on */
#discogs .dg-tr.pick { cursor: pointer; transition: color .2s; }
#discogs .dg-tr.pick:hover,
#discogs .dg-tr.act { color: var(--text); }
#discogs .dg-tr.act i { color: var(--accent); }

/* Bandcamp's own player (iframe, size=large without artwork: 120px),
   created when a detail opens, removed on switch / close / unmount */
#discogs .dg-player {
  height: 120px;
  margin-top: 14px;
  background: rgba(255,255,255,.03);
}
#discogs .dg-player iframe {
  display: block;
  width: 100%;
  height: 120px;
  border: 0;
}
#discogs .dg-lnk {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
#discogs .dg-lnk a {
  padding: 7px 14px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 99px;
  background: rgba(0,0,0,.35);
  font-size: 9.5px;
  letter-spacing: .1em;
  color: var(--text);
  text-decoration: none;
  transition: background .2s;
}
#discogs .dg-lnk a:hover { background: rgba(255,255,255,.14); }
#discogs .dg-lnk a.p {
  background: var(--text);
  border-color: var(--text);
  color: #050505;
}
#discogs .dg-discogs {
  display: inline-block;
  margin-top: 12px;
  font-size: 9px;
  letter-spacing: .12em;
  color: var(--muted);
  text-decoration: none;
  transition: color .2s;
}
#discogs .dg-discogs:hover { color: var(--text); }

#discogs .dg-loader {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: #050505;
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--muted);
}

/* --- loading screen on top of the 4 bands (#wpBands, z 1000), below the
   header (10000). Outside #discogs: it shows before the view does.
   Driven by js/discogs-route.js (opacity, pulse, counter). --- */
.dg-loading {
  position: fixed;
  inset: 0;
  z-index: 1001;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  pointer-events: none;
  opacity: 0;
}
.dg-loading.is-on { display: flex; }
.dg-loading-mark {
  width: 56px;
  height: 56px;
  display: block;
  filter: brightness(0) invert(1); /* same treatment as the footer mark */
  will-change: transform, opacity;
}
.dg-loading-count {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* --- project footer (js/site-footer.js), pinned at the bottom.
   Its own look comes from css/footer.css + css/work-panel.css
   (.wp-project .wp-footer / #discogs .wp-footer) — only placement here,
   side padding mirrors .page / header at each breakpoint. --- */
#discogs > .wp-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;                       /* raised a little, the same on the shelf and in the detail view (this section only) */
  z-index: 7;
  margin: 0;
  padding: 0 28px 22px;
  touch-action: auto;
  /* full-width box over the stage's bottom edge: only its links take
     clicks, so the ‹ EXPLORE › row underneath stays clickable */
  pointer-events: none;
}
#discogs > .wp-footer a {
  pointer-events: auto;
}

/* THE SECRETS radio (header, z-index above this view): its playlist grabs
   any pointer that lands on it (setPointerCapture, js/yt-audio-widget.js),
   which swallowed the detail view's swipes. No gestures on it while
   + DISCOGS is shown; rendering and the rest of the site untouched. */
body.discogs-open #ytPlaylist {
  pointer-events: none !important;
}
@media (min-width: 768px) {
  #discogs > .wp-footer { padding: 0 48px 28px; }
}
@media (min-width: 1100px) {
  #discogs > .wp-footer { padding: 0 56px 32px; }
}