/* === Side B: the listening room — dark, warm, spectrum as whisper === */

/* Hidden until the iris transition flips the record */
.side-b {
  display: none;
  background: var(--b-bg);
  color: var(--b-text);
  min-height: 100vh;
}

/* Content floats above the prism watermark */
.side-b > *:not(.prism-bg-b):not(.return-trigger) {
  position: relative;
  z-index: 1;
}

body.side-b-active {
  background: var(--b-bg);
  color: var(--b-text);
}

body.side-b-active .side-a {
  display: none;
}

body.side-b-active .side-b {
  display: block;
}

/* Same column rhythm as the A-side — same album, different arrangement */
.music-atlas,
.fun-facts,
.side-b-footer {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-4xl) var(--content-gutter) 0;
}

.music-atlas {
  padding-top: 35vh; /* land in the room, not at the door */
}

/* ---- Flip back to Side A ---- */
.return-trigger {
  position: fixed;
  top: var(--space-lg);
  left: var(--space-lg);
  z-index: 3;
  font-family: var(--font-en);
  font-size: var(--text-sm);
  color: var(--b-text-secondary);
  background: transparent;
  border: 1px solid var(--b-border);
  border-radius: var(--radius-md);
  padding: var(--space-xs) var(--space-md);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              opacity var(--dur-slow) var(--ease-out);
}

.return-trigger:hover {
  color: var(--b-text);
  border-color: var(--b-text-secondary);
}

/* ---- Music Atlas ---- */
.music-subtitle {
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--b-text-secondary);
  margin-top: calc(-1 * var(--space-lg));
  margin-bottom: var(--space-2xl);
}

.music-category {
  margin-bottom: var(--space-2xl);
}

.music-category-name {
  display: flex;
  align-items: baseline;
  font-size: var(--text-base);
  font-weight: 550;
  color: var(--b-text);
  margin-bottom: var(--space-md);
}

.music-category-desc {
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--b-text-secondary);
  margin-left: var(--space-sm);
}

.music-entry {
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--b-border);
}

.music-entry-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  margin-bottom: var(--space-xs);
}

.music-artist {
  font-weight: 550;
  color: var(--b-text);
}

.music-album {
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--b-text-secondary);
}

/* Stars: the one promised color of the dark side — candlelight gold */
.music-stars {
  margin-left: auto;
  font-size: var(--text-sm);
  letter-spacing: 0.12em;
  color: var(--spectrum-yellow);
}

.music-review {
  color: var(--b-text);
  opacity: 0.85;
}

/* Music fold: the "更多 N 条" toggle that keeps each genre a fixed height */
.music-fold-summary {
  display: inline-flex;
  align-items: baseline;
  font-size: var(--text-sm);
  color: var(--b-text-secondary);
  cursor: pointer;
  padding: var(--space-xs) var(--space-sm);
  margin-left: calc(-1 * var(--space-sm));
  border-radius: var(--radius-md);
  transition: color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}

.music-fold-summary:hover {
  color: var(--b-text);
  background: rgba(255, 255, 255, 0.04);
}

.music-fold-summary::after {
  content: '›';
  margin-left: var(--space-xs);
  transition: transform var(--dur-fast) var(--ease-out);
}

.music-fold[open] .music-fold-summary::after {
  transform: rotate(90deg);
}

/* Section tracklist on the dark side: the text stays grey, but on hover a
   whisper of the spectrum draws itself underneath — a flash, not a state */
.side-b {
  --toc-fg: var(--b-text-secondary);
}

.side-b .toc-item::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background-image: linear-gradient(90deg,
    var(--spectrum-red),
    var(--spectrum-orange),
    var(--spectrum-yellow),
    var(--spectrum-green),
    var(--spectrum-blue),
    var(--spectrum-violet));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-normal) var(--ease-out);
}

.side-b .toc-item:hover {
  color: var(--b-text);
}

.side-b .toc-item:hover::after {
  transform: scaleX(1);
}

/* ---- Fun Facts ---- */
.fun-list {
  list-style: none;
}

.fun-item {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
}

.fun-emoji {
  flex-shrink: 0;
}

.fun-text {
  color: var(--b-text-secondary);
}

/* ---- B-side Footer: same content, listening-room atmosphere ---- */
.side-b-footer {
  padding-bottom: var(--space-3xl);
}

.side-b-footer .contact-list {
  border-top-color: var(--b-border);
}

.side-b-footer .contact-item {
  border-bottom-color: var(--b-border);
}

.side-b-footer .contact-label {
  color: var(--b-text-secondary);
}

.side-b-footer .contact-value {
  color: var(--b-text);
}

/* The spectrum shimmers through on hover — a flash, not a state */
.side-b-footer .contact-link {
  transition: color var(--dur-fast) var(--ease-out);
}

.side-b-footer .contact-link::after {
  background: currentColor;
}

.side-b-footer .contact-item:nth-child(2) .contact-link:hover {
  color: var(--spectrum-red);
}

.side-b-footer .contact-item:nth-child(3) .contact-link:hover {
  color: var(--spectrum-blue);
}

/* ---- Iris canvas (created by transition.js) ---- */
.iris-canvas {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}