/* ==================== 漢堡輪播區塊 ==================== */
.carousel-section {
    background-color: var(--black);
    padding: 120px 0;
    overflow: hidden;
    width: 100%;
}

.carousel {
    --items: 8;
    --carousel-duration: 40s;
    width: 100%;
    --carousel-item-width: 320px;
    --carousel-item-height: 420px;
    --carousel-item-gap: 2rem;
    
    position: relative;
    width: var(--carousel-width);
    height: var(--carousel-item-height);
    margin: 0 auto;
    overflow: clip;
}

/* 左右兩側漸變遮罩 */
.carousel[mask] {
    mask-image: linear-gradient(
        to right,
        transparent,
        black 10% 90%,
        transparent
    );
}

/* 反向滾動（可選） */
.carousel[reverse] > .carousel-card {
    animation-direction: reverse;
}

/* 滑鼠懸停暫停動畫 */
.carousel:hover > .carousel-card {
    animation-play-state: paused;
}

/* 卡片樣式 - 純圖片設計 */
.carousel-card {
    position: absolute;
    top: 0;
    left: calc(100% + var(--carousel-item-gap));
    width: var(--carousel-item-width);
    height: var(--carousel-item-height);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    
    /* 動畫設定 */
    will-change: transform;
    animation-name: marquee;
    animation-duration: var(--carousel-duration);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-delay: calc(
        var(--carousel-duration) / var(--items) * 1 * var(--i) * -1
    );
}

/* 每個卡片的延遲時間 */
.carousel-card:nth-child(1) { --i: 0; }
.carousel-card:nth-child(2) { --i: 1; }
.carousel-card:nth-child(3) { --i: 2; }
.carousel-card:nth-child(4) { --i: 3; }
.carousel-card:nth-child(5) { --i: 4; }
.carousel-card:nth-child(6) { --i: 5; }
.carousel-card:nth-child(7) { --i: 6; }
.carousel-card:nth-child(8) { --i: 7; }

/* 懸停效果 */
.carousel-card:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 50px rgba(60, 164, 199, 0.5);
    z-index: 10;
}

/* 圖片樣式 */
.carousel-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

/* 懸停時圖片放大 */
.carousel-card:hover img {
    transform: scale(1.1);
}

/* 輪播動畫 */
@keyframes marquee {
    100% {
        transform: translateX(
            calc(
                (var(--items) * (var(--carousel-item-width) + var(--carousel-item-gap))) * -1
            )
        );
    }
}

/* 響應式設計 */
@media (max-width: 1024px) {
    .carousel {
        --carousel-item-width: 300px;
        --carousel-item-height: 400px;
    }
}

@media (max-width: 768px) {
    .carousel {
        --carousel-item-width: 280px;
        --carousel-item-height: 380px;
        --carousel-item-gap: 1.5rem;
        --carousel-duration: 35s;
    }
    
    .carousel-section {
        padding: 100px 0;
    }
}

@media (max-width: 480px) {
    .carousel {
        --carousel-item-width: 240px;
        --carousel-item-height: 340px;
        --carousel-item-gap: 1rem;
        --carousel-duration: 30s;
    }
    
    .carousel-section {
        padding: 80px 0;
    }
}