/* ============================================================================
 * Reduced Motion — 尊重用户的减少动效偏好
 * 在 prefers-reduced-motion: reduce 时,禁用所有动画/视差/粒子
 * ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  /* 禁用所有动画与过渡 */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* 背景与动效元素直接显示/隐藏由组件自身处理,这里只保留全局兜底 */

  /* animate-section 直接显示,不要等渐入 */
  .animate-section {
    opacity: 1 !important;
    transform: none !important;
  }

  /* hover 浮起效果也禁用(避免误触) */
  :deep(.VPFeature):hover {
    transform: none !important;
  }
}

/* ============================================================================
 * 移动端性能降级 — 关闭 backdrop-filter
 * 原因:8+ 组件都用 blur(16-24px),Chrome 合成层 >10 时开始掉帧
 *      移动端 60fps 体验优先于毛玻璃观感
 * 注:亮色暗色共用此规则(物理层面 GPU 压力大)
 * ============================================================================ */
@media (max-width: 768px) {
  /* 所有毛玻璃效果用实色替代(避免 blur 引发的合成层) */
  .sticky-cta-inner,
  .section-nav {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* 移动端毛玻璃降级后,背景仅剩主渐变,无需额外隐藏 */
}