/* ==========================================================================
   首页 · 专辑货架的动态设计

   依据 DESIGN.md §08「动效系统」的四条规矩，这里只用被批准的那几种动法：
     1. 风是唯一的动力 —— 云影、光扫，不用弹跳/回弹/spring
     2. 慢到像呼吸 —— 循环 60s 一级，位移极小
     3. 只在"发生了什么"时动 —— 入场一次、播放时转、悬停才浮
     4. 一次编舞 —— 进入首页只成组入场一次，逐张错开 80ms

   三处动态，各对应一条既有先例：
     领衔卡的封面  → 「云影横向漂移」（同首屏水墨底纹，60s 走 2%）
     正在播放的卡  → 「唱片匀速旋转」（26s/圈，与唱片页同一条规则）
     入场          → ink-rise 逐张错开（同首屏「标题先落」的编舞）

   减少动态效果开启时：tokens.css 已把 animation/transition 时长压到 1ms，
   并强制 iteration-count: 1，所以下面这些会自动静止，不需要另外写覆盖块。
   ========================================================================== */

/* ── 排版：一格领衔 + 四张小卡，打破"一排等大"的单一感 ──
   领衔卡占 2×2（封面大一号、标题大一号），小卡自动补满剩下的格子。
   3 列 × 2 行 = 6 格，正好容纳 1 张领衔 + 2 张小卡；更多小卡顺延到下一行。 */
.grid--feature {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 20px;
  justify-content: start;
}

.grid--feature .card--lead {
  grid-column: span 2;
  grid-row: span 2;
}

/* 领衔卡：标题跟着放大，别让大封面配一行小字。
   ⚠ 必须带 !important：app.css 末尾那两轮设计修订里有
   `.card__title { font-size: 14px !important }`（"文字：允许两行"那一段），
   它把全站卡片标题钉死在 14px。这里用更高的选择器权重 + !important 才盖得住 ——
   沿用项目自己的写法，不另起一套。 */
.grid--feature .card--lead .card__title {
  font-size: var(--fs-lead) !important;
  letter-spacing: .02em;
}

.grid--feature .card--lead .card__sub {
  font-size: var(--fs-small) !important;
}

/* 领衔卡的播放键也大一号，与封面成比例 */
.card--lead .card__play {
  width: 52px;
  height: 52px;
}

/* ── 1. 入场：一次成组，逐张错开（封顶 480ms，不做无限延后） ── */
.grid--feature .card {
  animation: ink-rise var(--dur-slow) var(--ease-settle) both;
}

.grid--feature .card:nth-child(1) { animation-delay: 0ms; }
.grid--feature .card:nth-child(2) { animation-delay: 80ms; }
.grid--feature .card:nth-child(3) { animation-delay: 160ms; }
.grid--feature .card:nth-child(4) { animation-delay: 240ms; }
.grid--feature .card:nth-child(5) { animation-delay: 320ms; }
.grid--feature .card:nth-child(n+6) { animation-delay: 400ms; }

/* ── 2. 领衔卡封面上的一层云影：60s 只走 2%，像云过山头 ──
   只给领衔卡，普通卡不动 —— 规矩 3「不做无意义的常驻抖动」。 */
.card--lead .card__art::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: linear-gradient(112deg, rgba(242, 245, 248, 0.14), rgba(242, 245, 248, 0) 44%, rgba(4, 7, 15, 0.36));
  background-size: 170% 170%;
  background-position: 49% 50%;
  animation: cloud-drift 60s ease-in-out infinite alternate;
}

/* ── 3. 正在播放的专辑：封面上一道匀速转动的光扫 ──
   与唱片页同一条规则（26s/圈）。这是全站唯一允许的持续匀速运动，
   所以它同时也是"这张正在放"的视觉标记 —— 一眼能从一排卡里认出来。 */
.card.is-playing .card__art::after {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: 2;
  pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(207, 214, 220, 0.30) 34deg, transparent 78deg, transparent 360deg);
  mix-blend-mode: screen;
  animation: card-spin 26s linear infinite;
}

@keyframes card-spin {
  to { transform: rotate(360deg); }
}

/* 正在播放的卡：封面描一圈河水青（全站规则：河水青只用于"正在发生"） */
.card.is-playing .card__art {
  box-shadow: var(--shadow-2), 0 0 0 1px var(--river-soft);
}

/* 徽标：三根墨柱跳动（暂停即停，同曲目行那条规则） */
.card__playing {
  position: absolute;
  left: var(--sp-3);
  bottom: var(--sp-3);
  z-index: 3;
  display: none;
  align-items: flex-end;
  gap: 3px;
  height: 20px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(4, 7, 15, 0.62);
  backdrop-filter: blur(6px);
  color: var(--river);
  font-size: var(--fs-micro);
  letter-spacing: .08em;
}

.card.is-playing .card__playing {
  display: inline-flex;
}

.card__playing i {
  width: 2px;
  height: 11px;
  border-radius: 1px;
  background: currentColor;
  transform-origin: bottom;
  animation: eq 900ms ease-in-out infinite alternate;
}

.card__playing i:nth-child(2) { height: 15px; animation-delay: 150ms; }
.card__playing i:nth-child(3) { height: 9px; animation-delay: 300ms; }

/* ── 悬停 ──
   app.css 末尾的设计修订里有一句 `.card:hover { transform: none !important }`，
   并注明"悬停只做极淡提亮" —— 那是**刻意的**，所以这里不再把卡片本身抬起来，
   只让领衔卡的封面缓慢推近一点（620ms，读作呼吸，不是弹）。
   缩放对象是封面里的图，不是封面盒子：盒子带 1px 描边，缩它会把描边一起放大。 */
.card--lead .card__art img,
.card--lead .card__art .cover-svg {
  transition: transform var(--dur-slow) var(--ease-settle);
}

.card--lead:hover .card__art img,
.card--lead:hover .card__art .cover-svg,
.card--lead:focus-within .card__art img,
.card--lead:focus-within .card__art .cover-svg {
  transform: scale(1.035);
}

/* ══════════════════════════════════════════════════════════════
   歌手墙：圆形头像一面墙（参考网易云的歌手入口）

   动效只用被 §08 批准的那几种：
     入场 —— ink-rise 逐张错开（--i 由 JS 给，封顶 11 档 ≈ 660ms）
     悬停 —— 头像缓慢推近（620ms，读作呼吸）
     在播 —— 圆环上一道匀速转动的弧（26s/圈，与唱片同一条规则）
   ══════════════════════════════════════════════════════════════ */

.grid--wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 20px 14px;
  justify-content: start;
}

.card--wall {
  align-items: center;
  text-align: center;
  animation: ink-rise var(--dur-slow) var(--ease-settle) backwards;
  animation-delay: calc(var(--i, 0) * 60ms);
}

.card--wall .card__title,
.card--wall .card__sub {
  max-width: 100%;
  text-align: center;
}

.card--wall .card__art img,
.card--wall .card__art .cover-svg {
  transition: transform var(--dur-slow) var(--ease-settle);
}

.card--wall:hover .card__art img,
.card--wall:hover .card__art .cover-svg,
.card--wall:focus-visible .card__art img,
.card--wall:focus-visible .card__art .cover-svg {
  transform: scale(1.06);
}

/* 圆环上那道弧：conic 的一小段，亮在圆的边缘。
   平时不显示；悬停或正在播放时才转 —— 规矩 3「只在发生了什么时动」。 */
.card--wall .card__art::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 76%, rgba(95, 227, 210, 0.8) 92%, transparent 100%);
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease-ink);
}

.card--wall:hover .card__art::after,
.card--wall.is-playing .card__art::after {
  opacity: 1;
  animation: wall-ring 26s linear infinite;
}

.card--wall.is-playing .card__art {
  box-shadow: var(--shadow-2), 0 0 0 1px var(--river-soft);
}

@keyframes wall-ring {
  to { transform: rotate(360deg); }
}

/* ── 响应式：窄屏先退成两列，再退成一列，领衔卡不再跨行 ── */
@media (max-width: 860px) {
  .grid--feature {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  .grid--feature .card--lead {
    grid-column: span 2;
    grid-row: span 1;
  }
  .card--lead .card__title { font-size: var(--fs-body); }
}

@media (max-width: 520px) {
  .grid--feature {
    grid-template-columns: minmax(0, 1fr);
  }
  .grid--feature .card--lead {
    grid-column: span 1;
  }
}