/* 增强型轮播悬停效果样式 */
/* 适用于所有轮播组件的通用悬停显示效果 */

/* 通用轮播控制按钮悬停效果 */
.carousel .carousel-control-prev,
.carousel .carousel-control-next {
    opacity: 0.5; /* 默认半透明状态 */
    transition: all 0.3s ease; /* 300ms平滑过渡 */
    transform-origin: center;
}

/* 轮播容器悬停时显示按钮 */
.carousel:hover .carousel-control-prev,
.carousel:hover .carousel-control-next {
    opacity: 1; /* 悬停时完全可见 */
}

/* 按钮悬停时的放大效果 */
.carousel .carousel-control-prev:hover,
.carousel .carousel-control-next:hover {
    transform: translateY(-50%) scale(1.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* C02产品轮播特定样式增强 */
#c02ProductCarousel {
    position: relative;
    overflow: hidden;
}

#c02ProductCarousel .carousel-control-prev,
#c02ProductCarousel .carousel-control-next {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    border: 2px solid rgba(0, 123, 255, 0.2);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* C38产品轮播样式增强 */
#productCarousel .carousel-control-prev,
#productCarousel .carousel-control-next {
    opacity: 0.5;
    transition: all 0.3s ease;
}

#productCarousel:hover .carousel-control-prev,
#productCarousel:hover .carousel-control-next {
    opacity: 1;
}

#productCarousel .carousel-control-prev:hover,
#productCarousel .carousel-control-next:hover {
    transform: translateY(-50%) scale(1.1);
}

/* 移动设备触摸优化 */
@media (hover: none) and (pointer: coarse) {
    /* 触摸设备上始终显示按钮，但透明度较低 */
    .carousel .carousel-control-prev,
    .carousel .carousel-control-next {
        opacity: 0.7;
    }
    
    /* 触摸时的反馈效果 */
    .carousel .carousel-control-prev:active,
    .carousel .carousel-control-next:active {
        opacity: 1;
        transform: translateY(-50%) scale(0.95);
        transition: all 0.15s ease;
    }
    
    /* 触摸设备上的轮播容器样式 */
    .carousel:active .carousel-control-prev,
    .carousel:active .carousel-control-next {
        opacity: 1;
    }
}

/* 平板设备优化 */
@media (max-width: 768px) and (hover: hover) {
    .carousel .carousel-control-prev,
    .carousel .carousel-control-next {
        opacity: 0.6; /* 平板上稍微提高默认透明度 */
    }
    
    .carousel:hover .carousel-control-prev,
    .carousel:hover .carousel-control-next {
        opacity: 1;
    }
}

/* 小屏幕手机优化 */
@media (max-width: 480px) {
    .carousel .carousel-control-prev,
    .carousel .carousel-control-next {
        width: 40px;
        height: 40px;
        opacity: 0.6;
    }
    
    .carousel .carousel-control-prev:hover,
    .carousel .carousel-control-next:hover {
        transform: translateY(-50%) scale(1.05); /* 减小放大效果 */
    }
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
    .carousel .carousel-control-prev,
    .carousel .carousel-control-next {
        opacity: 0.8; /* 高对比度模式下提高默认透明度 */
        border-width: 3px;
    }
    
    .carousel:hover .carousel-control-prev,
    .carousel:hover .carousel-control-next {
        opacity: 1;
    }
}

/* 减少动画偏好支持 */
@media (prefers-reduced-motion: reduce) {
    .carousel .carousel-control-prev,
    .carousel .carousel-control-next {
        transition: opacity 0.3s ease; /* 只保留透明度过渡 */
    }
    
    .carousel .carousel-control-prev:hover,
    .carousel .carousel-control-next:hover {
        transform: translateY(-50%); /* 移除缩放效果 */
    }
}

/* 焦点状态样式 */
.carousel .carousel-control-prev:focus,
.carousel .carousel-control-next:focus {
    opacity: 1;
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* 键盘导航优化 */
.carousel .carousel-control-prev:focus-visible,
.carousel .carousel-control-next:focus-visible {
    opacity: 1;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

/* 轮播指示器悬停效果 */
.carousel .carousel-indicators [data-bs-target] {
    opacity: 0.6;
    transition: all 0.3s ease;
}

.carousel:hover .carousel-indicators [data-bs-target] {
    opacity: 0.8;
}

.carousel .carousel-indicators [data-bs-target]:hover {
    opacity: 1;
    transform: scale(1.2);
}

.carousel .carousel-indicators [data-bs-target].active {
    opacity: 1;
}

/* 轮播内容区域悬停时的整体效果 */
.carousel:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    transition: box-shadow 0.3s ease;
}

/* 图片悬停时的微妙效果 */
.carousel .carousel-item img {
    transition: transform 0.3s ease;
}

.carousel:hover .carousel-item.active img {
    transform: scale(1.02);
}

/* 自定义动画关键帧 */
@keyframes fadeInControls {
    from {
        opacity: 0.5;
        transform: translateY(-50%) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
}

@keyframes fadeOutControls {
    from {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
    to {
        opacity: 0.5;
        transform: translateY(-50%) scale(0.9);
    }
}

/* 应用自定义动画 */
.carousel:hover .carousel-control-prev,
.carousel:hover .carousel-control-next {
    animation: fadeInControls 0.3s ease forwards;
}

/* 离开悬停状态时的动画 */
.carousel:not(:hover) .carousel-control-prev,
.carousel:not(:hover) .carousel-control-next {
    animation: fadeOutControls 0.3s ease forwards;
}