/* ==========================================================
   works-v3.css — 3D 作品画廊（works.html 专属，依赖 site-v3.css 的令牌与外壳）
   版式：顶部分类 / 左侧作品信息 / 右侧 3D 卡片堆 / 底部全部作品胶片条
   ========================================================== */

html, body { height: 100%; }
body.works-page { overflow: hidden; }
.works-page :where(a) { color: inherit; text-decoration: none; }
.works-page :where(button) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.wk {
    --top: 92px;
    --reel-h: 118px;
    position: fixed; inset: 0;
    display: grid;
    grid-template-columns: minmax(300px, 0.8fr) 1.6fr;
    grid-template-rows: auto 1fr auto;
    padding: var(--top) var(--gutter) 28px;
    max-width: 1600px;
    margin: 0 auto;
}

/* ---------- 分类：与首页档案的筛选按钮一致 ---------- */
.wk__filters {
    grid-column: 1 / -1;
    display: flex; flex-wrap: wrap; gap: 8px;
    padding-top: 10px;
    position: relative; z-index: 20;
}
.wk__filters button {
    display: inline-flex; align-items: baseline; gap: 6px;
    padding: 8px 15px;
    border: 1px solid var(--line);
    border-radius: 99px;
    font-size: 0.82rem;
    color: var(--mute);
    white-space: nowrap;
    transition: border-color 0.3s, color 0.3s, background 0.3s;
}
.wk__filters button sup { font-family: var(--f-mono); font-size: 0.6rem; color: var(--faint); }
.wk__filters button:hover { border-color: var(--line-2); color: var(--paper); }
.wk__filters button.is-on { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.wk__filters button.is-on sup { color: rgba(11, 11, 12, 0.5); }

/* ---------- 左侧信息 ---------- */
.wk__info {
    grid-column: 1; grid-row: 2;
    align-self: center;
    position: relative; z-index: 10;
    max-width: 440px;
    padding-right: 24px;
}
.wk__index {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 22px;
    font-family: var(--f-mono);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    color: var(--faint);
}
.wk__title {
    font-size: clamp(2.2rem, 3.8vw, 3.6rem);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.03em;
    margin-bottom: 18px;
}
.wk__meta {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 22px;
    font-family: var(--f-mono);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--signal);
}
.wk__meta i { width: 28px; height: 1px; background: var(--line-2); }
.wk__meta span:last-child { color: var(--mute); }
.wk__desc { color: var(--mute); font-size: 0.94rem; line-height: 1.85; margin-bottom: 32px; }

/* 文字切换入场 */
.wk__info.is-in :is(.wk__index, .wk__title, .wk__meta, .wk__desc) { animation: wkIn 0.6s var(--ease) both; }
.wk__info.is-in .wk__title { animation-delay: 0.04s; }
.wk__info.is-in .wk__meta { animation-delay: 0.08s; }
.wk__info.is-in .wk__desc { animation-delay: 0.12s; }
@keyframes wkIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.wk__actions { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.wk__cta {
    display: inline-flex; align-items: center; gap: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--line-2);
    font-family: var(--f-mono);
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transition: color 0.3s, border-color 0.3s;
}
.wk__cta span { transition: transform 0.4s var(--ease); }
.wk__cta:hover { color: var(--signal); border-color: var(--signal); }
.wk__cta:hover span { transform: translateX(6px); }
.wk__arrows { display: flex; gap: 6px; }
.wk__arrows button {
    width: 40px; height: 40px;
    border: 1px solid var(--line);
    border-radius: 2px;
    font-family: var(--f-mono);
    font-size: 0.9rem;
    color: var(--mute);
    transition: border-color 0.3s, color 0.3s;
}
.wk__arrows button:hover:not(:disabled) { border-color: var(--paper); color: var(--paper); }
.wk__arrows button:disabled { opacity: 0.25; cursor: default; }

/* ---------- 3D 卡片堆 ---------- */
.wk__stage {
    grid-column: 2; grid-row: 2;
    position: relative;
    perspective: 1600px;
    --cw: min(46vw, 760px, calc((100vh - 360px) * 1.63));
    --ch: calc(var(--cw) * 0.613);
}
.wk__card {
    position: absolute;
    left: 6%; top: 50%;
    width: var(--cw); height: var(--ch);
    margin-top: calc(var(--ch) / -2);
    background: var(--ink-2) var(--img) center / cover no-repeat;
    border: 1px solid var(--line);
    border-radius: 2px;
    filter: brightness(0.32) grayscale(0.7);
    transform-origin: left center;
    transition: transform 0.9s var(--ease), opacity 0.7s var(--ease), filter 0.7s var(--ease), border-color 0.5s;
    will-change: transform, opacity;
    cursor: pointer;
}
.wk__card.is-active { filter: none; border-color: var(--line-2); }
.wk__card.is-active:hover { border-color: var(--paper); }

/* 取景框四角：只在当前卡片显示 */
.wk__corner, .wk__corner::before, .wk__corner::after,
.wk__card::before, .wk__card::after { pointer-events: none; }
.wk__card::before, .wk__card::after, .wk__corner::before, .wk__corner::after {
    content: '';
    position: absolute;
    width: 18px; height: 18px;
    border: 0 solid var(--paper);
    opacity: 0;
    transition: opacity 0.5s, inset 0.6s var(--ease);
}
.wk__card::before { top: -10px; left: -10px; border-top-width: 1px; border-left-width: 1px; }
.wk__card::after { top: -10px; right: -10px; border-top-width: 1px; border-right-width: 1px; }
.wk__corner::before { bottom: -10px; left: -10px; border-bottom-width: 1px; border-left-width: 1px; }
.wk__corner::after { bottom: -10px; right: -10px; border-bottom-width: 1px; border-right-width: 1px; }
.wk__card.is-active::before, .wk__card.is-active::after,
.wk__card.is-active .wk__corner::before, .wk__card.is-active .wk__corner::after { opacity: 0.7; }

.wk__badge {
    position: absolute; top: 16px; left: 16px;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 10px;
    background: rgba(11, 11, 12, 0.72);
    border: 1px solid var(--line-2);
    font-family: var(--f-mono);
    font-size: 0.6rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--paper);
}
.wk__badge .kf { width: 6px; height: 6px; }

/* ---------- 底部胶片条：全部作品 ---------- */
.wk__reel {
    grid-column: 1 / -1; grid-row: 3;
    position: relative; z-index: 20;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}
.wk__reel-head { display: flex; justify-content: space-between; margin-bottom: 12px; }
.wk__reel-head b { color: var(--paper); font-weight: 400; }
#wk-reel-cat { color: var(--mute); transition: color 0.3s; }
.is-filtered #wk-reel-cat { color: var(--signal); }

.wk__reel-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(56px, 1fr);
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-top: 8px;           /* 留给当前帧上浮 */
}
.wk__reel-track::-webkit-scrollbar { display: none; }
.wk__frame {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--ink-2) var(--img) center / cover no-repeat;
    border: 1px solid var(--line);
    border-radius: 2px;
    filter: grayscale(0.5) brightness(0.7);
    transition: filter 0.4s, opacity 0.4s, transform 0.4s var(--ease), border-color 0.3s;
}
.wk__frame span {
    position: absolute; left: 5px; bottom: 3px;
    font-family: var(--f-mono);
    font-size: 0.55rem;
    letter-spacing: 0.06em;
    color: var(--paper);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
    opacity: 0.7;
}
.wk__frame:hover { filter: none; border-color: var(--line-2); }
/* 不在当前分类：变暗、去色，仍可点击（点了会切回「全部」） */
.wk__frame.is-off { opacity: 0.18; filter: grayscale(1) brightness(0.6); }
.wk__frame.is-off:hover { opacity: 0.5; }
.wk__frame.is-on { filter: none; opacity: 1; border-color: var(--paper); transform: translateY(-6px); }

.wk__reel-line { position: relative; height: 1px; margin-top: 12px; background: var(--line); }
.wk__reel-line i {
    position: absolute; left: 0; top: -4px;
    width: 9px; height: 9px;
    margin-left: -4.5px;
    transform: translateX(0);
    transition: transform 0.6s var(--ease);
}
.wk__reel-line i::after { content: ''; position: absolute; inset: 0; transform: rotate(45deg); background: var(--signal); }

/* ---------- 手机 ---------- */
@media (max-width: 760px) {
    .wk {
        --top: 72px;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr auto;
        padding: var(--top) 20px 18px;
    }
    .wk__filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        margin: 0 -20px;
        padding: 6px 20px 0;
    }
    .wk__filters::-webkit-scrollbar { display: none; }
    .wk__filters button { padding: 6px 12px; font-size: 0.76rem; }

    .wk__info { grid-row: 2; align-self: start; padding: 22px 0 0; max-width: none; }
    .wk__index { margin-bottom: 10px; }
    .wk__title { font-size: 1.9rem; margin-bottom: 10px; }
    .wk__meta { margin-bottom: 10px; }
    .wk__desc {
        font-size: 0.86rem; line-height: 1.7; margin-bottom: 14px;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .wk__arrows { display: none; }

    .wk__stage {
        grid-column: 1; grid-row: 3;
        --cw: min(76vw, 320px, calc((100svh - 470px) * 0.78));
        --ch: calc(var(--cw) * 1.28);
    }
    .wk__card { left: 0; }

    /* 胶片条在手机上变成一排细刻度 */
    .wk__reel { grid-row: 4; padding-top: 12px; }
    .wk__reel-head { margin-bottom: 8px; }
    .wk__reel-track { grid-auto-columns: 1fr; gap: 3px; padding-top: 0; overflow: visible; }
    .wk__frame { aspect-ratio: auto; height: 16px; background-image: none; background-color: var(--faint); border: 0; filter: none; }
    .wk__frame span { display: none; }
    .wk__frame.is-off { opacity: 1; background-color: var(--line); filter: none; }
    .wk__frame.is-on { background-color: var(--signal); transform: none; }
    .wk__reel-line { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .wk__card, .wk__frame, .wk__reel-line i { transition: none; }
    .wk__info.is-in * { animation: none; }
}