/* ========= 轮播容器 ========= */
.index_focus {
    --item-count: 4;   /* 实际轮播项数量 */
    --clone-count: 2;  /* 克隆项数量 */
    --carousel-width: 760px;
    --carousel-height: 318px;
    --animation-duration: 20s;
    
    position: relative;
    width: 100%;
    max-width: var(--carousel-width);
    height: var(--carousel-height);
    margin: 30px auto;
    overflow: hidden;
}

/* ========= 轮播轨道 ========= */
.index_focus ul {
    display: flex;
    position: relative;
    width: calc( (var(--item-count) + var(--clone-count)) * 100% );
    height: 100%;
    margin: 0;
    padding: 0;
    animation: slideAnim var(--animation-duration) infinite linear;
    will-change: transform;
}

/* ========= 修复后的动画关键帧 ========= */
@keyframes slideAnim {
    0% {
        transform: translateX(0);
    }
    100% {
        /* 总位移 = -(实际项数量 / 总项数量) * 100% */
        transform: translateX( calc( -100% * var(--item-count) / (var(--item-count) + var(--clone-count)) );
    }
}

/* ========= 轮播项尺寸修正 ========= */
.index_focus li {
    flex: 0 0 calc(100% / (var(--item-count) + var(--clone-count)) );
    width: calc(100% / (var(--item-count) + var(--clone-count)) );
    height: 100%;
    list-style: none;
}

/* ========= 图片修复 ========= */
.index_focus li img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    vertical-align: bottom;
}

/* ========= 克隆项隐藏优化 ========= */
.index_focus li[aria-hidden="true"] {
    visibility: hidden; /* 保留布局空间但隐藏内容 */
}

/* ========= 预加载优化修正 ========= */
.index_focus img:not(:first-child) {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* ========= 响应式处理 ========= */
@media screen and (max-width: 800px) {
    .index_focus {
        --carousel-height: 240px;
        max-width: 600px;
    }
}

/* 减少动画用户适配 */
@media (prefers-reduced-motion: reduce) {
    .index_focus ul {
        animation: none;
    }
}