/**
 * style-optimized.css - 性能优化样式
 * 
 * 包含：
 * - 自定义组件样式
 * - 性能优化技巧
 * - 骨架屏加载动画
 */

/* ============================================
   自定义链接样式
   ============================================ */
.auto-link {
    color: #0073aa;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.auto-link:hover {
    color: #005177;
}

/* ============================================
   下载计数标签
   ============================================ */
.download-count {
    display: inline-block;
    padding: 2px 8px;
    background: #f0f0f0;
    border-radius: 3px;
    font-size: 12px;
    color: #666;
}

/* ============================================
   阅读更多按钮
   ============================================ */
.read-more {
    color: #ff6b6b;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.read-more:hover {
    color: #ee5a5a;
}

/* ============================================
   骨架屏加载动画
   ============================================ */
.lazy-loading,
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
}

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

/* ============================================
   图片加载占位
   ============================================ */
.img-placeholder {
    background-color: #f5f5f5;
    aspect-ratio: 16/9;
}

/* ============================================
   性能优化：GPU 加速
   ============================================ */
.will-animate {
    will-change: transform, opacity;
}

/* ============================================
   内容可见性优化（现代浏览器）
   ============================================ */
.below-fold {
    content-visibility: auto;
    contain-intrinsic-size: 0 500px;
}

/* ============================================
   字体显示优化
   ============================================ */
@font-face {
    font-display: swap; /* 防止 FOIT */
}

/* ============================================
   减少 CLS（累积布局偏移）
   ============================================ */
img,
video,
iframe {
    max-width: 100%;
    height: auto;
}

/* 为已知尺寸的元素设置宽高比 */
.featured-image {
    aspect-ratio: 16/9;
    object-fit: cover;
}

.thumbnail {
    aspect-ratio: 1/1;
    object-fit: cover;
}

/* ============================================
   广告位占位（防止 CLS）
   ============================================ */
.ad-placeholder {
    min-height: 250px;
    background: #fafafa;
}

/* ============================================
   暗色模式支持（可选）
   ============================================ */
@media (prefers-color-scheme: dark) {
    .lazy-loading,
    .skeleton {
        background: linear-gradient(90deg, #2a2a2a 25%, #333 50%, #2a2a2a 75%);
        background-size: 200% 100%;
    }
    
    .download-count {
        background: #333;
        color: #ccc;
    }
}