/* ============================================================
   邓子龙 · 影视作品集 — THEME C / SPLIT FRAME(整站共享系统)
   近黑 × 信号青 · 监视器语言 · 发丝线 · 等宽 chrome
   ============================================================ */
:root{
  --bg:#0b0c0f; --bg-2:#0e1013; --panel:#101319; --panel-2:#0c0e12; --black:#05060a;
  --ink:#eef0ee; --ink-2:rgba(238,240,238,.62); --ink-3:rgba(238,240,238,.46);
  --line:rgba(238,240,238,.16); --line-2:rgba(238,240,238,.1);
  --acc:#66d2bb; --acc-2:#8de2cf; --on-acc:#06211b;
  --serif:"Source Han Serif SC","Noto Serif SC","Songti SC",SimSun,serif;
  --ui:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;
  --mono:ui-monospace,Consolas,"SF Mono",monospace;
  --g:clamp(1.2rem,4vw,3rem);
  --sp:clamp(5.5rem,13vh,9.5rem);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
html:focus-within{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--ui);line-height:1.9;font-size:1rem;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{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(--acc);color:var(--on-acc)}
.mono{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.mono b{color:var(--acc);font-weight:400}
.wrap{width:min(1400px,100%);margin-inline:auto;padding-inline:var(--g)}
.scn{display:flex;align-items:center;gap:.9rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--ink-2)}
.scn::before{content:"";width:1.4rem;height:2px;background:var(--acc);flex:none}

/* skip link */
.skip-link{position:fixed;left:1rem;top:-4rem;z-index:200;padding:.7rem 1.2rem;background:var(--acc);
  color:var(--on-acc);font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;transition:top .2s}
.skip-link:focus{top:1rem}

/* ============ 按钮 / 链接 ============ */
.btn{display:inline-flex;align-items:center;gap:.65em;font-family:var(--mono);letter-spacing:.16em;
  text-transform:uppercase;padding:1em 1.9em;font-size:.74rem;border:1px solid var(--line);
  transition:border-color .22s,background .22s,color .22s}
.btn:hover{border-color:var(--acc);color:var(--acc)}
.btn.solid{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
.btn.solid:hover{background:var(--acc-2);color:var(--on-acc)}
.btn.ghost{border-color:var(--line);background:transparent}
.tlink{display:inline-block;position:relative;padding-bottom:.35em;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.16em;text-transform:uppercase}
.tlink::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--acc);
  transform:scaleX(.4);transform-origin:left;transition:transform .3s var(--ease)}
.tlink:hover::after{transform:scaleX(1)}

/* ============ 顶部导航 ============ */
.nav{position:sticky;top:0;z-index:80;border-bottom:1px solid var(--line-2);
  background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);transition:background .3s,border-color .3s}
.nav.scrolled{background:color-mix(in srgb,var(--bg) 96%,transparent);border-bottom-color:var(--line)}
.nav .nbar{display:flex;align-items:center;justify-content:space-between;gap:1.4rem;padding:.8rem var(--g);max-width:1400px;margin-inline:auto}
.brand{font-family:var(--mono);font-size:.82rem;letter-spacing:.14em;color:var(--ink);display:inline-flex;gap:.4em;align-items:baseline}
.brand .c{color:var(--acc)}
.nav-links{list-style:none;display:flex;gap:clamp(1rem,2.4vw,2rem)}
.nav-links a{font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;color:var(--ink-2);padding:.2rem 0;position:relative;transition:color .2s}
.nav-links a:hover{color:var(--acc)}
.nav .nav-cta{padding:.6em 1.4em;font-size:.68rem}
.menu-btn{display:none}
.mobile-menu{display:none}

@media (hover:none){.nav{position:static}}
/* ============ 移动菜单 ============ */
@media(max-width:860px){
  .nav-links{display:none}
  .nav .nav-cta{display:none}
  .menu-btn{display:flex;flex-direction:column;justify-content:center;gap:5px;width:2.6rem;height:2.6rem;
    align-items:center}
  .menu-btn span{display:block;width:22px;height:1.5px;background:var(--ink-2);transition:background .2s,transform .25s var(--ease)}
  .menu-btn:hover span{background:var(--acc)}
  .menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
  .menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  .mobile-menu{display:block;position:fixed;inset:0;z-index:90;background:var(--bg-2);
    padding:calc(4.4rem + 1rem) var(--g) 2rem;transform:translateY(-100%);transition:transform .4s var(--ease);
    overflow:auto;visibility:hidden}
  .mobile-menu.open{transform:translateY(0);visibility:visible}
  .mobile-menu::before{content:"NAV";position:absolute;top:1.2rem;left:var(--g);font-family:var(--mono);
    font-size:.6rem;letter-spacing:.3em;color:var(--ink-3)}
  .mobile-menu a{display:flex;align-items:baseline;gap:1rem;padding:1.1rem .2rem;border-bottom:1px solid var(--line-2);
    font-family:var(--serif);font-size:1.6rem;font-weight:600;opacity:0;transform:translateY(14px);
    transition:opacity .3s var(--ease),transform .3s var(--ease),color .2s}
  .mobile-menu.open a{opacity:1;transform:none}
  .mobile-menu.open a:nth-child(1){transition-delay:.06s}.mobile-menu.open a:nth-child(2){transition-delay:.1s}
  .mobile-menu.open a:nth-child(3){transition-delay:.14s}.mobile-menu.open a:nth-child(4){transition-delay:.18s}
  .mobile-menu a small{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;color:var(--acc)}
  .mobile-menu a:hover{color:var(--acc-2)}
}

/* ============ INTRO 开场层 ============ */
.intro{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;text-align:center;
  background:radial-gradient(120% 90% at 50% 8%,var(--bg-2) 0,var(--bg) 58%,var(--black) 100%);
  transition:opacity .7s var(--ease);padding:clamp(1.6rem,5vw,3rem)}
.intro::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--acc),transparent);opacity:.5}
body.intro-out .intro{opacity:0;pointer-events:none}
body.intro-done .intro{display:none}
.intro .io{display:flex;flex-direction:column;align-items:center;gap:0}
.intro .status{display:flex;align-items:center;gap:.6em;font-family:var(--mono);font-size:.62rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--ink-3)}
.intro .status i{width:.5em;height:.5em;background:var(--acc);animation:blink 2.4s steps(1) infinite}
@keyframes blink{0%,55%{opacity:1}56%,100%{opacity:.22}}
.intro h1{font-family:var(--ui);font-weight:700;font-size:clamp(3.4rem,13vw,9rem);line-height:1.02;margin-top:1.6rem;letter-spacing:.01em}
.intro h1 .sub{display:block;font-family:var(--serif);font-weight:600;font-size:clamp(1.5rem,5vw,3.4rem);
  color:transparent;-webkit-text-stroke:1.5px var(--ink-3);margin-top:.5rem;letter-spacing:.08em}
@supports not (-webkit-text-stroke:1.5px #fff){.intro h1 .sub{color:var(--ink-2)}}
.intro .tagline{color:var(--ink-2);margin-top:1.8rem;font-size:1rem}
.intro .enter{margin-top:clamp(2.2rem,6vh,3rem)}
.intro .skip{display:block;margin:1.6rem auto 0;font-family:var(--mono);font-size:.58rem;letter-spacing:.24em;
  color:var(--ink-3);text-transform:uppercase;border-bottom:1px solid transparent}
.intro .skip:hover{color:var(--acc);border-color:var(--line)}
/* 装饰层:取景框 + 收幕虹膜。默认绝对定位、不挡交互、不占布局;动效只在 motion-ok 下播放 */
.intro .frame,.intro .iris{position:absolute;inset:0;pointer-events:none;opacity:0}
.intro .iris{z-index:1}

/* ============ HERO ============ */
.hero{padding:clamp(1.4rem,4vh,2.8rem) 0 var(--g)}
.hero-top{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:center;
  border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);padding:.55rem 0}
.split{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:clamp(1.6rem,4vw,3rem);
  align-items:center;border-bottom:1px solid var(--line-2)}
.col-left{padding:clamp(2.6rem,8vh,5.5rem) clamp(1.5rem,3vw,3rem) clamp(1.6rem,4.5vh,3rem) 0}
.col-left{container-type:inline-size}
.big{font-family:var(--ui);font-weight:700;line-height:1.04;margin-top:1.5rem;letter-spacing:.01em;
  font-size:clamp(3rem,10.5vw,8.4rem)}
@supports (font-size:1cqw){ .col-left .big{font-size:clamp(2.8rem,26cqw,8.4rem)} }
.big .solid{display:block}
.big .line2{display:block;font-family:var(--serif);font-weight:600;font-size:.68em;margin-top:.4em;
  color:transparent;-webkit-text-stroke:1.5px var(--ink-3);letter-spacing:.1em}
@supports not (-webkit-text-stroke:1.5px #fff){.big .line2{color:var(--ink-2)}}
.tag{color:var(--ink-2);max-width:38ch;margin-top:clamp(1.4rem,3.6vh,2.2rem);font-size:1.02rem}
.actions{margin-top:clamp(1.7rem,4vh,2.5rem);display:flex;gap:.9rem;align-items:center;flex-wrap:wrap}
.facts{display:flex;margin-top:clamp(2rem,5vh,3rem);border-top:1px solid var(--line-2)}
.facts div{flex:1;padding:1.05rem .1rem 0;border-left:1px solid var(--line-2);padding-left:1rem;min-width:0}
.facts div:first-child{border-left:0;padding-left:0}
.facts .k{display:block;font-family:var(--mono);font-size:.56rem;letter-spacing:.2em;color:var(--ink-3);text-transform:uppercase}
.facts .v{display:block;font-size:.9rem;letter-spacing:.03em;margin-top:.45rem;color:var(--ink)}
.col-right{display:flex;flex-direction:column;gap:1.5rem;padding:clamp(2.6rem,8vh,5.5rem) 0 clamp(2rem,6vh,4rem) 0}
.mon{display:block;border:1px solid var(--line);background:var(--panel)}
.mon .mh{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.5rem .8rem;
  border-bottom:1px solid var(--line-2);font-family:var(--mono);font-size:.56rem;letter-spacing:.18em;color:var(--ink-3);text-transform:uppercase}
.mon .mh .l{display:flex;align-items:center;gap:.6em}
.mon .dot{width:.5em;height:.5em;background:var(--acc);flex:none}
.mon .mh .c{color:var(--acc)}
.mon .ph{aspect-ratio:16/9;overflow:hidden;background:#000;position:relative}
.mon .ph img{width:100%;height:100%;object-fit:cover}
.mon .ph .tl{position:absolute;left:0;top:0;padding:.5rem .75rem;font-family:var(--mono);font-size:.56rem;
  letter-spacing:.2em;color:var(--ink-2);background:linear-gradient(90deg,rgba(5,6,10,.78),transparent);text-transform:uppercase}
.mon .mf{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.55rem .85rem;
  border-top:1px solid var(--line-2);font-family:var(--mono);font-size:.56rem;letter-spacing:.18em;color:var(--ink-3);text-transform:uppercase}
.mon .mf b{color:var(--ink);font-weight:400}
.mon:hover{border-color:rgba(102,210,187,.55)}
/* 第二屏:不再叠压主屏,置于主监视器下方的图注卡 */
.duo{display:flex;align-items:center;justify-content:space-between;gap:1.6rem;border:1px solid var(--line-2);
  padding:1rem 1.15rem;transition:border-color .25s,background .25s}
.duo:hover{border-color:var(--acc);background:var(--bg-2)}
.duo .frame{flex:none;width:clamp(112px,11vw,172px);border:1px solid var(--line);background:var(--panel)}
.duo .frame .ph{aspect-ratio:9/14;overflow:hidden;background:#000}
.duo .frame img{width:100%;height:100%;object-fit:cover;display:block}
.duo .frame .cap{display:flex;justify-content:space-between;gap:.6rem;padding:.4rem .55rem;border-top:1px solid var(--line-2);
  font-family:var(--mono);font-size:.5rem;letter-spacing:.16em;color:var(--ink-3);text-transform:uppercase}
.duo .dv{display:flex;flex-direction:column;gap:.5rem;align-items:flex-start;min-width:0;text-align:left}
.duo .dv .k{font-family:var(--mono);font-size:.56rem;letter-spacing:.22em;color:var(--ink-3);text-transform:uppercase}
.duo .dv .k b{color:var(--acc);font-weight:400}
.duo .dv .t{font-family:var(--serif);font-size:1.65rem;font-weight:600;line-height:1.1}
.duo .dv .g{color:var(--acc);font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;margin-top:.2rem}
.hero-foot{margin-top:clamp(2rem,5vh,3.2rem);display:flex;justify-content:space-between;gap:1.6rem;flex-wrap:wrap;align-items:flex-end}
.hf-stat .n{font-size:clamp(1.7rem,3.8vw,2.7rem);font-weight:600;letter-spacing:.02em;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1}
.hf-stat .n b{color:var(--acc);font-weight:600}
.hf-stat .n small{font-size:.5em;font-family:var(--mono);letter-spacing:.05em;color:var(--ink-3);font-weight:400}
.hf-stat .g{font-family:var(--mono);font-size:.58rem;letter-spacing:.22em;color:var(--ink-3);text-transform:uppercase;margin-top:.5rem}
.hero-foot .tail{align-self:flex-end;text-align:right}

/* ============ 通用区块 ============ */
section.sec{padding-block:var(--sp)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:clamp(2.4rem,6vh,4rem)}
.sec-head h2{font-family:var(--serif);font-weight:600;font-size:clamp(2.2rem,5.6vw,4rem);line-height:1.14;
  margin-top:1.2rem;letter-spacing:.02em}
.sec-head .note{max-width:32ch;color:var(--ink-2);text-align:right;font-size:.95rem}

/* ============ 关于 ============ */
.about-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(290px,.8fr);gap:clamp(2.4rem,7vw,6rem);align-items:start}
.copy p{color:var(--ink-2);max-width:58ch;margin-bottom:1.25rem}
.copy p b{color:var(--ink);font-weight:500}
.mail-line{display:inline-flex;align-items:center;gap:.7em;margin-top:.5rem;font-family:var(--serif);font-size:1.12rem;
  border-bottom:1px solid var(--line);padding-bottom:.3em;transition:border-color .3s,color .3s}
.mail-line:hover{border-color:var(--acc);color:var(--acc)}
.mail-line svg{width:1.05em;height:1.05em;flex:none}
.copy .facts{list-style:none;margin-top:2.2rem;border-top:1px solid var(--line-2)}
.copy .facts li{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;border-bottom:1px solid var(--line-2);
  padding:.85rem .1rem;font-size:.92rem}
.copy .facts .k{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;color:var(--ink-3);text-transform:uppercase;flex:none}
.copy .facts .v{color:var(--ink);text-align:right}
.about-mon{border:1px solid var(--line);background:var(--panel)}
.about-mon .mh{display:flex;justify-content:space-between;gap:1rem;padding:.5rem .8rem;border-bottom:1px solid var(--line-2);
  font-family:var(--mono);font-size:.56rem;letter-spacing:.18em;color:var(--ink-3);text-transform:uppercase}
.about-mon .ph{aspect-ratio:4/5;overflow:hidden;background:#000;position:relative}
.about-mon .ph img{width:100%;height:100%;object-fit:cover}
.about-mon .ph::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 56px rgba(0,0,0,.22)}
.about-mon .mf{display:flex;justify-content:space-between;gap:1rem;padding:.5rem .85rem;border-top:1px solid var(--line-2);
  font-family:var(--mono);font-size:.54rem;letter-spacing:.16em;color:var(--ink-3);text-transform:uppercase}

/* ============ 作品 ============ */
.work-card{display:block}
.work-card .media{position:relative;aspect-ratio:16/10;overflow:hidden;border:1px solid var(--line-2);
  background:var(--panel-2);transition:border-color .25s}
.work-card.portrait .media{aspect-ratio:3/4}
.work-card .media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.work-card:hover .media{border-color:rgba(102,210,187,.55)}
.work-card .media img{transform:scale(1)}
.work-card .dur{position:absolute;left:.6rem;bottom:.6rem;z-index:2;padding:.3em .7em;background:rgba(5,6,10,.68);
  font-family:var(--mono);font-size:.54rem;letter-spacing:.16em;color:var(--ink-2);text-transform:uppercase;
  backdrop-filter:blur(3px)}
.work-card video.mover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity .35s ease}
.work-card:hover video.mover.on{opacity:1}
.work-card .mc{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-top:.8rem}
.work-card .tt{font-family:var(--serif);font-size:1.4rem;font-weight:600}
.work-card .mt{font-family:var(--mono);font-size:.56rem;letter-spacing:.16em;color:var(--ink-3);text-transform:uppercase}
.work-card .go{color:var(--acc);font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;opacity:0;
  transition:opacity .25s}
.work-card:hover .go{opacity:1}
/* 大特写卡 */
.work-card.fx{margin-top:1.4rem}
.work-card.fx .media{aspect-ratio:16/7}
.work-card.fx .tt{font-size:clamp(1.7rem,3.6vw,2.4rem)}
.work-card.fx .row-2{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-top:1rem;flex-wrap:wrap}
/* 3 卡精选 */
.wg{margin-top:clamp(2.6rem,6vh,3.6rem);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3vw,2.4rem)}
.wg .work-card .media{aspect-ratio:16/10}
.wg .work-card.portrait .media{aspect-ratio:3/4}
/* 全片索引 */
.idx{margin-top:clamp(3.6rem,9vh,6rem);border-top:1px solid var(--line-2);padding-top:clamp(1.8rem,4.5vh,2.8rem)}
.idx .cap{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;margin-bottom:1.1rem}
.irow{display:grid;grid-template-columns:3rem 1fr auto;align-items:baseline;gap:1.4rem;border-top:1px solid var(--line);
  padding:.92rem .1rem;transition:padding .3s,background .3s}
.irow:hover{background:rgba(238,240,238,.02);padding-left:.5rem}
.irow .no{font-family:var(--mono);font-size:.92rem;letter-spacing:.1em;color:var(--acc);font-variant-numeric:tabular-nums}
.irow .nm{font-family:var(--serif);font-size:1.5rem;font-weight:600;transition:color .3s}
.irow:hover .nm{color:var(--acc-2)}
.irow .rt{font-family:var(--mono);font-size:.56rem;letter-spacing:.18em;color:var(--ink-3);text-transform:uppercase;text-align:right}
.irow .rt .go{color:var(--acc)}
.irow:last-of-type{border-bottom:1px solid var(--line)}

/* ============ 优势 ============ */
.str-list{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.6rem,3.4vw,3rem);
  border-top:1px solid var(--line);padding-top:clamp(2rem,5vh,3.2rem)}
.str .sn{font-family:var(--mono);font-size:.74rem;letter-spacing:.24em;color:var(--acc)}
.str h3{font-family:var(--serif);font-weight:600;font-size:1.5rem;margin:1.1rem 0 .8rem}
.str p{color:var(--ink-2);font-size:.96rem}

/* ============ 联系 ============ */
.contact{text-align:center;padding:clamp(4.5rem,11vh,8rem) 0}
.contact h2{font-family:var(--serif);font-weight:600;font-size:clamp(2.2rem,6vw,4.2rem);line-height:1.15;
  margin-top:1.4rem;letter-spacing:.02em}
.contact p{color:var(--ink-2);margin:1.4rem auto 0;max-width:44ch;font-size:1.02rem}
.contact .bigmail{display:inline-block;margin-top:2.4rem;font-family:var(--serif);font-size:clamp(1.6rem,5.4vw,3.6rem);
  font-weight:600;letter-spacing:.02em;border-bottom:1px solid var(--line-2);padding-bottom:.25em;transition:border-color .3s,color .3s}
.contact .bigmail:hover{border-color:var(--acc);color:var(--acc-2)}

/* ============ 页脚 ============ */
.footer{border-top:1px solid var(--line-2)}
.footer .wrap{display:flex;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;padding-block:1.6rem;
  font-family:var(--mono);font-size:.56rem;letter-spacing:.18em;color:var(--ink-3);text-transform:uppercase}
.footer a:hover{color:var(--acc)}

/* ============ 详情页(works/*) ============ */
.page-nav{padding-block:1.4rem;border-bottom:1px solid var(--line-2)}
.breadcrumb{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;color:var(--ink-3);text-transform:uppercase}
.breadcrumb a:hover{color:var(--acc)}
.work-hero{padding:clamp(2.6rem,8vh,5.5rem) 0 clamp(1.6rem,4vh,2.6rem)}
.work-hero .tags{display:flex;gap:.5rem;flex-wrap:wrap}
.work-hero .tags span{border:1px solid var(--line);padding:.35em .9em;font-family:var(--mono);font-size:.56rem;
  letter-spacing:.18em;color:var(--ink-2);text-transform:uppercase}
.work-hero .tags span.hl{border-color:rgba(102,210,187,.5);color:var(--acc)}
.work-hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(2.6rem,8vw,6rem);line-height:1.05;
  margin-top:1.6rem;letter-spacing:.02em}
.role-line{margin-top:1.2rem;color:var(--ink-2);font-size:1.05rem;display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap}
.role-line b{color:var(--ink);font-weight:500}
/* player 监视器 */
.player{margin-top:clamp(1.8rem,5vh,3.4rem);border:1px solid var(--line);background:var(--panel)}
.player .mh{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.5rem .8rem;
  border-bottom:1px solid var(--line-2);font-family:var(--mono);font-size:.56rem;letter-spacing:.18em;color:var(--ink-3);text-transform:uppercase}
.player .mh .l{display:flex;align-items:center;gap:.6em}
.player .pv{position:relative;background:#000}
.player video{display:block;width:100%;max-height:82vh;background:#000;aspect-ratio:16/9;object-fit:contain}
.player.vportrait{max-width:min(760px,100%)}
.player.vportrait video{aspect-ratio:9/16}
.player .open{position:absolute;right:.8rem;bottom:.8rem;padding:.6em 1.1em;background:rgba(5,6,10,.72);
  border:1px solid var(--line);font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;color:var(--ink-2);
  backdrop-filter:blur(4px);transition:color .2s,border-color .2s;z-index:2}
.player .open:hover{color:var(--acc);border-color:var(--acc)}
.player .pf{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.55rem .85rem;
  border-top:1px solid var(--line-2);font-family:var(--mono);font-size:.54rem;letter-spacing:.18em;color:var(--ink-3);text-transform:uppercase}
/* 说明 + 元信息 */
.work-detail{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,.62fr);gap:clamp(2.4rem,6vw,5rem);
  align-items:start;padding-block:clamp(3rem,8vh,5.5rem)}
.detail-main h3{display:flex;align-items:baseline;gap:1rem;font-family:var(--serif);font-weight:600;
  font-size:1.5rem;margin:2.2rem 0 .8rem;letter-spacing:.02em}
.detail-main h3 .mono{font-size:.56rem;letter-spacing:.22em}
.detail-main p{color:var(--ink-2);max-width:62ch}
.pdraft{border-left:1px dashed rgba(238,240,238,.3);padding-left:1.1rem;color:var(--ink-3)!important;font-size:.95rem}
.aside-sticky{position:sticky;top:6rem}
.meta-card{border:1px solid var(--line);background:var(--panel)}
.meta-card .mcap{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.6rem .9rem;
  border-bottom:1px solid var(--line-2);font-family:var(--mono);font-size:.56rem;letter-spacing:.2em;color:var(--ink-3);text-transform:uppercase}
.meta-card .mrow{display:flex;justify-content:space-between;gap:1.2rem;padding:.75rem .9rem;border-bottom:1px solid var(--line-2);font-size:.92rem}
.meta-card .mrow:last-child{border-bottom:0}
.meta-card dt{font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;color:var(--ink-3);text-transform:uppercase;padding-top:.3rem;flex:none}
.meta-card dd{color:var(--ink);text-align:right}
.meta-card dd.pending{color:var(--ink-3)}
.work-note{margin-top:1.1rem;border:1px solid var(--line-2);padding:.9rem 1rem;color:var(--ink-3);
  font-size:.85rem;line-height:1.8}
.work-note b{color:var(--acc);font-weight:400}
/* 上一部 / 下一部 */
.prev-next{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-left:0;border-right:0;
  padding-block:clamp(1.6rem,4vh,2.4rem);gap:1px;background:var(--line-2);margin-block:0 var(--sp)}
.prev-next a{display:flex;flex-direction:column;gap:.5rem;padding:.6rem var(--g);background:var(--bg);transition:background .25s}
.prev-next a:hover{background:var(--bg-2)}
.prev-next a.next{text-align:right;align-items:flex-end}
.prev-next .pn{font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;color:var(--ink-3);text-transform:uppercase}
.prev-next .t{font-family:var(--serif);font-size:1.35rem;font-weight:600}
.prev-next a:hover .t{color:var(--acc-2)}
.prev-next a:first-child{border-right:1px solid var(--line-2);padding-left:calc(var(--g) + .4rem)}

/* ============ 平面画廊(design) ============ */
.dg{padding-block:clamp(2rem,6vh,4rem)}
.dg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.6rem,4vw,3.4rem);align-items:start}
.dg-item{position:relative;cursor:zoom-in}
.dg-item .ph{aspect-ratio:3/4;overflow:hidden;border:1px solid var(--line-2);background:var(--panel-2)}
.dg-item .ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.dg-item:hover .ph{border-color:rgba(102,210,187,.5)}
.dg-item .ph img{transform:scale(1)}
.dg-item figcaption{display:flex;justify-content:space-between;gap:1rem;padding:.6rem .1rem .4rem;
  font-family:var(--mono);font-size:.54rem;letter-spacing:.16em;color:var(--ink-3);text-transform:uppercase}
.dg-item.square .ph{aspect-ratio:1/1}
@media(max-width:680px){.dg-grid{grid-template-columns:1fr}}
/* 画廊分区 */
.dg-sec{padding-block:clamp(1.6rem,5vh,3rem)}
.dg-sec + .dg-sec{border-top:1px solid var(--line-2)}
.dg-head{display:flex;align-items:baseline;gap:1rem;font-family:var(--serif);font-weight:600;
  font-size:1.5rem;letter-spacing:.02em;margin:0 0 .5rem}
.dg-head .mono{font-size:.56rem;letter-spacing:.22em}
.dg-sub{color:var(--ink-3);font-size:.9rem;line-height:1.8;max-width:60ch;
  margin:0 0 clamp(1.4rem,4vh,2.2rem)}
/* 长图详情页：1060×14999 那种整页长图按原始比例单列铺开、靠滚动看。
   不套 3/4 裁切（裁完只剩一条缝），也不挂 .dg-item（灯箱里塞一张一万两千像素高的图没法看）。
   宽度上限 850 是为了避开 iOS Safari 的单图解码上限（约 1600 万像素），
   12028×850 ≈ 1022 万像素，留了余量。 */
.dg-long{display:grid;gap:clamp(1.8rem,5vh,3rem)}
.dg-long figure{max-width:850px;margin-inline:auto;border:1px solid var(--line-2);background:var(--panel-2)}
.dg-long img{display:block;width:100%;height:auto}
.dg-long figcaption{display:flex;justify-content:space-between;gap:1rem;padding:.7rem .9rem;
  border-top:1px solid var(--line-2);font-family:var(--mono);font-size:.54rem;letter-spacing:.16em;
  color:var(--ink-3);text-transform:uppercase}
/* 灯箱(平面 + 全屏播放) */
.lightbox{position:fixed;inset:0;z-index:150;background:rgba(5,6,10,.94);display:flex;align-items:center;
  justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s ease;padding:clamp(1rem,4vw,3rem)}
.lightbox.open{opacity:1;pointer-events:auto}
.lightbox .lb-x{position:absolute;top:1.2rem;right:1.4rem;z-index:3;font-family:var(--mono);font-size:1.3rem;
  color:var(--ink-2);width:2.6rem;height:2.6rem;border:1px solid var(--line);transition:color .2s,border-color .2s}
.lightbox .lb-x:hover{color:var(--acc);border-color:var(--acc)}
.lb-inner{max-width:min(1080px,92vw);text-align:center}
.lightbox video{max-width:min(1280px,96vw);max-height:84vh;background:#000}
.lightbox img{max-width:min(1080px,92vw);max-height:82vh;object-fit:contain;margin-inline:auto}
.lb-cap{margin-top:1rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;color:var(--ink-3)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:3rem;height:3rem;border:1px solid var(--line);
  color:var(--ink-2);font-size:1.2rem;transition:color .2s,border-color .2s;background:rgba(5,6,10,.4)}
.lb-nav:hover{color:var(--acc);border-color:var(--acc)}
.lb-prev{left:1.2rem}.lb-next{right:1.2rem}

/* ============ 404 ============ */
.notfound{min-height:72vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:3rem var(--g)}
.notfound .code{font-family:var(--serif);font-weight:600;font-size:clamp(5rem,20vw,13rem);line-height:.9;color:var(--ink)}
.notfound .code span{color:transparent;-webkit-text-stroke:1.5px var(--ink-3)}
.notfound h1{font-family:var(--serif);font-weight:600;font-size:clamp(1.4rem,3.4vw,2.2rem);margin-top:1rem}
.notfound p{color:var(--ink-2);margin-top:.8rem;max-width:40ch}
.notfound .btn{margin-top:2.2rem}

/* ============ 滚动揭示 ============ */
[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
[data-reveal].in{opacity:1;transform:none}

/* ============ 响应式 ============ */
@media(max-width:1000px){
  .split{grid-template-columns:1fr;gap:0}
  .col-left{border-bottom:1px solid var(--line-2);padding-right:0;padding-bottom:3rem}
  .col-right{padding-top:3rem}
  .hero-foot{gap:1.4rem 2.4rem}
}
@media(max-width:920px){.about-grid{grid-template-columns:1fr;gap:3rem}.about-mon{max-width:340px}}
@media(max-width:900px){
  .wg{grid-template-columns:1fr 1fr}
  .str-list{grid-template-columns:1fr 1fr}
  .work-detail{grid-template-columns:1fr;gap:2rem}
  .aside-sticky{position:static}
}
@media(max-width:600px){
  .sec-head{flex-direction:column;align-items:flex-start;gap:1rem}
  .sec-head .note{text-align:left}
  .wg{grid-template-columns:1fr}
  .str-list{grid-template-columns:1fr}
  .facts{flex-direction:column;gap:1.2rem}
  .prev-next{grid-template-columns:1fr}
  .prev-next a:first-child{border-right:0;border-bottom:1px solid var(--line-2);padding-left:var(--g)}
  .work-hero h1{font-size:clamp(2.3rem,13vw,3.4rem)}
  .duo{flex-direction:column;align-items:flex-start;gap:1rem}
  .duo .frame{width:min(168px,62vw)}
  .irow{grid-template-columns:2.4rem 1fr}
  .irow .rt{display:none}
}

/* ============ MOTION(整体受 html.motion-ok 开关;无 JS / 减少动态时自动跳过) ============ */
/* 1. 标题逐字:仅文字在动,容器占位不变,不遮字不影响点击 */
.motion-ok .tx .t-char{opacity:0}
@keyframes txIn{from{opacity:0;transform:translateY(.3em)}to{opacity:1;transform:none}}
.motion-ok .tx.in .t-char,
.motion-ok .intro .tx .t-char,
.motion-ok body.animate .hero .big .t-char{
  animation:txIn .55s var(--ease) both;
  animation-delay:calc(var(--l,0)*150ms + var(--c,0)*15ms);
}
/* 标题自身不再做整块淡入,避免与逐字重复 */
.motion-ok .tx[data-reveal],.motion-ok .tx[data-reveal].in{opacity:1;transform:none;transition:none}
/* 滚动区的逐字标题改用“过渡”而非关键帧:双向滚动时字符能逐字淡出/重现,
   与 intro / 首屏(固定单向)的 keyframe 演出互不影响 */
.motion-ok .tx[data-reveal] .t-char{animation:none;opacity:0;transform:translateY(.3em);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
  transition-delay:calc(var(--l,0)*120ms + var(--c,0)*16ms)}
.motion-ok .tx[data-reveal].in .t-char{animation:none;opacity:1;transform:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease);
  transition-delay:calc(var(--l,0)*120ms + var(--c,0)*16ms)}
@media(max-width:600px){
  .motion-ok .tx.in .t-char,
  .motion-ok .intro .tx .t-char,
  .motion-ok body.animate .hero .big .t-char{
    animation-duration:.45s;
    animation-delay:calc(var(--l,0)*110ms + var(--c,0)*10ms);
  }
}
/* 2. 滚动依次出现:在基础揭示上提一点入位幅度,同组错峰 */
.motion-ok [data-reveal]{opacity:0;transform:translateY(24px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.motion-ok [data-reveal].in{opacity:1;transform:none;transition-delay:calc(var(--d,0)*1ms)}
.motion-ok .stg > [data-reveal].in{transition-delay:calc(var(--ri,0)*80ms)}
/* 3. 卡片悬停放大:只动 transform,不改变布局 */
.motion-ok .work-card .media img,
.motion-ok .dg-item .ph img,
.motion-ok .mon .ph img{transition:transform .9s var(--ease)}
.motion-ok .work-card:hover .media img,
.motion-ok .dg-item:hover .ph img{transform:scale(1.05)}
.motion-ok .mon:hover .ph img{transform:scale(1.02)}
@media(hover:none){
  .motion-ok .work-card:hover .media img,
  .motion-ok .dg-item:hover .ph img,
  .motion-ok .mon:hover .ph img{transform:none}
}

/* ============ COVER 封面演出(更强电影感,仿影视飓风式开场) ============ */
.motion-ok .hero{position:relative}
.motion-ok .intro{transition:opacity .7s var(--ease),filter .45s}
/* 开场:中心信号青闪 + 名字逐字重击入场 */
.motion-ok .intro::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 50% 44%,rgba(102,210,187,.9) 0%,rgba(102,210,187,.2) 30%,transparent 55%);
  opacity:0;animation:coverFlash 1s .08s var(--ease) both}
@keyframes coverFlash{0%{opacity:0;transform:scale(.2)}10%{opacity:.9}45%{opacity:.2}100%{opacity:0;transform:scale(2.2)}}
@keyframes txStamp{0%{opacity:0;transform:translateY(.16em) scale(1.5)}
  62%{opacity:1;transform:translateY(-.05em) scale(.97)}
  100%{opacity:1;transform:none}}
.motion-ok .intro .tx .t-char{animation:txStamp .66s cubic-bezier(.2,.85,.3,1.2) both;
  animation-delay:calc(var(--l,0)*1250ms + var(--c,0)*90ms + .35s)}
@keyframes riseUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes btnPop{0%{transform:scale(.9)}55%{transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes bootIn{0%{filter:brightness(.05);transform:scale(1.08)}
  55%{filter:brightness(.65)}100%{filter:none;transform:scale(1)}}
@keyframes heroWipe{0%{opacity:0;transform:scaleX(0)}12%{opacity:.85}100%{opacity:0;transform:scaleX(1)}}
/* 取景框:开场即描出,轻微呼吸 */
.motion-ok .intro .frame{position:absolute;inset:clamp(.7rem,2.2vmin,1.5rem);pointer-events:none;z-index:2;
  border:1px solid rgba(102,210,187,.3);opacity:0;
  animation:frameIn .7s ease .12s both,framePulse 2.6s ease-in-out 1.1s infinite}
@keyframes frameIn{from{opacity:0;transform:scale(.992)}to{opacity:.65;transform:scale(1)}}
@keyframes framePulse{0%,100%{opacity:.4}50%{opacity:.75}}
/* 收幕:结尾一圈虹膜式收拢,接自动进入 */
.motion-ok .intro .iris{position:absolute;inset:0;pointer-events:none;z-index:6;opacity:0;
  background:radial-gradient(circle at 50% 46%,rgba(11,12,15,0) 0%,rgba(11,12,15,.2) 44%,rgba(11,12,15,.94) 78%,rgba(11,12,15,1) 88%);
  animation:irisIn .75s cubic-bezier(.7,0,.9,.3) 4.35s both}
@keyframes irisIn{from{opacity:0}to{opacity:1}}
.motion-ok .intro .status{opacity:0;animation:riseUp .5s .22s both}
.motion-ok .intro .tagline{opacity:0;animation:riseUp .7s 2.9s both}
.motion-ok .intro .enter{opacity:0;animation:riseUp .55s 3.4s both}
.motion-ok .intro .enter .btn{animation:btnPop .5s 3.72s both}
.motion-ok .intro .skip{opacity:0;animation:riseUp .4s 3.95s both}
/* 首屏:进入前先整体隐场,进入后按分镜依次建好 */
.motion-ok body:not(.intro-done) .hero .hero-top,
.motion-ok body:not(.intro-done) .hero .col-left,
.motion-ok body:not(.intro-done) .hero .col-right,
.motion-ok body:not(.intro-done) .hero .hero-foot{opacity:0}
.motion-ok body.animate .hero::after{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--acc);transform:scaleX(0);transform-origin:left;
  animation:heroWipe .5s .05s var(--ease) both;z-index:3}
.motion-ok body.animate .hero .hero-top{animation:riseUp .4s .02s both}
.motion-ok body.animate .hero .col-left{animation:fadeIn .45s .08s both}
.motion-ok body.animate .hero .big .t-char{animation:txStamp .6s cubic-bezier(.2,.85,.3,1.18) both;
  animation-delay:calc(var(--l,0)*170ms + var(--c,0)*26ms + .14s)}
.motion-ok body.animate .col-right .mon{animation:riseUp .55s .22s both}
.motion-ok body.animate .mon .ph img{animation:bootIn 1.1s .34s backwards}
.motion-ok body.animate .duo{animation:riseUp .5s .5s both}
.motion-ok body.animate .duo .frame img{animation:bootIn 1s .62s backwards}
.motion-ok body.animate .hero .hero-foot{animation:riseUp .5s .66s both}
@media(max-width:600px){
  /* 开场保持桌面同款 5 秒节拍,不再压缩逐字,避免移动端出现空档后接 tagline */
  .motion-ok body.animate .hero .col-left{animation-duration:.45s}
  .motion-ok body.animate .mon .ph img,
  .motion-ok body.animate .duo .frame img{animation-duration:.8s}
}

/* ============ CURSOR 鼠标跟随动效(仅精指针大屏;触摸/减少动态自动不渲染) ============ */
html.motion-ok #cursor-glow,html.motion-ok #cursor-dot{position:fixed;top:0;left:0;
  pointer-events:none;z-index:140;opacity:0;will-change:transform}
@media(hover:hover) and (pointer:fine){
  /* 柔光晕:径向青绿,混色 screen,缓慢跟随,像取景器的光 */
  html.motion-ok #cursor-glow{width:min(34vw,460px);height:min(34vw,460px);
    border-radius:50%;transform:translate(-50%,-50%);
    background:radial-gradient(circle,rgba(102,210,187,.16) 0%,rgba(102,210,187,.07) 42%,transparent 68%);
    mix-blend-mode:screen;transition:opacity .8s var(--ease)}
  /* 光点:细环+中心点,紧密跟随,悬停可点元素时稍放大 */
  html.motion-ok #cursor-dot{width:18px;height:18px;border-radius:50%;
    border:1px solid rgba(102,210,187,.55);transform:translate(-50%,-50%);
    box-shadow:0 0 0 0 rgba(102,210,187,.25),inset 0 0 0 2px rgba(11,12,15,.9);
    transition:opacity .5s var(--ease),border-color .3s,box-shadow .3s,width .3s var(--ease),height .3s var(--ease)}
  html.motion-ok #cursor-dot::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;
    margin:-2px 0 0 -2px;border-radius:50%;background:var(--acc)}
  /* 指针在窗内且动过:渐显;离开窗口则整体隐藏 */
  html.motion-ok.cur-live #cursor-glow{opacity:1}
  html.motion-ok.cur-live #cursor-dot{opacity:.9}
  /* 移到链接/按钮/卡片:光晕亮一点,圆环放大 */
  html.motion-ok.cur-hot #cursor-glow{background:radial-gradient(circle,rgba(102,210,187,.22) 0%,rgba(102,210,187,.1) 42%,transparent 68%)}
  html.motion-ok.cur-hot #cursor-dot{width:30px;height:30px;border-color:rgba(102,210,187,.9);
    box-shadow:0 0 18px rgba(102,210,187,.35),inset 0 0 0 2px rgba(11,12,15,.9)}
  html.motion-ok.cur-leave #cursor-glow,html.motion-ok.cur-leave #cursor-dot{opacity:0}
}
/* --- 详情页富文本正文(intro/列表来自内容后台,排版与视觉归前台) --- */
.detail-main .rich-h3{font-weight:600;letter-spacing:.06em;color:var(--ink);margin:2.4rem 0 .7rem}
.detail-main .rich-list{list-style:none;margin:.5rem 0 1.4rem;padding:0}
.detail-main .rich-list li{position:relative;padding-left:1.35em;margin:.55rem 0;color:var(--ink-2);font-size:.98rem}
.detail-main .rich-list li::before{content:"—";position:absolute;left:0;color:var(--acc)}
.detail-main .rich-list li a,.detail-main .pdraft a{color:var(--acc);text-decoration:underline;text-underline-offset:3px}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;scroll-behavior:auto !important}
  [data-reveal]{opacity:1;transform:none}
  img{transform:none !important}
}
@media print{ .nav,.intro,.footer,.menu-btn{display:none} .lightbox{position:static;opacity:1} }