/* 性能优化CSS - 减少首页加载和返回时的卡顿 */

/* 应用硬件加速 */
.hardware-accelerated,
.master-card,
.masters-container,
.master-avatar,
.avatar-image,
.nav-menu,
.main-content {
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    -webkit-transform: translate3d(0,0,0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000;
    transform: translate3d(0,0,0);
    transform: translateZ(0);
    will-change: transform;
}

/* 减少不必要的动画和过渡 */
.master-card,
.master-avatar,
.avatar-image {
    transition: none !important;
    animation: none !important;
}

/* 优化图片加载 */
img[data-loaded="true"] {
    content-visibility: auto;
}

/* 优化大师卡片容器，避免布局偏移 */
.masters-container {
    contain: layout style;
}

/* 减少页面重排 */
.master-card {
    contain: content;
    content-visibility: auto;
    page-break-inside: avoid;
    break-inside: avoid;
}

/* 移除悬停效果，减少GPU消耗 */
@media (max-width: 768px) {
    .master-card:hover {
        transform: none !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    }

    /* 优化滚动性能 */
    body {
        -webkit-overflow-scrolling: touch;
        overflow-x: hidden;
    }
    
    /* 减少头像动画和效果 */
    .avatar-placeholder {
        display: none !important;
    }
    
    .avatar-image {
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
    }
    
    /* 减少框架布局变化 */
    .master-card,
    .master-header,
    .master-avatar,
    .master-title,
    .master-intro {
        contain: layout style paint;
    }
}

/* 从缓存返回时的特殊优化 */
html.from-cache .masters-container {
    content-visibility: auto;
}

html.from-cache .master-card:not(:nth-child(-n+8)) {
    content-visibility: hidden;
    visibility: hidden;
    display: none;
}

/* 减少CSS选择器复杂度 */
.load-more-btn {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    contain: content;
}

/* 页面出现时的渐入动画优化 - 使用opacity而不是transform */
@keyframes optimized-fade-in {
    from { opacity: 0.95; }
    to { opacity: 1; }
}

.fade-in {
    animation: optimized-fade-in 0.2s ease-out;
}