/* Indigo Fire — release title marquee
 *
 * Problem: `.album-id h3` holds titles like A.I.DON'T.KNOW.BETTER, which are a
 * single unbreakable token. As a grid item its automatic minimum size is its
 * min-content width, so the h3 box grows past its own column and the glyphs
 * paint across the divider into the track list.
 *
 * Fix: stop the module from being widened by its own content, clip it, and —
 * only for titles that genuinely cannot fit — put the title on one line and
 * scroll it horizontally inside the module.
 *
 * Loaded after indigo-fire-player.css so these rules win on equal specificity.
 */

/* 1. The module never grows to fit an oversized title. */
.album-id {
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
}

.album-id h3 {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

/* 2. The wrapper is a <span> inside .album-id, so the player's own
 *    `.album-id span` rule (display:block, 15px Courier, margin-top) hits it.
 *    Opt back out of all of that. */
.album-id h3 .title-marquee {
  display: inline-block;
  max-width: 100%;
  margin: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

/* 3. Only titles JS has confirmed cannot wrap into the module get scrolled.
 *    Multi-word titles that wrap normally today keep wrapping normally. */
.album-id h3.is-overflowing {
  white-space: nowrap;
}

.album-id h3.is-overflowing .title-marquee {
  width: max-content;
  min-width: 100%;
  max-width: none;
  white-space: nowrap;
  will-change: transform;
  animation: albumTitleScroll var(--title-scroll-duration, 12s) ease-in-out infinite;
}

/* let people stop it to read it */
.album-id h3.is-overflowing:hover .title-marquee,
.album-id h3.is-overflowing:focus-within .title-marquee {
  animation-play-state: paused;
}

@keyframes albumTitleScroll {
  0%,
  12% {
    transform: translateX(0);
  }

  45%,
  57% {
    transform: translateX(var(--title-scroll-distance, 0px));
  }

  90%,
  100% {
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .album-id h3.is-overflowing .title-marquee {
    animation: none;
  }

  .album-id h3.is-overflowing,
  .album-id h3.is-overflowing .title-marquee {
    overflow-wrap: anywhere;
    white-space: normal;
    word-break: break-word;
  }
}