/* ===== All Music Page ===== */

/* Pixel font for the page title (this page doesn't load it itself) */
@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");

/* The shared slope (--rise, --tilt, --wedge) and the page spacing come from style.css.
   The player itself is styled by musicPlayer.css.
   Note: no "overflow-x: hidden" on the body here (allPhotography.css has it). It would stop the
   player from pinning to the top, and style.css already blocks sideways scrolling on <html>. */

#all-music {
  --pin-top: 0px; /* raise this if a fixed header ever covers the pinned player */
  width: min(1100px, calc(100% - 2rem)); /* 1rem gutter on each side, lining up with the header logo */
  margin: 0 auto;
  background: rgba(31, 31, 31, 0.9);

  /* Pivot on the right edge of the window so the panel stays parallel to the header and footer */
  transform: skewY(var(--tilt));
  transform-origin: calc(50% + 50vw) 0;
}

#all-music h1 {
  position: relative;
  display: block;
  margin-bottom: 0;
  /* leave room for the wedge below the title */
  padding-bottom: calc(var(--rise) * 0.6 + 0.8rem);
  font-family: "Press Start 2P", monospace;
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  line-height: 1.5;
  font-weight: normal; /* Press Start 2P only has one weight */
  color: #33ff7a;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Green wedge under the title, thin on the left and thick on the right */
#all-music h1::after {
  content: "";
  position: absolute;
  left: -1.5rem;   /* cancel the panel padding so it reaches both edges */
  right: -1.5rem;
  bottom: 0;
  height: calc(var(--rise) * 0.6);
  background-color: #33ff7a;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

/* ----- The shelf the player sits on -----
   It follows the panel's slope (so its edges stay inside the panel) and the player on it is level. */
#all-music > .music-deck {
  transform: none; /* undo style.css's un-skew for this one child */
  display: flex;
  justify-content: center;
  margin: 0 -1.5rem 2rem;
  padding: 1rem 1.5rem;
  background: #1b1b1b;
  border-bottom: 2px solid #33ff7a;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.5);
}

.music-deck > .cd-player {
  transform: skewY(calc(var(--tilt) * -1));
}

/* Desktop: the player stays pinned to the top while the cases scroll underneath */
@media (min-width: 1025px) and (min-height: 760px) {
  #all-music > .music-deck {
    position: sticky;
    top: var(--pin-top);
    z-index: 5;
  }
}

/* ----- CD cases -----
   Every case is 112 x 96 px of pixel art shown at exactly 2x (224 x 192), so the 96 px disc in the
   tray is the same size as the one in the player. From the left: a 16 px spine, then a 96 x 96 body.
   Sprites, all in /images/music/ and all optional (the plain CSS look below is the fallback):
     cdcase.png         96 x 96   front of the lid, drawn OVER the album cover: leave a transparent
                                  window where the cover should show
     cdcase-spine.png   16 x 96   the spine strip; it stays put when the lid opens
     cdcase-tray.png    96 x 96   inside of the case, under the disc
     cdcase-inside.png  96 x 96   inside of the lid, seen when it is open (draw it as you would see it)
   scripts/allMusic.js adds a has-...-art class to #music-list for each sprite it finds. */

#music-list {
  --case-scale: 2;                        /* whole numbers only, to keep the pixels crisp */
  --u: calc(1px * var(--case-scale));     /* one sprite pixel */
  display: grid;
  grid-template-columns: repeat(auto-fill, calc(112 * var(--u)));
  justify-content: space-evenly;
  gap: 2rem 1.5rem;
}

.cd-case {
  position: relative;
  text-align: center;
}

.cd-case.is-open {
  z-index: 2; /* the open lid swings over the case beside it */
}

.cd-case-button {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.cd-case-box {
  display: block;
  position: relative;
  width: calc(112 * var(--u));
  height: calc(96 * var(--u));
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
}

.cd-case-spine,
.cd-case-tray,
.cd-case-disc,
.cd-case-front::after,
.cd-case-back {
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  image-rendering: pixelated;
}

/* Spine: ridged plastic strip down the left side */
.cd-case-spine {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(16 * var(--u));
  height: 100%;
  background-image: repeating-linear-gradient(to bottom, #4a4a4a 0 4px, #2e2e2e 4px 8px);
  border: 2px solid #1b1b1b;
}

#music-list.has-spine-art .cd-case-spine {
  background-image: url('/images/music/cdcase-spine.png');
  border: 0;
}

/* Body: the tray with the disc on it, and the lid over the top */
.cd-case-body {
  position: absolute;
  left: calc(16 * var(--u));
  top: 0;
  width: calc(96 * var(--u));
  height: 100%;
  perspective: 900px;
}

.cd-case-tray {
  position: absolute;
  inset: 0;
  background-color: #151515;
  border: 2px solid #3a3a3a;
}

#music-list.has-tray-art .cd-case-tray {
  background-image: url('/images/music/cdcase-tray.png');
  border: 0;
}

.cd-case-disc {
  position: absolute;
  inset: 0;
  margin: -2px; /* cancels the fallback tray border, so the disc fills the whole 96 x 96 */
}

#music-list.has-tray-art .cd-case-disc {
  margin: 0;
}

/* Trims a hair off the disc's edge so it can't peek out from under the closed lid */
.cd-case-disc {
  clip-path: inset(1px);
}

/* The disc is in the player (or on its way there) */
.cd-case.is-empty .cd-case-disc {
  opacity: 0;
}

/* The lid swings open on its left edge, where it meets the spine */
.cd-case-lid {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform 0.35s ease;
}

.cd-case-button:hover .cd-case-lid,
.cd-case-button:focus-visible .cd-case-lid {
  transform: rotateY(-18deg); /* cracks open a little */
}

.cd-case.is-open .cd-case-lid {
  transform: rotateY(-110deg);
}

.cd-case-front,
.cd-case-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}

.cd-case-front {
  background: #232323;
}

.cd-case-cover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cd-case-cover.is-missing {
  visibility: hidden;
}

/* Over the cover: a plain edge and glossy plastic, or cdcase.png when it exists */
.cd-case-front::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid #555555;
  background-image: linear-gradient(115deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 35%);
  pointer-events: none;
}

#music-list.has-case-art .cd-case-front::after {
  border: 0;
  background-image: url('/images/music/cdcase.png');
}

/* Inside face of the lid, seen once it is open */
.cd-case-back {
  transform: rotateY(180deg);
  border: 2px solid #555555;
  background-image: linear-gradient(120deg, #3a3a3a, #262626);
}

#music-list.has-inside-art .cd-case-back {
  border: 0;
  background-image: url('/images/music/cdcase-inside.png');
}

.cd-case h3 {
  margin-top: 0.75rem;
  color: #ffffff;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.3;
}

.cd-case.is-open h3 {
  color: #33ff7a; /* the song in the player */
}

.cd-case-artist {
  font-size: 0.9rem;
  color: #b0b0b0;
}

/* The disc on its way from a case to the player (moved by scripts/allMusic.js) */
.cd-flying-disc {
  position: fixed;
  z-index: 2000;
  background: center / contain no-repeat;
  image-rendering: pixelated;
  pointer-events: none;
  will-change: transform;
}

/* Very narrow phones: the cases drop to 1x so one still fits across */
@media (max-width: 300px) {
  #music-list {
    --case-scale: 1;
  }
}