/* 首页(3D 路牌)专属样式 —— 成员照片墙 / 乐队简介 / 调试台。 */

.member-panel {
  position: fixed;
  z-index: var(--z-gallery);
  left: var(--panel-left);
  right: var(--panel-right);
  top: var(--panel-top);
  bottom: var(--panel-bottom);
  display: grid;
  gap: var(--image-gap);
  pointer-events: none;
  opacity: 0;
  transform: translateX(var(--space-06));
  transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}
.member-panel.is-visible { opacity: 1; transform: translateX(0); }
.member-panel[data-count="1"] { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.member-panel[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 1fr; }
.member-panel[data-count="3"] { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.member-panel[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.member-photo { position: relative; min-width: 0; min-height: 0; margin: 0; overflow: hidden; border-radius: var(--image-radius); background: var(--color-layer-01); }
.member-panel[data-count="3"] .member-photo:first-child { grid-row: 1 / -1; }
.member-photo img { width: 100%; height: 100%; display: block; object-fit: cover; }
.member-photo figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: var(--space-06) var(--space-05) var(--space-04);
  background: var(--gallery-scrim);
  color: var(--color-background);
  font: var(--type-label);
  letter-spacing: var(--tracking-wide);
}
.band-intro {
  position: absolute;
  top: calc(var(--space-edge) + var(--space-07));
  left: var(--space-edge);
  width: min(19rem, calc(100vw - 2 * var(--space-edge)));
  transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}
.band-intro.is-hidden { opacity: 0; transform: translateY(calc(-1 * var(--space-03))); }
.band-intro h1 { margin: 0 0 var(--space-03); font: 650 clamp(1.2rem, 2vw, 1.75rem)/1.1 var(--font-sans); letter-spacing: -.03em; }
.band-intro p { margin: 0; max-width: 18rem; font: 500 .76rem/1.65 var(--font-sans); color: var(--color-text-secondary); }
.band-intro .band-meta { margin-top: var(--space-04); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; }
.debug-toggle {
  position: fixed;
  z-index: var(--z-debug);
  top: var(--space-edge);
  right: var(--space-edge);
  border: var(--border-hairline) solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  padding: var(--space-03) var(--space-04);
  background: var(--color-layer-01);
  color: var(--color-text-primary);
  font: var(--type-label);
  letter-spacing: var(--tracking-wide);
  cursor: pointer;
}
.debug-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.debug-panel {
  position: fixed;
  z-index: var(--z-debug);
  top: calc(var(--space-edge) + 2.75rem);
  right: var(--space-edge);
  width: min(20rem, calc(100vw - 2 * var(--space-edge)));
  padding: var(--space-06);
  border: var(--border-hairline) solid var(--color-border-subtle);
  background: color-mix(in oklch, var(--color-background) 94%, transparent);
  box-shadow: 0 .75rem 2.5rem color-mix(in oklch, var(--ink-90) 12%, transparent);
  opacity: 0;
  transform: translateY(calc(-1 * var(--space-03)));
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.debug-panel.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.debug-title { margin: 0 0 var(--space-06); font: var(--type-label); letter-spacing: var(--tracking-wide); }
.debug-field { display: grid; grid-template-columns: 1fr auto; gap: var(--space-03); margin-block: var(--space-05); }
.debug-field label { font: var(--type-label); color: var(--color-text-secondary); }
.debug-field output { font: var(--type-label); color: var(--color-text-primary); }
.debug-field select, .debug-field input { grid-column: 1 / -1; width: 100%; accent-color: var(--color-interactive); }
.debug-field select {
  border: var(--border-hairline) solid var(--color-border-strong);
  padding: var(--space-03);
  background: var(--color-background);
  color: var(--color-text-primary);
  font: var(--type-label);
}
.debug-note { margin: var(--space-06) 0 0; font: var(--type-label); color: var(--color-text-secondary); letter-spacing: .04em; }