/* ============================================================================
   The Crate's covers (2026-10-24). A shelf of sleeves rather than a grid of
   thumbnails: a little gloss and an edge on every sleeve, depth under the card,
   a record that peeks out when you reach for one on a desktop, and a press that
   gives and springs back on a phone.

   Scoped to #albums-grid; the profile and the release grids keep their cards.

   CHEAP ON PURPOSE. A crate on a phone is a few hundred cards, and a fling once
   blanked whole rows because every card carried a composited layer (see the
   2026-10-20/22 notes in interactions.css). Nothing here adds a layer at rest:
   the gloss and the edge ride the scrim pseudo-element that already exists,
   the depth is a box-shadow, and the record behind the sleeve is the wrap's
   own background, drawn only where a pointer can hover.
   Colours read --gold, so a theme's gold is the one used.
   ========================================================================== */

/* Depth: the card sits on the shelf rather than on the page. */
#albums-grid .card {
  box-shadow: 0 1px 0 rgba(255, 245, 235, .04) inset, 0 14px 26px -18px rgba(0, 0, 0, .9);
  transition: transform .5s cubic-bezier(.34, 1.4, .64, 1), box-shadow .3s var(--ease), border-color .3s var(--ease);
}

/* The sleeve: an edge where card meets print, and a soft gloss falling from
   the top-left the way light lands on a laminated sleeve. One layer, the
   scrim's own, so it costs one paint. The bottom shade still lifts the score. */
#albums-grid .card .art-wrap::after {
  background:
    linear-gradient(135deg, rgba(255, 250, 240, .10) 0%, rgba(255, 250, 240, .03) 22%, transparent 42%),
    linear-gradient(to top, rgba(10, 9, 8, .85) 0%, rgba(10, 9, 8, .3) 40%, transparent 70%);
  box-shadow: inset 0 0 0 1px rgba(255, 245, 235, .07), inset 0 1px 0 rgba(255, 245, 235, .12);
}

/* The top of the crate wears foil: numbers one to three in gold. */
#albums-grid .rank-badge.top {
  color: #16120a;
  border-color: color-mix(in srgb, var(--gold) 60%, transparent);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--gold) 70%, #fff) 0%, var(--gold) 45%,
    color-mix(in srgb, var(--gold) 70%, #000) 100%);
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, .6);
}
#albums-grid .rank-badge.top.r1 { box-shadow: 0 2px 10px -2px color-mix(in srgb, var(--gold) 45%, transparent); }

/* ---- a pointer that can hover: pull the record ----------------------------
   The sleeve lifts and slides a little left; behind it a record, black with
   fine grooves and a gold label, shows at the right edge. The old cursor
   spotlight stays; the art zoom is replaced by the slide. */
@media (hover: hover) and (pointer: fine) {
  /* The record sits centred behind the sleeve, so what the slide uncovers is
     its rim: a curved edge of grooves with a catch of light on it. */
  #albums-grid .card .art-wrap {
    background:
      radial-gradient(circle at 50% 50%, transparent 0 46.6%, rgba(255, 245, 235, .22) 46.8% 47.3%, transparent 47.6%),
      radial-gradient(circle at 50% 50%, transparent 0 47.4%, var(--surface) 47.6%),
      linear-gradient(115deg, transparent 40%, rgba(255, 245, 235, .07) 52%, transparent 64%),
      repeating-radial-gradient(circle at 50% 50%, #0c0b0a 0 1.2px, #181614 1.2px 2.4px);
  }
  #albums-grid .card .art {
    transition: transform .55s var(--ease), box-shadow .55s var(--ease);
    box-shadow: 10px 0 18px -6px rgba(0, 0, 0, .75);
  }
  #albums-grid .card:hover .art { transform: translateX(-17%) rotate(-1deg) scale(.97); }
  #albums-grid .card:hover {
    transform: translateY(-5px);
    border-color: color-mix(in srgb, var(--gold) 28%, var(--border));
    box-shadow:
      0 1px 0 rgba(255, 245, 235, .06) inset,
      0 26px 44px -20px rgba(0, 0, 0, .95),
      0 0 0 1px color-mix(in srgb, var(--gold) 18%, transparent);
  }
  #albums-grid .card:active { transform: translateY(-2px) scale(.985); transition-duration: .12s; }
}

/* ---- touch: a press that gives -------------------------------------------
   The card sinks a touch and the sleeve catches the light; letting go springs
   it back past rest (the overshoot in the card's transition above). */
@media (hover: none) {
  #albums-grid .card:active { transform: scale(.965); transition: transform .12s var(--ease); }
  #albums-grid .card .art-wrap::after { transition: opacity .2s var(--ease); }
  #albums-grid .card:active .art-wrap::after {
    background:
      linear-gradient(135deg, rgba(255, 250, 240, .18) 0%, rgba(255, 250, 240, .05) 26%, transparent 46%),
      linear-gradient(to top, rgba(10, 9, 8, .85) 0%, rgba(10, 9, 8, .3) 40%, transparent 70%);
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) #albums-grid .card,
  html:not([data-motion="full"]) #albums-grid .card .art { transition: none; }
  html:not([data-motion="full"]) #albums-grid .card:hover .art { transform: none; }
}
html[data-motion="none"] #albums-grid .card,
html[data-motion="none"] #albums-grid .card .art { transition: none; }
html[data-motion="none"] #albums-grid .card:hover .art { transform: none; }

/* ---- Minimal: a gallery of sleeves (2026-10-24) ----------------------------
   The Size control's sibling. Same cards, same markup, same taps: the body
   under the sleeve, the rank badge, the score's "/100" and the bottom shade
   go, and the cover is the card. One small number in the corner is all that
   is left of the rating. setAlbumView() morphs between the two with a View
   Transition where there is one. */
.seg-icons button { display: inline-flex; align-items: center; justify-content: center; padding: 7px 10px; }
.seg-icons svg { display: block; }

#albums-grid[data-view="minimal"] { gap: var(--s4); }
@media (max-width: 699px) {
  #albums-grid[data-view="minimal"] { gap: 14px; }
  #albums-grid[data-view="minimal"][data-size="s"] { gap: 8px; }
}
#albums-grid[data-view="minimal"] .card {
  background: transparent;
  border: 0;
  border-radius: 10px;
  box-shadow: 0 18px 30px -20px rgba(0, 0, 0, .95), 0 2px 6px -2px rgba(0, 0, 0, .6);
}
#albums-grid[data-view="minimal"] .card .art-wrap { border-radius: 10px; }
#albums-grid[data-view="minimal"] .card-body,
#albums-grid[data-view="minimal"] .rank-badge,
#albums-grid[data-view="minimal"] .card .art-score span { display: none; }
/* The gloss and the edge stay; the shade that lifted the big score does not. */
#albums-grid[data-view="minimal"] .card .art-wrap::after {
  background: linear-gradient(135deg, rgba(255, 250, 240, .09) 0%, rgba(255, 250, 240, .02) 24%, transparent 44%);
}
/* One small number, in the score's own colour, on a chip dark enough to
   read on a white sleeve. */
#albums-grid[data-view="minimal"] .card .art-score {
  left: auto; right: 8px; bottom: 8px;
  font: 600 12px/1 var(--font-mono);
  letter-spacing: 0;
  padding: 4px 6px 3px;
  border-radius: 6px;
  background: rgba(10, 9, 8, .74);
  box-shadow: 0 0 0 1px rgba(255, 245, 235, .08);
  text-shadow: none;
}
#albums-grid[data-view="minimal"][data-size="s"] .card .art-score { font-size: 10.5px; right: 6px; bottom: 6px; padding: 3px 5px 2px; }
#albums-grid[data-view="minimal"][data-size="l"] .card .art-score { font-size: 13px; right: 10px; bottom: 10px; }
@media (hover: hover) and (pointer: fine) {
  #albums-grid[data-view="minimal"] .card:hover {
    border-color: transparent;
    box-shadow: 0 30px 46px -22px rgba(0, 0, 0, .95), 0 0 0 1px color-mix(in srgb, var(--gold) 22%, transparent);
  }
}

/* The morph: each named card glides from its old box to its new one. */
html.crate-vt::view-transition-group(*) { animation-duration: .46s; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
html.crate-vt::view-transition-old(*),
html.crate-vt::view-transition-new(*) { animation-duration: .3s; }
/* The page itself does not crossfade: a fade of the whole snapshot took the
   floating nav and the header down and back up with it. Only the covers move. */
html.crate-vt::view-transition-old(root) { animation: none; opacity: 0; }
html.crate-vt::view-transition-new(root) { animation: none; }