/**
 * btn-secondary-shared.css — 玻璃态次级按钮（Hero / CTA / 关于页）
 * 由 site-chrome.css 引入；暗色 Hero 场景 hover 用 cyan，浅色场景用 gold。
 */

.btn-secondary {
  border: 1.5px solid var(--glass-border, rgba(255, 255, 255, 0.12));
  color: var(--hero-text, var(--ink));
  font-size: var(--text-base, 1rem);
  padding: 0.95rem 2.1rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: border-color 0.25s, background 0.25s, color 0.25s, transform 0.25s;
  background: var(--glass-bg, rgba(255, 255, 255, 0.06));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  white-space: nowrap;
  font-weight: 600;
  font-family: var(--ff-body);
  cursor: pointer;
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  border-color: var(--gold);
  background: rgba(184, 136, 42, 0.08);
  color: var(--gold);
}

#hero .btn-secondary,
.cta-section .btn-secondary,
body.about-page .btn-secondary {
  color: var(--hero-text);
  border-color: rgba(255, 255, 255, 0.18);
}

#hero .btn-secondary:hover,
#hero .btn-secondary:focus-visible,
.cta-section .btn-secondary:hover,
.cta-section .btn-secondary:focus-visible,
body.about-page .btn-secondary:hover,
body.about-page .btn-secondary:focus-visible {
  border-color: var(--cyan, #22d3ee);
  background: rgba(34, 211, 238, 0.1);
  color: var(--cyan, #22d3ee);
  transform: translateY(-2px);
}

@media (hover: none) and (pointer: coarse) {
  .btn-secondary:active {
    transform: scale(0.98);
  }
}