/* ==========================================================================
 * pages/shelf.css — 影音架（线稿 CD 游戏列表）
 * 作用域前缀：.page-shelf（design.md §5.4），颜色全部走深浅色主题变量
 * ========================================================================== */

.page-shelf {
  max-width: 860px;
  padding: 64px 48px;
}

.shelf-head__title {
  margin: 0 0 10px;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--ink);
  border-left: 4px solid var(--accent);
  padding-left: 20px;
}
.shelf-head__sub {
  margin: 0 0 48px;
  font-size: 12px;
  letter-spacing: .24em;
  color: var(--muted);
}

/* ---------- CD 行：唱片盒 + 抽出光盘 + 信息 ---------- */

.shelf-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.disc-row {
  display: flex;
  align-items: center;
  gap: 32px;
  cursor: pointer;
  outline: none;
}
.disc-row:focus-visible .disc-case__body { border-color: var(--accent); }

/* 唱片盒 */
.disc-case {
  position: relative;
  flex: none;
  width: 150px;
  height: 150px;
}
.disc-case__body {
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--muted);
  border-radius: var(--radius-md, 14px);
  background: var(--glass-bg, var(--panel));
  transition: border-color .3s cubic-bezier(.22, 1, .36, 1);
}
.disc-case__slot {
  position: absolute;
  top: 8px;
  bottom: 8px;
  right: -2px;
  width: 4px;
  background: var(--bg-0);
  border: 1.5px solid var(--muted);
  border-left: none;
}
.disc-row:hover .disc-case__body { border-color: var(--accent-cyan); }

/* CD 光盘：线稿同心环（repeating-radial-gradient 模拟刻线） */
.disc {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  border: 1.5px solid var(--muted);
  background:
    repeating-radial-gradient(circle at center,
      transparent 0 10px,
      var(--line) 10px 11px);
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
.disc__hole {
  position: absolute;
  inset: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--muted);
  background: var(--panel);
}

/* 抽出：光盘滑出盒口并向右探出 */
.disc-row.is-out .disc {
  transform: translateX(88px) rotate(140deg);
}

/* 信息区：默认收起，抽出后显现 */
.disc-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity .4s cubic-bezier(.22, 1, .36, 1) .12s,
              transform .4s cubic-bezier(.22, 1, .36, 1) .12s;
}
.disc-row.is-out .disc-info {
  opacity: 1;
  transform: translateX(0);
}
.disc-info__no {
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--accent-cyan);
}
.disc-info__title {
  font-size: 20px;
  letter-spacing: .12em;
  color: var(--ink);
}
.disc-info__desc {
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--muted);
}
.disc-info__enter {
  display: inline-block;
  margin-top: 8px;
  padding: 9px 22px;
  font-size: 12px;
  letter-spacing: .22em;
  color: var(--accent);
  text-decoration: none;
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill, 999px);
  align-self: flex-start;
  transition: color .3s cubic-bezier(.22, 1, .36, 1), background .3s cubic-bezier(.22, 1, .36, 1);
}
.disc-info__enter:hover {
  color: var(--bg-0);
  background: var(--accent);
}
.disc-info__soon {
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: .22em;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: var(--radius-pill, 999px);
  padding: 8px 18px;
  align-self: flex-start;
}

/* 占位行：盒体虚线，光盘灰化 */
.disc-row.is-disabled .disc-case__body { border-style: dashed; }
.disc-row.is-disabled .disc { opacity: .45; }

/* 返回链接 */
.shelf-back {
  margin-top: 56px;
}
.shelf-back a {
  font-size: 13px;
  letter-spacing: .2em;
  color: var(--muted);
  text-decoration: none;
  transition: color .25s cubic-bezier(.22, 1, .36, 1);
}
.shelf-back a:hover { color: var(--accent-cyan); }

/* 入场 */
@media (prefers-reduced-motion: no-preference) {
  .page-shelf .disc-row { animation: shelf-row-in .5s cubic-bezier(.22, 1, .36, 1) both; }
  .page-shelf .disc-row:nth-child(2) { animation-delay: .08s; }
  .page-shelf .disc-row:nth-child(3) { animation-delay: .16s; }
  .page-shelf .disc-row:nth-child(4) { animation-delay: .24s; }
  @keyframes shelf-row-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .disc, .disc-info { transition: none; }
}

/* ---------- 移动端适配（≤820px） ---------- */
@media (max-width: 820px) {
  .page-shelf { padding: 32px 20px; }
  .shelf-head__title { font-size: 26px; }
  .shelf-head__sub { margin-bottom: 32px; letter-spacing: .14em; }
  .disc-row { gap: 18px; }
  .disc-case { width: 104px; height: 104px; }
  .disc { left: 8px; top: 8px; width: 88px; height: 88px; }
  .disc__hole { inset: 30px; }
  .disc-row.is-out .disc { transform: translateX(56px) rotate(140deg); }
  .disc-info__title { font-size: 16px; }
  .disc-info__desc { font-size: 12px; }
}