/* Slideshow Transitions CSS - Enhanced Smooth Overlap */
.slideshow-container {
    position: relative;
    overflow: hidden;
}

.slideshow-container__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: center center;
    z-index: 1;
}

/* Current (old) image that will fade out */
.slideshow-container__image.current {
    z-index: 2;
    opacity: 1;
}

/* New image that will fade in */
.slideshow-container__image.incoming {
    z-index: 3;
    opacity: 0;
}

/* Fade transition with subtle zoom */
.slideshow-container__image.fade-zoom-in {
    opacity: 0;
    transform: scale(1.05);
    animation: fadeZoomIn 2.5s ease-out forwards;
}

.slideshow-container__image.fade-zoom-out {
    opacity: 1;
    transform: scale(1);
    animation: fadeZoomOut 2.5s ease-out forwards;
}

/* Fade transition with subtle zoom out */
.slideshow-container__image.fade-zoom-out-reverse {
    opacity: 1;
    transform: scale(1);
    animation: fadeZoomOutReverse 2.5s ease-out forwards;
}

.slideshow-container__image.fade-zoom-in-reverse {
    opacity: 0;
    transform: scale(0.95);
    animation: fadeZoomInReverse 2.5s ease-out forwards;
}

/* Simple crossfade */
.slideshow-container__image.crossfade-in {
    opacity: 0;
    animation: crossfadeIn 2s ease-in-out forwards;
}

.slideshow-container__image.crossfade-out {
    opacity: 1;
    animation: crossfadeOut 2s ease-in-out forwards;
}

/* Keyframe animations */
@keyframes fadeZoomIn {
    from {
        opacity: 0;
        transform: scale(1.05);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeZoomOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.95);
    }
}

@keyframes fadeZoomInReverse {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeZoomOutReverse {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(1.05);
    }
}

@keyframes crossfadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes crossfadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* Loading state untuk preloading */
.slideshow-container__loading {
    opacity: 0.9;
}

/* Image preloader hidden element */
.image-preloader {
    position: absolute;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
}

/* Smooth transitions for all elements */
.slideshow-container * {
    transition: opacity 0.1s ease;
}

/* ========================================== */
/* SPECIAL VIEW SLIDESHOW ZOOM EFFECTS */
/* ========================================== */

/* View slideshow special animations - 10 second duration */
.slideshow-container__image.view-zoom-cycle {
    opacity: 1;
    transform: scale(1.2);
    animation: viewZoomCycle 10s ease-in-out forwards;
}

.slideshow-container__image.view-zoom-out-transition {
    opacity: 1;
    transform: scale(1);
    animation: viewZoomOutTransition 2.5s ease-out forwards;
}

.slideshow-container__image.view-zoom-in-transition {
    opacity: 0;
    transform: scale(1.2);
    animation: viewZoomInTransition 2.5s ease-out forwards;
}

/* Keyframes for view slideshow special effects */
@keyframes viewZoomCycle {
    0% {
        opacity: 1;
        transform: scale(1.2);
    }
    10% {
        opacity: 1;
        transform: scale(1);
    }
    90% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 1;
        transform: scale(1.1);
    }
}

@keyframes viewZoomOutTransition {
    from {
        opacity: 1;
        transform: scale(1.1);
    }
    to {
        opacity: 0;
        transform: scale(0.9);
    }
}

@keyframes viewZoomInTransition {
    from {
        opacity: 0;
        transform: scale(1.2);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Override transition duration for view images */
.slideshow-container__image.view-special {
    transition: none; /* Disable default transitions for view images */
}