/* ============================================================
   animations.css — 全站动效（遵循三条性能原则）
   1. 只动 transform / opacity（合成器友好），不碰 box-shadow、
      background-position、尺寸属性
   2. will-change 不写死在 CSS，由 JS 在动画开始时临时添加、
      结束后立即移除（见 animations.js）
   3. 首屏不加入场动画；滚动渐显由 JS 在 load + 空闲后启用，
      且只武装首屏以下的少量元素
   ============================================================ */

/* ── 滚动渐显（仅 JS 武装的元素生效，无 JS 时内容永远可见） ── */
.reveal-armed {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.22,.61,.36,1);
}
.reveal-armed.reveal-in {
  opacity: 1;
  transform: none;
}

/* ── 微交互：按钮（仅 transform，单元素、悬停时才触发） ── */
.btn {
  transition: transform .15s ease, background-color .15s ease,
              color .15s ease, border-color .15s ease;
}
.btn-primary:hover  { transform: translateY(-2px); }
.btn-primary:active { transform: translateY(0) scale(.98); }
.btn:active, .map-btn:active, .city-tab:active { transform: scale(.95); }

/* 快捷城市/记录条目：悬停轻微上浮（transform only） */
.city-cell, .record-item, .guide-item, .pill-link {
  transition: transform .2s ease, border-color .2s ease;
}
@media (hover: hover) {
  .city-cell:hover, .record-item:hover, .guide-item:hover, .pill-link:hover {
    transform: translateY(-2px);
  }
}

/* ── FAQ 手风琴（功能性交互，单元素、用户触发时才动） ──
   用 .faq-item .faq-answer 提高优先级，覆盖各页面 CSS 的 display:none */
.faq-item .faq-answer {
  display: block;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  padding-bottom: 0;
  transition: max-height .3s ease, opacity .25s ease;
}
.faq-item.open .faq-answer {
  max-height: 900px;
  opacity: 1;
  padding-bottom: 16px;
}
.faq-icon { transition: transform .25s ease; }
.faq-item.open .faq-icon { transform: rotate(180deg); }

/* ── 返回顶部按钮显隐 ── */
#floatBackTop { opacity: 0; pointer-events: none; transition: opacity .2s ease; }
#floatBackTop.show { opacity: 1; pointer-events: auto; }

/* ══════════════════════════════════════════════════
   无障碍：用户偏好减少动态效果时全部禁用
   ══════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal-armed { opacity: 1; transform: none; }
}