/* The Shelf (js/shelf-ui.js): albums as spined sleeves in a 3D row or column, and the album
   view that opens from one, with its tracklist in a booklet. Loaded by /shelf, My Albums and
   the record store. */

.shelf-body { overflow-x: clip; }
.shelf-main { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: calc(100dvh - var(--topbar-h)); }
.shelf-head { display: flex; align-items: end; justify-content: space-between; gap: 16px 32px; padding-block: 10px 0; flex-wrap: wrap; }
.shelf-head-text { display: grid; gap: 6px; min-width: 0; }
.shelf-head h1 { font: 800 clamp(26px, 3.4vw, 40px)/1 var(--display); font-stretch: 90%; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.shelf-hint { max-width: 42ch; color: var(--muted); font-size: var(--text-sm); text-wrap: pretty; }
.shelf-hint a { color: var(--accent-text); font-weight: 600; }

/* The stage is a viewport onto the row: a camera a little above the shelf, looking along it.
   A long perspective, so sleeves at the far ends of a wide row stay seen from the front. */
.shelf-stage {
  position: relative;
  min-height: clamp(300px, 60dvh, 640px);
  perspective: 2400px;
  perspective-origin: 50% 42%;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
}
.shelf-stage.is-vertical { touch-action: pan-x; perspective-origin: 45% 50%; }
.shelf-stage.is-dragging { cursor: grabbing; }
/* Keyboard focus shows on the sleeve the keys act on, not as a frame around the whole shelf. */
.shelf-stage:focus-visible .slab.is-mid .slab-front { outline: 3px solid var(--accent); outline-offset: 3px; }
.shelf-row { position: absolute; inset: 0; transform-style: preserve-3d; }
/* A soft bar of floor under the row, so the sleeves stand on something. */
.shelf-floor {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 9%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--line-strong) 30%, var(--line-strong) 70%, transparent);
  opacity: 0.8;
}
.is-vertical .shelf-floor { display: none; }
.shelf-empty { position: absolute; inset: 0; display: grid; place-content: center; padding: 24px; text-align: center; color: var(--muted); text-wrap: balance; }

/* Each sleeve is a thin box: a front, a back, a spine on the near edge and two more edges, all
   --t thick; --s is the cover's edge. Where it sits is set per frame. No will-change and no
   opacity on the box itself: either flattens its 3D, which hides the spine. */
.slab {
  position: absolute;
  left: calc(50% - var(--s) / 2);
  top: calc(50% - var(--s) / 2);
  width: var(--s);
  height: var(--s);
  transform-style: preserve-3d;
  cursor: pointer;
}
.slab-box { position: absolute; inset: 0; transform-style: preserve-3d; }
/* A sleeve under the pointer lifts a little, but only once the row has stopped: lifting
   sleeves as they pass under a still cursor reads as flicker. */
@media (hover: hover) {
  .shelf-stage:not(.is-moving) .slab-box { transition: transform 180ms cubic-bezier(0.2, 0, 0, 1); }
  .shelf-stage:not(.is-moving):not(.is-vertical) .slab:hover .slab-box { transform: translateY(-2.5%); }
  .shelf-stage:not(.is-moving).is-vertical .slab:hover .slab-box { transform: translateX(-2.5%); }
}
.slab-face { position: absolute; backface-visibility: hidden; -webkit-backface-visibility: hidden; opacity: var(--fade, 1); }
.slab-front {
  inset: 0;
  transform: translateZ(calc(var(--t) / 2));
  background: var(--sunken-2);
  /* The shadow under the middle sleeve comes and goes with it (--near is 1 in the middle, 0 a
     sleeve away), rather than switching on as it passes, which read as a flash. */
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12), 0 30px 50px -24px rgb(0 0 0 / calc(0.55 * var(--near, 0)));
  overflow: hidden;
}
.slab-front img, .slab-back img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.slab-title { display: grid; place-content: center; height: 100%; padding: 8%; text-align: center; font: 800 clamp(11px, calc(var(--s) * 0.07), 26px)/1.1 var(--display); color: var(--ink-2); }
/* Printed sleeve: the light catches the front's near edge. */
.slab-front::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgb(255 255 255 / 0.1), transparent 30%, transparent 70%, rgb(0 0 0 / 0.18)); pointer-events: none; }
/* The back of the sleeve: the cover again, printed darker, with the title and artist at the
   foot the way a back cover lists them. */
.slab-back {
  inset: 0;
  transform: rotateY(180deg) translateZ(calc(var(--t) / 2));
  background: #202126;
  overflow: hidden;
}
.slab-back img { filter: brightness(0.42) saturate(0.7); }
.slab-back-text {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 6%;
  display: grid;
  gap: 0.2em;
  padding-top: 0.6em;
  border-top: 1px solid rgb(255 255 255 / 0.35);
  color: #fff;
  font-size: clamp(8px, calc(var(--s) * 0.04), 14px);
  line-height: 1.25;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.6);
}
.slab-back-text b { font-weight: 700; }
.slab-back-text span { opacity: 0.8; }
.slab-spine {
  top: 0;
  bottom: 0;
  left: calc(50% - var(--t) / 2);
  width: var(--t);
  transform: rotateY(90deg) translateZ(calc(var(--s) / 2));
  background: var(--spine-bg, #2b2c31);
  color: var(--spine-ink, #fff);
  overflow: hidden;
}
/* Until the cover's color is known, the spine wears a strip of the cover itself, stretched
   tall, which lands close enough; the real color fades in over it. */
.slab-spine::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--spine-art) left center / auto 100% no-repeat;
  filter: saturate(0.9) brightness(0.8);
  transition: opacity 400ms;
}
.slab.has-palette .slab-spine::before { opacity: 0; }
.slab-spine::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(0 0 0 / 0.28), transparent 35%, transparent 65%, rgb(0 0 0 / 0.28)); pointer-events: none; }
/* The spine's lettering runs down from the top, like a printed spine, centered across its
   width (the line is as tall as the spine is thick), and trails off rather than clipping. */
.slab-text {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  padding-inline: calc(var(--t) * 0.8);
  writing-mode: vertical-rl;
  font-size: clamp(8px, calc(var(--t) * 0.46), 15px);
  line-height: var(--t);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 0 1px rgb(0 0 0 / 0.25);
}
.slab:not(.has-palette) .slab-text { color: #fff; text-shadow: 0 0 2px rgb(0 0 0 / 0.6), 0 0 8px rgb(0 0 0 / 0.4); }
.slab-text b { font-weight: 700; margin-inline-end: 0.7em; }
.slab-text span { opacity: 0.82; }
.slab-edge { left: 0; right: 0; top: calc(50% - var(--t) / 2); height: var(--t); background: #e9e6df; }
.slab-edge-a { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.slab-edge-b { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); background: #cfccc4; }
:root[data-theme="dark"] .slab-edge-a { background: #3a3b41; }
:root[data-theme="dark"] .slab-edge-b { background: #26272c; }
/* A playing sleeve shows a pulse on its spine. */
.slab.is-playing .slab-spine { outline: 2px solid var(--accent); outline-offset: -2px; }
.slab.is-playing .slab-text::before {
  content: '';
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  margin-inline-end: 0.5em;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
  animation: shelf-pulse 1.2s ease-in-out infinite;
}
@keyframes shelf-pulse { 50% { opacity: 0.35; transform: scale(0.7); } }

/* A column: the sleeves run top to bottom, leaning back, each one's spine along its bottom
   edge with the lettering the right way up, like records in a crate seen from the side. The
   spine starts across the middle and swings out to the edge, as the row's does sideways;
   starting at the bottom would put it half a sleeve too low, under the next record's cover. */
.is-vertical .slab-spine { top: calc(50% - var(--t) / 2); bottom: auto; left: 0; right: 0; width: auto; height: var(--t); transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
.is-vertical .slab-spine::before { background-size: 100% auto; background-position: center top; }
.is-vertical .slab-spine::after { background: linear-gradient(180deg, rgb(0 0 0 / 0.28), transparent 35%, transparent 65%, rgb(0 0 0 / 0.28)); }
.is-vertical .slab-text { writing-mode: horizontal-tb; }
.is-vertical .slab-edge { top: 0; bottom: 0; left: calc(50% - var(--t) / 2); right: auto; width: var(--t); height: auto; }
.is-vertical .slab-edge-a { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.is-vertical .slab-edge-b { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }

/* Under the row: which sleeve is in the middle, and the controls. */
.shelf-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px 22px; border-top: 1px solid var(--line); }
/* The preview player sits over the bottom corner; leave room so the controls stay reachable. */
body.has-player .shelf-bar { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 92px); }
.shelf-now { display: grid; min-width: 0; }
.shelf-now b { font-size: var(--text-lg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shelf-now span:not(.mono) { color: var(--muted); font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shelf-count { color: var(--accent-text); font-size: var(--text-2xs); letter-spacing: 0.08em; }
.shelf-ctl { flex: none; }
.shelf-open { margin-inline-start: 8px; padding-block: 8px; }

/* ---- The album view ------------------------------------------------------------------- */
.album-view {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--av-bg, #16171a);
  color: var(--av-ink, #fff);
  overflow: auto;
  overscroll-behavior: contain;
  transition: background-color 600ms ease-out, color 600ms ease-out;
  animation: av-in 320ms cubic-bezier(0.2, 0, 0, 1);
}
.album-view[hidden] { display: none; }
@keyframes av-in { from { opacity: 0; } }
body.has-album-view { overflow: hidden; }
.av-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px clamp(12px, 2vw, 24px); }
.av-back, .av-nav .card-skip {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1.5px solid color-mix(in srgb, var(--av-ink) 32%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--av-bg) 50%, transparent);
  color: var(--av-ink);
}
@media (hover: hover) { .av-back:hover, .av-nav .card-skip:hover:not(:disabled) { border-color: var(--av-ink); } }
.av-back:active { scale: 0.96; }
.av-pages { font-size: var(--text-xs); letter-spacing: 0.1em; opacity: 0.85; }
.av-body {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(20px, 4vw, 56px);
  align-items: center;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 48px) 36px;
}
.av-left { --av-fs: clamp(34px, 5vw, 76px); display: grid; gap: 10px; align-content: center; min-width: 0; }
.av-heading { min-width: 0; overflow: hidden; }
.av-title {
  margin: 0;
  font: 800 var(--av-fs)/0.94 var(--display);
  font-stretch: 85%;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
/* The title again under itself, faint and cut off halfway, like an echo printed below it. It
   takes its own room under the title, so the artist's name sits clear of it. */
.av-ghost {
  display: block;
  height: 0.5em;
  margin-top: -0.06em;
  padding-left: 0.02em;
  overflow: hidden;
  font: 800 var(--av-fs)/0.94 var(--display);
  font-stretch: 85%;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.13;
  pointer-events: none;
}
.av-artist { margin: 0; font-size: clamp(16px, 1.6vw, 22px); font-weight: 600; }
.av-meta { margin: 0; color: var(--av-muted); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; }
.av-cover {
  width: min(100%, 360px);
  aspect-ratio: 1;
  margin: 6px 0 4px;
  background: rgb(0 0 0 / 0.2);
  box-shadow: 0 30px 60px -22px rgb(0 0 0 / 0.65), 0 0 0 1px rgb(0 0 0 / 0.1);
  will-change: transform;
}
.av-cover img { width: 100%; height: 100%; object-fit: cover; }
.av-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.av-play, .av-extra {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border: 0;
  background: var(--av-ink);
  color: var(--av-bg);
  font: 700 var(--text-sm) var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow: 0 10px 24px -12px rgb(0 0 0 / 0.6);
  transition: scale 120ms cubic-bezier(0.2, 0, 0, 1), translate 120ms;
}
.av-extra { background: color-mix(in srgb, var(--av-ink) 14%, transparent); color: var(--av-ink); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--av-ink) 40%, transparent); }
.av-play:active, .av-extra:active { scale: 0.96; }
@media (hover: hover) { .av-play:hover, .av-extra:hover { translate: 0 -1px; } }
.av-play .ic-pause, .av-play.is-playing .ic-play { display: none; }
.av-play.is-playing .ic-pause { display: block; }
.av-play .play-icons { display: grid; }
.av-link { color: var(--av-ink); font-weight: 600; font-size: var(--text-sm); }
.av-song { margin: 0; font-size: var(--text-sm); color: var(--av-muted); }
.av-note { font-size: var(--text-sm); font-style: italic; color: var(--av-muted); }

/* The booklet: pages side by side, the first flush left; turning swings a page back on its
   left edge while the next slides in. */
.booklet {
  position: relative;
  height: clamp(380px, 66dvh, 640px);
  perspective: 1800px;
  perspective-origin: 10% 50%;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  outline-offset: 6px;
}
.booklet-strip { position: absolute; inset: 0; transform-style: preserve-3d; }
.bk-page {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  width: var(--pw);
  height: 100%;
  padding: clamp(14px, 2vw, 22px);
  transform-origin: left center;
  background: var(--pg-bg);
  color: var(--pg-ink);
  box-shadow: 0 24px 50px -24px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(0 0 0 / 0.08);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform, opacity;
  animation: page-in 460ms cubic-bezier(0.2, 0, 0, 1) both;
  animation-delay: calc(var(--j, 0) * 70ms);
}
@keyframes page-in { from { opacity: 0; translate: 0 18px; } }
.bk-page::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.1;
  mix-blend-mode: multiply;
}
/* The turning page darkens as it folds away, like a shadow falling across it. */
.bk-page.is-turning::after { content: ''; position: absolute; inset: 0; background: rgb(0 0 0 / 0.25); pointer-events: none; }
.bk-page > * { position: relative; z-index: 1; }
/* A running head: which songs the page holds, like a folio, at the top of one page and the
   foot of the next. (The cover itself stands beside the booklet, so the pages don't repeat it.) */
.bk-head { grid-row: 1; justify-self: start; margin: 0; padding: 2px 6px; background: var(--pg-ink); color: var(--pg-bg); font-size: 10px; letter-spacing: 0.1em; }
.bk-page.is-alt .bk-head { grid-row: 3; justify-self: end; }
.bk-tracks { grid-row: 2; display: grid; align-content: center; gap: 1px; margin: 0; padding: 0; list-style: none; min-width: 0; }
.bk-track {
  display: grid;
  grid-template-columns: 2.4em minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 5px 6px;
  border: 0;
  border-radius: 3px;
  background: none;
  color: inherit;
  text-align: left;
  font: 500 var(--text-sm)/1.3 var(--font);
}
.bk-track .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-track .n, .bk-track .len { font-size: 10px; color: var(--pg-muted); }
@media (hover: hover) { .bk-track:hover { background: color-mix(in srgb, var(--pg-ink) 9%, transparent); } }
.bk-track.is-playing { font-weight: 700; }
.bk-track.is-playing .n { color: var(--pg-ink); }
.bk-track.is-playing .n::before { content: '▶ '; font-size: 8px; vertical-align: 1px; }
.bk-none { grid-row: 2; align-self: center; margin: 0; color: var(--pg-muted); font-size: var(--text-sm); text-align: center; }
/* Loading: grey bars where the songs will go. */
.bk-page.is-skel .bk-head { width: 3.5em; height: 1.4em; background: color-mix(in srgb, var(--pg-ink) 12%, transparent); }
.bk-bar { height: 10px; margin-block: 7px; border-radius: 999px; background: color-mix(in srgb, var(--pg-ink) 12%, transparent); animation: bk-shimmer 1.3s ease-in-out infinite; }
.bk-bar:nth-child(odd) { width: 72%; }
.bk-bar:nth-child(even) { width: 54%; }
@keyframes bk-shimmer { 50% { opacity: 0.45; } }

/* ---- My Albums: the shelf view --------------------------------------------------------- */
.lib-shelf { display: grid; gap: 0; margin-top: 4px; }
.lib-shelf .shelf-stage { min-height: clamp(280px, 52dvh, 560px); border-radius: 8px; }

/* ---- Share pages: the grid's albums under the card -------------------------------------- */
/* The page is always dark (html[data-theme="dark"]), so the shelf's variables are the dark
   theme's already; this only sizes it to sit between the card and the album list. */
.share-shelf { margin: 8px auto 48px; }
.share-shelf-head { display: grid; gap: 6px; max-width: 760px; margin: 0 auto; }
.share-shelf-head .list-title { margin-top: 0; }
.share-shelf-hint { color: var(--muted); font-size: var(--text-md); text-wrap: pretty; }
.share-shelf .shelf-stage { min-height: clamp(280px, 48dvh, 520px); margin-top: 4px; }
.share-shelf .shelf-bar { max-width: 760px; margin: 0 auto; padding-bottom: 0; }
/* The player sits over the page's bottom corner, not over this bar: no room needed under it. */
body.has-player .share-shelf .shelf-bar { padding-bottom: 0; }

/* ---- The record store: a bin's records in a column beside the shop ----------------------- */
.store-browse {
  --bg: #1a1410;
  --surface: #241c17;
  --ink: #f4ebe1;
  --ink-2: #d9ccbe;
  --muted: rgb(244 235 225 / 0.6);
  --line: rgb(255 255 255 / 0.12);
  --line-strong: rgb(255 255 255 / 0.3);
  --accent-text: #e0b892;
  --sunken-2: #3a2f27;
  position: absolute;
  inset: 0 0 0 auto;
  z-index: 6;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(440px, 100%);
  color: var(--ink);
  background: color-mix(in srgb, #1a1410 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-left: 1px solid var(--line);
  box-shadow: -30px 0 60px -30px rgb(0 0 0 / 0.7);
  animation: browse-in 260ms cubic-bezier(0.2, 0, 0, 1);
}
@keyframes browse-in { from { translate: 24px 0; opacity: 0; } }
.store-browse[hidden] { display: none; }
.store-browse-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 6px; }
.store-browse-head .tt-kicker { color: var(--accent-text); }
.store-browse-head h2 { margin: 0; font: 800 var(--text-2xl)/1.1 var(--display); font-stretch: 90%; letter-spacing: -0.02em; }
.store-browse-close { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1.5px solid var(--line-strong); border-radius: 50%; background: none; color: var(--ink); }
.store-browse .shelf-stage { min-height: 0; margin-inline: 8px; overflow: clip; } /* the column ends at the bar, not under it */
.store-browse .shelf-bar { position: relative; z-index: 1; padding: 10px 16px 16px; background: #1a1410; }
.store-browse .slab-edge-a, .store-browse .slab-edge-b { background: #3a2f27; }
.store-browse .slab-title { color: var(--ink-2); }

@media (max-width: 820px) {
  /* Phones: the row is as wide as the screen allows, so the stage needn't be tall. */
  .shelf-main { min-height: 0; grid-template-rows: auto auto auto; }
  .shelf-stage { min-height: 0; height: clamp(240px, 44dvh, 420px); perspective: 1600px; }
  .lib-shelf .shelf-stage { height: clamp(240px, 40dvh, 380px); }
  .share-shelf .shelf-stage { min-height: 0; height: clamp(240px, 40dvh, 380px); }
  .shelf-hint { text-align: start; }
  .shelf-bar { flex-wrap: wrap; }
  .av-body { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 18px; }
  .av-left { grid-template-columns: 104px minmax(0, 1fr); grid-template-areas: 'cover heading' 'cover artist' 'cover meta' 'actions actions' 'song song' 'note note'; column-gap: 14px; align-items: center; }
  .av-heading { grid-area: heading; }
  .av-artist { grid-area: artist; }
  .av-meta { grid-area: meta; }
  .av-cover { grid-area: cover; width: 104px; margin: 0; }
  .av-actions { grid-area: actions; }
  .av-song { grid-area: song; }
  .av-note { grid-area: note; }
  .av-ghost { display: none; }
  .av-title { font-size: clamp(26px, 8vw, 40px); }
  .booklet { height: clamp(320px, 54dvh, 520px); perspective-origin: 0 50%; }
  .store-browse { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .slab-box, .album-view { transition: none; }
  .album-view, .bk-page, .store-browse { animation: none; }
  .bk-bar, .slab.is-playing .slab-text::before { animation: none; }
}