/* The sliding records: a row of record sleeves on a white page, each record black with its coloured label, the
   name of the one in front under the row. */
:root {
  --page: #ffffff;          /* the page */
  --ink: #17140f;           /* the words and the arrows */
  --muted: #8b857b;         /* the smaller words */
  --line: #e7e3dc;          /* the rail and the arrows' ring */
  --vinyl: #121110;         /* the records */
  --size: 300px;            /* the side of a sleeve */
  --gap: 24px;              /* between the record out of its sleeve and the next sleeve */
}

* {
  box-sizing: border-box;
}

html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: 'Host Grotesk Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.stage {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 32px 16px;
  overflow: hidden;
}

/* the column the words and the arrows line up with: the sleeve in front and its record out (set by the script) */
.crate {
  --col: calc(var(--size) * 1.33);
  width: min(1040px, 100%);
}

.crate__head,
.crate__foot,
.rail {
  width: min(var(--col), 100%);
  margin-left: auto;
  margin-right: auto;
}

.crate__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.crate__title {
  margin: 0;
  font-family: 'Syne Variable', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.crate__arrows {
  display: flex;
  gap: 8px;
}

/* ---------------------------------------------------------------- the arrows */
.arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.16s cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-tap-highlight-color: transparent;
}

.arrow svg {
  width: 20px;
  height: 20px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s cubic-bezier(0.34, 1.8, 0.5, 1);
}

/* at the end of the row the arrow turns into a curl back to the other end */
.arrow__step,
.arrow__wrap {
  transition: opacity 0.2s, transform 0.35s cubic-bezier(0.34, 1.6, 0.5, 1);
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.arrow__wrap {
  opacity: 0;
  transform: scale(0.5) rotate(-90deg);
}

.arrow.is-wrap .arrow__step {
  opacity: 0;
  transform: scale(0.5);
}

.arrow.is-wrap .arrow__wrap {
  opacity: 1;
  transform: none;
}

@media (hover: hover) {
  .arrow:hover {
    background: var(--ink);
    color: var(--page);
    box-shadow: inset 0 0 0 1.5px var(--ink);
  }

  [data-next]:hover svg {
    transform: translateX(2px);
  }

  [data-prev]:hover svg {
    transform: translateX(-2px);
  }
}

.arrow:active {
  transform: scale(0.92);
}

.arrow:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

html[data-using='pointer'] .arrow:focus-visible {
  outline: none;
}

/* ---------------------------------------------------------------- the row */
.crate__view {
  --pad: 30px;
  --fade: 64px;
  position: relative;
  height: calc(var(--size) + var(--pad) * 2);
  margin-top: 6px;
  border-radius: 18px;
  outline: none;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.crate__view.is-held {
  cursor: grabbing;
}

.crate__view:focus-visible {
  box-shadow: 0 0 0 2px var(--page), 0 0 0 4px var(--ink);
}

html[data-using='pointer'] .crate__view:focus-visible {
  box-shadow: none;
}

/* the sleeves fade out at the two sides of the row */
.crate__row {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
}

/* a record in its sleeve: the record lies under the sleeve, and over the sleeve that comes after (the order is set
   by the script), so out of the open side it covers the next one */
.rec {
  position: absolute;
  top: var(--pad);
  left: 50%;
  width: var(--size);
  height: var(--size);
  margin-left: calc(var(--size) / -2);
  will-change: transform;
}

.rec__shadow {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -2px;
  height: 40px;
  border-radius: 50%;
  background: rgba(23, 20, 15, 0.5);
  filter: blur(14px);
  opacity: 0.35;
}

.rec__disc {
  position: absolute;
  left: 3%;
  top: 3%;
  width: 94%;
  height: 94%;
  will-change: transform;
}

.disc__vinyl,
.disc__sheen {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

/* the grooves, the gaps between the songs and the lip */
.disc__vinyl {
  background:
    repeating-radial-gradient(circle, rgba(255, 255, 255, 0.045) 0 0.7px, rgba(255, 255, 255, 0) 0.7px 2.3px),
    radial-gradient(circle, var(--vinyl) 0 35.5%, #262421 36% 36.8%, var(--vinyl) 37.4% 55%, #23211e 55.6% 56.3%, var(--vinyl) 56.9% 74%, #23211e 74.6% 75.2%, var(--vinyl) 75.8% 96.4%, #2c2a26 97.2% 100%);
  box-shadow: 0 16px 26px -14px rgba(10, 8, 5, 0.55);
}

/* the light on the grooves stays where the lamp is while the record turns */
.disc__sheen {
  background: conic-gradient(from 18deg, rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, 0.16) 16deg, rgba(255, 255, 255, 0) 38deg, rgba(255, 255, 255, 0) 180deg, rgba(255, 255, 255, 0.11) 198deg, rgba(255, 255, 255, 0) 222deg);
  -webkit-mask-image: radial-gradient(circle, transparent 0 36%, #000 37%);
  mask-image: radial-gradient(circle, transparent 0 36%, #000 37%);
  pointer-events: none;
}

.disc__label {
  position: absolute;
  left: 32%;
  top: 32%;
  width: 36%;
  height: 36%;
  overflow: visible;
}

.rec__sleeve {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 3px;
  box-shadow: 0 1px 1px rgba(23, 20, 15, 0.1), 0 14px 26px -16px rgba(23, 20, 15, 0.45);
}

.rec__sleeve svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* the open side of the sleeve, where the record comes out */
.rec__sleeve::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.18));
}

/* ---------------------------------------------------------------- the name of the record in front */
.crate__foot {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-top: 4px;
  overflow: hidden;
}

.caption {
  min-width: 0;
}

.caption--end {
  flex: none;
  text-align: right;
}

.caption p {
  margin: 0;
  white-space: nowrap;
}

.caption__title {
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'Syne Variable', system-ui, sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.caption__artist {
  margin-top: 2px !important;
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
}

.caption__price {
  font-size: 19px;
  font-weight: 650;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}

.caption__meta {
  margin-top: 2px !important;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 500;
}

/* the rail: the thumb is where you are in the row, and it stretches when the row runs */
.rail {
  position: relative;
  height: 3px;
  margin-top: 18px;
  border-radius: 2px;
  background: var(--line);
}

.rail__thumb {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 3px;
  border-radius: 2px;
  background: var(--ink);
  transform-origin: 0 50%;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 560px) {
  :root {
    --size: 260px;
    --gap: 16px;
  }

  .stage {
    padding: 24px 16px;
  }

  .crate__title {
    font-size: 19px;
  }

  .arrow {
    width: 42px;
    height: 42px;
  }

  /* the row runs to the edges of the screen, fading only in the margins */
  .crate__view {
    --pad: 24px;
    --fade: 14px;
    margin-left: -16px;
    margin-right: -16px;
  }

  .caption__title {
    font-size: 22px;
  }

  .caption__price {
    font-size: 17px;
  }
}