/* ============================================================
   加入我们（首页 CTA 扩展）join.css  2026-09-29 新增
   - 把首页底部 CTA 改成两栏：左文案 + 右审核群二维码
   - 二维码为黑金版（images/qq-group-qr-gold-300.png），下衬钢琴键
   - 引入位置：css/home.css 之后、皮肤 skin-*.css 之前
   ============================================================ */

.cta-band.cta-join {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 40px;
  text-align: left;
}

/* ---------- 金色动态音符（2026-09-29 新增） ---------- */
.cta-staff {
  position: absolute;
  top: 22px;
  right: 30px;
  width: 288px;
  color: var(--accent-2);
  opacity: .85;
  pointer-events: none;
}
.cta-staff svg { display: block; width: 100%; height: auto; }
.cta-staff .note {
  opacity: 0;
  animation: staffNoteIn .9s cubic-bezier(.22, .61, .36, 1) forwards,
             staffFloat 7s ease-in-out 1.6s infinite;
}
.cta-staff .n1 { animation-delay: .45s, 1.6s; }
.cta-staff .n2 { animation-delay: .85s, 2s; }

@keyframes staffNoteIn {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes staffFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .cta-staff .note { animation: none; opacity: 1; }
}

.cta-join-main h2 { margin: 0 0 14px; }
.cta-join-main p { max-width: 560px; margin: 0 0 26px; }

.cta-join-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- 二维码卡片 ---------- */
.cta-join-qr {
  margin: 0;
  text-align: center;
  flex: 0 0 auto;
}
.cta-join-qr img {
  display: block;
  width: 208px;
  height: 208px;
  padding: 10px;
  background: var(--panel-2);
  border: 1px solid var(--line-strong);
}
.cta-join-qr figcaption {
  margin-top: 12px;
  font-size: 12.5px;
  letter-spacing: .1em;
  color: var(--accent-2);
}
.cta-join-qr figcaption b {
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: .06em;
}

/* ---------- 钢琴键（黑键 / 金键） ---------- */
.piano {
  display: flex;
  gap: 2px;
  height: 16px;
  margin-top: 14px;
}
.piano i {
  flex: 1 1 0;
  background: linear-gradient(180deg, rgba(232, 213, 168, .92), rgba(200, 169, 106, .28));
  border: 1px solid rgba(200, 169, 106, .38);
}
/* 黑键：2 / 4 / 7 / 9 / 11 号位，像真实键盘的两黑三黑排列 */
.piano i:nth-child(2),
.piano i:nth-child(4),
.piano i:nth-child(7),
.piano i:nth-child(9),
.piano i:nth-child(11) {
  background: linear-gradient(180deg, #0b0812, #1a1526);
  border-color: rgba(200, 169, 106, .55);
}

/* ---------- 窄屏：上下堆叠 ---------- */
@media (max-width: 880px) {
  .cta-band.cta-join {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 30px;
  }
  .cta-join-main p { margin-left: auto; margin-right: auto; }
  .cta-join-actions { justify-content: center; }
  .cta-join-qr img { margin: 0 auto; }
  .cta-staff { display: none; }   /* 窄屏让位给二维码 */
}