/* Shared motion language: quiet at rest, precise in response. */
:root{--ease-out:cubic-bezier(.22,1,.36,1);--header-height:84px}
html{scroll-padding-top:calc(var(--header-height) + 24px)}
.site-header{position:fixed;height:var(--header-height);z-index:50;transition:background .35s,border-color .35s;border-bottom:1px solid transparent;background:linear-gradient(#0b0c0dcc,transparent)}
.site-header.is-scrolled,.menu-open .site-header{background:#0b0c0df2;border-color:var(--line);backdrop-filter:blur(18px)}
.site-header nav a{position:relative;border:0!important;transition:color .25s}
.site-header nav a::after{content:'';position:absolute;bottom:7px;left:0;right:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-out)}
.site-header nav a:hover::after,.site-header nav a[aria-current]::after{transform:scaleX(1)}
.site-header nav a[aria-current] span{color:var(--ink)}
.reading-progress{position:fixed;inset:0 auto auto 0;width:100%;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;z-index:60;pointer-events:none}
.hero{height:100svh;min-height:740px;max-height:1100px}
.hero-copy{padding-top:clamp(140px,18vh,195px);will-change:transform;transform:translate3d(0,var(--copy-shift,0px),0);opacity:var(--copy-opacity,1)}
.hero h1{font-size:clamp(96px,11vw,158px)}
.orbital-stage{transform:translate3d(var(--scene-x,0px),var(--scene-y,0px),0) scale(var(--scene-scale,1));will-change:transform}
.hero-foot{bottom:30px}
.hero-foot>span:last-child{padding-right:200px}
.scroll-cue{position:absolute;right:56px;bottom:25px;z-index:4;display:flex;align-items:center;gap:15px;padding:12px 0;font:14px 'Pixel',monospace;color:#b7bdbe}
.scroll-cue i{width:48px;height:1px;background:#424749;position:relative;overflow:hidden}
.scroll-cue i::after{content:'';position:absolute;width:18px;height:1px;background:#ecebe7;animation:scroll-tick 2s var(--ease-out) infinite}
@keyframes scroll-tick{0%{transform:translateX(-20px)}75%,100%{transform:translateX(50px)}}
.hero-explore,.text-link,.back-link,.image-download{transition:border-color .25s,color .25s,background .25s}
.hero-explore:hover,.text-link:hover,.back-link:hover{border-color:#fff;background:#ffffff09}
.hero-explore span{transition:transform .4s var(--ease-out),color .3s}.hero-explore:hover span{transform:translateX(8px);color:#fff}
.section{scroll-margin-top:0}
.section-heading{position:relative;padding-bottom:24px;margin-bottom:36px}
.section-heading::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);transform-origin:left;transform:scaleX(var(--heading-progress,1));transition:transform .8s var(--ease-out)}
.reveal-pending{opacity:0;transform:translateY(24px)}
.reveal-ready{transition:opacity .75s var(--ease-out),transform .85s var(--ease-out);transition-delay:var(--reveal-delay,0ms)}
.reveal-ready.is-visible{opacity:1;transform:translateY(0)}
.project-row{gap:clamp(32px,5.5vw,80px);padding-block:64px}
.project-photo{position:relative;isolation:isolate;aspect-ratio:1.42;outline-offset:6px}
.project-photo img{height:100%;object-fit:cover;transform:scale(1.035) translateY(var(--photo-y,0px));transition:transform .8s var(--ease-out),filter .6s,opacity .4s;filter:saturate(.55)}
.project-photo:hover img,.project-photo:focus-visible img{opacity:1;filter:saturate(1);transform:scale(1.065) translateY(var(--photo-y,0px))}
.project-photo::after{content:'查看案例';position:absolute;right:20px;bottom:20px;padding:10px 18px;background:#ecebe7;color:#101214;font:18px 'Pixel',monospace;transform:translateY(8px);opacity:0;transition:opacity .3s,transform .45s var(--ease-out)}
.project-photo:hover::after,.project-photo:focus-visible::after{opacity:1;transform:translateY(0)}
.project-copy h3 a{background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .5s var(--ease-out)}
.project-row:focus-within .project-copy h3 a,.project-row:hover .project-copy h3 a{background-size:100% 1px}
.project-notes{border-left:1px solid #424749;padding-left:18px}
.work-item>a:first-child{overflow:hidden}.work-item>a:first-child img{transition:transform .7s var(--ease-out),filter .6s;filter:saturate(.75)}
.work-item>a:first-child:hover img,.work-item>a:first-child:focus-visible img{transform:scale(1.025);filter:saturate(1)}
.timeline article{transition:border-color .3s,background .3s}.timeline article:hover{border-color:#899092;background:#ffffff03}
.button{min-height:46px;transition:background .25s,color .25s,transform .2s}
.button:hover,.button:focus-visible{background:var(--ink);color:var(--bg)}.button:active{transform:scale(.97)}
.email-link{overflow-wrap:anywhere;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:10px;text-decoration-thickness:1px;transition:text-decoration-color .3s}.email-link:hover{text-decoration-color:currentColor}
.case-index{top:calc(var(--header-height) + 20px);max-height:calc(100svh - var(--header-height) - 40px);overflow:auto;padding-top:16px}
.case-index a{position:relative;padding-left:14px;border-left:1px solid var(--line);transition:border-color .25s,color .25s}
.case-index a[aria-current]{border-color:var(--ink);color:var(--ink)}
.case-content section{scroll-margin-top:0}
.lightbox[open]{animation:lightbox-enter .25s ease-out}.lightbox-close,.lightbox-prev,.lightbox-next{min-height:44px;min-width:44px;transition:background .2s}.lightbox-close:hover,.lightbox-prev:hover,.lightbox-next:hover{background:#ffffff14}
@keyframes lightbox-enter{from{opacity:0}to{opacity:1}}
@media(min-width:681px) and (max-height:800px){.hero{min-height:700px}.hero-copy{padding-top:130px}.hero h1{font-size:clamp(96px,9vw,130px);margin-block:24px}.hero-explore{margin-top:16px}}
@media(max-width:1000px){.scroll-cue{right:32px}.hero-foot>span:last-child{display:none}}
@media(max-width:680px){
 :root{--header-height:72px}
 .site-header{height:72px;padding-inline:20px}.wordmark{font-size:18px}.wordmark span{font-size:14px}
 .menu-toggle{border:1px solid #4c5254;min-width:64px;min-height:44px;padding:6px 12px;z-index:2;transition:background .25s,color .25s}.menu-toggle[aria-expanded=true]{background:var(--ink);color:var(--bg)}
 .site-header nav{display:flex;flex-direction:column;justify-content:flex-start;position:fixed;top:72px;bottom:auto;height:calc(100dvh - 72px);left:0;right:0;padding:30px 20px;background:#0b0c0d;gap:0;overflow:auto;visibility:hidden;opacity:0;transform:translateY(-12px);pointer-events:none;transition:opacity .3s,transform .4s var(--ease-out),visibility .3s}
 .site-header nav[data-open=true]{visibility:visible;opacity:1;transform:none;pointer-events:auto}
 .site-header nav a{font-size:36px;display:flex;align-items:baseline;gap:28px;padding:24px 8px;border-bottom:1px solid var(--line)!important;transform:translateY(14px);transition:transform .5s var(--ease-out),color .25s}
 .site-header nav[data-open=true] a{transform:none}.site-header nav a:nth-child(2){transition-delay:35ms}.site-header nav a:nth-child(3){transition-delay:70ms}.site-header nav a:nth-child(4){transition-delay:105ms}
 .site-header nav span{display:inline;font-size:18px}.site-header nav a::after{display:none}.site-header nav a[aria-current]{color:#fff;background:#ffffff07}
 body.menu-open{overflow:hidden}
 .hero{height:100svh;min-height:780px;max-height:960px}.hero-copy{padding-top:118px}.hero h1{font-size:clamp(60px,18.4vw,76px);margin:26px 0}.hero-byline{margin-top:22px}.hero-explore{margin-top:22px}
 .orbital-stage{inset:390px -15% 0 3%;height:420px;opacity:.85}.hero-foot{bottom:24px}.scroll-cue{right:20px;bottom:19px;font-size:14px;gap:10px}.scroll-cue i{width:28px}
 .section-heading{padding-bottom:20px;margin-bottom:30px}.project-row{gap:26px;padding-block:40px}.project-photo{aspect-ratio:1.35}.project-photo::after{opacity:1;transform:none;right:12px;bottom:12px;font-size:16px;padding:7px 12px}
 .project-copy h3{font-size:27px}.project-notes{padding-left:14px}.reveal-pending{transform:translateY(16px)}
 .case-index{display:flex;position:relative;top:auto;max-height:none;flex-direction:row;gap:10px;overflow:auto;padding:12px 0 20px;margin-bottom:16px;scrollbar-width:thin}.case-index .eyebrow{display:none}.case-index a{flex-shrink:0;font-size:16px;border:1px solid var(--line);padding:7px 12px}.case-index a[aria-current]{background:#ecebe7;color:#0b0c0d;border-color:#ecebe7}
 .email-link{font-size:clamp(24px,7.8vw,33px)}.file-size,.about-portrait figcaption,.site-footer{font-size:12px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-copy,.orbital-stage,.project-photo img,.reveal-pending{transform:none!important;opacity:1!important}.reveal-ready{transition:none!important}*,*::before,*::after{animation:none!important;transition:none!important}}
/* Lunar playground: textured surface and an explorable point-cloud view. */
.orbital-stage{inset:5% 1% 9% 40%;height:auto;mask-image:none;-webkit-mask-image:none;z-index:1}
#moon-canvas{cursor:grab;touch-action:pan-y;outline-offset:-10px}
.orbital-stage.is-dragging #moon-canvas{cursor:grabbing}
.hero-copy{pointer-events:none}.hero-copy a{pointer-events:auto}
.moon-controls{position:absolute;z-index:5;right:7%;bottom:100px;width:280px;color:#aab3ba}
.moon-controls[hidden]{display:none}.moon-caption{display:flex;justify-content:space-between;border-top:1px solid #48515a;padding-top:13px;font:13px 'Pixel',monospace;letter-spacing:.05em}.moon-mode{color:#edf2f5}.moon-controls p{font-size:12px;margin:10px 0 15px;letter-spacing:.03em}
.moon-actions{display:flex;gap:10px}.moon-actions button{background:#0b0c0d80;color:#dce3e8;border:1px solid #4a535b;font:16px 'Pixel',monospace;padding:9px 15px;min-height:44px;transition:background .25s,color .25s,border-color .25s}.moon-actions button:hover,.moon-actions button[aria-pressed=true]{background:#dce3e8;color:#0b0c0d;border-color:#dce3e8}
@media(min-width:681px) and (max-width:1000px){.orbital-stage{inset:16% -7% 12% 37%}.moon-controls{right:5%;bottom:88px;width:250px}.hero h1{font-size:96px}}
@media(max-width:680px){.hero{height:1020px;min-height:1020px;max-height:none}.orbital-stage{inset:440px -3% auto 3%;height:390px;opacity:1}.moon-controls{left:24px;right:24px;bottom:84px;width:auto}.moon-caption{font-size:13px}.moon-controls p{font-size:13px}.moon-actions button{font-size:16px}.hero-foot{bottom:26px}.moon-controls p{margin:8px 0 12px}}