/* ========================================
   动效 + 可访问性 + 暗色模式
   包含: 滚动渐入动画 / 骨架屏 / 导航动效 / 按钮微交互
         :focus-visible / prefers-reduced-motion / prefers-color-scheme: dark
   ======================================== */

/* ---- 滚动触发渐入动画（配合 animations.js） ---- */
[data-animate] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
[data-animate].visible {
    opacity: 1;
    transform: translateY(0);
}
[data-animate="fade-up"] { transform: translateY(24px); }
[data-animate="fade-in"] { transform: none; }
[data-animate="scale-in"] { transform: scale(0.95); }
[data-animate="scale-in"].visible { transform: scale(1); }

/* ---- 导航链接 hover 下划线动画 ---- */
.nav-link { position: relative; }
.nav-link::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 16px;
    right: 16px;
    height: 2px;
    background: var(--primary);
    border-radius: 2px;
    transform: scaleX(0);
    transition: transform var(--transition);
}
.nav-link:hover::after,
.nav-link.active::after {
    transform: scaleX(1);
}

/* ---- 按钮按下缩放效果 ---- */
.btn-primary:active,
.btn-cta:active,
.btn-outline:active {
    transform: scale(0.97) !important;
    transition: transform 0.1s ease !important;
}

/* ---- Header 智能显隐（配合 animations.js） ---- */
.header {
    transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ========================================
   可访问性增强 (A11y)
   ======================================== */

/* 键盘焦点可见 */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 4px;
}
:focus:not(:focus-visible) {
    outline: none;
}

/* 减弱动画偏好 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    html { scroll-behavior: auto; }
    [data-animate] { opacity: 1; transform: none; }
}

/* ========================================
   暗色模式（系统偏好 + 手动切换）
   自动跟随 OS 设置，或通过 .dark-mode 类手动覆盖
   ======================================== */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0F172A;
        --bg-secondary: #1E293B;
        --bg-tertiary: #334155;
        --text: #F1F5F9;
        --text-secondary: #94A3B8;
        --text-muted: #64748B;
        --border: #334155;
        --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
        --shadow: 0 4px 12px rgba(0,0,0,0.3);
        --shadow-md: 0 8px 24px rgba(0,0,0,0.4);
        --shadow-lg: 0 12px 40px rgba(0,0,0,0.5);
        --bg-light: #1E293B;
        --primary-bg: rgba(16,185,129,0.12);
        --primary-bg-light: rgba(16,185,129,0.08);
        --accent-bg: rgba(139,92,246,0.12);
    }
    .header { background: rgba(15, 23, 42, 0.95); }
    .header.scrolled { background: rgba(15, 23, 42, 0.98); }
    .mobile-nav { background: var(--bg); }
    .footer { background: #020617; }
    .hero, .cases-hero, .mes-hero { background: var(--bg); }
    .hero::before, .cases-hero::before, .mes-hero::before { opacity: 0.3; }
    .value-card, .product-card, .case-card, .flow-card,
    .product-hero-card, .hero-stat-item, .feature-pill { background: var(--bg-secondary); border-color: var(--border); }
    .value-card:hover, .product-card:hover, .case-card:hover { background: var(--bg-tertiary); }
    .cta, .demo-cta { background: var(--bg-secondary); }
    .filter-section, .tab-btn { background: var(--bg-secondary); border-color: var(--border); }
    .accordion-header { background: var(--bg-secondary); }
    .accordion-header:hover { background: var(--bg-tertiary); }
    .tag, .redesign-tag, .result-tag { background: var(--bg-tertiary); }
    .ind-tag { background: rgba(16, 185, 129, 0.15); }
    .consulting-banner { background: var(--bg-secondary); }
    .consulting-stats { background: var(--bg); }
    .scroll-top-btn { background: var(--bg-secondary); border-color: var(--border); }
    .toast { background: var(--bg-secondary); }
    .breadcrumb a { color: var(--text-secondary); }
    .path-section, .redesign-path { background: var(--bg); }
    .redesign-path-icon { background: var(--bg-tertiary); }
    .case-hero { background: var(--bg); }
    .stat-card, .overview-text, .tags-container { background: var(--bg-secondary); border-color: var(--border); }
    .dark-mode-toggle { background: #1E293B; color: #F1F5F9; border-color: #334155; }
}

/* 手动暗色模式（与系统偏好使用相同变量值） */
html.dark-mode {
    --bg: #0F172A;
    --bg-secondary: #1E293B;
    --bg-tertiary: #334155;
    --text: #F1F5F9;
    --text-secondary: #94A3B8;
    --text-muted: #64748B;
    --border: #334155;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow: 0 4px 12px rgba(0,0,0,0.3);
    --shadow-md: 0 8px 24px rgba(0,0,0,0.4);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.5);
    --bg-light: #1E293B;
    --primary-bg: rgba(16,185,129,0.12);
    --primary-bg-light: rgba(16,185,129,0.08);
    --accent-bg: rgba(139,92,246,0.12);
}
html.dark-mode body { background: var(--bg); color: var(--text); }
html.dark-mode .header { background: rgba(15, 23, 42, 0.95); }
html.dark-mode .header.scrolled { background: rgba(15, 23, 42, 0.98); }
html.dark-mode .mobile-nav { background: var(--bg); }
html.dark-mode .footer { background: #020617; }
html.dark-mode .hero, html.dark-mode .cases-hero, html.dark-mode .mes-hero { background: var(--bg); }
html.dark-mode .value-card, html.dark-mode .product-card, html.dark-mode .case-card,
html.dark-mode .flow-card, html.dark-mode .product-hero-card, html.dark-mode .hero-stat-item,
html.dark-mode .feature-pill, html.dark-mode .service-card, html.dark-mode .news-card,
html.dark-mode .article-card, html.dark-mode .server-card { background: var(--bg-secondary); border-color: var(--border); }
html.dark-mode .value-card:hover, html.dark-mode .product-card:hover,
html.dark-mode .case-card:hover, html.dark-mode .server-card:hover { background: var(--bg-tertiary); }
html.dark-mode .cta, html.dark-mode .demo-cta { background: var(--bg-secondary); }
html.dark-mode .product-advantage-card { background: var(--bg-secondary); border-color: var(--border); }
html.dark-mode .filter-section, html.dark-mode .tab-btn { background: var(--bg-secondary); border-color: var(--border); }
html.dark-mode .accordion-header { background: var(--bg-secondary); }
html.dark-mode .accordion-header:hover { background: var(--bg-tertiary); }
html.dark-mode .tag, html.dark-mode .redesign-tag, html.dark-mode .result-tag { background: var(--bg-tertiary); }
html.dark-mode .ind-tag { background: rgba(16, 185, 129, 0.15); }
html.dark-mode .consulting-banner { background: var(--bg-secondary); }
html.dark-mode .consulting-stats { background: var(--bg); }
html.dark-mode .scroll-top-btn { background: var(--bg-secondary); border-color: var(--border); }
html.dark-mode .toast { background: var(--bg-secondary); }
html.dark-mode .breadcrumb a { color: var(--text-secondary); }
html.dark-mode .path-section, html.dark-mode .redesign-path { background: var(--bg); }
html.dark-mode .redesign-path-icon { background: var(--bg-tertiary); }
html.dark-mode .case-hero { background: var(--bg); }
html.dark-mode .stat-card, html.dark-mode .overview-text, html.dark-mode .tags-container { background: var(--bg-secondary); border-color: var(--border); }
html.dark-mode .dark-mode-toggle { background: #1E293B; color: #F1F5F9; border-color: #334155; }

/* 暗色模式 LOGO：白化处理 */
html.dark-mode .logo img,
[data-theme="dark"] .logo img {
  filter: brightness(0) invert(1);
}