.carousel-container {
    position: relative;
    margin-bottom: 9.5vh;
    top: -10%;
}

.carousel-slide {
    display: flex;
    transition: transform 0.3s ease-in-out;
    justify-content: center; /* Center the images */
}

.carousel-slide img {
    flex-shrink: 0; /* Prevents images from shrinking */
    transition: transform 0.5s ease, opacity 0.5s ease;
    box-shadow: -16px 16px 32px rgba(0, 0, 0, 1);
    border-radius: 15px; /* Makes the image circular */
    transform: scale(0.8); /* Scaled down size */
    opacity: 0.3; /* Lower opacity for far images */
    cursor: pointer;
}

.image-container {
    position: relative;
    display: grid; /* grid to center overlay over image */
    cursor: pointer;
    flex-shrink: 0;
    transform: translateY(2%) scale(1);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    padding: 0.25vw; /* thinner frame so grey background is smaller */
    border-radius: 20px;
    background: rgba(12, 14, 18, 0.92);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 10px 24px rgba(0,0,0,0.3);
    box-sizing: border-box;
    overflow: hidden; /* ensure image aligns with card corners */
    margin-left: 2.2vw; /* move spacing from image to the card */
    line-height: 0; /* remove inline-gap that can cause bottom sliver */
}

/* Subtle sheen/light sweep for thematic polish */
/* Removed hover sheen overlay to avoid white animation sweep */

.image-container:hover {
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    transform: translateY(0%) scale(1.1);
    border-color: rgba(255,255,255,0.18);
    box-shadow: 0 16px 36px rgba(0,0,0,0.38);
}
.image-container.active {
    border-color: rgba(255, 210, 11, 0.6);
    background: rgba(12, 14, 18, 0.98);
}

.image-container:active {
    transition: 0.2s ease-out;
    transform: translateY(0%) scale(0.95);
}

.carousel-slide img.selected {
    opacity: 0.5;
    transform: scale(1);
}

/* Base styles for overlay text */
.overlay-text {
    position: absolute;
    bottom: 2vh; /* Position text at the bottom of the image */
    right: 1vw; /* Position text at the right of the image */
    font-size: calc(0.8vw + 0.8vh);
    font-weight: bold;
    font-style: italic;
    text-align: left;
    opacity: 0; /* Hidden by default */
    z-index: 10;
    transition: opacity 0.3s ease, transform 0.4s ease; /* Smooth reveal */
    text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
    transform: translateY(6px) scale(0.92); /* Subtle pop-in */
    display: none !important; /* Hide role text entirely */
}

/* Reveal overlay text on hover or when active */
.image-container:hover .overlay-text,
.image-container.active .overlay-text {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Base styles for overlay image */
.carousel-slide .carousel-image {
    grid-area: 1 / 1; /* occupy same grid as overlay */
    width: 20vw;
    aspect-ratio: 16 / 9;
    margin-left: 0; /* spacing handled by card */
    object-fit: cover; 
    transition: transform 0.5s ease, opacity 0.5s ease;
    transform: scale(0.9);
    opacity: 0.6;
    cursor: pointer;
    border: 2px transparent;
    transition: 0.3s;
    will-change: transform, filter;
    border-radius: 16px;
}

.carousel-slide .carousel-image.active {
    transform: scale(1);
    border: 0; /* avoid inner outline; card provides the frame */
    transition: 0.3s;
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.85), 0 0 0 2px rgba(255, 255, 255, 0.08) inset;
    filter: none;
}

/* Removed accent ring to avoid double outlines/purple tint */

/* Avoid cropping: don't upscale image inside rounded card when active */
.image-container.active .carousel-image {
    transform: scale(1) !important;
}

/* Netflix-style silent preview video overlay */
/* Per-slide preview removed; using hero preview */

.carousel-slide .image-container .overlay-image {
    grid-area: 1 / 1; /* center over image */
    width: 3.2vw;
    max-width: 56px;
    justify-self: center;
    align-self: center;
    position: relative;
    object-fit: contain;
    text-align: center;
    pointer-events: none; /* don't affect click target */
    border-radius: 100%;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
    transition: 0.3s ease;
    z-index: 2;
    opacity: 0;
}

.carousel-slide .image-container:active  .overlay-image {
    transition: 0.15s;   
}

.carousel-slide .image-container:hover .overlay-image {
    transition: 0.3s;
    opacity: 1;
}

/* Make overlay badge visible on active slide as well */
.image-container.active .overlay-image {
    opacity: 1;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.6));
}

.prev, .next {
    position: absolute;
    top: 27%;
    font-size: calc(1vw + 1vh + .5vmin);
    color: white;
    background-color: rgba(0,0,0,0.45); /* Lighter */
    padding: calc(1vw + 1vh - 0.5vmin);
    border-radius: 5%;
    cursor: pointer;
    border: 0; /* No border */
    transform: scale(1);
    transition: transform 0.2s ease, color 0.2s ease;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
    z-index: 2; /* Above edge vignettes */
}

/* Hover effect */
.prev:hover, .next:hover {
    transform: scale(1.15);
    transition: transform 0.2s ease, color 0.2s ease;
    color: #f0f0f0;
    background-color: rgba(0,0,0,0.72); /* Darker on hover */
}

/* Active (click) effect */
.prev:active, .next:active {
    transform: scale(0.9);
    color: rgb(255, 210, 11);
    background-color: rgba(0,0,0,0.9); /* Even darker when active */
}

.prev { left: 3%; }
.next { right: 3%; }

/* Edge vignettes to focus attention toward the center */
.carousel-container::before,
.carousel-container::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 8vw;
    pointer-events: none;
    z-index: 1;
}

.carousel-container::before {
    left: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
}

.carousel-container::after {
    right: 0;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
}