/* ============================= */
/* PROJECT SECTION */
/* ============================= */

#projects-section{
/* background:var(--bg-dark); */
background:var(--bg-light);
color:var(--text-color);
padding:5rem 1rem;
text-align:center;
}

.section-head span{
display:block;
font-size:1rem;
letter-spacing:2px;
text-transform:uppercase;
color:var(--accent);
}

.section-head h2{
font-size:2.5rem;
margin-top:.5rem;
color:var(--accent);
}

/* ============================= */
/* FILTER BUTTONS */
/* ============================= */

.project-filters{
display:flex;
justify-content:center;
gap:10px;
flex-wrap:wrap;
margin:40px 0;
}

.filter-btn{
padding:8px 18px;
border:1px solid var(--border-color);
background:var(--bg-card);
color:var(--text-color);
border-radius:6px;
cursor:pointer;
transition:.25s ease;
font-size:14px;
}

.filter-btn:hover{
border-color:var(--accent);
}

.filter-btn.active{
background:var(--accent);
color:#111;
}

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

.projects-grid{

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

gap:32px;

width:100%;
max-width:1200px;

margin:0 auto;

align-items:stretch;

}

/* center when only one project */

.projects-grid.center-one{
grid-template-columns:1fr;
justify-items:center;
}

.projects-grid.center-one .project-card{
max-width:520px;
}

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

.project-card{

background:var(--bg-card);
border:1px solid var(--border-color);
border-radius:1rem;

overflow:hidden;

display:flex;
flex-direction:column;

width:100%;
height:100%;

box-shadow:0 5px 15px rgba(0,0,0,.6);

transform:translateZ(0);

transition:
transform .4s cubic-bezier(.25,.8,.25,1),
box-shadow .35s ease,
opacity .35s ease;

will-change:transform;

}

.project-card:hover{

transform:translateY(-10px) translateZ(0);

box-shadow:
0 12px 30px rgba(0,0,0,.7),
0 0 14px rgba(247,200,115,.35);

}

.project-card.hide{
opacity:0;
transform:scale(.85) translateY(40px);
pointer-events:none;
}

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

.project-image{
width:100%;
height:220px;
object-fit:cover;

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

transition:transform .6s ease;

backface-visibility:hidden;
}

.project-card:hover .project-image{
transform:scale(1.08);
}

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

.project-content{

padding:1.8rem;

display:flex;
flex-direction:column;

flex:1;

text-align:left;

position:relative;
overflow:hidden;

}

/* spotlight hover */

.project-content::after{

content:"";

position:absolute;

top:var(--y,50%);
left:var(--x,50%);

width:0;
height:0;

background:radial-gradient(circle,rgba(247,200,115,.2),transparent 80%);

transform:translate(-50%,-50%);

transition:width .35s ease,height .35s ease;

pointer-events:none;

}

.project-content.hovered::after{
width:200%;
height:200%;
}

/* ============================= */
/* TEXT */
/* ============================= */

.project-title{
color:var(--accent);
margin-bottom:.6rem;
font-size:1.6rem;
}

.project-description{
margin-bottom:1rem;
line-height:1.6;
color:var(--text-muted);
}

/* ============================= */
/* TECH STACK */
/* ============================= */

.tech-stack{

display:flex;
flex-wrap:wrap;
gap:8px;

margin-bottom:1rem;

transform:translateY(10px);
opacity:.6;

transition:.35s;

}

.project-card:hover .tech-stack{
transform:translateY(0);
opacity:1;
}

.tech-tag{

padding:5px 10px;

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

border-radius:6px;

font-size:.85rem;

color:var(--accent);

}

/* ============================= */
/* ACTION BUTTONS */
/* ============================= */

.project-actions{

display:flex;
gap:10px;

margin-top:auto;

opacity:0;
transform:translateY(10px);

transition:.35s;

}

.project-card:hover .project-actions{
opacity:1;
transform:translateY(0);
}

.project-icon{

width:38px;
height:38px;

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

border-radius:8px;

background:var(--bg-dark);
border:1px solid var(--border-color);

color:var(--accent);

transition:.25s;

}

.project-icon:hover{

background:var(--accent);
color:#111;

transform:translateY(-3px);

box-shadow:0 0 10px rgba(247,200,115,.6);

}

/* ============================= */
/* SCROLL REVEAL */
/* ============================= */

.project-hidden{
opacity:0;
transform:translateY(80px);
}

.show-project{

opacity:1;
transform:translateY(0);

transition:
opacity .6s ease,
transform .6s cubic-bezier(.25,.8,.25,1);

}

/* ============================= */
/* MODAL */
/* ============================= */

.project-modal{

position:fixed;
top:0;
left:0;

width:100%;
height:100%;

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

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

opacity:0;
visibility:hidden;

transition:opacity .35s ease;

z-index:9999;

}

.project-modal.active{
opacity:1;
visibility:visible;
}

.modal-content{

background:var(--bg-card);
padding:30px;

border-radius:10px;

max-width:700px;
width:90%;

text-align:center;

position:relative;

max-height:90vh;
overflow-y:auto;

transform:scale(.9);
transition:transform .35s ease;

}

.project-modal.active .modal-content{
transform:scale(1);
}

/* gallery */

.modal-main-img{

width:100%;
max-height:350px;

object-fit:cover;

border-radius:8px;

margin-bottom:12px;

}

.modal-thumbnails{

display:flex;
gap:10px;

justify-content:center;

flex-wrap:wrap;

}

.modal-thumbnails img{

width:70px;
height:50px;

object-fit:cover;

border-radius:4px;

cursor:pointer;

opacity:.7;

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

transition:.25s;

}

.modal-thumbnails img.active{
opacity:1;
border-color:var(--accent);
}

/* close button */

.modal-close{

position:absolute;

top:18px;
right:18px;

width:38px;
height:38px;

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

border-radius:50%;

background:rgba(255,255,255,.05);
border:1px solid var(--border-color);

cursor:pointer;

transition:.25s;

}

.modal-close:hover{

background:var(--accent);
color:#111;

transform:rotate(90deg);

}

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

@media(max-width:900px){

.projects-grid{
grid-template-columns:1fr;
}

}

@media(max-width:768px){

.modal-main-img{
max-height:240px;
}

.modal-thumbnails img{
width:60px;
height:45px;
}

}