/* ===== 性能优化样式 ===== */

/* ===== GPU加速优化 ===== */
.gpu-accelerated,
.card,
.btn,
.navbar,
.hero-area,
.footer {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* ===== 关键渲染路径优化 ===== */
/* 首页首屏背景与尺寸交由 assets/css/index.css 管理，避免全局覆盖 .hero-area */

.navbar {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    position: sticky;
    top: 0;
    z-index: 1030;
    transition: all 0.3s ease;
}

/* ===== 字体加载优化 ===== */
@font-display: swap;

/* 系统字体栈 - 减少字体加载时间 */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-display: swap;
}

/* ===== 图片优化 ===== */
img {
    max-width: 100%;
    height: auto;
    loading: lazy;
}

/* 图片占位符 */
.img-placeholder {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ===== 延迟加载优化 ===== */
.lazy-load {
    opacity: 0;
    transition: opacity 0.3s;
}

.lazy-load.loaded {
    opacity: 1;
}

/* ===== 减少重绘和回流 ===== */
.will-change-transform {
    will-change: transform;
}

.will-change-opacity {
    will-change: opacity;
}

.will-change-scroll {
    will-change: scroll-position;
}

/* ===== 动画性能优化 ===== */
@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;
    }
}

/* ===== 内容可见性优化 ===== */
.content-visibility-auto {
    content-visibility: auto;
    contain-intrinsic-size: 0 500px;
}

/* ===== 滚动性能优化 ===== */
.scroll-smooth {
    scroll-behavior: smooth;
}

.scroll-container {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: y mandatory;
}

.scroll-snap-item {
    scroll-snap-align: start;
}

/* ===== 渲染层优化 ===== */
.create-layer {
    transform: translateZ(0);
    will-change: transform;
}

/* ===== 关键资源预加载 ===== */
.preload-fonts {
    font-display: swap;
}

/* ===== 布局稳定性优化 ===== */
.aspect-ratio-16-9 {
    aspect-ratio: 16 / 9;
}

.aspect-ratio-4-3 {
    aspect-ratio: 4 / 3;
}

.aspect-ratio-1-1 {
    aspect-ratio: 1 / 1;
}

/* ===== 交互优化 ===== */
.touch-action-manipulation {
    touch-action: manipulation;
}

.user-select-none {
    user-select: none;
}

.pointer-events-none {
    pointer-events: none;
}

/* ===== 内存优化 ===== */
.contain-layout {
    contain: layout;
}

.contain-style {
    contain: style;
}

.contain-paint {
    contain: paint;
}

.contain-size {
    contain: size;
}

/* ===== 网络优化提示 ===== */
.resource-hint-preconnect {
    /* 在HTML中使用: <link rel="preconnect" href="..."> */
}

.resource-hint-prefetch {
    /* 在HTML中使用: <link rel="prefetch" href="..."> */
}

.resource-hint-preload {
    /* 在HTML中使用: <link rel="preload" href="..." as="..."> */
}

/* ===== 缓存优化 ===== */
.cache-friendly {
    /* 使用版本化的资源文件名 */
    /* 设置适当的缓存头 */
}

/* ===== 压缩优化 ===== */
.minified {
    /* 确保CSS/JS文件已压缩 */
    /* 启用Gzip/Brotli压缩 */
}

/* ===== 关键CSS内联 ===== */
.critical-css {
    /* 首屏关键样式应该内联到HTML中 */
}

/* ===== 非关键CSS延迟加载 ===== */
.non-critical-css {
    /* 非关键样式可以异步加载 */
}

/* ===== 渐进式增强 ===== */
.progressive-enhancement {
    /* 基础样式 */
}

@supports (backdrop-filter: blur(10px)) {
    .progressive-enhancement {
        /* 高级浏览器的增强样式 */
        backdrop-filter: blur(10px);
    }
}

/* ===== 可访问性优化 ===== */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.focus-visible:focus {
    outline: 2px solid #000000;
    outline-offset: 2px;
}

/* ===== 打印优化 ===== */
@media print {
    .no-print {
        display: none !important;
    }
    
    .print-only {
        display: block !important;
    }
    
    * {
        background: transparent !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    
    a,
    a:visited {
        text-decoration: underline;
    }
    
    a[href]:after {
        content: " (" attr(href) ")";
    }
    
    abbr[title]:after {
        content: " (" attr(title) ")";
    }
    
    .page-break {
        page-break-before: always;
    }
    
    .avoid-break {
        page-break-inside: avoid;
    }
}

/* ===== 性能监控 ===== */
.performance-mark {
    /* 用于性能标记的类 */
}

/* ===== 错误处理 ===== */
.fallback-font {
    font-family: Arial, sans-serif;
}

.fallback-color {
    background-color: #f0f0f0;
    color: #333333;
}

/* ===== 浏览器兼容性 ===== */
@supports not (display: grid) {
    .grid-fallback {
        display: flex;
        flex-wrap: wrap;
    }
}

@supports not (backdrop-filter: blur(10px)) {
    .backdrop-fallback {
        background: rgba(255, 255, 255, 0.9);
    }
}

/* ===== 性能提示 ===== */
/*
性能优化建议:
1. 使用 transform 和 opacity 进行动画
2. 避免在动画中使用 width, height, top, left
3. 使用 will-change 属性提示浏览器
4. 合理使用 GPU 加速
5. 优化图片大小和格式
6. 使用字体显示策略
7. 实施关键渲染路径优化
8. 使用内容可见性 API
9. 优化滚动性能
10. 减少 DOM 操作
*/