/* PROJECTS */
.projects-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.8rem;}
@media (max-width:960px){.projects-grid{grid-template-columns:1fr; max-width:480px; margin:0 auto;}}
.project-card{
  border-radius:26px; overflow:hidden; display:flex; flex-direction:column; position:relative;
  transition:transform 0.5s cubic-bezier(.16,1,.3,1), box-shadow 0.5s ease;
}
.project-card:hover{transform:translateY(-10px); box-shadow:0 40px 70px rgba(90,64,102,0.22);}
.project-mock{
  height:230px; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.project-mock .device{
  width:120px; height:200px; border-radius:20px; background:rgba(255,255,255,0.55); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,0.8); box-shadow:0 20px 40px rgba(90,64,102,0.2);
  transition:transform 0.5s ease; padding:8px; display:flex; flex-direction:column; gap:6px;
}
.project-card:hover .device{transform:translateY(-6px) rotate(-2deg);}
.device .drow{height:6px; border-radius:3px; background:rgba(255,255,255,0.7);}
.device .dcard{flex:1; border-radius:10px; background:rgba(255,255,255,0.5); margin-top:4px;}
.project-body{padding:1.7rem 1.7rem 1.9rem; flex:1; display:flex; flex-direction:column;}
.project-title{font-size:1.3rem; margin-bottom:0.6rem; font-style:italic;}
.project-desc{color:var(--plum-soft); font-size:0.92rem; margin-bottom:1.1rem; flex:1;}
.tech-badges{display:flex; flex-wrap:wrap; gap:0.4rem; margin-bottom:1.4rem;}
.tech-badge{
  font-family:var(--font-mono); font-size:0.65rem; letter-spacing:0.02em; padding:0.32rem 0.7rem;
  border-radius:100px; background:rgba(56,37,63,0.06); color:var(--plum-soft); border:1px solid rgba(56,37,63,0.08);
}
.project-links{display:flex; gap:0.7rem; flex-wrap:wrap;}

/* Project card slideshow preview */
.project-gallery-preview{
  position:relative; height:230px; overflow:hidden; display:flex; align-items:center; justify-content:center;
}
.preview-badge{
  position:absolute; top:12px; right:12px; z-index:5;
  font-family:var(--font-mono); font-size:0.65rem; padding:0.35rem 0.8rem;
  border-radius:100px; color:var(--plum); font-weight:600;
  display:flex; align-items:center; gap:0.45rem;
  background:rgba(255,255,255,0.85); backdrop-filter:blur(10px);
  box-shadow:0 4px 14px rgba(0,0,0,0.08); border:1px solid rgba(255,255,255,0.9);
}
.dot-live{
  width:7px; height:7px; border-radius:50%; background:#22c55e;
  box-shadow:0 0 8px #22c55e; animation:pulseLive 1.8s infinite;
}
@keyframes pulseLive{0%,100%{opacity:1; transform:scale(1);} 50%{opacity:0.4; transform:scale(1.35);}}
.project-card-slideshow{
  width:125px; height:195px; border-radius:20px; position:relative;
  box-shadow:0 20px 45px rgba(90,64,102,0.25); border:2px solid rgba(255,255,255,0.85);
  overflow:hidden; transition:transform 0.5s cubic-bezier(.16,1,.3,1);
}
.project-card:hover .project-card-slideshow{transform:translateY(-6px) rotate(-2deg) scale(1.04);}
.card-slide{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 0.8s ease-in-out;
}
.card-slide.active{opacity:1;}