/*==================================================
                    PROJECTS
==================================================*/

.projects{

    position:relative;

    overflow:hidden;

    background:#050505;

    padding-block:clamp(70px,8vw,120px);

}



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

.projects .container{

    width:min(1280px,100%);

    margin:auto;

    padding-inline:clamp(18px,3vw,30px);

}



/*==================================================
                HEADER
==================================================*/

.projects-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    flex-wrap:wrap;

    gap:clamp(30px,6vw,80px);

    margin-bottom:clamp(42px,6vw,70px);

}



/*==================================================
                TITLE
==================================================*/

.projects-title{

    flex:1;

    min-width:min(420px,100%);

    max-width:650px;

}

.projects-title h2{

    margin-top:clamp(10px,2vw,15px);

    font-size:clamp(2rem,4vw,3.5rem);

    font-weight:800;

    line-height:1.05;

    color:#fff;

    text-wrap:balance;

}

.projects-title h2 span{

    color:#15850F;

}



/*==================================================
                DESCRIPTION
==================================================*/

.projects-text{

    flex:1;

    min-width:min(320px,100%);

    max-width:430px;

}

.projects-text p{

    color:#bdbdbd;

    font-size:clamp(.95rem,1.3vw,1.125rem);

    line-height:1.8;

}



/*==================================================
                    GRID
==================================================*/

.projects-grid{

    display:grid;

    grid-template-columns:

        repeat(auto-fit,minmax(min(260px,100%),1fr));

    gap:clamp(18px,2vw,28px);

}



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

.project-card{

    position:relative;

    overflow:hidden;

    border-radius:clamp(14px,1vw,18px);

    background:#111;

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

    transition:

        transform .35s ease,

        border-color .35s ease,

        box-shadow .35s ease;

}



/*==================================================
                PROJECT IMAGE
==================================================*/

.project-image{

    position:relative;

    overflow:hidden;

    aspect-ratio:2/3;

}

.project-image img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    transform:scale(1);

    transition:transform .7s ease;

    will-change:transform;

}



/*==================================================
                OVERLAY
==================================================*/

.project-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            to top,

            rgba(0,0,0,.98) 0%,

            rgba(0,0,0,.78) 28%,

            rgba(0,0,0,.38) 55%,

            rgba(0,0,0,.08) 75%,

            transparent 100%

        );

    z-index:1;

    transition:.4s;

}



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

.project-content{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    z-index:2;

    padding:clamp(18px,2vw,24px);

}

.project-content h3{

    margin:0 0 clamp(14px,2vw,18px);

    color:#fff;

    font-size:clamp(1rem,1.6vw,1.25rem);

    font-weight:700;

    line-height:1.3;

    text-shadow:0 2px 8px rgba(0,0,0,.5);

}



/*==================================================
                PROJECT LINK
==================================================*/

.project-link{

    display:inline-flex;

    align-items:center;

    gap:clamp(6px,.8vw,8px);

    color:#fff;

    text-decoration:none;

    font-size:clamp(.88rem,1vw,.95rem);

    font-weight:600;

    letter-spacing:.3px;

    transition:

        color .30s ease,

        transform .30s ease,

        gap .30s ease;

}



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

.project-card:hover{

    transform:translateY(-5px);

    border-color:#15850F;

    box-shadow:

        0 clamp(14px,2vw,18px)

        clamp(30px,4vw,45px)

        rgba(0,0,0,.45),

        0 0 clamp(20px,3vw,30px)

        rgba(21,133,15,.15);

}



/*==================================================
                IMAGE HOVER
==================================================*/

.project-card:hover .project-image img{

    transform:scale(1.04);

}



/*==================================================
            OVERLAY HOVER
==================================================*/

.project-card:hover .project-image::after{

    background:

        linear-gradient(

            to top,

            rgba(0,0,0,.98) 0%,

            rgba(0,0,0,.70) 30%,

            rgba(0,0,0,.28) 58%,

            rgba(0,0,0,.05) 80%,

            transparent 100%

        );

}



/*==================================================
                LINK HOVER
==================================================*/

.project-card:hover .project-link{

    color:#6CFF67;

    transform:translateX(4px);

}



/*==================================================
                IMPROVEMENTS
==================================================*/

.project-card{

    display:flex;

    flex-direction:column;

    height:100%;

}



.project-card>*{

    position:relative;

}



.project-content h3{

    text-wrap:balance;

}



.project-link svg{

    width:clamp(16px,1.2vw,18px);

    height:clamp(16px,1.2vw,18px);

    transition:transform .30s ease;

}



.project-card:hover .project-link svg{

    transform:translateX(2px);

}



.project-image img{

    user-select:none;

    -webkit-user-drag:none;

}



/*==================================================
            REVEAL ANIMATION
==================================================*/

.project-card.reveal{

    opacity:0;

    transform:translateY(clamp(40px,5vw,60px));

    transition:

        opacity .8s ease,

        transform .8s cubic-bezier(.22,1,.36,1);

}



.project-card.reveal.show{

    opacity:1;

    transform:translateY(0);

}



/*==================================================
            STAGGER
==================================================*/

.project-card:nth-child(1){

    transition-delay:.10s;

}

.project-card:nth-child(2){

    transition-delay:.20s;

}

.project-card:nth-child(3){

    transition-delay:.30s;

}

.project-card:nth-child(4){

    transition-delay:.40s;

}



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

@media (max-width:768px){

    .projects-header{

        align-items:flex-start;

    }

}



@media (max-width:576px){

    .projects-title,
    .projects-text{

        min-width:100%;

        max-width:100%;

    }

}