@import url("/assets/music-room.589nm.v2.css");

/* Release browser: one compact layer above the existing transport. */
.release-browser {
  max-width: min(100%, 940px);
  margin-top: clamp(18px, 2.6vh, 28px);
}

.release-heading {
  display: flex;
  align-items: baseline;
  gap: 13px;
  min-width: 0;
}

.release-tabs {
  display: inline-flex;
  flex: 0 0 auto;
  border: 1px solid var(--music-rule);
}

.release-tab {
  min-width: 52px;
  min-height: 30px;
  border: 0;
  padding: 7px 11px;
  background: rgba(8, 7, 6, .22);
  color: var(--music-muted);
  cursor: pointer;
  font: 700 9px/1 var(--music-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.release-tab + .release-tab { border-inline-start: 1px solid var(--music-rule); }
.release-tab:hover,
.release-tab:focus-visible,
.release-tab.is-active { background: rgba(219, 113, 62, .16); color: var(--music-ink); outline: 0; }
.release-tab.is-active { box-shadow: inset 0 -2px var(--music-orange); }

.release-meta {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--music-ink);
  font: 700 10px/1.3 var(--music-mono);
  letter-spacing: .06em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.release-story {
  margin: 9px 0 0;
  overflow: hidden;
  color: var(--music-muted);
  font: 500 9px/1.45 var(--music-mono);
  letter-spacing: .025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.track-list {
  display: grid;
  grid-auto-columns: minmax(142px, 1fr);
  grid-auto-flow: column;
  gap: 0;
  margin: 10px 0 0;
  padding: 0 0 5px;
  overflow-x: auto;
  list-style: none;
  scrollbar-color: var(--music-orange) transparent;
  scrollbar-width: thin;
}

.track-choice {
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-top: 1px solid var(--music-rule);
  padding: 9px 10px 8px;
  overflow: hidden;
  background: rgba(8, 7, 6, .18);
  color: var(--music-muted);
  cursor: pointer;
  font: 600 9px/1.2 var(--music-mono);
  text-align: start;
  white-space: nowrap;
}

.track-list li + li .track-choice { border-inline-start: 1px solid rgba(244, 239, 229, .12); }
.track-choice:hover,
.track-choice:focus-visible { color: var(--music-ink); outline: 1px solid var(--music-orange); outline-offset: -1px; }
.track-choice.is-current { border-top-color: var(--music-orange); color: var(--music-ink); background: rgba(219, 113, 62, .13); }
.track-number { flex: 0 0 auto; color: var(--music-orange); font-size: 8px; }

.music-stage[data-title-size="long"] .track-title { font-size: clamp(3.7rem, 9.2vw, 8.4rem); }

/* My Own Pace keeps the cover still; only the light and existing grain move. */
.music-frame::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: -12%;
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 18% 40%, rgba(255, 244, 218, .34), transparent 29%),
    linear-gradient(112deg, transparent 26%, rgba(255, 232, 192, .18) 46%, transparent 66%);
  mix-blend-mode: soft-light;
  transform: translate3d(-9%, 0, 0);
}

.music-frame.is-cover-motion::after {
  opacity: .42;
  animation: cover-light 18s ease-in-out infinite alternate;
}

@keyframes cover-light {
  0% { transform: translate3d(-9%, -2%, 0); filter: brightness(.78); }
  48% { transform: translate3d(2%, 1%, 0); filter: brightness(1.05); }
  100% { transform: translate3d(9%, -1%, 0); filter: brightness(.86); }
}

/* LR2: keep the title and primary transport inside the first mobile viewport. */
@media (max-width: 620px) {
  .music-stage { min-height: 100svh; overflow-y: auto; }
  .music-shell {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 19px;
    padding-top: max(88px, calc(env(safe-area-inset-top) + 70px));
  }
  .track-copy { align-self: stretch; }
  .track-eyebrow { margin-bottom: 10px; }
  .track-title { font-size: clamp(3.45rem, 18vw, 5.7rem); }
  .music-stage[data-title-size="long"] .track-title { font-size: clamp(2.7rem, 12.8vw, 4.15rem); }
  .track-tagline { margin-top: 13px; }
  .release-browser { margin-top: 15px; }
  .release-story { margin-top: 7px; }
  .track-list { margin-top: 8px; }
  .track-choice { min-height: 32px; padding-block: 8px 7px; }
  .music-console { gap: 18px; padding-top: 15px; }
  .play-button { width: 56px; }
  .listen-links { margin-top: 1px; }
}

@media (max-width: 620px) and (max-height: 700px) {
  .music-shell {
    gap: 13px;
    padding-top: max(78px, calc(env(safe-area-inset-top) + 64px));
  }
  .track-title { font-size: clamp(3rem, 16vw, 4.6rem); }
  .music-stage[data-title-size="long"] .track-title { font-size: clamp(2.45rem, 11.7vw, 3.55rem); }
  .track-tagline { margin-top: 9px; }
  .release-browser { margin-top: 10px; }
  .release-story { display: none; }
  .track-list { margin-top: 7px; }
  .music-console { gap: 10px; padding-top: 11px; }
  .play-button { width: 52px; }
  .listen-link { min-height: 38px; }
}

/* Background video never exposes iOS/Safari native controls, including Low Power Mode overlays. */
.music-frame video {
  pointer-events: none !important;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.music-frame video::-webkit-media-controls,
.music-frame video::-webkit-media-controls-panel,
.music-frame video::-webkit-media-controls-play-button,
.music-frame video::-webkit-media-controls-start-playback-button,
.music-frame video::-webkit-media-controls-overlay-play-button,
.music-frame video::-webkit-media-controls-overlay-enclosure {
  display: none !important;
  -webkit-appearance: none;
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .music-frame.is-cover-motion::after { animation: none; opacity: .16; }
}