/* 懒加载和渐进式显示样式 */

/* 图片懒加载样式 */
img.lazy {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    background-color: #f5f5f5;
    background-image: linear-gradient(45deg, #f0f0f0 25%, transparent 25%), 
                      linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), 
                      linear-gradient(45deg, transparent 75%, #f0f0f0 75%), 
                      linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    animation: loading-shimmer 1.5s infinite linear;
}

img.loaded {
    opacity: 1;
}

/* 图片淡入动画 */
img.fade-in {
    animation: fadeIn 0.6s ease-out forwards;
}

/* 内容渐进式显示 */
.content-hidden {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease-out;
}

.fade-in-up {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* 加载动画 */
@keyframes loading-shimmer {
    0% {
        background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    }
    100% {
        background-position: 20px 20px, 20px 30px, 30px 10px, 10px 20px;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 优化图片加载性能 */
img {
    will-change: opacity, transform;
}

/* 为不同类型的内容添加特殊动画 */
h1.fade-in-up {
    animation: slideInFromTop 0.8s ease-out forwards;
}

h2.fade-in-up {
    animation: slideInFromLeft 0.6s ease-out forwards;
}

.card-grid.fade-in-up {
    animation: scaleIn 0.6s ease-out forwards;
}

.photo-grid.fade-in-up {
    animation: slideInFromBottom 0.6s ease-out forwards;
}

/* 特殊动画关键帧 */
@keyframes slideInFromTop {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInFromBottom {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 响应式优化 */
@media (prefers-reduced-motion: reduce) {
    .content-hidden,
    img.lazy,
    img.fade-in {
        animation: none;
        transition: none;
    }
    
    .fade-in-up {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* 移动端优化 */
@media (max-width: 768px) {
    .content-hidden {
        transform: translateY(10px);
    }
    
    img.lazy {
        background-size: 15px 15px;
    }
}

/* 提升滚动性能 */
.wrapper {
    will-change: scroll-position;
}

/* 骨架屏效果增强 */
.card-grid.content-hidden::before {
    content: '';
    display: block;
    height: 200px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading-shimmer 1.5s infinite;
    border-radius: 8px;
    margin-bottom: 10px;
}

.card-grid.fade-in-up::before {
    display: none;
}