/* CSS变量定义 */
:root {
    --logo-width: 120px;
    --logo-height: 80px;
    --logo-gap: 30px;
    --min-duration: 5s;
    --scroll-speed: 100;
}

/* Logo滚动容器 */
.geniatech-logo-carousel {
    width: 100%;
    height: 120px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    background: transparent;
    padding: 12px;
    
    /* 左右渐隐效果 */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
}

/* Logo滚动轨道 */
.geniatech-logo-track {
    display: flex;
    align-items: center;
    will-change: transform;
    height: 100%;
}

/* Logo列表容器 */
.geniatech-logo-list {
    display: flex;
    align-items: center;
    height: 100%;
    flex-shrink: 0;
}

/* Logo项目 */
.geniatech-logo-carousel .geniatech-logo-item {
    margin-right: var(--logo-gap);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Logo图片 */
.geniatech-logo-carousel .geniatech-logo-item img {
    width: var(--logo-width);
    height: var(--logo-height);
    object-fit: contain;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

/* Logo链接 */
.geniatech-logo-carousel .geniatech-logo-item a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* 悬停暂停整个轨道 */
.geniatech-logo-carousel[data-pause-on-hover="true"]:hover .geniatech-logo-track {
    animation-play-state: paused !important;
    -webkit-animation-play-state: paused !important;
}

/* 克隆列表样式 */
.geniatech-logo-clone {
    /* 克隆列表与原始列表样式完全相同 */
}

/* 响应式设计 */
@media (max-width: 768px) {
    .geniatech-logo-carousel {
        height: 80px;
    }
    
    .geniatech-logo-item img {
        width: 80px;
        height: 50px;
    }
    
    .geniatech-logo-item {
        margin-right: 20px;
    }
}

@media (max-width: 480px) {
    .geniatech-logo-carousel {
        height: 60px;
    }
    
    .geniatech-logo-item img {
        width: 60px;
        height: 40px;
    }
    
    .geniatech-logo-item {
        margin-right: 15px;
    }
}

/* 加载状态 */
.geniatech-logo-carousel.loading .geniatech-logo-track {
    animation-play-state: paused;
}

/* 自定义动画速度类 */
.geniatech-logo-carousel.speed-slow .geniatech-logo-track {
    animation-duration: 40s;
}

.geniatech-logo-carousel.speed-normal .geniatech-logo-track {
    animation-duration: 20s;
}

.geniatech-logo-carousel.speed-fast .geniatech-logo-track {
    animation-duration: 10s;
}

.geniatech-logo-carousel.speed-very-fast .geniatech-logo-track {
    animation-duration: 5s;
}

/* 无障碍支持 */
@media (prefers-reduced-motion: reduce) {
    .geniatech-logo-carousel .geniatech-logo-track {
        animation: none;
    }
    
    .geniatech-logo-carousel .geniatech-logo-track {
        transform: translateX(-25%); /* 静态显示在中间位置 */
    }
}

/* 调试模式（开发时使用） */
.geniatech-logo-carousel.debug {
    border: 2px solid red;
}

.geniatech-logo-carousel.debug .geniatech-logo-track {
    border: 1px solid blue;
}

.geniatech-logo-carousel.debug .geniatech-logo-list {
    border: 1px solid green;
}

.geniatech-logo-carousel.debug .geniatech-logo-item {
    border: 1px solid orange;
}

/* 强制悬停效果 - 最高优先级 */
.geniatech-logo-carousel .geniatech-logo-item:hover,
.geniatech-logo-carousel .geniatech-logo-track .geniatech-logo-item:hover,
.geniatech-logo-carousel .geniatech-logo-track .geniatech-logo-list .geniatech-logo-item:hover {
    /*filter: grayscale(0%) !important;*/
    /*-webkit-filter: grayscale(0%) !important;*/
}

/* 确保默认灰度效果 */
.geniatech-logo-carousel .geniatech-logo-item {
    /*filter: grayscale(100%) !important;*/
    /*-webkit-filter: grayscale(100%) !important;*/
    transition: all 0.3s ease !important;
}