/* Slider Transitions & Effects */

/* Base Slide Styles override */
.slide {
    /* Ensure slides are stacked correctly */
    z-index: 1;
}

.slide.active {
    z-index: 2;
}

/* Fade Effect (Default) */
.slide[data-effect="fade"] {
    transition: opacity 1.5s ease-in-out;
}

/* Slide Effect (Side Slide) */
.slide[data-effect="slide"] {
    opacity: 1 !important; /* Always visible for transform */
    transform: translateX(100%);
    transition: transform 1.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    z-index: 10;
}

.slide[data-effect="slide"].active {
    transform: translateX(0);
    z-index: 20;
}

.slide.slide-out {
    transform: translateX(-100%) !important;
    opacity: 1 !important;
    z-index: 15;
    transition: transform 1.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* Slice & Blinds Container */
.slice-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 30;
    pointer-events: none;
    overflow: hidden;
}

.slice-strip {
    position: absolute;
    top: 0;
    height: 100%;
    background-repeat: no-repeat;
    box-shadow: 0 0 10px rgba(0,0,0,0.3); /* Shadow for depth */
}

/* Slice Effect (Vertical Strips Falling) */
.slide[data-effect="slice"] .slice-strip {
    transform: translateY(-100%);
    opacity: 0;
    animation: sliceDown 1s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

@keyframes sliceDown {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Blinds Effect (Vertical Strips Opening) */
.slide[data-effect="blinds"] .slice-strip {
    transform: scaleX(0);
    transform-origin: left;
    opacity: 0;
    animation: blindsOpen 1.2s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes blindsOpen {
    0% {
        opacity: 0;
        transform: scaleX(0);
    }
    100% {
        opacity: 1;
        transform: scaleX(1);
    }
}

/* Hide the main background image when slices are active to avoid duplication/glitch */
/* But keep it for fade/slide */
.slide[data-effect="slice"].active,
.slide[data-effect="blinds"].active {
    /* We keep the background image but maybe hide it initially? 
       Actually, if we hide it, we rely 100% on slices. 
       When animation ends, we should probably show the real bg and remove slices?
       My JS doesn't remove slices until next slide.
       So slices stay. That's fine.
    */
    background-image: none !important; 
}