/* 
 * Carousel Drag CSS - 輪播拖曳增強樣式
 * 提供更好的拖曳視覺反饋和用戶體驗
 */

/* 輪播容器拖曳樣式 */
.carousel {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.carousel:active {
    cursor: grabbing;
}

/* 防止圖片被選取或拖曳 */
.carousel img {
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
}

/* 拖曳狀態下的視覺效果 */
.carousel-inner {
    transition: transform 0.3s ease-out;
}

.carousel-item {
    transition: opacity 0.2s ease-out;
}

/* 覆蓋 Bootstrap 預設的緩慢過渡效果 */
.carousel-fade .carousel-item.active.carousel-item-left,
.carousel-fade .carousel-item.active.carousel-item-right {
    transition: opacity 0.2s ease-out;
}

.carousel-fade .carousel-item-next.carousel-item-left,
.carousel-fade .carousel-item-prev.carousel-item-right {
    transition: opacity 0.2s ease-out;
}

/* 拖曳時禁用指針事件，避免衝突 */
.carousel.dragging {
    pointer-events: none;
}

.carousel.dragging .carousel-indicators,
.carousel.dragging .carousel-control-prev,
.carousel.dragging .carousel-control-next {
    pointer-events: none;
}

/* 增強觸控體驗 */
@media (hover: none) and (pointer: coarse) {
    .carousel {
        cursor: default;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: transparent;
    }
}

/* PC 版本的拖曳提示 */
@media (min-width: 576px) {
    .carousel::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .carousel:hover::before {
        opacity: 1;
    }
}

/* 優化輪播切換動畫 - 更快速的過渡效果 */
.carousel-fade .carousel-item {
    transition: opacity 0.3s ease-in-out, transform 0.2s ease-out;
}

/* 為了更流暢的切換，我們可以針對不同狀態設定不同的過渡時間 */
.carousel-fade .carousel-item.active {
    transition: opacity 0.25s ease-in-out;
}

/* 淡出的圖片使用更快的過渡 */
.carousel-fade .carousel-item:not(.active) {
    transition: opacity 0.2s ease-out;
}

/* 避免拖曳時的文字選取 */
.carousel * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* 確保指示器和控制按鈕仍可點擊 */
.carousel-indicators,
.carousel-control-prev,
.carousel-control-next {
    -webkit-user-select: auto;
    -moz-user-select: auto;
    -ms-user-select: auto;
    user-select: auto;
    pointer-events: auto;
}

/* 拖曳切換時的快速過渡效果 */
.carousel.drag-switching .carousel-fade .carousel-item {
    transition: opacity 0.15s ease-out !important;
}

.carousel.drag-switching .carousel-fade .carousel-item.active {
    transition: opacity 0.15s ease-out !important;
}

/* 拖曳回饋動畫 */
@keyframes dragFeedback {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.98);
    }

    100% {
        transform: scale(1);
    }
}

.carousel.drag-active {
    animation: dragFeedback 0.3s ease-out;
}