/* ==========================================================================
   IMABEATDUHPARTY — ALBUM CAROUSEL
   --------------------------------------------------------------------------
   A horizontal record shelf. Native scroll with snap points, so it swipes on
   touch, scrolls on a trackpad and steps with the arrows on desktop.

   Each card carries its own --album-accent, set inline on the card in the
   HTML and taken from that cover's dominant colour. The accent is used
   sparingly — a number, a rule and a hover glow — so the artwork stays the
   loudest thing in the section.
   ========================================================================== */

.albums {
  position: relative;
}

/* Heading row, with the arrows sitting opposite the title rather than on top
   of the artwork. */
.albums__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-block-end: var(--sp-6);
}

.albums__nav {
  display: none;
  gap: var(--sp-2);
  flex: none;
}
@media (min-width: 64rem) {
  .albums__nav { display: flex; }
}

.albums__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--fg);
  background: rgb(255 255 255 / 0.04);
  transition:
    background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    opacity var(--dur-fast) var(--ease),
    transform var(--dur) var(--ease-out);
}
.albums__arrow:hover:not(:disabled),
.albums__arrow:focus-visible {
  background: var(--pink);
  border-color: var(--pink);
  color: var(--ink);
  transform: translateY(-2px);
}
.albums__arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.albums__arrow svg { width: 18px; height: 18px; }

/* --- The shelf ------------------------------------------------------------
   Bleeds to the page edges so a card can sit half-off the right side and
   make the horizontal scroll obvious without any instructions. */
.albums__scroller {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(15rem, 24vw, 23rem);
  gap: clamp(1rem, 0.6rem + 1.2vw, 1.75rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: var(--gutter);
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  /* Room for the hover lift and the card shadow */
  padding-block: 0 var(--sp-5);
  /* The peek and the arrows are the affordance; the bar would only add noise */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.albums__scroller::-webkit-scrollbar { display: none; }

/* --- Card ---------------------------------------------------------------- */
.album {
  scroll-snap-align: start;
  display: grid;
  gap: var(--sp-3);
  align-content: start;
  color: inherit;
  transition: transform var(--dur) var(--ease-out);
}
.album:hover { transform: translateY(-6px); }

.album__art {
  position: relative;
  display: block;
  /* The covers are 16:9 and several carry their own typography, so they are
     shown at their true ratio — cropping to a square would cut the artwork. */
  aspect-ratio: 1672 / 941;
  border-radius: var(--radius);
  overflow: hidden;
  background-color: var(--ink-2);
  background-image: var(--art-lqip);
  background-size: cover;
  background-position: 50% 50%;
  box-shadow: 0 18px 40px -24px rgb(0 0 0 / 0.9);
  transition: box-shadow var(--dur) var(--ease);
}

.album__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}
.album__art.is-loaded img { opacity: 1; }
.album:hover .album__art img,
.album:focus-visible .album__art img { transform: scale(1.05); }

/* The accent only shows itself on hover — a thin ring in the cover's own
   dominant colour. */
.album__art::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
  transition: box-shadow var(--dur) var(--ease);
}
.album:hover .album__art::after,
.album:focus-visible .album__art::after {
  box-shadow: inset 0 0 0 2px var(--album-accent, var(--pink));
}
.album:hover .album__art,
.album:focus-visible .album__art {
  box-shadow:
    0 22px 50px -26px rgb(0 0 0 / 0.95),
    0 0 44px -14px var(--album-accent, var(--pink));
}

/* --- Title --------------------------------------------------------------- */
.album__meta {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  min-width: 0;
}

.album__index {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-micro);
  letter-spacing: var(--track-eyebrow);
  color: var(--album-accent, var(--pink));
  flex: none;
  padding-block-start: 0.15em;
}

.album__title {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.15rem);
  line-height: 1.15;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-wrap: balance;
  /* Two lines' worth, so a one-line title and a two-line title leave their
     accent rules on the same baseline across the shelf. */
  min-height: 2.3em;
  transition: color var(--dur-fast) var(--ease);
}
.album:hover .album__title,
.album:focus-visible .album__title { color: var(--album-accent, var(--pink)); }

/* A short accent rule that grows under the title on hover */
.album__rule {
  display: block;
  height: 2px;
  width: 1.75rem;
  border-radius: 2px;
  background: var(--album-accent, var(--pink));
  opacity: 0.55;
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast) var(--ease);
}
.album:hover .album__rule,
.album:focus-visible .album__rule { transform: scaleX(2.2); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .album,
  .album__art img,
  .album__rule { transition: none; }
  .album:hover { transform: none; }
  .album:hover .album__art img { transform: none; }
  .album:hover .album__rule { transform: none; }
}