body{
    min-height:100vh;
    height:auto;
    background:#0f1f38;
}

body::before,
body::after{
    content:"";
    position:fixed;
    inset:0;

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    z-index:-1;
    opacity:0;

    transition:opacity 2.5s ease-in-out;
    will-change:opacity;
}

body::before{
    opacity:1;
}

body.bg-fade::after{
    opacity:1;
}

body.modal-open{
    overflow:hidden;
    touch-action:none;
}

body.modal-open::before,
body.modal-open::after{
    transform:none;
}

.image-modal{
    display:none;
    position:fixed;
    inset:0;

    background:rgba(0,0,0,0.85);

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

    z-index:99999;
    overflow:hidden;
    touch-action:none;
}

.modal-content{
    position:relative;
    display:inline-block;

    max-width:90vw;
    max-height:90vh;
}

#modalImage{
    display:block;

    max-width:90vw;
    max-height:90vh;

    width:auto;
    height:auto;

    object-fit:contain;

    border-radius:12px;
    box-shadow:0 10px 35px rgba(0,0,0,0.6);

    cursor:grab;
    user-select:none;
    -webkit-user-select:none;
    touch-action:none;
    transform-origin:center center;

    animation:zoomIn 0.25s ease-in-out;
}

#modalImage:active{
    cursor:grabbing;
}

.close{
    position:absolute;
    top:12px;
    right:12px;

    width:42px;
    height:42px;

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

    color:white;
    background:rgba(0,0,0,0.65);

    border-radius:50%;

    font-size:32px;
    font-weight:bold;
    line-height:1;

    cursor:pointer;
    z-index:100000;

    transition:transform 0.2s ease, background 0.3s ease, color 0.3s ease;
}

.close:hover{
    background:#f8c146;
    color:#333;
}

@keyframes zoomIn{
    from{
        transform:scale(0.8);
        opacity:0;
    }

    to{
        transform:scale(1);
        opacity:1;
    }
}

@media(max-width:768px){
    #modalImage{
        max-width:90vw;
        max-height:85vh;
    }

    .close{
        top:15px;
        right:15px;
        width:42px;
        height:42px;
        font-size:30px;
    }
}