/**
 * ============================================
 * Performance Optimizations
 * 性能优化样式 - 国际最佳实践
 * ============================================
 * 策略:
 *   1. content-visibility 延迟渲染
 *   2. will-change 提前声明昂贵属性
 *   3. contain 布局隔离
 *   4. 关键 CSS 内联优化
 * ============================================
 */

/* ===== Content-Visibility 延迟渲染 (Chrome 85+) ===== */
.lazy-section,
.product-list-section,
.category-section,
.article-list,
.comment-section {
    content-visibility: auto;
    contain-intrinsic-size: 0 50rem;
}

/* ===== Contain 布局隔离 ===== */
.widget,
.card,
.panel,
.modal-container,
.sidebar-widget {
    contain: layout style;
}

/* 页面独立区域 - 完全隔离 */
.header-area,
.footer-area,
.hero-banner {
    contain: layout style paint;
}

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

img[loading] {
    /* 原生懒加载标记 */
}

img:not([src]):not([srcset]) {
    visibility: hidden;
}

/* 图片占位 - 防止 CLS (Cumulative Layout Shift) */
.img-placeholder {
    position: relative;
    overflow: hidden;
    background: var(--color-border, #eee);
}

.img-placeholder::before {
    content: "";
    display: block;
    padding-top: 56.25%; /* 16:9 默认比例 */
}

.img-placeholder img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===== Will-Change 优化 ===== */
.animation-element,
.parallax,
.slide-in {
    will-change: transform, opacity;
}

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

/* ===== GPU 加速 ===== */
.gpu-accelerated,
.animated,
.transition-all {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* ===== 字体加载优化 ===== */
@font-face {
    font-family: "Custom Icon";
    font-display: swap;
    src: local("Custom Icon");
}

/* ===== 滚动性能 ===== */
.touch-scroll {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
}

/* ===== 选择性能 ===== */
::selection {
    background: var(--color-primary, #e22c08);
    color: var(--color-white, #fff);
}

/* ===== 系统字体栈回退 ===== */
body {
    font-family: var(--base-font-family);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===== 移动端点击优化 ===== */
@media (hover: none) and (pointer: coarse) {
    * {
        -webkit-tap-highlight-color: transparent;
    }

    a,
    button,
    [role="button"] {
        touch-action: manipulation;
    }
}