/* ============================================================
   PORTFOLIO PAGE SECTIONS
   ============================================================ */

/* ---------- FEATURED PROJECT ---------- */
.featured{ padding-block: var(--space-lg) var(--space-xl); }
.featured-card{
  position:relative;
  border-radius: var(--radius-md);
  overflow:hidden;
  border: 1px solid var(--line-strong);
  aspect-ratio: 16/7.5;
  cursor:pointer;
}
.featured-card .art{
  position:absolute; inset:0; width:100%; height:100%;
  transition: transform var(--dur-slow) var(--ease-soft);
}
.featured-card:hover .art{ transform: scale(1.04); }
.featured-card::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(11,10,12,0.88) 0%, rgba(11,10,12,0.55) 45%, rgba(11,10,12,0.2) 100%);
}
.featured-label{
  position:absolute; top: var(--space-md); left: var(--space-md);
  z-index:2;
  display:inline-flex; align-items:center; gap:0.6em;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber-ink);
  background: var(--amber);
  padding: 0.4em 0.9em;
  border-radius: 999px;
}
.featured-info{
  position:absolute; left:0; bottom:0; right:0;
  z-index:2;
  padding: var(--space-lg);
  max-width: 640px;
}
.featured-cat{
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
}
.featured-title{
  font-size: var(--step-3);
  margin-top: 0.35em;
}
.featured-desc{
  color: var(--ink-dim);
  margin-top: 0.6em;
  font-size: var(--step-0);
  max-width: 52ch;
}
.featured-meta{
  display:flex; gap: 1.2em;
  margin-top: 0.9em;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-dim);
  flex-wrap:wrap;
}
.featured-play{
  position:absolute; z-index:2;
  top: var(--space-lg); right: var(--space-lg);
  width: 68px; height:68px;
  border-radius:50%;
  border: 1px solid rgba(243,239,231,0.5);
  background: rgba(11,10,12,0.3);
  display:flex; align-items:center; justify-content:center;
  transition: transform var(--dur-fast) var(--ease-soft), background var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft);
}
.featured-play svg{ width:22px; height:22px; fill: var(--ink); margin-left:3px; }
.featured-card:hover .featured-play{
  transform: scale(1.08);
  background: var(--amber);
  border-color: var(--amber);
}
.featured-card:hover .featured-play svg{ fill: var(--amber-ink); }

@media (max-width: 760px){
  .featured-card{ aspect-ratio: 4/5; }
  .featured-play{ width:56px; height:56px; top:var(--space-sm); right:var(--space-sm); }
  .featured-info{ padding: var(--space-md); }
  .featured-title{ font-size: var(--step-2); }
}

/* ---------- FILTERS ---------- */
.pf-filters{
  position: sticky;
  top: 68px;
  z-index: 50;
  background: rgba(11,10,12,0.86);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
  padding-block: var(--space-sm);
}
.filter-row{
  display:flex;
  gap: 0.6rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: 0.2rem;
}
.filter-row::-webkit-scrollbar{ display:none; }
.filter-btn{
  flex-shrink:0;
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.65em 1.3em;
  border-radius: 999px;
  transition: color var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft), background var(--dur-fast) var(--ease-soft);
}
.filter-btn:hover{ color: var(--ink); border-color: var(--ink-dim); }
.filter-btn.is-active{
  background: var(--amber);
  border-color: var(--amber);
  color: var(--amber-ink);
}
.filter-count{
  margin-left: var(--space-md);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--muted);
  align-self:center;
  white-space:nowrap;
}

/* ---------- GRID ---------- */
.pf-grid-section{ padding-block: var(--space-xl) var(--space-lg); min-height: 40vh; }
.pf-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
.pf-card{
  position:relative;
  border-radius: var(--radius-md);
  overflow:hidden;
  border: 1px solid var(--line);
  background: var(--bg-elevated);
  cursor:pointer;
  transition: transform var(--dur-med) var(--ease-soft), opacity var(--dur-med) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft);
}
.pf-card:hover{ transform: translateY(-6px); }
.pf-card.is-filtered-out{
  opacity:0;
  transform: scale(0.96);
  pointer-events:none;
  position:absolute;
  visibility:hidden;
}
.pf-thumb{
  position:relative;
  aspect-ratio: 4/5;
  overflow:hidden;
}
.pf-thumb .art{
  position:absolute; inset:0; width:100%; height:100%;
  transition: transform var(--dur-slow) var(--ease-soft);
}
.pf-card:hover .pf-thumb .art{ transform: scale(1.08); }
.pf-thumb::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 45%, rgba(11,10,12,0.85) 100%);
}
.pf-play{
  position:absolute; inset:0;
  z-index:2;
  display:flex; align-items:center; justify-content:center;
  opacity:0;
  transition: opacity var(--dur-fast) var(--ease-soft);
}
.pf-card:hover .pf-play, .pf-card:focus-within .pf-play{ opacity:1; }
.pf-play span{
  width: 56px; height:56px;
  border-radius:50%;
  border: 1px solid rgba(243,239,231,0.55);
  background: rgba(11,10,12,0.35);
  display:flex; align-items:center; justify-content:center;
}
.pf-play svg{ width:18px; height:18px; fill: var(--ink); margin-left:2px; }

.pf-body{
  position:absolute; left:0; right:0; bottom:0;
  z-index:2;
  padding: var(--space-md);
}
.pf-cat{
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber);
}
.pf-title{
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight:600;
  margin-top: 0.35em;
}
.pf-desc{
  color: var(--ink-dim);
  font-size: 0.78rem;
  margin-top: 0.4em;
  max-height:0;
  opacity:0;
  overflow:hidden;
  transition: max-height var(--dur-fast) var(--ease-soft), opacity var(--dur-fast) var(--ease-soft);
}
.pf-card:hover .pf-desc{ max-height: 4em; opacity:1; }
.pf-meta{
  display:flex; gap: 0.9em;
  margin-top: 0.5em;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--muted);
}

@media (max-width: 980px){ .pf-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ .pf-grid{ grid-template-columns: 1fr; } .pf-thumb{ aspect-ratio: 4/3.4; } }

/* ---------- EMPTY STATE ---------- */
.pf-empty{
  display:none;
  text-align:center;
  padding-block: var(--space-2xl);
  color: var(--ink-dim);
}
.pf-empty.is-visible{ display:block; }
.pf-empty p:first-child{
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--ink);
}
.pf-empty p:last-child{
  margin-top: 0.6em;
  color: var(--muted);
  font-size: 0.85rem;
}

/* ---------- LOAD MORE ---------- */
.pf-load-more{
  text-align:center;
  margin-top: var(--space-xl);
}
.pf-load-more.is-hidden{ display:none; }

/* ---------- LIGHTBOX ---------- */
.lightbox{
  position: fixed;
  inset: 0;
  z-index: 500;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: clamp(1rem, 4vw, 4rem);
  background: rgba(6,5,6,0.92);
  backdrop-filter: blur(6px);
  opacity:0;
  visibility:hidden;
  transition: opacity var(--dur-fast) var(--ease-soft), visibility var(--dur-fast);
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox-inner{
  width:100%;
  max-width: 1100px;
  transform: translateY(16px) scale(0.98);
  transition: transform var(--dur-med) var(--ease);
}
.lightbox.is-open .lightbox-inner{ transform: translateY(0) scale(1); }
.lightbox-frame{
  position:relative;
  width:100%;
  aspect-ratio: 16/9;
  background:#000;
  border: 1px solid var(--line-strong);
}
.lightbox-frame video,
.lightbox-frame iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
}
.lightbox-meta{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: var(--space-md);
  margin-top: var(--space-md);
}
.lightbox-meta h3{
  font-size: var(--step-1);
  color: var(--ink);
}
.lightbox-meta .cat{
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 0.4em;
  display:block;
}
.lightbox-close{
  width: 44px; height:44px;
  flex-shrink:0;
  border-radius:50%;
  border: 1px solid var(--line-strong);
  background: rgba(255,255,255,0.03);
  display:flex; align-items:center; justify-content:center;
  transition: border-color var(--dur-fast) var(--ease-soft), background var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-soft);
}
.lightbox-close:hover{ border-color: var(--amber); background: var(--glow-amber); transform: rotate(90deg); }
.lightbox-close svg{ width:18px; height:18px; stroke: var(--ink); }

body.lightbox-open{ overflow:hidden; }

@media (max-width: 620px){
  .lightbox{ padding: 0.6rem; }
  .lightbox-meta{ flex-direction:column; }
}

/* ---------- placeholder art gradients (swap for real stills/thumbnails later) ---------- */
.ph-1{ background: linear-gradient(135deg, #1c1116 0%, #3a2110 45%, #E8A33D 150%); }
.ph-2{ background: linear-gradient(135deg, #0e1a1a 0%, #123f3c 50%, #2FA8A0 150%); }
.ph-3{ background: linear-gradient(150deg, #15121a 0%, #2a1c3a 50%, #6a4fd9 150%); }
.ph-4{ background: linear-gradient(140deg, #1a1310 0%, #4a2c14 50%, #E8A33D 150%); }
.ph-5{ background: linear-gradient(160deg, #0f1616 0%, #163634 55%, #2FA8A0 150%); }
.ph-6{ background: linear-gradient(130deg, #17111a 0%, #35203f 55%, #9b6fe8 150%); }
.ph-7{ background: linear-gradient(145deg, #16130f 0%, #3d2c12 50%, #E8A33D 150%); }
.ph-8{ background: linear-gradient(155deg, #0f1414 0%, #1a3a37 50%, #2FA8A0 150%); }
.ph-9{ background: linear-gradient(125deg, #14101a 0%, #2e1e42 55%, #6a4fd9 150%); }
.ph-10{ background: linear-gradient(150deg, #1a1512 0%, #452a15 50%, #E8A33D 150%); }
.ph-11{ background: linear-gradient(160deg, #0e1616 0%, #143a35 55%, #2FA8A0 150%); }
.ph-12{ background: linear-gradient(140deg, #17111c 0%, #331f44 55%, #6a4fd9 150%); }
.ph-featured{ background:
  radial-gradient(ellipse 60% 90% at 20% 20%, rgba(232,163,61,0.4), transparent 60%),
  radial-gradient(ellipse 60% 90% at 85% 80%, rgba(47,168,160,0.3), transparent 60%),
  #17131a; }