/* 性能优化CSS - 关键渲染路径优化 */

/* 1. 关键内容优先加载 */
.critical-content {
    will-change: auto;
    contain: layout style paint;
}

/* 2. 图片懒加载优化 */
.lazy-image {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

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

/* 3. 字体加载优化 */
@font-face {
    font-family: 'Inter';
    font-display: swap;
    src: url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
}

/* 4. 动画性能优化 */
.gpu-accelerated {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* 5. 减少重绘和回流 */
.no-reflow {
    transform: translateX(0);
    will-change: transform;
}

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

/* 7. 滚动性能优化 */
.smooth-scroll {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* 8. 减少CSS选择器复杂度 */
.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 12px;
    color: white;
    cursor: pointer;
    font-weight: 600;
    padding: 12px 24px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
}

/* 9. 预加载关键资源 */
.preload-hint::before {
    content: '';
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    background-image: url('/images/hero-bg.jpg');
}

/* 10. 减少不必要的阴影和渐变 */
.optimized-shadow {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* 11. 使用CSS Grid和Flexbox优化布局 */
.grid-optimized {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

/* 12. 减少CSS文件大小 */
.text-primary { color: #667eea; }
.text-secondary { color: #6b7280; }
.bg-primary { background-color: #667eea; }
.bg-secondary { background-color: #f9fafb; }

/* 13. 优化动画帧率 */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translate3d(0, 30px, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

/* 14. 减少DOM操作 */
.batch-update {
    transition: all 0.3s ease;
}

/* 15. 优化媒体查询 */
@media (max-width: 768px) {
    .mobile-optimized {
        font-size: 14px;
        padding: 8px 16px;
    }
}

@media (min-width: 1024px) {
    .desktop-optimized {
        font-size: 18px;
        padding: 16px 32px;
    }
}

/* 16. 使用CSS变量减少重复 */
:root {
    --primary-color: #667eea;
    --secondary-color: #764ba2;
    --text-color: #1f2937;
    --bg-color: #ffffff;
    --border-radius: 12px;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* 17. 优化渲染层 */
.render-layer {
    position: relative;
    z-index: 0;
    isolation: isolate;
}

/* 18. 减少重复样式 */
.card-base {
    background: var(--bg-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    padding: 1.5rem;
}

/* 19. 优化伪元素 */
.pseudo-optimized::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(102, 126, 234, 0.1) 100%);
    border-radius: inherit;
    pointer-events: none;
}

/* 20. 减少CSS计算 */
.calc-optimized {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}