/* HaoChen Portfolio — 深色、以 Reel 為主的版面（設計稿 A 版）
   想換強調色，只要改 --accent 一個值。 */
:root {
  --bg: #000;
  --surface: #18181A;
  --fg: #EEECE7;
  --muted: #A3A19B;
  --line: #2A2A2D;
  --chip: #3A3A3E;
  --accent: #C6FF3D;
  --on-accent: #000;

  --display: 'Syne', 'Noto Sans TC', system-ui, sans-serif;
  --body: 'Noto Sans TC', system-ui, -apple-system, 'PingFang TC', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  --wrap: 1320px;
  --gutter: 24px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; display: block; }
a { color: var(--fg); text-decoration: none; }
a:hover { color: var(--accent); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
h1, h2, h3 { text-wrap: balance; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
.mono { font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; }
.muted { color: var(--muted); }

/* 圖片還沒放之前顯示的斜線底 */
.media {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background-color: var(--surface);
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.035) 0 12px, transparent 12px 24px);
  max-width: 100%;
}
.media > img, .media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media .label { position: absolute; left: 16px; bottom: 12px; font-family: var(--mono); font-size: 12px; color: var(--muted); z-index: 0; }
.ratio-16x9 { aspect-ratio: 16 / 9; }
.ratio-1x1 { aspect-ratio: 1 / 1; }
.ratio-4x5 { aspect-ratio: 4 / 5; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: rgba(13,13,14,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 32px; padding-block: 14px; }
.logo { font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: 0.02em; }
.logo .dot { color: var(--accent); }
.logo .zh { font-family: var(--body); font-weight: 500; font-size: 15px; color: var(--muted); margin-left: 4px; }
.nav { display: flex; flex-wrap: wrap; gap: 0 28px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; }
.nav a { padding-block: 12px; }

/* Hero */
.hero { padding-block: 72px 48px; }
.hero-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; margin-bottom: 40px; }
.hero h1 { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(48px, 8vw, 120px); line-height: 0.95; letter-spacing: -0.02em; }
.hero h1 .slash { color: var(--accent); }
.hero-intro { max-width: 420px; display: flex; flex-direction: column; gap: 16px; }
.hero-intro p { margin: 0; }
.hero-intro .lead { font-size: 18px; }

/* 影片播放區（點了才載入 Vimeo） */
.player { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; border: 0; padding: 0; margin: 0; background: transparent; cursor: pointer; color: inherit; font: inherit; }
.player .play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1;
  display: flex; align-items: center; gap: 14px;
  background: var(--accent); color: var(--on-accent);
  padding: 18px 28px; border-radius: 999px;
  font-family: var(--display); font-weight: 800; font-size: 20px; white-space: nowrap;
  transition: transform .2s ease;
}
.player:hover .play { transform: translate(-50%, -50%) scale(1.05); }
.player .play.round { padding: 0; width: 88px; height: 88px; justify-content: center; }
.player .meta { position: absolute; right: 16px; bottom: 12px; font-family: var(--mono); font-size: 12px; color: var(--muted); z-index: 1; }
.media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 2; }

/* 區塊標題 */
.section { padding-block: 72px; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 36px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.section-head h2 { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(32px, 4vw, 56px); }

/* 作品卡片 */
.work-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); gap: 56px 32px; }
.card { display: flex; flex-direction: column; gap: 16px; }
.card .media { transition: outline-color .2s; outline: 2px solid transparent; }
.card:hover .media, .card:focus-visible .media { outline-color: var(--accent); }
.card video { opacity: 0; transition: opacity .3s; }
/* Vimeo 預覽：16:9 鋪滿卡片（上下裁掉一點），不吃滑鼠，點下去還是進作品頁 */
.card .media > .card-vimeo { position: absolute; z-index: 0; left: 0; top: 50%; width: 100%; height: auto; aspect-ratio: 16 / 9; transform: translateY(-50%); border: 0; pointer-events: none; opacity: 0; transition: opacity .4s; }
.card.is-playing .card-vimeo { opacity: 1; }
.card.is-playing video { opacity: 1; }
.card-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.card h3 { margin: 0; font-family: var(--display); font-weight: 600; font-size: 24px; line-height: 1.2; }
.card .zh { font-size: 15px; color: var(--muted); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--mono); font-size: 12px; }
.tags span { border: 1px solid var(--chip); border-radius: 999px; padding: 4px 12px; }
.tags span.muted { color: var(--muted); }

/* 合作單位 */
.clients { border-block: 1px solid var(--line); }
.clients .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 48px; padding-block: 32px; font-family: var(--display); font-weight: 600; font-size: 20px; color: var(--muted); }
.clients .mono { color: var(--fg); font-size: 12px; }

/* Play */
.play-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 24px; }
.play-grid .card { gap: 10px; }
.play-grid .card h3 { font-size: 18px; }
.play-grid .card p { margin: 0; font-size: 14px; color: var(--muted); }

/* About */
.about { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 48px 64px; }
.about-left { display: flex; flex-direction: column; gap: 24px; }
.about-left h2 { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(32px, 4vw, 56px); }
.about-left .media { max-width: 360px; }
.about-right { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.about-right .name { margin: 0 0 8px; font-family: var(--display); font-weight: 600; font-size: 28px; }
.about-right .bio { margin: 0; font-size: 17px; max-width: 62ch; }
.skills span { padding: 6px 14px; }
.exp h3 { margin: 0 0 8px; font-family: var(--mono); font-weight: 500; font-size: 13px; letter-spacing: 0.08em; color: var(--muted); }
.exp-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding-block: 18px; border-top: 1px solid var(--line); }
.exp-row .years { font-family: var(--mono); font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.exp-row div { display: flex; flex-direction: column; gap: 4px; }
.exp-row strong { font-weight: 700; }
.exp-row .role { font-size: 14px; color: var(--muted); }
.exp-row .projects { font-size: 14px; }
.text-link { align-self: flex-start; font-family: var(--mono); font-size: 13px; border-bottom: 1px solid var(--accent); padding-block: 10px; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); }
.site-footer .wrap { display: flex; flex-direction: column; gap: 40px; padding-block: 96px 48px; }
.site-footer .kicker { margin: 0; }
.site-footer .big-mail { font-family: var(--display); font-weight: 800; font-size: clamp(22px, 5vw, 72px); line-height: 1; overflow-wrap: anywhere; }
.site-footer .big-mail .at { color: var(--accent); }
.footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; font-family: var(--mono); font-size: 13px; }
.footer-row .links { display: flex; flex-wrap: wrap; gap: 0 28px; }
.footer-row a, .footer-row span { padding-block: 12px; }
.site-footer.small .wrap { flex-direction: row; flex-wrap: wrap; justify-content: space-between; padding-block: 32px; gap: 16px; }

/* 案例頁 */
.project-hero { padding-block: 56px 40px; display: flex; flex-direction: column; gap: 28px; }
.back { align-self: flex-start; font-family: var(--mono); font-size: 13px; color: var(--muted); padding-block: 10px; }
.project-hero h1 { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(40px, 7vw, 104px); line-height: 0.95; letter-spacing: -0.02em; }
.project-hero .sub { margin: 8px 0 0; font-size: clamp(18px, 2vw, 24px); color: var(--muted); }
.facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px 32px; border-top: 1px solid var(--line); padding-top: 24px; }
.facts div { display: flex; flex-direction: column; gap: 4px; }
.facts dt { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: var(--muted); }
.facts dd { margin: 0; }
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 40px 64px; }
.two-col > div { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.eyebrow { margin: 0; font-family: var(--mono); font-weight: 500; font-size: 13px; letter-spacing: 0.08em; color: var(--muted); }
.statement { margin: 0; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.5; }
.did { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 17px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 24px; }
.grid-sq { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 16px; }
figure { margin: 0; display: flex; flex-direction: column; gap: 10px; }
figcaption { font-size: 14px; color: var(--muted); }
.credits { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px 32px; font-size: 14px; }
.credits div { display: flex; flex-direction: column; gap: 2px; }
.credits dt { color: var(--muted); }
.credits dd { margin: 0; }
.pager { border-top: 1px solid var(--line); }
.pager .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; padding-block: 48px 64px; }
.pager a { display: flex; flex-direction: column; gap: 6px; padding-block: 8px; }
.pager a.next { align-items: flex-end; text-align: right; margin-left: auto; }
.pager .mono { font-size: 12px; color: var(--muted); }
.pager strong { font-family: var(--display); font-weight: 800; font-size: clamp(24px, 3vw, 40px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ===== 架構更新：作品列表、CREATIVE、About ===== */
.more { font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; border-bottom: 1px solid var(--accent); padding-block: 8px; }
.section-intro { margin: -16px 0 32px; color: var(--muted); max-width: 62ch; }

/* 列表頁標題 */
.page-hero { padding-block: 22px 16px; display: flex; flex-direction: column; gap: 8px; }
.page-hero h1 { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(36px, 5vw, 72px); line-height: 0.95; letter-spacing: -0.02em; }
.page-hero h1 .dot { color: var(--accent); }
.page-hero p { margin: 0; max-width: none; font-size: 16px; color: var(--muted); }

/* 篩選按鈕 */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.filters button {
  font-family: var(--mono); font-size: 13px; color: var(--fg);
  background: transparent; border: 1px solid var(--chip); border-radius: 999px;
  padding: 10px 16px; min-height: 44px; cursor: pointer;
}
.filters button:hover { border-color: var(--fg); }
.filters button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.filters .count { opacity: 0.7; margin-left: 6px; }

/* 作品列表頁：比首頁小一點的卡片 */
.work-grid.dense { grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 48px 24px; }
.work-grid.dense .card h3 { font-size: 20px; }

/* CREATIVE 個人創作：大小格混排的作品牆，標題疊在畫面上 */
.cr-hero .kicker { margin: 0 0 8px; font-size: 12px; letter-spacing: 0.08em; }
.cr-hero, .cr-body { --wrap: 1000px; }
.cr-body { container-type: inline-size; padding-bottom: 96px; }
/* 格子一律正方形：列高跟欄寬一樣，大小只看跨幾欄幾列 */
.cr-grid { --cols: 4; --g: 12px; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-auto-rows: calc((100cqw - (var(--cols) - 1) * var(--g)) / var(--cols)); grid-auto-flow: row dense; gap: var(--g); }
.lab-card { position: relative; display: block; text-align: left; font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; border-radius: 4px; overflow: hidden; }
.lab-card.cr-xl { grid-column-end: span 3; grid-row: span 2; }
.lab-card.cr-big { grid-column-end: span 2; grid-row: span 2; }
.lab-card.cr-wide { grid-column-end: span 2; }
.lab-card.cr-tall { grid-row: span 2; }
.lab-card.cr-l { grid-column-start: 1; }
.lab-card .media { position: absolute; inset: 0; border-radius: 0; outline: 2px solid transparent; outline-offset: -2px; transition: outline-color .2s; }
.lab-card .media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.lab-card:hover .media, .lab-card:focus-visible .media { outline-color: var(--accent); }
.lab-card:hover .media img { transform: scale(1.03); }
.lab-card .media { container-type: size; }
.lab-card .cr-play { --ar: 1; position: absolute; top: 50%; left: 50%; z-index: 1; width: max(100cqw, calc(100cqh * var(--ar))); height: max(100cqh, calc(100cqw / var(--ar))); transform: translate(-50%, -50%); border: 0; object-fit: cover; pointer-events: none; opacity: 0; transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .4s; }
.lab-card .cr-play.is-on { opacity: 1; }
.lab-card:hover .cr-play { transform: translate(-50%, -50%) scale(1.03); }
.lab-card .cap { position: absolute; left: 8px; bottom: 8px; z-index: 2; max-width: calc(100% - 16px); display: flex; align-items: baseline; gap: 10px; padding: 8px 12px; border-radius: 6px; background: var(--glass-bg, var(--bg)); border: 1px solid var(--glass-edge, transparent); -webkit-backdrop-filter: var(--glass-blur, none); backdrop-filter: var(--glass-blur, none); }
.lab-card h3 { margin: 0; font-family: var(--display); font-weight: 600; font-size: 18px; line-height: 1.2; }
.lab-card.cr-big h3, .lab-card.cr-xl h3 { font-size: clamp(20px, 2.2vw, 28px); }
.lab-card:hover h3 { color: var(--accent); }
.lab-meta { font-family: var(--mono); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .cr-hero, .cr-body { --gutter: 32px; }
  .cr-grid { --cols: 2; --g: 10px; }
  .lab-card.cr-xl { grid-column-end: span 2; grid-row: span 1; }
  .lab-card h3 { font-size: 15px; }
  .lab-card .cap { padding: 6px 10px; gap: 8px; }
  .lab-card h3 { white-space: nowrap; }
  .lab-card:not(.cr-big):not(.cr-wide) .lab-meta { display: none; }
}
.lab-card[hidden], .card[hidden], #work-list .card[hidden] { display: none; }

/* CREATIVE 放大檢視 */
.lightbox { width: min(1100px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg); }
.lightbox::backdrop { background: rgba(0,0,0,0.8); }
.lightbox-inner { display: flex; flex-wrap: wrap; gap: 24px; padding: 24px; }
.lightbox .media { flex: 2 1 420px; aspect-ratio: 1 / 1; max-height: 70vh; }
.lightbox .media.is-wide { aspect-ratio: 16 / 9; }
.lightbox .media.is-tall { flex: 0 0 auto; aspect-ratio: 9 / 16; height: 70vh; max-width: 100%; margin: 0 auto; }
.lightbox-text { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.lightbox-text h3 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 28px; line-height: 1.2; }
.lightbox-text p { margin: 0; }
.lightbox-close { align-self: flex-end; min-width: 44px; min-height: 44px; background: transparent; color: var(--fg); border: 1px solid var(--chip); border-radius: 999px; font-family: var(--mono); font-size: 13px; cursor: pointer; padding: 0 16px; }
.lightbox-close:hover { border-color: var(--accent); color: var(--accent); }

/* 首頁 About 簡介 */
.about-teaser { display: flex; flex-wrap: wrap; gap: 32px 64px; align-items: flex-end; }
.about-teaser > .media { flex: 0 1 280px; }
.about-teaser-text { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.about-teaser-text h2 { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(32px, 4vw, 56px); }
.about-teaser-text .name { margin: 0; font-family: var(--display); font-weight: 600; font-size: 24px; }
.about-teaser-text .bio { margin: 0; font-size: 18px; max-width: 56ch; }
.about-teaser-text .more { align-self: flex-start; }

/* About 頁 */
.about-page { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 48px 64px; padding-bottom: 72px; }
.about-page .media { max-width: 420px; }
.block { display: flex; flex-direction: column; gap: 12px; }
.block h2 { margin: 0; font-family: var(--mono); font-weight: 500; font-size: 13px; letter-spacing: 0.08em; color: var(--muted); }
.client-list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 32px; font-family: var(--display); font-weight: 600; font-size: 20px; }

/* 作品影片跳出視窗（js/main.js 3c） */
.film-box { width: min(1280px, 94vw, calc((100vh - 100px) * 16 / 9)); max-width: none; padding: 0; border: 0; background: transparent; color: var(--fg); }
.film-box::backdrop { background: rgba(0, 0, 0, 0.88); }
.film-inner { display: flex; flex-direction: column; gap: 10px; }
.film-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.film-title { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.film-close { min-height: 40px; padding: 0 16px; background: var(--accent); color: var(--on-accent); border: 0; border-radius: 999px; font: inherit; font-weight: 500; cursor: pointer; flex: none; }
.film-media { background: #000; border-radius: 6px; }
.film-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }

/* 玻璃效果：半透明＋背景模糊＋細亮邊。要調整強度改這幾個值。 */
:root {
  --glass-bg: rgba(18, 18, 20, 0.42);
  --glass-blur: blur(18px) saturate(160%);
  --glass-edge: rgba(255, 255, 255, 0.12);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.glass, .site-header, .filters button:not([aria-pressed="true"]) {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-hi);
}
.site-header { background: rgba(0, 0, 0, 0.45); border-bottom-color: var(--glass-edge); }
.filters button:not([aria-pressed="true"]) { border-color: var(--glass-edge); }
.lightbox::backdrop, .film-box::backdrop {
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* ---------- Work 列表：玻璃標題，格狀圖塊 ---------- */
#work-list .card { position: relative; display: block; border-radius: 8px; isolation: isolate; }
#work-list .card .media { border-radius: 8px; outline: 0; aspect-ratio: 2.1 / 1; --mr: 8px; clip-path: inset(0 round var(--mr)); }  /* clip-path：卡片有 3D transform 時，影片／iframe 只靠 overflow 圓角會被吃掉 */
#work-list .card .media img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
#work-list .card:hover .media img { transform: scale(1.04); }
#work-list .card-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; gap: 8px;
  padding: 32px 16px 9px;
}
/* 底部的模糊＋壓暗都放在 .media 裡面：用圖片的模糊複本，不用 backdrop-filter（邊緣才不會漏亮邊，外光也不會把模糊吃掉） */
#work-list .media-blur {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;  /* 跟圖片同一個框，模糊複本才會對齊，不會出現錯位的邊線 */
  background-position: center; background-size: cover;
  filter: blur(3px);
  -webkit-mask-image: linear-gradient(to top, #000 22%, transparent 48%);
  mask-image: linear-gradient(to top, #000 22%, transparent 48%);
}
#work-list .card .media::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, .92), rgba(0, 0, 0, .7) 25%, transparent 50%);
}
#work-list .card:hover .media-blur { transform: scale(1.04); }
#work-list .card.is-playing .media-blur { opacity: 0; }
#work-list .card:hover h3 { color: var(--accent); }
/* 左欄：標題＋中文；右欄：年份＋標籤（標籤在年份下方） */
#work-list .card-cap { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 0; align-items: baseline; }
#work-list .card-title, #work-list .card-title > div { display: contents; }
#work-list .card h3 { grid-column: 1 / -1; grid-row: 1; padding-right: 52px; font-size: 22px; line-height: 1.05; }
#work-list .card .zh { grid-column: 1; grid-row: 2; font-size: 13px; align-self: center; text-wrap: balance; }
#work-list .card-title .mono { grid-column: 2; grid-row: 1; justify-self: end; align-self: end; font-size: 12px; color: rgba(255, 255, 255, .7); }
#work-list .tags { grid-column: 2; grid-row: 2; justify-self: end; align-self: center; flex-wrap: nowrap; font-size: 11px; gap: 6px; }
#work-list .tags span { padding: 2px 10px; border-color: var(--glass-edge); background: rgba(255, 255, 255, .04); }

/* 格狀 */
.work-grid.tiles { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; grid-auto-flow: dense; }
@media (hover: hover) {
  /* 中文副標和標籤先收起來，滑過卡片才往上滑出（標題會跟著被推上去一點） */
  #work-list.tiles .zh, #work-list.tiles .tags { max-height: 0; opacity: 0; overflow: hidden; transform: translateY(8px); transition: max-height .35s cubic-bezier(.2,.7,.2,1), opacity .3s, transform .35s cubic-bezier(.2,.7,.2,1); }
  #work-list.tiles .card:hover .zh, #work-list.tiles .card:focus-visible .zh,
  #work-list.tiles .card:hover .tags, #work-list.tiles .card:focus-visible .tags { max-height: 44px; opacity: 1; transform: none; }
  /* 焦點：滑過一張時，那張沿 Z 軸往前浮起（放大＋陰影）；其他卡片往後退，
     離得越遠越小、越暗（不加模糊）（--depth 0～1 由 main.js 依距離算出） */
  #work-list .card { transition: filter .35s ease, transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s cubic-bezier(.2,.7,.2,1); }
  #work-list .card:hover, #work-list .card:focus-visible { z-index: 3; transform: scale(1.07); box-shadow: 0 32px 64px -16px rgba(0, 0, 0, .95); }
  #work-list:not(.is-stack):has(.card:hover, .card:focus-visible) .card:not(:hover):not(:focus-visible) {
    filter: brightness(max(.1, calc(.76 - var(--depth, .5) * .72))) saturate(calc(.8 - var(--depth, .5) * .5));
    transform: scale(calc(.97 - var(--depth, .5) * .08));
  }
  @media (prefers-reduced-motion: reduce) { #work-list .card, #work-list:has(.card:hover, .card:focus-visible) .card { transform: none; } }
}

/* 篩選：黏在頁首下方的玻璃列 */
/* 堆疊／九宮格切換（main.js 4a 加的），跟篩選列同一套玻璃膠囊 */
.view-toggle { display: flex; gap: 2px; padding: 5px; border-radius: 999px; background: rgba(0, 0, 0, .45); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.view-toggle button { display: grid; place-items: center; width: 36px; height: 32px; border: 0; border-radius: 999px; background: none; color: var(--muted); cursor: pointer; transition: color .2s, background .2s; }
.view-toggle button:hover { color: var(--fg); }
.view-toggle button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.view-toggle svg { width: 16px; height: 16px; fill: currentColor; }
.work-bar { position: sticky; top: calc(var(--hh, 58px) + 10px); z-index: 8; display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 20px; pointer-events: none; }
.work-bar > * { pointer-events: auto; }
.work-bar .filters {
  width: fit-content; max-width: 100%; margin: 0; padding: 6px; gap: 4px;
  border-radius: 999px; border: 0;
  background: rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.work-bar .filters button:not([aria-pressed="true"]) { background: transparent; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.work-bar .filters button:not([aria-pressed="true"]):hover { border-color: var(--glass-edge); }
@media (max-width: 600px) {
  .work-bar .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .work-bar .filters button { flex-shrink: 0; }
    #work-list .card-cap { padding: 24px 12px 7px; }
  #work-list .card h3 { font-size: 20px; }
  #work-list .tags span { padding: 2px 8px; }
}

/* Work 堆疊瀏覽（main.js 4a 加上 .is-stack）：舞台黏在畫面上，卡片疊在 3D 透視裡，transform 由 main.js 每格算。
   卡片只放畫面，名稱、年份、客戶都放在兩側（--cy 是卡片中心：篩選列和底部進度條之間的正中間） */
#work-list.is-stack { display: block; position: relative; }
.has-stack .page-hero { position: relative; z-index: 9; pointer-events: none; }
.has-stack main { overflow-x: clip; }
/* 堆疊會自己算捲動位置，關掉瀏覽器的捲動錨點，免得版面一變就被拉走 */
html:has(body.has-stack) { overflow-anchor: none; }
.stack-stage {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  clip-path: inset(0 -100vw);  /* 只裁上下；左右讓光暈延伸到畫面邊緣（main 用 overflow-x: clip 防橫向捲動） */
  --sw: min(52vw, 80vh, 960px); --cy: calc(50% + var(--hh, 58px) / 2 + 12px);
  --cx: calc(50% + 14vw);  /* 整疊往右，左邊留給資訊欄 */
  perspective: 1600px; perspective-origin: var(--cx) var(--cy);
}
#work-list.is-stack .card {
  position: absolute; left: var(--cx); top: var(--cy); width: var(--sw);
  margin: calc(var(--sw) / -4.2 - var(--cs-extra, 0px) / 2) 0 0 calc(var(--sw) / -2);
  transform-origin: 50% 50%; transition: none; will-change: transform;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .9);
}
#work-list.is-stack .card .media img { transform: none; }
/* 滑過正中間那張：微微浮起、背後光暈亮一點（影片預覽沿用 main.js 第 2 段的 data-loop） */
@media (hover: hover) {
  #work-list.is-stack .card { transition: scale .5s cubic-bezier(.2,.7,.2,1); }
  #work-list.is-stack .card.is-front:hover { scale: 1.03; }
  #work-list[data-card="gloss"] .stack-stage:not(.is-live):has(.card.is-front:hover) .stack-glow.on { opacity: .31; transition-duration: .6s; }
}
#work-list.is-stack .card-cap, #work-list.is-stack .card .media::after, #work-list.is-stack .card .media-blur { display: none; }
/* 九宮格 → 卷軸：卡片還在格子裡時，標題、底部漸層和模糊先快速淡出往下滑，再開始飛（main.js 加 cap-hide）；切回九宮格時，卡片落定才淡回來 */
#work-list .card-cap, #work-list .card .media::after { transition: opacity .22s ease, translate .22s ease; }
#work-list .media-blur { transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .22s ease; }
#work-list.cap-hide .card-cap { opacity: 0; translate: 0 12px; }
#work-list.cap-hide .card .media::after, #work-list.cap-hide .media-blur { opacity: 0; }
/* 切回九宮格：標題一張接一張浮出來（main.js 依畫面上的順序給每張卡 --cap-d） */
#work-list.cap-in .card-cap { transition: opacity .5s ease-out var(--cap-d, 0s), translate .6s cubic-bezier(.2,.7,.2,1) var(--cap-d, 0s); }
#work-list.cap-in .card .media::after, #work-list.cap-in .media-blur { transition: opacity .5s ease-out var(--cap-d, 0s); }
/* 轉場的 1.1 秒裡光暈先不流動：它是 120px 模糊，每格重算會跟卡片動畫搶效能 */
#work-list.morphing .stack-glow { animation-play-state: paused; }
.stack-shade { position: absolute; inset: 0; z-index: 3; border-radius: inherit; background: #000; opacity: 0; pointer-events: none; }
#work-list.is-stack .card:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
#work-list.is-stack .card:not(.is-front) { pointer-events: none; }
.stack-meta { position: absolute; inset: 0; pointer-events: none; z-index: 2000; }
.stack-meta { text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 0 18px rgba(0, 0, 0, .6), 0 0 42px rgba(0, 0, 0, .45); }  /* 光暈再亮，字也讀得到 */
.stack-meta .sm-l {
  position: absolute; left: 0; top: var(--cy); transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 8px;
  width: calc((100% - var(--sw)) / 2 + 14vw - 48px);
}
.stack-meta b { font-family: var(--display); font-weight: 600; font-size: clamp(28px, 3vw, 48px); line-height: 1.02; letter-spacing: -0.01em; text-wrap: balance; }
.stack-meta .sm-cat, .stack-meta .sm-client { font-size: 11px; letter-spacing: .08em; }
.stack-meta .sm-zh { font-size: clamp(17px, 1.5vw, 22px); line-height: 1.4; color: rgba(238, 236, 231, .78); text-wrap: balance; }
.stack-meta .sm-client { margin-top: 4px; }
.stack-meta .sm-role { display: flex; flex-wrap: nowrap; white-space: nowrap; margin-top: 14px; max-width: 480px; text-shadow: none; }
.stack-meta .sm-role:empty { display: none; }
.stack-meta .sm-role span { font: 300 13px/1.6 var(--body); color: rgba(255, 255, 255, .78); white-space: nowrap; }
.stack-meta .sm-role span + span::before { content: "/"; margin: 0 .55em; color: rgba(255, 255, 255, .3); }
/* 小字比大標題的字面看起來偏左，往右推一點對齊 */
.stack-meta .sm-cat { padding-left: 3px; }
.stack-meta .sm-b { position: absolute; left: 0; right: 0; bottom: 22px; display: flex; align-items: center; gap: 16px; font-size: 11px; }
.stack-meta .sm-bar { flex: 1; position: relative; height: 24px; cursor: pointer; pointer-events: auto; touch-action: none; }
.stack-meta .sm-bar::before, .stack-meta .sm-bar i { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; margin-top: -.5px; transition: height .2s, margin-top .2s; }
.stack-meta .sm-bar::before { background: var(--glass-edge); }
.stack-meta .sm-bar i { background: var(--accent); transform-origin: 0 50%; }
.stack-meta .sm-bar:hover::before, .stack-meta .sm-bar:hover i, .stack-meta .sm-bar.is-drag::before, .stack-meta .sm-bar.is-drag i { height: 3px; margin-top: -1.5px; }
.stack-meta .sm-skip { pointer-events: auto; padding: 6px 12px; margin-right: -12px; border: 0; border-radius: 999px; background: none; color: inherit; font-size: 11px; letter-spacing: .08em; cursor: pointer; transition: color .2s, background .2s; }
.stack-meta .sm-skip:hover { color: var(--on-accent); background: var(--accent); }
@media (max-width: 760px) {
  /* 手機：卡片兩側沒位置，資訊放到下方進度條上面，卡片中心往上挪 */
  .stack-stage { --sw: min(88vw, 80vh); --cy: calc(50% + 24px); --cx: 50%; perspective: 900px; }
  .stack-meta .sm-l { top: auto; bottom: 50px; transform: none; gap: 4px; width: 100%; }
  .stack-meta .sm-client { display: none; }
  .stack-meta b { font-size: 26px; }
  .stack-meta .sm-zh { font-size: 16px; }
  .stack-meta::before { content: ""; position: absolute; left: -24px; right: -24px; bottom: 0; height: 170px; background: linear-gradient(to top, #000 62%, transparent); }
}

/* 卡片樣式：預設只有畫面；data-card 換成視窗框、觀景窗或相紙（三種的零件 main.js 都會放，這裡決定顯示哪一種） */
.cs-bar, .cs-vf, .cs-label, .cs-go, .cs-sheen, .stack-glow { display: none; }
/* 光澤＋光暈（gloss）：表面一道斜光隨捲動滑過；正中間那張後面打它自己顏色的光暈（hoal 不要邊框亮邊） */
#work-list[data-card="gloss"] .card { border-radius: 10px; }
#work-list[data-card="gloss"] .card .media { border-radius: 10px; --mr: 10px; }
#work-list.is-stack[data-card="gloss"] .cs-sheen {
  display: block; position: absolute; inset: 0; z-index: 2; overflow: hidden; border-radius: inherit; pointer-events: none;
}
#work-list.is-stack[data-card="gloss"] .cs-sheen i {
  position: absolute; top: 0; bottom: 0; left: -100%; width: 300%; will-change: transform;
  /* 一道白色反射光，後面跟一條很淡的彩虹折射；整層的 opacity 由 main.js 依翻動速度調 */
  background:
    linear-gradient(112deg, transparent 40%, rgba(255, 255, 255, .5) 46.5%, rgba(255, 255, 255, .12) 49%, transparent 52%),
    linear-gradient(112deg, transparent 51%, rgba(255, 70, 70, .22) 52.5%, rgba(255, 200, 60, .22) 53.5%, rgba(80, 255, 160, .22) 54.5%, rgba(70, 150, 255, .24) 55.5%, rgba(190, 90, 255, .2) 56.5%, transparent 58%),
    linear-gradient(112deg, transparent 58%, rgba(255, 255, 255, .14) 59.5%, transparent 61%);
  mix-blend-mode: screen; opacity: .12;
}
#work-list[data-card="gloss"] .stack-glow {
  /* 卡片畫面整張投射到螢幕：圖的四個角對到畫面四個角（往外多留一圈，模糊後邊緣不會變暗） */
  display: block; position: absolute; left: calc(50% - 62vw); top: -12%; width: 124vw; height: 124%;
  background: center / 100% 100% no-repeat; filter: blur(120px) saturate(1.6);
  /* 只留卡片左右兩側往外張開的扇形（卡片四角往螢幕四角），上下不亮；--cx/--cy 以 50% 為基準，放大的框也對得到卡片中心 */
  --fan: conic-gradient(from 0deg at var(--cx) var(--cy), transparent 52deg, #000 72deg 108deg, transparent 128deg 232deg, #000 252deg 288deg, transparent 308deg);
  --edge: linear-gradient(90deg, rgba(0,0,0,.3) 12%, #000 46% 62%, rgba(0,0,0,.3) 90%);  /* 越往螢幕左右邊越暗 */
  -webkit-mask-image: var(--fan), var(--edge); -webkit-mask-composite: source-in;
  mask-image: var(--fan), var(--edge); mask-composite: intersect;
  opacity: 0; transition: opacity 2.2s cubic-bezier(.45,0,.25,1); pointer-events: none;
}
/* 背景光慢慢流動：圖放大一點，在框裡緩慢漂移、輕微變形（預覽影片那層本身就在動，不加） */
#work-list[data-card="gloss"] .stack-glow:not(.live) { background-size: 135% 150%; animation: glow-flow 26s ease-in-out infinite alternate; }
@keyframes glow-flow {
  0%   { background-position: 0% 30%;   background-size: 135% 150%; }
  33%  { background-position: 60% 0%;   background-size: 160% 135%; }
  66%  { background-position: 100% 80%; background-size: 140% 165%; }
  100% { background-position: 30% 100%; background-size: 155% 140%; }
}
@media (prefers-reduced-motion: reduce) { #work-list[data-card="gloss"] .stack-glow { animation: none; } }
#work-list[data-card="gloss"] .stack-glow.on { opacity: .19; }
/* 播預覽影片時：光暈換成影片的即時畫面（main.js 每幀畫進 canvas），封面那層退掉 */
#work-list[data-card="gloss"] .stack-glow.live { opacity: 0; transition-duration: 1s; }
#work-list[data-card="gloss"] .stack-stage.is-live .stack-glow.live { opacity: .31; }
#work-list[data-card="gloss"] .stack-stage.is-live .stack-glow.on { opacity: 0; transition-duration: 1s; }
/* 毛玻璃框：跟選單、篩選列同一套玻璃（半透明＋背景模糊＋上緣亮線），透出後面那疊；正中間那張多一顆玻璃按鈕 */
#work-list[data-card="glass"] .stack-stage { --cs-extra: 20px; }
#work-list[data-card="glass"] .card {
  padding: 10px; border-radius: 18px;
  background: linear-gradient(150deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .05) 45%, rgba(255, 255, 255, .12));
  border: 1px solid rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 0 0 1px rgba(255, 255, 255, .04), 0 30px 60px -20px rgba(0, 0, 0, .9);
}
#work-list[data-card="glass"] .card .media { border-radius: 10px; --mr: 10px; }
#work-list[data-card="glass"] .stack-shade { border-radius: 18px; }
#work-list[data-card="glass"] .cs-go {
  display: block; position: absolute; right: 14px; bottom: 14px; z-index: 2; padding: 9px 16px; border-radius: 999px;
  font: 500 11px/1 var(--mono); letter-spacing: .08em; color: #fff;
  background: rgba(10, 10, 12, .55); border: 1px solid rgba(255, 255, 255, .25);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-hi);
  opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s cubic-bezier(.2,.7,.2,1), background .25s, color .25s;
}
#work-list[data-card="glass"] .card.is-front .cs-go { opacity: 1; transform: none; }
#work-list[data-card="glass"] .card.is-front:hover .cs-go { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
/* 瀏覽器視窗框：上方一條標題列，三個點和網址 */
#work-list[data-card="browser"] .stack-stage { --cs-extra: 30px; }
#work-list[data-card="browser"] .card { border-radius: 10px; overflow: hidden; background: #141416; border: 1px solid rgba(255, 255, 255, .14); }
#work-list[data-card="browser"] .card .media { border-radius: 0; --mr: 0px; }
#work-list[data-card="browser"] .cs-bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #1c1c1f; border-bottom: 1px solid rgba(255, 255, 255, .08); }
#work-list[data-card="browser"] .cs-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .22); }
#work-list[data-card="browser"] .card.is-front .cs-bar i:first-child { background: var(--accent); }
#work-list[data-card="browser"] .cs-bar em { flex: 1; margin-right: 39px; text-align: center; font: 400 11px/1 var(--mono); font-style: normal; letter-spacing: .04em; color: rgba(255, 255, 255, .5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 觀景窗：四角對位框、REC、時間碼，像攝影機螢幕 */
#work-list[data-card="viewfinder"] .card, #work-list[data-card="viewfinder"] .card .media { border-radius: 2px; --mr: 2px; }
#work-list[data-card="viewfinder"] .cs-vf {
  display: block; position: absolute; inset: 14px; z-index: 2; pointer-events: none;
  font: 500 11px/1 var(--mono); letter-spacing: .08em; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .7);
  background:
    linear-gradient(#fff, #fff) 0 0 / 22px 1.5px, linear-gradient(#fff, #fff) 0 0 / 1.5px 22px,
    linear-gradient(#fff, #fff) 100% 0 / 22px 1.5px, linear-gradient(#fff, #fff) 100% 0 / 1.5px 22px,
    linear-gradient(#fff, #fff) 0 100% / 22px 1.5px, linear-gradient(#fff, #fff) 0 100% / 1.5px 22px,
    linear-gradient(#fff, #fff) 100% 100% / 22px 1.5px, linear-gradient(#fff, #fff) 100% 100% / 1.5px 22px;
  background-repeat: no-repeat; opacity: .9;
}
#work-list[data-card="viewfinder"] .cs-vf b { position: absolute; font-weight: 500; }
#work-list[data-card="viewfinder"] .cs-vf b:nth-child(1) { left: 32px; top: 10px; color: #ff4d3d; }
#work-list[data-card="viewfinder"] .cs-vf b:nth-child(2) { right: 32px; top: 10px; }
#work-list[data-card="viewfinder"] .cs-vf b:nth-child(3) { left: 32px; bottom: 10px; }
#work-list[data-card="viewfinder"] .cs-vf b:nth-child(4) { right: 32px; bottom: 10px; text-transform: uppercase; }
#work-list[data-card="viewfinder"] .card:not(.is-front) .cs-vf { opacity: 0; }
/* 相紙：米白外框，下緣寫編號、名稱、年份 */
#work-list[data-card="print"] .stack-stage { --cs-extra: 52px; }
#work-list[data-card="print"] .card { padding: 10px 10px 0; border-radius: 3px; background: var(--fg); }
#work-list[data-card="print"] .card .media { border-radius: 1px; }
#work-list[data-card="print"] .cs-label { display: flex; align-items: center; gap: 14px; height: 42px; padding: 0 4px; font: 500 11px/1 var(--mono); letter-spacing: .08em; color: #111; }
#work-list[data-card="print"] .cs-label em { flex: 1; font-style: normal; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- About：拼貼格狀（跟首頁同一套語彙） ---------- */
.about-bento { padding-block: 16px 72px; }
.ab-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; }
.ab-tile { position: relative; min-width: 0; margin: 0; border-radius: 6px; background: var(--surface); padding: 22px; overflow: hidden; }
.ab-label { display: flex; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ab-intro { grid-column: span 7; display: flex; flex-direction: column; gap: 18px; }
.ab-intro h1 { margin: 8px 0 0; font-family: var(--display); font-weight: 800; font-size: clamp(44px, 5.4vw, 92px); line-height: .86; letter-spacing: -.035em; }
.ab-role { margin: 0; font-family: var(--display); font-weight: 600; font-size: clamp(18px, 1.6vw, 24px); }
.ab-role b { color: var(--accent); }
.ab-bio { margin: auto 0 0; font-size: 16px; line-height: 1.7; max-width: 52ch; color: #d6d4cf; }
.ab-photo { grid-column: span 5; grid-row: span 2; padding: 0; min-height: 420px; background: #111; }
.ab-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.ab-photo:hover img { transform: scale(1.03); }
.ab-photo figcaption {
  position: absolute; left: 12px; bottom: 12px; display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 999px; font-family: var(--mono); font-size: 12px;
  background: var(--glass-bg); border: 1px solid var(--glass-edge); box-shadow: var(--glass-hi);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.ab-photo .pulse { width: 8px; height: 8px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: ab-pulse 1.6s ease-in-out infinite; }
@keyframes ab-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.ab-stat { grid-column: span 2; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; min-height: 130px; }
.ab-stat b { font-family: var(--display); font-weight: 800; font-size: clamp(30px, 3vw, 50px); line-height: 1; }
.ab-stat span { font-size: 13px; color: var(--muted); }
.ab-stat.accent { background: var(--accent); color: var(--on-accent); }
.ab-stat.accent span { color: rgba(0, 0, 0, .65); }
.ab-stat.accent { grid-column: span 3; }

.ab-exp { grid-column: span 8; display: flex; flex-direction: column; gap: 14px; }
.ab-track { position: relative; height: 10px; margin-top: 10px; border-radius: 999px; background: #222225; overflow: hidden; }
.ab-track span { position: absolute; top: 0; bottom: 0; left: var(--l); width: var(--w); background: var(--c); transform-origin: left; animation: ab-grow 1s cubic-bezier(.2,.7,.2,1) both; }
.ab-track span:nth-child(2) { animation-delay: .25s; } .ab-track span:nth-child(3) { animation-delay: .5s; }
@keyframes ab-grow { from { transform: scaleX(0); } }
.ab-years { position: relative; height: 14px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.ab-years span { position: absolute; } .ab-years span:nth-child(1) { left: 0; } .ab-years span:nth-child(2) { left: 28.6%; } .ab-years span:nth-child(3) { left: 42.9%; } .ab-years span:nth-child(4) { right: 0; }
.ab-jobs { margin: 6px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ab-jobs li { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 6px; background: #121214; border-top: 2px solid var(--c); transition: background .2s, transform .2s; }
.ab-jobs li:hover { background: #1c1c1f; transform: translateY(-2px); }
.ab-jobs .yr { font-family: var(--mono); font-size: 11px; color: var(--c); }
.ab-jobs strong { font-family: var(--display); font-weight: 600; font-size: 17px; }
.ab-jobs .role { font-size: 12px; color: var(--muted); line-height: 1.5; }
.ab-jobs .proj { font-size: 13px; color: #d6d4cf; line-height: 1.5; }

.ab-skills { grid-column: span 4; display: flex; flex-direction: column; gap: 16px; }
.ab-apps { display: flex; gap: 8px; }
.ab-apps span { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 12px; font-family: var(--display); font-weight: 800; font-size: 18px; }
.ab-apps .ae { background: #00005B; color: #9999FF; box-shadow: inset 0 0 0 2px #9999FF; }
.ab-apps .c4d { background: #011A6A; color: #fff; font-size: 14px; box-shadow: inset 0 0 0 2px #3A6BFF; }
.ab-chips { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; font-family: var(--mono); font-size: 12px; }
.ab-chips li { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--chip); }
.ab-chips li:hover { border-color: var(--accent); color: var(--accent); }

.ab-clients { grid-column: span 8; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; }
.ab-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ab-marquee-track { display: flex; width: max-content; gap: 22px; align-items: center; font-family: var(--display); font-weight: 600; font-size: clamp(20px, 2vw, 28px); white-space: nowrap; animation: ab-marquee 40s linear infinite; }
.ab-marquee-track i { width: 1.1em; height: 1.1em; }
.ab-clients:hover .ab-marquee-track { animation-play-state: paused; }
@keyframes ab-marquee { to { transform: translateX(-50%); } }
@keyframes star4 { 0% { transform: rotate(-12deg) scale(1); } 50% { transform: rotate(78deg) scale(.72); } 100% { transform: rotate(168deg) scale(1); } }

.ab-contact { grid-column: span 4; display: flex; flex-direction: column; gap: 14px; background: var(--accent); color: var(--on-accent); text-decoration: none; }
.ab-contact .ab-label { color: rgba(0, 0, 0, .6); }
.ab-contact .big { font-family: var(--display); font-weight: 800; font-size: clamp(22px, 2.2vw, 32px); line-height: 1; }
.ab-contact .mail { margin-top: auto; font-family: var(--mono); font-size: 13px; }
.ab-contact:hover { filter: brightness(1.06); }

@media (max-width: 960px) {
  .ab-intro, .ab-photo, .ab-exp, .ab-skills, .ab-clients, .ab-contact { grid-column: 1 / -1; }
  .ab-photo { grid-row: auto; aspect-ratio: 4 / 5; min-height: 0; max-height: 80vh; }
  .ab-stat, .ab-stat.accent { grid-column: span 4; }
  .ab-jobs { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .ab-tile { padding: 18px; }
  .ab-intro h1 { font-size: 10vw; }
  .ab-stat { min-height: 104px; padding: 14px; }
  .ab-stat b { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) { .ab-marquee-track, .ab-track span, .ab-photo .pulse { animation: none; } }

/* About：格子上下各一條大字跑馬燈 */
.about-bento { overflow-x: clip; }
.k-row { overflow: hidden; white-space: nowrap; font-family: var(--display); font-weight: 800; line-height: .95; letter-spacing: -.035em; text-transform: uppercase; }
.k-row.k-top { font-size: clamp(32px, 5vw, 84px); padding-block: 4px 14px; color: var(--muted); }
.k-row.k-bot { font-size: clamp(24px, 3.2vw, 54px); padding-block: 20px 0; color: var(--muted); }
.k-shift { will-change: transform; }
.k-track { display: inline-flex; align-items: center; gap: .3em; width: max-content; animation: k-run var(--dur, 40s) linear infinite; }
.k-row.rev .k-track { animation-direction: reverse; }
.k-track > * { flex: none; }
.k-out { color: var(--bg); -webkit-text-stroke: 2px var(--muted); paint-order: stroke fill; }
.k-row .k-star { width: .45em; height: .45em; }
@keyframes k-run { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .k-track { animation: none; } }

/* ---------- 全站動態 ---------- */
/* 換頁轉場：快速淡出淡入 */
.pt-leave main, .pt-leave .site-footer { opacity: 0; transition: opacity .22s ease; }
.pt-enter main, .pt-enter .site-footer { animation: pt-fade .4s ease both; }
@keyframes pt-fade { from { opacity: 0; } }
/* 新頁還沒跑到 JS 前先藏住內容，避免閃一下 */
.pt-in main, .pt-in .site-footer { opacity: 0; }
.motion .rv { opacity: 0; transform: translateY(28px) scale(.985); transition: opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.motion .rv.in { opacity: 1; transform: none; }
.spot { position: relative; isolation: isolate; }
.spot::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(198, 255, 61, .13), transparent 60%); }
.spot:hover::after { opacity: 1; }
.ab-stat.accent.spot::after, .ab-contact.spot::after { background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .35), transparent 60%); }
.magnet { display: inline-block; transition: transform .25s cubic-bezier(.2,.7,.2,1); }

/* 預覽圖裁切對齊下方（卡片、作品頁封面） */
.media > img, .media > video, .pj-film .media img { object-position: center bottom; }
.media-blur { background-position: center bottom; }
/* 堆疊模式的封面對準圖的正中間 */
#work-list.is-stack .card .media > img, #work-list.is-stack .card .media > video { object-position: center; }
#work-list.is-stack .card .media-blur { background-position: center; }

/* Four-point star separator (from the old Wix about page) */
.star4 { display: inline-block; flex: none; align-self: center; width: 1.1em; height: 1.1em; font-size: inherit; font-style: normal; color: transparent; overflow: hidden; background: var(--accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0Q57 43 100 50Q57 57 50 100Q43 57 0 50Q43 43 50 0Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0Q57 43 100 50Q57 57 50 100Q43 57 0 50Q43 43 50 0Z'/%3E%3C/svg%3E") center / contain no-repeat; animation: star4 3.2s cubic-bezier(.65,0,.35,1) infinite; }
/* stagger: each star starts at a different point of the loop */
.star4:nth-child(8n+1) { animation-delay: -0.4s; }
.star4:nth-child(8n+2) { animation-delay: -0.8s; }
.star4:nth-child(8n+3) { animation-delay: -1.2s; }
.star4:nth-child(8n+4) { animation-delay: -1.6s; }
.star4:nth-child(8n+5) { animation-delay: -2.0s; }
.star4:nth-child(8n+6) { animation-delay: -2.4s; }
.star4:nth-child(8n+7) { animation-delay: -2.8s; }
.star4:nth-child(8n+8) { animation-delay: -3.2s; }
@media (prefers-reduced-motion: reduce) { .star4 { animation: none; transform: rotate(-12deg); } }