/* ============================================================
   作品集 — 样式表
   想换配色？改下面 :root 里的变量就够了，其余不用动。
   ============================================================ */

:root{
  /* 配色：黑白灰。强调色是纯白 —— 想换成别的颜色只改 --accent 就行 */
  --bg:        #08080a;   /* 页底，近黑 */
  --surface:   #131316;   /* 卡片、块面的底 */
  --line:      rgba(255,255,255,.13);
  --line-soft: rgba(255,255,255,.07);
  --text:      #ededf0;
  --muted:     #86868e;
  --accent:    #ffffff;

  /* 尺寸 */
  --wrap:      1320px;
  --radius:    14px;
  --ease:      cubic-bezier(.16,1,.3,1);

  /* 字体 */
  --sans: "Inter","Segoe UI","PingFang SC","Microsoft YaHei UI","Microsoft YaHei",
          system-ui,-apple-system,"Helvetica Neue",sans-serif;
}

*,*::before,*::after{ box-sizing:border-box }

html{ scroll-behavior:smooth }

body{
  margin:0;
  /* 顶部一团很淡的灰光，让纯黑不那么死板 */
  background:
    radial-gradient(900px 440px at 50% -90px,#1d1d23 0%,rgba(29,29,35,0) 70%)
    no-repeat,
    var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

body.is-locked{ overflow:hidden }

img,video{ display:block; max-width:100% }

a{ color:inherit; text-decoration:none }

button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }

::selection{ background:var(--accent); color:var(--bg) }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px }
@media (min-width:768px){ .wrap{ padding-inline:40px } }

.accent{ color:var(--accent) }


/* ============================================================
   滚动进入动画
   —— .reveal 的元素进入视口时由 JS 加上 .is-visible
   —— --i 控制错峰延迟（第几个出现）
   ============================================================ */

.reveal,
.anim-in{
  opacity:0;
  will-change:opacity, transform;
}

.reveal.is-visible{
  animation:rise .78s var(--ease) forwards;
  animation-delay:calc(var(--i, 0) * 72ms);
}

.anim-in{
  animation:rise .9s var(--ease) forwards;
  animation-delay:var(--d, 0ms);
}

@keyframes rise{
  from{ opacity:0; transform:translateY(26px) }
  to  { opacity:1; transform:none }
}

/* 系统里开了「减少动态效果」就全部关掉 */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  .reveal, .anim-in{ opacity:1 !important; animation:none !important }
  *,*::before,*::after{ transition-duration:.01ms !important }
}


/* ============================================================
   顶部导航
   ============================================================ */

.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(8,8,10,.72);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid var(--line-soft);
}

.site-header__inner{
  display:flex; align-items:center; justify-content:space-between;
  height:66px;
}

.logo{ font-weight:600; letter-spacing:-.01em; font-size:1.02rem }
.logo__dot{ color:var(--accent) }

.nav{ display:flex; gap:28px; font-size:.92rem }
.nav a{
  color:var(--muted);
  position:relative;
  transition:color .25s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:-5px;
  width:100%; height:1px; background:var(--accent);
  transform:scaleX(0); transform-origin:right;
  transition:transform .35s var(--ease);
}
.nav a:hover{ color:var(--text) }
.nav a:hover::after{ transform:scaleX(1); transform-origin:left }

@media (max-width:560px){ .nav{ gap:18px; font-size:.86rem } }


/* ============================================================
   HERO
   ============================================================ */

.hero{
  position:relative;
  padding:clamp(72px,13vh,150px) 0 clamp(40px,8vh,80px);
}

.hero__eyebrow{
  margin:0 0 22px;
  font-size:.8rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted);
}

.hero__title{
  margin:0 0 28px;
  font-size:clamp(2.7rem,9.2vw,7.4rem);
  line-height:.98;
  font-weight:600;
  letter-spacing:-.035em;
}

/* 白→灰的金属感渐变。黑白灰里最容易出「酷」的一招。
   句号故意放在渐变外面，保持纯白实心，从灰调里跳出来。
   外面套 @supports 是因为有些老浏览器不认 background-clip:text，
   那种情况下 color:transparent 会让标题整个消失 —— 得有兜底 */
.hero__title-grad{ color:var(--text) }
@supports (-webkit-background-clip:text) or (background-clip:text){
  .hero__title-grad{
    background:linear-gradient(172deg,#ffffff 6%,#74747e 128%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
}
.hero__title .accent{ color:var(--accent) }

.hero__lede{
  margin:0;
  max-width:46ch;
  color:var(--muted);
  font-size:clamp(.98rem,1.5vw,1.1rem);
}

.scroll-cue{
  display:inline-flex; align-items:center; gap:14px;
  margin:clamp(48px,10vh,110px) 0 0;
  padding-inline:24px;
  font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
  transition:color .3s var(--ease);
}
@media (min-width:768px){ .scroll-cue{ padding-inline:40px } }
.scroll-cue:hover{ color:var(--text) }

.scroll-cue__line{
  display:block; width:54px; height:1px;
  background:currentColor; opacity:.5;
  position:relative; overflow:hidden;
}
.scroll-cue__line::after{
  content:""; position:absolute; inset:0;
  background:var(--accent);
  transform:translateX(-100%);
  animation:cue 2.1s var(--ease) infinite;
}
@keyframes cue{
  0%  { transform:translateX(-100%) }
  55% { transform:translateX(0) }
  100%{ transform:translateX(100%) }
}
@media (prefers-reduced-motion: reduce){ .scroll-cue__line::after{ animation:none } }


/* ============================================================
   区块标题 / 筛选
   ============================================================ */

.work{ padding:clamp(48px,9vh,96px) 0 }

.section-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:20px;
  padding-bottom:20px;
  border-bottom:1px solid var(--line);
}

.section-head__title{
  margin:0;
  font-size:clamp(1.5rem,3.4vw,2.3rem);
  font-weight:600; letter-spacing:-.025em;
}

.section-head__count{
  font-size:.85rem; color:var(--muted);
  font-variant-numeric:tabular-nums;
}

.filters{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:26px 0 34px;
}

.chip{
  padding:8px 17px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:.87rem;
  color:var(--muted);
  transition:color .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease);
  white-space:nowrap;
}
.chip:hover{ color:var(--text); border-color:rgba(255,255,255,.32) }
.chip[aria-pressed="true"]{
  background:var(--accent); border-color:var(--accent); color:var(--bg);
  font-weight:500;
}


/* ============================================================
   作品网格
   ============================================================ */

.grid{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
}
@media (min-width:720px){
  .grid{ grid-template-columns:repeat(2,1fr); gap:24px }
}
@media (min-width:1180px){
  .grid{ grid-template-columns:repeat(3,1fr); gap:30px }
}

/* 首页大图：单独铺满一整行，做成电影横幅的比例。
   7 条里去掉这一条刚好剩 6 条，在 1/2/3 列下都是整行 ——
   所以每个断点都不会留下半截空位。 */
.card--featured{ grid-column:1 / -1 }
@media (min-width:720px){
  .card--featured .card__media{ aspect-ratio:21/9 }
}
.card--featured .card__title{ font-size:clamp(1.1rem,2.1vw,1.5rem) }
.card--featured .card__sub{ font-size:.88rem }
.card--featured .card__badge{ width:56px; height:56px }
.card--featured .card__badge svg{ width:20px; height:20px }
/* 它是视觉重心，播放按钮不用等悬停就直接露出来 */
.card--featured .card__badge{ opacity:.9; transform:scale(1) }

/* 触屏没有悬停，角标永远不会出现 —— 直接常驻，否则看不出能点 */
@media (hover:none){
  .card__badge{ opacity:.88; transform:scale(.9) }
}
/* 整行宽的东西放大 2%。视觉上位移太狠，收敛一点 */
.card--featured .card__btn:hover .card__media,
.card--featured .card__btn:focus-visible .card__media{ transform:scale(1.012) }

.empty{
  padding:70px 0; text-align:center; color:var(--muted); font-size:.95rem;
}

/* --- 卡片 --- */

.card{ position:relative }

.card__btn{
  display:block; width:100%; text-align:left;
  border-radius:var(--radius);
  -webkit-tap-highlight-color:transparent;
}

.card__media{
  position:relative;
  aspect-ratio:16/9;
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  overflow:hidden;
  transform:translateZ(0);
  transition:transform .55s var(--ease), border-color .4s var(--ease),
             box-shadow .5s var(--ease);
}
.card__btn:hover .card__media,
.card__btn:focus-visible .card__media{
  transform:scale(1.022);
  border-color:rgba(255,255,255,.3);
  /* 悬停时整块浮起来一点 */
  box-shadow:0 28px 60px -32px rgba(0,0,0,.95),
             inset 0 0 0 1px rgba(255,255,255,.05);
}

/* 视频：铺满裁切，视频本身就有构图 */
.card__video{
  width:100%; height:100%;
  object-fit:cover;
  background:var(--surface);
}

/* 提前用「生成线上素材.js」抓好的封面帧。静态图，秒开，
   不用等视频下载元数据 —— 而且线上是 HLS 切片，seek 取帧很贵，必须这么做 */
.card__poster{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
  background:var(--surface);
}

/* 悬停时才出场的小预览片（6 秒、约 250 KB）。
   平时 opacity:0 且 preload="none"，不悬停就一个字节都不下。
   故意不设 z-index —— 让它排在 .card__media::after 那道底部渐变下面，
   角标和时长是 z-index:2，也不会被它盖住 */
.card__preview{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  pointer-events:none;
  transition:opacity .35s var(--ease);
}
.card__preview.is-playing{ opacity:1 }

/* 图片：完整显示不裁切，四周留底色 */
.card__media--image{ background:#0e0e11 }
.card__img{
  width:100%; height:100%;
  object-fit:contain;
}

/* 底部渐变遮罩，让角标有对比度 */
.card__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 42%);
  opacity:.85; pointer-events:none;
  transition:opacity .4s var(--ease);
}
.card__media--image::after{ opacity:0 }
.card__btn:hover .card__media--image::after{ opacity:.55 }

/* 文件缺失时的降级底纹 */
.card__fallback{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px;
  background:
    radial-gradient(120% 120% at 20% 0%,rgba(255,255,255,.10),transparent 55%),
    linear-gradient(140deg,#191a1e,#0e0e11);
  color:var(--muted);
  text-align:center;
  padding:20px;
}
.card__fallback-title{ font-size:.95rem; color:var(--text); letter-spacing:-.01em }
.card__fallback-hint{
  font-size:.72rem; letter-spacing:.02em;
  word-break:break-all; max-width:90%; opacity:.8;
}
.card__fallback[hidden]{ display:none }

/* 左下角按钮：视频是播放，图片是放大 */
.card__badge{
  position:absolute; z-index:2;
  left:16px; bottom:16px;
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--accent); color:var(--bg);
  transform:scale(.86);
  opacity:0;
  transition:transform .45s var(--ease), opacity .35s var(--ease);
}
.card__badge svg{ width:17px; height:17px }
.card__badge svg[fill="currentColor"]{ margin-left:2px }
.card__btn:hover .card__badge,
.card__btn:focus-visible .card__badge{ transform:scale(1); opacity:1 }

/* 右下角时长（只有视频有） */
.card__dur{
  position:absolute; z-index:2; right:14px; bottom:16px;
  padding:3px 9px; border-radius:5px;
  background:rgba(0,0,0,.62);
  backdrop-filter:blur(6px);
  font-size:.74rem; font-variant-numeric:tabular-nums;
  color:#eaeaef;
  opacity:0; transition:opacity .35s var(--ease);
}
.card__dur[hidden]{ display:none }
.card__btn:hover .card__dur{ opacity:1 }

/* 卡片文字 */
.card__meta{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px;
  padding:14px 2px 0;
}

.card__title{
  margin:0;
  font-size:1.02rem; font-weight:500; letter-spacing:-.012em;
  transition:color .3s var(--ease);
}
.card__btn:hover .card__title{ color:var(--accent) }

.card__sub{
  margin:5px 0 0;
  font-size:.83rem; color:var(--muted);
  min-height:1.3em;
}

.card__year{
  font-size:.83rem; color:var(--muted);
  font-variant-numeric:tabular-nums;
  flex:none;
}


/* ============================================================
   关于
   ============================================================ */

.about{
  padding:clamp(56px,11vh,120px) 0;
  border-top:1px solid var(--line-soft);
}

.about__inner{
  display:grid;
  grid-template-columns:1fr;
  gap:26px;
}
@media (min-width:860px){
  .about__inner{ grid-template-columns:180px 1fr; gap:48px }
}

.about__label{
  font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}

.about__body{ max-width:64ch }
.about__body p{
  margin:0 0 18px;
  font-size:clamp(1rem,1.9vw,1.24rem); letter-spacing:-.011em;
}

.about__facts{
  margin:34px 0 0;
  display:grid; gap:14px;
  border-top:1px solid var(--line-soft);
  padding-top:26px;
}
.about__facts > div{
  display:grid; grid-template-columns:88px 1fr; gap:16px;
  font-size:.92rem;
}
.about__facts dt{ color:var(--muted); margin:0 }
.about__facts dd{ margin:0 }


/* ============================================================
   联系 + 页脚
   ============================================================ */

.contact{
  padding:clamp(56px,11vh,120px) 0;
  border-top:1px solid var(--line-soft);
}

.contact__title{
  margin:0 0 26px;
  font-size:clamp(1.9rem,5.6vw,3.6rem);
  font-weight:600; letter-spacing:-.03em;
}

.contact__mail{
  display:inline-block;
  font-size:clamp(1.15rem,3.2vw,2rem);
  letter-spacing:-.02em;
  border-bottom:1px solid var(--line);
  padding-bottom:5px;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.contact__mail:hover{ color:var(--accent); border-color:var(--accent) }

.contact__links{
  display:flex; flex-wrap:wrap; gap:24px;
  list-style:none; margin:38px 0 0; padding:0;
  font-size:.9rem; color:var(--muted);
}
.contact__links a{ transition:color .28s var(--ease) }
.contact__links a:hover{ color:var(--accent) }

.site-footer{
  border-top:1px solid var(--line-soft);
  padding:28px 0 40px;
  font-size:.82rem; color:var(--muted);
}
.site-footer__inner{
  display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between;
}
.site-footer__note{ opacity:.7 }


/* ============================================================
   灯箱
   ============================================================ */

.lb{
  position:fixed; inset:0; z-index:100;
  display:grid; place-items:center;
  padding:clamp(12px,3vw,40px);
}
.lb[hidden]{ display:none }

.lb__backdrop{
  position:absolute; inset:0;
  background:rgba(6,6,7,.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  animation:fade .3s var(--ease);
}
@keyframes fade{ from{ opacity:0 } to{ opacity:1 } }

.lb__panel{
  position:relative; z-index:1;
  width:100%; max-width:1120px;
  max-height:100%;
  overflow-y:auto;
  overscroll-behavior:contain;
  animation:pop .42s var(--ease);
}
@keyframes pop{
  from{ opacity:0; transform:translateY(18px) scale(.985) }
  to  { opacity:1; transform:none }
}

.lb__stage{
  position:relative;
  background:#000;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 32px 90px -20px rgba(0,0,0,.9);
}

.lb__stage video{
  width:100%;
  max-height:min(76vh,780px);
  aspect-ratio:16/9;
  object-fit:contain;
  background:#000;
}

.lb__stage img{
  width:auto; max-width:100%;
  max-height:min(76vh,780px);
  margin-inline:auto;
  object-fit:contain;
  background:#000;
}

/* 关键：上面的 display 会覆盖 hidden 属性，必须显式关掉 */
.lb__stage video[hidden],
.lb__stage img[hidden]{ display:none }

.lb__close{
  position:absolute; top:18px; right:18px; z-index:4;
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,255,255,.1);
  border:1px solid var(--line);
  backdrop-filter:blur(8px);
  transition:background-color .25s var(--ease), transform .25s var(--ease);
}
.lb__close:hover{ background:rgba(255,255,255,.22); transform:rotate(90deg) }
.lb__close svg{
  width:17px; height:17px; fill:none; stroke:currentColor;
  stroke-width:1.9; stroke-linecap:round;
}
@media (max-width:600px){
  .lb__close{ top:12px; right:12px }
}

.lb__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(10,10,11,.62);
  border:1px solid var(--line);
  backdrop-filter:blur(8px);
  opacity:0;
  transition:opacity .3s var(--ease), background-color .25s var(--ease);
}
.lb__stage:hover .lb__nav,
.lb__nav:focus-visible{ opacity:1 }
.lb__nav:hover{ background:rgba(10,10,11,.9) }
.lb__nav svg{
  width:19px; height:19px; fill:none; stroke:currentColor;
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;
}
.lb__nav--prev{ left:14px }
.lb__nav--next{ right:14px }
.lb__nav[hidden]{ display:none }
@media (max-width:600px){ .lb__nav{ display:none } }

.lb__info{ padding:22px 2px 4px }

.lb__info-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
}
.lb__title{
  margin:0;
  font-size:clamp(1.2rem,2.6vw,1.7rem);
  font-weight:600; letter-spacing:-.022em;
}
.lb__index{
  flex:none;
  font-size:.82rem; color:var(--muted); font-variant-numeric:tabular-nums;
}
.lb__meta{
  margin:8px 0 0;
  font-size:.86rem; color:var(--muted);
}
.lb__desc{
  margin:14px 0 0;
  max-width:64ch;
  font-size:.95rem; color:#b9b9c0;
}
.lb__desc:empty{ display:none }