/* 基礎設定 */
.main-carousel .swiper-wrapper {
    transition-timing-function: ease-in-out;
}

/* 效果 1: 從右滑入 */
.main-carousel .swiper-wrapper.slide-from-right .swiper-slide-active {
    animation: slideFromRight 0.8s ease-out;
}

@keyframes slideFromRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* 效果 2: 從左滑入 */
.main-carousel .swiper-wrapper.slide-from-left .swiper-slide-active {
    animation: slideFromLeft 0.8s ease-out;
}

@keyframes slideFromLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* 效果 3: 縮放進入 */
.main-carousel .swiper-wrapper.zoom-in .swiper-slide-active {
    animation: zoomIn 0.8s ease-out;
}

@keyframes zoomIn {
    from {
        transform: scale(0.5);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* 效果 4: 淡入縮放 */
.main-carousel .swiper-wrapper.fade-scale .swiper-slide-active {
    animation: fadeScale 0.8s ease-out;
}

@keyframes fadeScale {
    from {
        transform: scale(1.2);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* 效果 5: 旋轉進入 */
.main-carousel .swiper-wrapper.rotate-in .swiper-slide-active {
    animation: rotateIn 0.8s ease-out;
}

@keyframes rotateIn {
    from {
        transform: rotate(-180deg) scale(0.5);
        opacity: 0;
    }

    to {
        transform: rotate(0) scale(1);
        opacity: 1;
    }
}

/* 效果 5: 旋轉掉下來 */
.main-carousel .swiper-wrapper.rotate-fall .swiper-slide-active {
    animation: rotateFall 1.4s ease-out;
}

@keyframes rotateFall {
    0% {
        transform: translateY(-100%) rotate(-220deg);
        opacity: 0;
    }

    70% {
        transform: translateY(0) rotate(20deg);
    }

    100% {
        transform: translateY(0) rotate(0);
        opacity: 1;
    }
}

/* 7. 從下往上彈出 */
.main-carousel .swiper-wrapper.bounce-up .swiper-slide-active {
    animation: bounceUp 1s ease-out;
}

@keyframes bounceUp {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }

    60% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 8. 閃光登場 */
/*.main-carousel .swiper-wrapper.flash .swiper-slide-active {
    animation: flash 1.5s ease-out;
}

@keyframes flash {
    0%, 50%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    25%, 75% {
        opacity: 0.3;
        transform: scale(1.1);
    }
}*/