/* =====================================
IDLE SHOWCASE
===================================== */

.idle-showcase{

    position:fixed;

    inset:0;

    display:none;

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

    background:
    rgba(0,0,0,.75);

    backdrop-filter:
    blur(15px);

    z-index:9999999;
}

.idle-showcase.active{

    display:flex;
}

/* =====================================
CARD
===================================== */

.idle-card{

    width:min(1400px,92vw);

    height:min(780px,88vh);

    display:grid;

    grid-template-columns:
    1.3fr 0.9fr;

    overflow:hidden;

    border-radius:30px;

    background:#111;

    box-shadow:
    0 30px 80px rgba(0,0,0,.55);
}

/* =====================================
IMAGE WRAPPER
===================================== */

.idle-image-wrapper{

    position:relative;

    overflow:hidden;
}

/* =====================================
BLUR BACKGROUND
===================================== */

.idle-image-blur{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    filter:
    blur(30px);

    transform:
    scale(1.2);

    opacity:.4;
}

/* =====================================
MAIN IMAGE
===================================== */

.idle-image-main{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:contain;

    z-index:2;

    padding:25px;

    box-sizing:border-box;

    animation:
    idleKenburns 8s linear;
}

@keyframes idleKenburns{

    from{

        transform:
        scale(1);

    }

    to{

        transform:
        scale(1.05);

    }

}

/* =====================================
CONTENT
===================================== */

.idle-content{

    padding:70px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    background:
    linear-gradient(
        135deg,
        #07140d,
        #0d1f15
    );
}

#idleProgram{

    color:#f5c542;

    font-size:15px;

    letter-spacing:4px;

    text-transform:uppercase;

    margin-bottom:20px;
}

#idleTitle{

    font-size:52px;

    line-height:1.2;

    color:#fff;

    margin:0;

    text-shadow:
    0 5px 20px rgba(0,0,0,.35);
}

.idle-note{

    margin-top:40px;

    color:
    rgba(255,255,255,.6);

    font-size:14px;
}

/* =====================================
RESPONSIVE
===================================== */

@media(max-width:900px){

    .idle-card{

        width:95vw;

        height:auto;

        grid-template-columns:1fr;
    }

    .idle-image-wrapper{

        height:320px;
    }

    .idle-content{

        padding:30px;
    }

    #idleTitle{

        font-size:28px;
    }

}