/* 性能优化样式 - 懒加载和骨架屏增强 */

/* 图片懒加载优化 */
.lazy-image {
    opacity: 0;
    transition: opacity 0.5s ease;
    will-change: opacity;
    display: none;
}

.lazy-image.loading {
    opacity: 0;
    display: block;
}

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

.lazy-image.error {
    opacity: 0.5;
    filter: grayscale(100%);
    display: block;
}

/* 占位符过渡效果 */
.skeleton,
.image-placeholder,
.map-placeholder,
.logo-placeholder,
.card-placeholder,
.banner-skeleton {
    transition: opacity 0.3s ease;
}

/* 骨架屏动画优化 */
.skeleton {
    background: linear-gradient(90deg,
            #f0f0f0 25%,
            #e0e0e0 50%,
            #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

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

    100% {
        background-position: -200% 0;
    }
}

/* 轮播图优化 */
.banner-section {
    position: relative;
    min-height: 6rem;
    /* 匹配实际轮播图高度 */
    overflow: hidden;
}

.banner-skeleton {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6rem;
    /* 匹配轮播图高度 */
    z-index: 1;
}

.banner-swiper {
    position: relative;
    z-index: 2;
}

.banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 时间轴图片优化 */
.timeline-image {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.timeline-img {
    width: 100%;
    height: 1.5rem;
    /* 匹配实际时间轴图片高度 */
    object-fit: cover;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.timeline-img:hover {
    transform: scale(1.05);
}

.image-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1.5rem;
    /* 匹配时间轴图片高度 */
}

/* 世界地图优化 */
.world-map {
    position: relative;
    overflow: hidden;
}

.world-map-img {
    width: 100%;
    height: auto;
    display: block;
}

.map-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4rem;
    /* 预估世界地图高度 */
}

/* 合作伙伴logo优化 */
.partner-logo {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
    height: 2.7rem;
    /* 匹配实际合作伙伴logo高度 */
}

.partner-logo:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.partner-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
}

.logo-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2.7rem;
    /* 匹配合作伙伴logo高度 */
}

/* 培训卡片优化 */
.training-card {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.training-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.card-image {
    position: relative;
    overflow: hidden;
    height: 2.2rem;
    /* 匹配实际培训卡片图片高度 */
}

.training-card-img {
    width: 100%;
    height: 2.2rem;
    /* 匹配实际培训卡片图片高度 */
    object-fit: cover;
    transition: transform 0.3s ease;
}

.training-card:hover .training-card-img {
    transform: scale(1.1);
}

.card-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2.2rem;
    /* 匹配培训卡片图片高度 */
}

/* 加载状态指示器 */
.loading-indicator {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #3498db, #2ecc71);
    z-index: 9999;
    transform: translateX(-100%);
    animation: loading-progress 2s ease-in-out infinite;
}

@keyframes loading-progress {
    0% {
        transform: translateX(-100%);
    }

    50% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(100%);
    }
}

/* 响应式优化 */
@media (max-width: 768px) {
    .banner-section {
        min-height: 4rem;
        /* 移动端轮播图高度 */
    }

    .banner-skeleton {
        height: 4rem;
        /* 移动端轮播图骨架屏高度 */
    }

    .training-card-img {
        height: 2.5rem;
        /* 移动端培训卡片图片高度 */
    }

    .card-image {
        height: 2.5rem;
        /* 移动端培训卡片容器高度 */
    }

    .card-placeholder {
        height: 2.5rem;
        /* 移动端培训卡片骨架屏高度 */
    }

    .timeline-img {
        height: 1.2rem;
        /* 移动端时间轴图片高度 */
    }

    .image-placeholder {
        height: 1.2rem;
        /* 移动端时间轴骨架屏高度 */
    }

    .partner-logo {
        height: 0.9rem;
        /* 移动端合作伙伴logo高度 */
    }

    .logo-placeholder {
        height: 0.9rem;
        /* 移动端合作伙伴logo骨架屏高度 */
    }

    .map-placeholder {
        height: 3rem;
        /* 移动端世界地图骨架屏高度 */
    }
}

/* 预加载优化 */
.preload-hidden {
    position: absolute;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
}

/* 渐进式增强 */
.no-js .lazy-image {
    opacity: 1;
}

.no-js .skeleton {
    display: none;
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
    .skeleton {
        background: linear-gradient(90deg, #ccc 25%, #999 50%, #ccc 75%);
    }
}

/* 减少动画偏好支持 */
@media (prefers-reduced-motion: reduce) {

    .lazy-image,
    .training-card,
    .partner-logo,
    .timeline-img {
        transition: none;
    }

    .skeleton {
        animation: none;
        background: #f0f0f0;
    }

    .loading-indicator {
        animation: none;
    }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
    .skeleton {
        background: linear-gradient(90deg, #333 25%, #555 50%, #333 75%);
    }

    .partner-logo {
        background: #2c2c2c;
        box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
    }
}

/* 打印样式优化 */
@media print {

    .skeleton,
    .loading-indicator {
        display: none;
    }

    .lazy-image {
        opacity: 1;
    }
}