/* project.css
   Premium Masonry Grid + Split Hover Overlay
   Studio 83 — Glassmorphic dark theme
*/

:root{
  --bg:#0f0f14;
  --panel: rgba(255,255,255,0.03);
  --accent:#9A826C;
  --muted:#C9C9D1;
  --glass-border: rgba(255,255,255,0.06);
  --max-width:1200px;
  --pad:24px;
  --ease: cubic-bezier(.2,.9,.2,1);
}

/* Reset */
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:linear-gradient(180deg,#0b0b0f 0%, #0c0b11 100%);color:#eee;font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;}
img{max-width:100%;display:block;border:0;}

/* Header */
.pg-header{padding:40px 0 10px;text-align:center}
.pg-inner{max-width:var(--max-width);margin:0 auto;padding:0 var(--pad);}
.brand{font-family:Oswald, sans-serif;color:var(--accent);text-decoration:none;font-size:18px}
.pg-title{font-family:Oswald, sans-serif;font-size:34px;margin:6px 0 0;color:#fff}
.pg-sub{color:var(--muted);margin:6px 0 0;font-size:14px}

/* FILTER BAR */
.filter-bar{max-width:var(--max-width);margin:22px auto;padding:0 var(--pad);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.filter-tag{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--muted);padding:8px 14px;border-radius:8px;cursor:pointer;font-weight:600;transition:all 220ms var(--ease)}
.filter-tag.active{background:var(--accent);border-color:var(--accent);color:#0f0f14;box-shadow:0 8px 20px rgba(154,130,108,0.09)}
.filter-tag:focus{outline:none;box-shadow:0 6px 16px rgba(0,0,0,0.35)}

/* GRID (CSS Columns for masonry feel) */
.pg-grid{max-width:var(--max-width);margin:28px auto;padding:0 var(--pad);column-gap:22px;column-count:3}
@media (max-width:1100px){.pg-grid{column-count:2}}
@media (max-width:680px){.pg-grid{column-count:1}}
.project-card{break-inside:avoid;margin:0 0 22px;position:relative;cursor:pointer;transition:transform .36s var(--ease);will-change:transform}
.project-card .card-link{display:block;color:inherit;text-decoration:none}

/* CARD MEDIA */
.card-media{width:100%;height:260px;border-radius:12px;overflow:hidden;background-size:cover;background-position:center;position:relative;box-shadow:0 18px 50px rgba(0,0,0,0.6);transition:transform .36s var(--ease), filter .36s var(--ease)}
.card-media.portrait{height:340px}
.card-media img.lazy{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease}

/* Overlay split effect
   The overlay is hidden by default and revealed on hover with a split sliding mask */
.card-overlay{
  position:absolute;inset:0;border-radius:12px;overflow:hidden;pointer-events:none;
  display:flex;align-items:flex-end;justify-content:flex-start;z-index:2;
}
.overlay-inner{
  width:100%;padding:20px;background:linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.62));transform:translateY(18px);opacity:0;transition:all .28s var(--ease);
}
.card-title{font-family:Oswald, sans-serif;font-size:20px;color:#fff;margin:0 0 8px}
.card-excerpt{color:var(--muted);font-size:14px;margin:0 0 12px}
.card-meta{display:flex;gap:12px;align-items:center;color:rgba(255,255,255,0.9);font-weight:700}
.meta-cta{margin-left:auto;color:var(--accent)}

/* hover behavior */
.project-card:hover{transform:translateY(-6px)}
.project-card:hover .card-media{transform:scale(1.035) translateZ(0)}
.project-card:hover .overlay-inner{transform:translateY(0);opacity:1;pointer-events:auto}

/* filtered hidden class */
.filter-hidden{
  opacity:0;
  transform:scale(.98);
  height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden;
  transition:all .35s ease;
  pointer-events:none;
}

/* Lightbox */
.pg-lightbox{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(2,2,6,0.92);z-index:9999}
.pg-lightbox.active{display:flex}
.lb-content{max-width:1100px;max-height:86vh;padding:28px}
.lb-content img{width:100%;height:auto;border-radius:12px;box-shadow:0 30px 70px rgba(0,0,0,0.8)}
.lb-close{position:fixed;top:22px;right:28px;background:transparent;border:none;color:#fff;font-size:30px;cursor:pointer}
.lb-caption{color:var(--muted);margin-top:10px;text-align:center}

/* small decorative accent */
.card-meta::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:linear-gradient(180deg,var(--accent), #6f6a4e);margin-right:8px}

/* GSAP animate placeholder */
.gsap-card{opacity:0;transform:translateY(20px)}

/* utilities */
.hidden{display:none}

/* ================================================
   FILTER BAR — Ultra Premium Awwwards Style
================================================== */
/* TAG buttons */
.filter-tag {
    position: relative;
    padding: 5px 10px;
    font-size: 0.9rem;
    font-weight: 50;
    color: #d9d1c4;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    background: rgba(255,255,255,0.06);
    border-radius: 8px;
    cursor: pointer;
    transition: 0.35s ease;
    overflow: hidden;
}

/* Hover gradient sweep */
.filter-tag::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg,
        rgba(255,255,255,0.0) 0%,
        rgba(255,255,255,0.12) 50%,
        rgba(255,255,255,0.0) 100%
    );
    transform: translateX(-120%);
    transition: transform 0.6s ease;
}
.filter-tag:hover::before {
    transform: translateX(120%);
}

/* ACTIVE STATE — Gold Fill */
.filter-tag.active {
    background: linear-gradient(135deg, #9A826C, #c7b195);
    color: #111;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(154,130,108,0.35);
    transform: translateY(-2px);
}

/* ACTIVE underline glow */
.filter-tag.active::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -4px;
    width: 60%;
    height: 2px;
    background: #9A826C;
    box-shadow: 0 0 10px #9A826C;
    border-radius: 2px;
}

/* On hover (non-active) */
.filter-tag:hover {
    transform: translateY(-2px);
    background: rgba(255,255,255,0.10);
    color: #f1e9dd;
}

/* Subtle floating animation */
.filter-bar:hover .filter-tag {
    animation: fbFloat 4s ease-in-out infinite;
}
@keyframes fbFloat {
    0% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
    100% { transform: translateY(0); }
}
.filter-tag.active {
    background: linear-gradient(135deg, #9A826C, #c7b195);
    color: #111 !important;
    font-weight: 700;
    box-shadow: 0 4px 18px rgba(154,130,108,0.35);
    transform: translateY(-3px);
}