/* =========================
   CAROUSEL CONTAINER
========================= */

#carousel-container {
    width: 800px;
    height: 300px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;

    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 15px;
    border: 2px solid #3a8dde;

    background: #000;

    /* OUTER GLOW + SHADOW */
    box-shadow:
        0 0 10px rgba(58,141,222,0.6),
        0 0 20px rgba(58,141,222,0.4),
        0 10px 20px rgba(0,0,0,0.5),
        inset 0 0 15px rgba(0,0,0,0.7);

    animation: glowPulse 4s infinite ease-in-out;
}

/* =========================
   IMAGE FITTING
========================= */

#carousel-image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
    margin: auto;

    transition: opacity 0.4s ease-in-out;

    filter: contrast(1.05) brightness(1.03);
}

/* =========================
   GLASS SHINE OVERLAY
========================= */

#carousel-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    border-radius: 15px;

    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0.25) 0%,
        rgba(255,255,255,0.05) 40%,
        rgba(0,0,0,0.15) 100%
    );

    pointer-events: none;
}

/* =========================
   EDGE DARKENING (CINEMA)
========================= */

#carousel-container::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;

    border-radius: 15px;

    background: radial-gradient(
        ellipse at center,
        rgba(0,0,0,0) 60%,
        rgba(0,0,0,0.5) 100%
    );

    pointer-events: none;
}

/* =========================
   GLOW ANIMATION
========================= */

@keyframes glowPulse {
    0% { box-shadow:
        0 0 8px rgba(58,141,222,0.4),
        0 0 16px rgba(58,141,222,0.2),
        0 8px 16px rgba(0,0,0,0.4),
        inset 0 0 15px rgba(0,0,0,0.7);
    }
    50% { box-shadow:
        0 0 18px rgba(58,141,222,0.9),
        0 0 35px rgba(58,141,222,0.5),
        0 10px 25px rgba(0,0,0,0.6),
        inset 0 0 15px rgba(0,0,0,0.7);
    }
    100% { box-shadow:
        0 0 8px rgba(58,141,222,0.4),
        0 0 16px rgba(58,141,222,0.2),
        0 8px 16px rgba(0,0,0,0.4),
        inset 0 0 15px rgba(0,0,0,0.7);
    }
}

/* =========================
   HOVER ZOOM EFFECT
========================= */

#carousel-container:hover {
    transform: scale(1.01);
    transition: transform 0.3s ease;
}