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

.featured-projects{

    position:relative;

    overflow:hidden;

    background:var(--surface);

}


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

.featured-projects .section-header{

    max-width:760px;

    margin:0 auto 70px;
    text-align:center;

}


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

.projects-grid{

    display:grid;

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

    gap:32px;

}


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

.project-card{

    position:relative;

    display:flex;

    flex-direction:column;

    overflow:hidden;

    transition:var(--transition);

    background:var(--card);

    border:1px solid var(--border);

    border-radius:24px;

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

}

.project-card:hover{


    background:var(--card-hover);

    border-color:var(--border-primary);

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

}


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

.project-image{

    position:relative;

    overflow:hidden;

    aspect-ratio:16/11;

}

.project-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.7s ease;

}

.project-card:hover img{

    transform:scale(1.08);

}



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

.project-overlay{

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(

180deg,

rgba(6,11,20,.15),

rgba(6,11,20,.82)

);

    opacity:0;

    transition:.45s;

}

.project-card:hover .project-overlay{

    opacity:1;

}


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

.project-link{

    width:72px;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--glass-strong);

    border:1px solid var(--border-primary);

    backdrop-filter:blur(15px);

    color:var(--white);

    font-size:1.3rem;

    transform:scale(.75);

    transition:.4s;

}

.project-card:hover .project-link{

    transform:scale(1);

}

.project-link:hover{

    background:var(--primary);

    color:var(--body);

}


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

.project-content{

    display:flex;

    flex-direction:column;

    flex:1;

    padding:30px;

}


/*==================================================
CATEGORY
==================================================*/

.project-category{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-bottom:18px;

    color:var(--primary);

    font-size:.82rem;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}

.project-category::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--accent);

box-shadow:var(--glow-success);

}


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

.project-card h3{

    margin-bottom:18px;

    color:var(--white);

}


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

.project-card p{

    margin-bottom:28px;

    color:var(--text-light);

}


/*==================================================
TECH TAGS
==================================================*/

.project-tags{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:auto;

}

.project-tags span{

    padding:10px 18px;

    border-radius:999px;

    background:var(--glass);

    border:1px solid var(--border);

    color:var(--text-light);

    font-size:.82rem;

    font-weight:600;

}

.project-tags span:hover{

    background:var(--primary);

    color:var(--body);

    border-color:var(--primary);

}



/*==================================================
BOTTOM BUTTON
==================================================*/

.projects-button{

    margin-top:70px;

    text-align:center;

}

/*==================================================
TOP BORDER
==================================================*/

.project-card::after{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:3px;

    background:

    linear-gradient(

90deg,

transparent,

var(--secondary),

var(--primary),

transparent

);

    transform:scaleX(0);

    transition:.5s;

}

.project-card:hover::after{

    transform:scaleX(1);

}


/*==================================================
LIGHT SWEEP
==================================================*/

.project-card::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:50%;

    height:100%;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(99,232,255,.12),

        transparent

    );

    transform:skewX(-25deg);

    transition:1s;

    z-index:5;

}

.project-card:hover::before{

    left:150%;

}


/*==================================================
NEON GLOW
==================================================*/

.project-card:hover{

    box-shadow:

var(--shadow-lg),

var(--glow-primary);

}