/* Trang chủ — phần "Xe đã lên mâm" (chỉ index.html tải file này).
   Không JS / giảm chuyển động: mỗi xe là một cặp ảnh đứng yên, tên xe khớp ở đường giữa.
   Có JS (.is-pinned): một sân khấu ghim; cột trái cuộn lên, cột phải cuộn xuống. */
.work{ --work-title: clamp(44px, 7.5vw, 120px); padding-bottom:0; }
.work .section-head{ margin-bottom:32px; }
.work .project{ position:relative; height:100svh; overflow:hidden; }
.work .pane{ position:absolute; top:0; bottom:0; width:50%; overflow:hidden; }
.work .pane-l{ left:0; }
.work .pane-r{ right:0; }
.work .pane picture,.work .pane img{ width:100%; height:100%; }
.work .pane img{ object-fit:cover; filter:brightness(.7); }
.work .seam{ position:absolute; z-index:2; left:0; right:0; top:42%; transform:translateY(-50%); display:grid; margin:0; font-family:var(--font-display); font-weight:900; font-size:var(--work-title); line-height:.84; letter-spacing:-.04em; color:var(--text); text-align:center; text-wrap:balance; pointer-events:none; }
.work .seam .half{ grid-area:1 / 1; padding:0 24px; }
.work .half-l{ clip-path:inset(0 50% 0 0); }
.work .half-r{ clip-path:inset(0 0 0 50%); }
.work .project-meta{ position:absolute; z-index:2; left:50%; top:calc(42% + var(--work-title) * .9); transform:translateX(-50%); width:max-content; max-width:calc(100% - 48px); text-align:center; background:var(--bg); padding:10px 18px 6px; font-size:16px; line-height:1.6; }
.work .project-meta a{ display:inline-flex; align-items:center; min-height:44px; font-weight:600; color:var(--text); }
.work .project-meta a:hover{ color:var(--accent); }
.work.is-pinned .work-track{ height:calc(var(--n, 4) * 100svh); }
.work.is-pinned .work-stage{ position:sticky; top:var(--hh, 0px); height:calc(100svh - var(--hh, 0px)); overflow:hidden; }
.work.is-pinned .project{ position:absolute; inset:0; height:auto; overflow:visible; pointer-events:none; }
.work.is-pinned .pane{ will-change:transform; }
.work.is-pinned .project-meta{ opacity:0; visibility:hidden; transition:opacity .3s, visibility 0s .3s; }
.work.is-pinned .project.active{ pointer-events:auto; }
.work.is-pinned .project.active .project-meta{ opacity:1; visibility:visible; transition:opacity .3s; }
.work .work-all{ display:none; }
@media (max-width:700px){
  .work .seam .half{ padding:0 16px; }
  .work .project-meta{ top:calc(42% + var(--work-title) * 1.8); max-width:calc(100% - 32px); }
}
@media (prefers-reduced-motion:reduce){
  .work .pane,.work .seam .half{ transform:none !important; }
}