.carousel-slides {
    width: 100%;/*MOD*/
    height: calc(100vh - 60px);/*MOD*/
/*    width: 300px;
    height: 450px;*/
    position: relative;
    overflow: hidden; /* Crucial for vertical slide hiding */
    border-radius: 0; /*MOD*/
    /*border-radius: 12px;*/
    /*background: white;*/
    background: var(--themeBG-20);/*MOD*/
}

.carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-size: 1rem;
    color: white;
    /*background-color: var(--themeBG-20);*/
    backdrop-filter: blur(.5em);
    border-radius: 0; /*MOD*/
    /*border-radius: 12px;*/
    transition: transform 0.5s ease-out, opacity 0.5s ease-out, filter 0.5s ease-out;
    backface-visibility: hidden; /* Helps with smooth transitions */
    will-change: transform, opacity, filter; /* Optimization */
}
.carousel-slide .contents {
    /*border: 8px solid cyan;*/
    padding: .5em 4%;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: left;
    color: #fff;
    /*color: var(--themeTXT);*/
    background: rgba(0, 0, 0, 0.75);
}









/* --- Slide Animations (CSS Classes) --- */

/* Default/Slide: Slides are positioned outside the viewport */
.slide-current {
    transform: translate3d(0, 0, 0);
    z-index: 2;
    opacity: 1;
    filter: blur(0);
}
.slide-prev {
    transform: translate3d(0, -100%, 0);
    z-index: 1;
    opacity: 0; /* Hidden but not completely gone for effect */
    filter: blur(0);
}
.slide-next {
    transform: translate3d(0, 100%, 0);
    z-index: 1;
    opacity: 0;
    filter: blur(0);
}

/* 1. Fade Animation */
.fade-current {
    opacity: 1;
    z-index: 2;
    transform: translate3d(0, 0, 0);
}
.fade-prev, .fade-next {
    opacity: 0;
    z-index: 1;
    transform: translate3d(0, 0, 0); /* Stays in place, only fades */
}

/* 2. Blur Animation */
.blur-current {
    filter: blur(0);
    z-index: 2;
    transform: translate3d(0, 0, 0);
}
.blur-prev {
    transform: translate3d(0, -100%, 0);
    filter: blur(10px); /* Blur as it moves out */
    opacity: 0.5;
    z-index: 1;
}
.blur-next {
    transform: translate3d(0, 100%, 0);
    filter: blur(10px); /* Blur as it moves in */
    opacity: 0.5;
    z-index: 1;
}

/* 3. Scale & Slide Animation (Instead of Wave) */
.scale-current {
    transform: scale(1);
    z-index: 2;
}
.scale-prev {
    transform: translate3d(0, -100%, 0) scale(0.8); /* Shrink as it slides out */
    opacity: 0.5;
    z-index: 1;
}
.scale-next {
    transform: translate3d(0, 100%, 0) scale(0.8); /* Shrink as it slides in */
    opacity: 0.5;
    z-index: 1;
}

/* Different backgrounds for visual distinction */
/*.carousel-slide:nth-child(1) { background-color: #e74c3c; }
.carousel-slide:nth-child(2) { background-color: #3498db; }
.carousel-slide:nth-child(3) { background-color: #2ecc71; }
.carousel-slide:nth-child(4) { background-color: #f39c12; }
.carousel-slide:nth-child(5) { background-color: #9b59b6; }*/