/* ========================= */
/* PROJECT MODAL */
/* ========================= */
#modal-hero{

    width:100%;
    height:420px;

    object-fit:cover;

    border-radius:16px;

    margin-bottom:25px;

}

.gallery-image{

    width:100%;

    height:220px;

    object-fit:cover;

    border-radius:16px;

    cursor:pointer;

    transition:.35s;

}

.gallery-image:hover{

    transform:translateY(-6px);

    box-shadow:0 15px 40px rgba(124,58,237,.35);

}
.modal {

    display: none;

    position: fixed;

    inset: 0;

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

    backdrop-filter: blur(12px);

    z-index: 9999;

    justify-content: center;

    align-items: center;

    padding: 40px;

}

.modal-content{

    width: min(1100px,95vw);

    max-height:90vh;

    overflow-y:auto;

    border-radius:24px;

    padding:40px;

    position:relative;

    background:rgba(20,20,35,.92);

    border:1px solid rgba(255,255,255,.08);

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

}

.close-modal{

    position:absolute;

    right:25px;

    top:20px;

    font-size:38px;

    cursor:pointer;

    color:white;

    transition:.3s;

}

.close-modal:hover{

    color:#9d6bff;

    transform:rotate(90deg);

}


#modal-title{

    font-size:3rem;

    margin-bottom:15px;

}

.modal-tags{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:20px;

}

.modal-tags span{

    padding:10px 18px;

    border-radius:30px;

    background:#7c3aed;

    color:white;

    font-size:.9rem;

    font-weight:600;

}

.modal-content section{

    margin:22px 0;

}

.modal-content h3{

    font-size:1.35rem;

    margin:0 0 8px 0;

}

.modal-content p{

    color:#cfcfcf;

    line-height:1.6;

    margin:0;

}

.modal-content ul{

    margin:8px 0 0;
    padding-left:20px;

}

.modal-content li{

    margin-bottom:6px;

}
.modal{

    animation:fadeIn .25s ease;

}

.modal-content{

    animation:popup .3s ease;

}

@keyframes fadeIn{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}

@keyframes popup{

    from{

        transform:translateY(25px) scale(.95);

        opacity:0;

    }

    to{

        transform:translateY(0) scale(1);

        opacity:1;

    }

}

/* ========================= */
/* Gallery */
/* ========================= */

.modal-gallery{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

}



.modal-gallery img:hover{

    transform:translateY(-6px);

    box-shadow:0 15px 40px rgba(124,58,237,.35);

}

/* ========================= */
/* Role */
/* ========================= */

#modal-role{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:12px;

    padding-left:20px;

}

#modal-role li{

    color:#d6d6d6;

}

/* ========================= */
/* Technologies */
/* ========================= */

.tech-tags{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

}

.tech-tags span{

    background:rgba(124,58,237,.15);

    color:#b892ff;

    border:1px solid rgba(124,58,237,.45);

    border-radius:40px;

    padding:10px 18px;

    font-weight:600;

}

/* ========================= */
/* Scrollbar */
/* ========================= */

.modal-content::-webkit-scrollbar{

    width:8px;

}

.modal-content::-webkit-scrollbar-thumb{

    background:#7c3aed;

    border-radius:20px;

}

/* ========================= */
/* Mobile */
/* ========================= */

@media(max-width:900px){

    .modal{

        padding:15px;

    }

    .modal-content{

        padding:25px;

    }

    #modal-title{

        font-size:2.6rem;

        margin-bottom:8px;
    }

    #modal-hero{

        width:100%;
        height:340px;
        object-fit:cover;
        border-radius:18px;
        margin-bottom:18px;

    }

    .modal-gallery{

        grid-template-columns:1fr;

    }

    #modal-role{

        grid-template-columns:1fr;

    }

}