/*=========================================================
 MCI Showcase v6
 Part 1A / 3
 Layout Foundation
=========================================================*/

:root{

    --mci-preview-width:380px;

    --mci-thumb-width:140px;

    --mci-thumb-gap:20px;

    --mci-radius:18px;

    --mci-shadow:
        0 20px 60px rgba(0,0,0,.14);

}

*,
*::before,
*::after{

    box-sizing:border-box;

}

#mci-showcase{

    width:min(1180px,94vw);

    margin:70px auto;

}

.mci-wrapper{

    width:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

}

.mci-stage{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:55px;

}

.mci-preview{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:430px;

}

.mci-preview-image{

    width:var(--mci-preview-width);

    display:block;

    border-radius:var(--mci-radius);

    box-shadow:var(--mci-shadow);

    user-select:none;

    pointer-events:none;

}
/*=========================================================
 Part 1B / 3
 Thumbnail Layout
=========================================================*/

.mci-thumbs{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:var(--mci-thumb-gap);

    flex-wrap:nowrap;

    margin:0 auto;

    padding:0;

}

.mci-card{

    width:auto;

    flex:0 0 auto;

    border-radius:14px;

    overflow:hidden;

    cursor:pointer;

    user-select:none;

    transition:
        transform .28s ease,
        box-shadow .28s ease,
        opacity .28s ease;

    box-shadow:
        0 10px 24px rgba(0,0,0,.10);

}
.mci-card img{

    display:block;

    width:100%;

    height:auto;

    pointer-events:none;

    user-select:none;

}

.mci-card:hover{

    transform:translateY(-8px);

    box-shadow:

        0 18px 40px rgba(0,0,0,.18);

}

.mci-card.active{

    transform:translateY(-10px) scale(1.05);

    box-shadow:

        0 22px 50px rgba(0,0,0,.22);

}

.mci-card.active img{

    filter:none;

}

.mci-card:not(.active) img{

    filter:saturate(.95);

}
/*=========================================================
 Part 1C / 3
 Responsive + Premium Layout
=========================================================*/

.mci-showcase-card{

    width:100%;

    background:#fff;

    border-radius:26px;

    padding:42px 40px;

    box-shadow:
        0 25px 70px rgba(0,0,0,.08);

}

#mci-showcase{

    overflow:hidden;

}

.mci-wrapper{

    position:relative;

}

.mci-stage{

    position:relative;

    z-index:2;

}

.mci-thumbs{

    position:relative;

    z-index:3;

}

.mci-preview-image{

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        opacity .35s ease;

}

.mci-preview-image:hover{

    transform:scale(1.015);

}

@media (max-width:1100px){

    :root{

        --mci-preview-width:330px;

        --mci-thumb-width:120px;

        --mci-thumb-gap:16px;

    }

}

@media (max-width:850px){

    :root{

        --mci-preview-width:290px;

        --mci-thumb-width:100px;

        --mci-thumb-gap:14px;

    }

}

@media (max-width:640px){

    #mci-showcase{

        width:96vw;

        margin:35px auto;

    }

    .mci-preview{

        min-height:300px;

    }

    .mci-thumbs{

        gap:10px;

    }

}

@media (max-width:480px){

    :root{

        --mci-preview-width:220px;

        --mci-thumb-width:78px;

    }

}

/*=========================================
AMBIENT
=========================================*/

.mci-showcase-card{

    position:relative;

    overflow:hidden;

}

.mci-ambient{

    position:absolute;

    inset:0;

    z-index:0;

    pointer-events:none;

}

.mci-ambient-a,
.mci-ambient-b{

    position:absolute;

    inset:-10%;

    background-position:center;

    background-size:cover;

    background-repeat:no-repeat;

    filter:blur(2px);

    transform:scale(1);

    opacity:.30;

    transition:

        opacity .8s ease,

        transform 1.2s ease;

    will-change:

        opacity,

        transform;

}