/* ============================================
   周斌 · 作品集 — PORTFOLIO
   ============================================ */
.filter-bar{display:flex;gap:.6rem;margin-bottom:2.5rem;flex-wrap:wrap;justify-content:center}
.filter-track{
  position:relative;display:inline-flex;gap:.35rem;padding:.4rem;
  border-radius:28px;
  background:var(--filter-btn-bg);backdrop-filter:blur(16px) saturate(1.5);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);
  border:1px solid var(--filter-btn-border);
  box-shadow:0 2px 12px rgba(0,0,0,.02),inset 0 1px 0 rgba(255,255,255,.3);
  overflow:hidden
}
.filter-highlight{
  position:absolute;top:.4rem;bottom:.4rem;border-radius:22px;
  background:linear-gradient(135deg,#ff6a00,#ff8c38);
  box-shadow:
    0 4px 18px rgba(255,106,0,.28),
    0 0 0 1px rgba(255,255,255,.15) inset,
    0 1px 0 rgba(255,255,255,.3) inset;
  transition:left .5s cubic-bezier(.34,1.56,.64,1),width .5s cubic-bezier(.34,1.56,.64,1);
  pointer-events:none;z-index:1
}
.filter-btn{
  padding:.5rem 1.4rem;border-radius:22px;font-size:.85rem;font-weight:500;
  cursor:pointer;font-family:inherit;letter-spacing:.3px;
  border:none;background:transparent;color:var(--text-muted);
  position:relative;z-index:2;transition:color .35s ease,transform .3s ease;
  white-space:nowrap
}
.filter-btn:hover{color:var(--text);transform:translateY(-1px)}
.filter-btn.active{color:#fff}

/* 纯JS masonry布局 — position:absolute 由 JS 控制 */
.masonry-wrap{position:relative;overflow:hidden;transition:height .6s ease .2s}
.masonry-grid{position:relative;margin:0 auto}
.masonry-fade{
  position:absolute;left:0;right:0;bottom:0;z-index:2;pointer-events:none;display:block;
  height:300px;
  background:var(--fade-bg);
  transition:opacity .5s ease
}
.masonry-fade.hidden-fade{opacity:0;pointer-events:none}

.portfolio-item{
  border-radius:16px;
  position:absolute;cursor:pointer;
  background:var(--card-bg);backdrop-filter:blur(12px) saturate(1.2);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);
  border:1px solid var(--border);
  transform-style:preserve-3d;perspective:1000px;
  will-change:transform;
  transition:transform .5s cubic-bezier(.23,1,.32,1),border-color .4s ease,box-shadow .4s ease,opacity .35s ease
}
.portfolio-item:hover{border-color:rgba(var(--accent-rgb),.25);box-shadow:0 12px 40px rgba(0,0,0,.08),0 0 30px var(--portfolio-accent-shadow)}
.portfolio-item{opacity:0;animation:fi .45s ease forwards}
@keyframes fi{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}

.portfolio-media{position:relative;width:100%;overflow:hidden;line-height:0;border-radius:16px}
.portfolio-media img{width:100%;display:block;transition:opacity .3s ease}
.portfolio-media video{width:100%;display:block;background:#080c1a;object-fit:contain;position:absolute;top:0;left:0;opacity:0;pointer-events:none;transition:opacity .3s ease}
.portfolio-item.hover-video .portfolio-media img{opacity:0}
.portfolio-item.hover-video .portfolio-media video{opacity:1}

.portfolio-info{padding:.9rem 1.1rem 1rem;position:relative}
.portfolio-info h4{font-size:.92rem;font-weight:600;color:var(--text);margin-bottom:.5rem;line-height:1.3;padding-right:60px;transition:color .3s ease}
.portfolio-info .badge{display:inline-block;margin-right:.25rem;margin-bottom:.2rem}
.portfolio-meta{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.portfolio-meta .year{font-size:.75rem;color:var(--text-light);font-weight:500}
.portfolio-meta .brand{font-size:.75rem;color:var(--text-light)}
.portfolio-meta .badge{
  display:inline-block;padding:.1rem .5rem;border-radius:4px;
  font-size:.68rem;font-weight:600;letter-spacing:.2px
}
.badge-tvc{background:var(--badge-tvc-bg);color:var(--badge-tvc-text);border:1px solid var(--badge-tvc-border);box-shadow:0 0 10px var(--badge-tvc-shadow),0 0 20px rgba(var(--accent-rgb),.05);text-shadow:0 0 8px rgba(var(--accent-rgb),.3)}
.badge-brand{background:var(--badge-ai-bg);color:var(--badge-ai-text);border:1px solid var(--badge-ai-border);box-shadow:0 0 10px var(--badge-ai-shadow),0 0 20px rgba(0,212,255,.05);text-shadow:0 0 8px rgba(0,212,255,.3)}
body.dark-mode .badge-brand{background:rgba(0,212,255,.15);border-color:rgba(0,212,255,.25);box-shadow:0 0 12px rgba(0,212,255,.25),0 0 24px rgba(0,212,255,.08)}
.badge-ai{background:rgba(255,186,94,.1);color:#ffba5e;border:1px solid rgba(255,186,94,.18);box-shadow:0 0 10px rgba(255,186,94,.2),0 0 20px rgba(255,186,94,.06);text-shadow:0 0 8px rgba(255,186,94,.3)}
body.dark-mode .badge-ai{background:rgba(255,186,94,.15);border-color:rgba(255,186,94,.25);box-shadow:0 0 12px rgba(255,186,94,.25),0 0 24px rgba(255,186,94,.08)}
.badge-短视频{background:var(--badge-short-bg);color:var(--badge-short-text);border:1px solid var(--badge-short-border);box-shadow:0 0 10px var(--badge-short-shadow),0 0 20px rgba(64,230,136,.05);text-shadow:0 0 8px rgba(64,230,136,.3)}
.badge-product{background:var(--badge-product-bg);color:var(--badge-product-text);border:1px solid var(--badge-product-border);box-shadow:0 0 10px var(--badge-product-shadow),0 0 20px rgba(130,100,255,.05);text-shadow:0 0 8px rgba(130,100,255,.3)}
.badge-play{background:var(--badge-play-bg);color:var(--badge-play-text);border:1px solid var(--badge-play-border);box-shadow:0 0 10px var(--badge-play-shadow),0 0 20px rgba(255,70,120,.05);text-shadow:0 0 8px rgba(255,70,120,.3)}
.badge-event{background:rgba(130,200,255,.1);color:#5ab8ff;border:1px solid rgba(130,200,255,.18);box-shadow:0 0 10px rgba(130,200,255,.2),0 0 20px rgba(130,200,255,.06);text-shadow:0 0 8px rgba(130,200,255,.3)}
body.dark-mode .badge-event{background:rgba(130,200,255,.15);border-color:rgba(130,200,255,.25);box-shadow:0 0 12px rgba(130,200,255,.25),0 0 24px rgba(130,200,255,.08)}
.badge-mg{background:rgba(200,130,255,.1);color:#c87aff;border:1px solid rgba(200,130,255,.18);box-shadow:0 0 10px rgba(200,130,255,.2),0 0 20px rgba(200,130,255,.06);text-shadow:0 0 8px rgba(200,130,255,.3)}
body.dark-mode .badge-mg{background:rgba(200,130,255,.15);border-color:rgba(200,130,255,.25);box-shadow:0 0 12px rgba(200,130,255,.25),0 0 24px rgba(200,130,255,.08)}
body.dark-mode .filter-track{box-shadow:0 2px 12px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.06)}

/* Portfolio hint — 操作提示 */
.portfolio-hint{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem 1rem;border-radius:20px;font-size:.82rem;font-weight:500;color:var(--text-light);position:relative;background:rgba(0,230,118,.08);backdrop-filter:blur(12px) saturate(1.2);-webkit-backdrop-filter:blur(12px) saturate(1.2);border:1px solid rgba(0,230,118,.12)}
.portfolio-hint i{color:#00e676;font-size:.85rem}