/* ========== PROJECTS ========== */
.filter-bar{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.6rem}
.filter-btn{padding:.45rem .9rem;min-height:36px;border-radius:999px;border:1px solid var(--line);
  background:transparent;color:var(--ink-2);cursor:pointer;font-size:.8rem;font-weight:500;
  transition:all .35s var(--ease-out);-webkit-tap-highlight-color:transparent}
.filter-btn:hover{color:var(--ink);border-color:var(--line-strong)}
.filter-btn.is-active{background:linear-gradient(135deg,var(--violet),var(--blue));color:#fff;border-color:transparent;
  box-shadow:0 10px 24px -10px var(--glow)}
.projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}
@media (max-width:440px){ .projects-grid{grid-template-columns:1fr} }
.project-card{position:relative;overflow:hidden;border-radius:var(--r-md);cursor:pointer;
  border:1px solid var(--line);aspect-ratio:4/3;
  transition:transform .6s var(--ease-spring),box-shadow .4s,border-color .3s,opacity .6s var(--ease-out),filter .6s var(--ease-out);
  opacity:0;transform:translateY(24px) scale(.98);filter:blur(6px);-webkit-tap-highlight-color:transparent;
  background:rgba(255,255,255,.02);isolation:isolate}
.project-card.in{opacity:1;transform:none;filter:none}
@media (hover:hover){
  .project-card:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(0,0,0,.7);border-color:var(--line-strong)}
}
.project-card.is-empty{cursor:not-allowed}
.project-card.is-empty:hover{transform:none;box-shadow:none;border-color:var(--line)}
.project-media{position:absolute;inset:0;overflow:hidden;background:#0a0a12}
.project-media img,
.project-media video{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s var(--ease-out),filter .5s;filter:saturate(.85)}
@media (hover:hover){
  .project-card:hover .project-media img,
  .project-card:hover .project-media video{transform:scale(1.06);filter:saturate(1.1)}
}
.project-skeleton{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(255,255,255,.03) 0%,rgba(255,255,255,.10) 50%,rgba(255,255,255,.03) 100%);
  background-size:200% 100%;animation:skelShimmer 1.6s ease-in-out infinite}
@keyframes skelShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.project-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.6rem;color:var(--ink-3);font-size:.82rem;text-align:center;padding:1rem;
  background:linear-gradient(150deg,rgba(255,255,255,.02),rgba(255,255,255,.05))}
.project-empty .ico{width:32px;height:32px;opacity:.4}
.project-audio-thumb{position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(139,108,255,.4),rgba(74,168,255,.25));
  display:grid;place-items:center}
.project-audio-thumb .ico{width:48px;height:48px;color:rgba(255,255,255,.9);
  animation:audioPulse 2s ease-in-out infinite}
@keyframes audioPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
.project-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:1rem;background:linear-gradient(to top,rgba(6,6,12,.92),rgba(6,6,12,.3) 55%,transparent);
  pointer-events:none;z-index:2}
.project-tag{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.72);margin-bottom:.35rem}
.project-title{color:#fff;font-family:var(--font-display);font-weight:600;font-size:1rem;line-height:1.25}
.project-card .open-indicator{position:absolute;top:.8rem;right:.8rem;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.28);display:grid;place-items:center;
  color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;transform:scale(.7) rotate(-20deg);transition:opacity .4s,transform .5s var(--ease-spring);
  z-index:3;pointer-events:none}
html[dir="rtl"] .project-card .open-indicator{right:auto;left:.8rem}
.project-card:hover .open-indicator,.project-card:focus-visible .open-indicator{opacity:1;transform:none}
@media (max-width:720px){ .project-card .open-indicator{opacity:1;transform:none} }
.project-card .open-indicator svg{width:15px;height:15px}

/* ========== MODAL ========== */
.modal{position:fixed;inset:0;z-index:400;display:none;align-items:center;justify-content:center;
  padding:max(.75rem,env(safe-area-inset-top)) .75rem max(.75rem,env(safe-area-inset-bottom));
  background:rgba(0,0,0,.72);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.modal.is-open{display:flex;animation:modalIn .35s var(--ease-out)}
@keyframes modalIn{from{opacity:0}to{opacity:1}}
.modal-inner{width:min(900px,100%);max-height:90vh;overflow:auto;border-radius:var(--r-lg);position:relative;
  animation:modalPop .55s var(--ease-spring);background:var(--bg-2)}
@keyframes modalPop{from{transform:scale(.92) translateY(20px);opacity:0}to{transform:none;opacity:1}}
.modal-img{width:100%;aspect-ratio:16/9;object-fit:contain;border-radius:var(--r-lg) var(--r-lg) 0 0;background:#000}
.modal-video{width:100%;aspect-ratio:16/9;object-fit:contain;border-radius:var(--r-lg) var(--r-lg) 0 0;background:#000;display:block}
.modal-audio{padding:4rem 2rem;display:flex;flex-direction:column;align-items:center;gap:1.5rem;
  background:linear-gradient(135deg,rgba(139,108,255,.15),rgba(74,168,255,.10));
  border-radius:var(--r-lg) var(--r-lg) 0 0}
.modal-audio .ico{width:64px;height:64px;color:var(--accent);animation:audioPulse 2s ease-in-out infinite}
.modal-audio audio{width:100%;max-width:500px}
.modal-empty{padding:5rem 2rem;text-align:center;color:var(--ink-3);
  background:linear-gradient(135deg,rgba(255,255,255,.03),rgba(255,255,255,.06));
  border-radius:var(--r-lg) var(--r-lg) 0 0}
.modal-empty .ico{width:48px;height:48px;margin:0 auto 1rem;opacity:.4}
.modal-body{padding:1.3rem 1.4rem 1.6rem}
.modal-body h2{font-size:clamp(1.3rem,2.5vw,2rem);margin-bottom:.5rem}
.modal-body .project-tag{color:var(--ink-3);margin-bottom:.2rem}
.modal-close{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:50%;
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.28);color:#fff;display:grid;place-items:center;
  cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:transform .4s var(--ease-spring),background .3s;-webkit-tap-highlight-color:transparent;z-index:10}
html[dir="rtl"] .modal-close{right:auto;left:12px}
.modal-close:hover{transform:rotate(90deg);background:rgba(0,0,0,.75)}
.modal-close svg{width:18px;height:18px}


/* /portfolio · filters, grid and modal on mobile */
.filter-bar{gap:.35rem}
.filter-btn{-webkit-tap-highlight-color:transparent}
@media (max-width:560px){
  .filter-bar{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.35rem;scrollbar-width:none;-ms-overflow-style:none}
  .filter-bar::-webkit-scrollbar{display:none}
  .filter-btn{flex:none;min-height:40px;padding:.5rem .85rem}
  .projects-grid{gap:.75rem}
  .project-card{aspect-ratio:4/3}
  .project-overlay{padding:.8rem}
  .project-title{font-size:.9rem}
}
.modal-inner{max-height:calc(100svh - 1.5rem)}
@media (max-width:560px){
  .modal{padding:max(.6rem,env(safe-area-inset-top)) .6rem max(.6rem,env(safe-area-inset-bottom))}
  .modal-body{padding:1rem 1.1rem 1.3rem}
  .modal-audio{padding:2.5rem 1rem}
  .modal-close{width:42px;height:42px;top:10px;right:10px}
}
.project-card[hidden]{display:none !important}
.filter-btn[aria-pressed="true"]{box-shadow:0 10px 24px -10px var(--glow)}