@charset "UTF-8";
/* One scroll position controls a single shared camera stage. */
.archive-handoff{display:none}
.sequence-on .scroll-sequence{position:relative;height:600svh;background:white}
.sequence-on .sequence-stage{position:sticky;top:0;height:100svh;min-height:0;overflow:hidden;isolation:isolate;background:white;z-index:2;--reframe:0;--collage:0;--headline-out:0;--hero-out:0;--world-x:53;--world-y:0;--world-width:0;--world-height:100;--world-cut:96;--world-tilt:0;--world-in:0;--world-labels:0;--archive-in:0;--archive-progress:0;--archive-mix:0;--scene-progress:0}
.sequence-on .sequence-panel{position:absolute;inset:0;height:100%;background:transparent;min-height:0;pointer-events:none}
.sequence-on .hero-route{z-index:1;--reframe:inherit;--collage:inherit;--headline-out:inherit;--hero-out:inherit;--scene-progress:inherit}
.sequence-on .world-route{z-index:3;--scene-progress:inherit}
.sequence-on .sequence-stage{--world-exit:0}
.sequence-on .sequence-stage{--cine-dolly:0;--cine-world-depth:0;--cine-edge:0;--cine-title-split:0;--cine-title-a:0;--cine-title-b:0;--cine-title-c:0}
.sequence-on .sequence-panel>.stage{position:absolute;inset:0;height:100%;min-height:0;background:transparent;overflow:visible}
.sequence-on .sequence-panel a{pointer-events:auto}
.sequence-on .hero-visual{left:calc(var(--reframe) * 40%);top:calc(var(--reframe) * 60%);width:calc(100% - var(--reframe) * 76%);height:calc(100% - var(--reframe) * 64%);right:auto;bottom:auto;opacity:calc(1 - var(--hero-out));transform:translateX(calc(var(--hero-out) * -240px)) rotate(calc(var(--hero-out) * -4deg));filter:blur(calc(var(--hero-out) * 3px));clip-path:polygon(0 0,calc(100% - var(--reframe) * 38px) 0,100% calc(var(--reframe) * 38px),100% 100%,calc(var(--reframe) * 38px) 100%,0 calc(100% - var(--reframe) * 38px))}
.sequence-on .hero-copy{pointer-events:none}
.sequence-on .hero-copy a{pointer-events:auto}
/* The three real text lines separate at different speeds; the H1 stays semantic. */
.sequence-on .hero-headline>span{transform-origin:50% 50%;clip-path:inset(0 0 calc(var(--cine-line) * 100%) 0);opacity:calc(1 - var(--cine-line));will-change:transform,opacity,clip-path}
.sequence-on .hero-headline>span:nth-child(1){--cine-line:var(--cine-title-a);transform:perspective(1200px) translate3d(calc(var(--cine-line) * -155px),calc(var(--cine-line) * -95px),calc(var(--cine-line) * 100px)) rotateY(calc(var(--cine-line) * -13deg)) rotateZ(calc(var(--cine-line) * -5deg))}
.sequence-on .hero-headline>span:nth-child(2){--cine-line:var(--cine-title-b);transform:perspective(1200px) translate3d(calc(var(--cine-line) * 185px),calc(var(--cine-line) * 35px),calc(var(--cine-line) * 145px)) rotateY(calc(var(--cine-line) * 16deg)) rotateZ(calc(var(--cine-line) * 5deg))}
.sequence-on .hero-headline>span:nth-child(3){--cine-line:var(--cine-title-c);transform:perspective(1200px) translate3d(calc(var(--cine-line) * -55px),calc(var(--cine-line) * 145px),calc(var(--cine-line) * 65px)) rotateX(calc(var(--cine-line) * -9deg)) rotateZ(calc(var(--cine-line) * -4deg))}
.sequence-on .story-copy{left:var(--content-left);top:14%;width:49%;opacity:calc(var(--reframe) * (1 - var(--hero-out)));transform:translateY(calc((1 - var(--reframe)) * 65px - var(--hero-out) * 100px));color:var(--ink);z-index:2}
.sequence-on .story-copy h2{font-family:PortfolioDisplay,"Microsoft YaHei",sans-serif;font-weight:900;font-size:clamp(48px,5.2vw,80px);line-height:1.13;letter-spacing:-.045em;margin:22px 0 20px}
.sequence-on .story-copy>p:last-of-type{font-size:16px;max-width:27em}
.sequence-on .story-art-small,.sequence-on .story-art-wide{bottom:auto;opacity:calc(var(--collage) * (1 - var(--hero-out)));clip-path:polygon(0 0,calc(100% - 40px) 0,100% 40px,100% 100%,40px 100%,0 calc(100% - 40px));filter:blur(calc(var(--hero-out) * 2px))}
.sequence-on .story-art-small{left:69%;top:9%;width:26%;height:82%;transform:perspective(1600px) translate3d(calc(var(--hero-out) * 160px),calc((1 - var(--collage)) * 150px - var(--hero-out) * 140px),0) rotateY(calc((1 - var(--collage)) * -11deg + var(--hero-out) * 7deg)) rotateZ(calc(-1deg + var(--hero-out) * 4deg));transform-origin:50% 50%}
.sequence-on .story-art-small img{object-position:50% 40%}
.sequence-on .story-art-wide{left:8.5%;top:50%;width:20%;height:18%;transform:perspective(1400px) translate3d(calc(var(--hero-out) * -150px),calc((1 - var(--collage)) * 100px + var(--hero-out) * 80px),0) rotateY(calc((1 - var(--collage)) * 12deg - var(--hero-out) * 6deg)) rotateZ(-2deg);clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%)}
.sequence-on .world-visual{inset:auto;left:calc(var(--world-x) * 1%);top:calc(var(--world-y) * 1%);width:calc(var(--world-width) * 1%);height:calc(var(--world-height) * 1%);opacity:var(--world-in);z-index:0;transform:perspective(1400px) rotateY(calc(var(--world-tilt) * 1deg)) rotateZ(calc(var(--world-tilt) * .14deg));transform-origin:50% 50%;--folder-cut:calc(var(--world-cut) * (1 - var(--archive-progress)) * 1px);--archive-cut:calc(var(--archive-progress) * 52px);clip-path:polygon(0 0,calc(100% - var(--folder-cut)) 0,100% var(--folder-cut),100% calc(100% - var(--archive-cut)),calc(100% - var(--archive-cut)) 100%,var(--folder-cut) 100%,0 calc(100% - var(--folder-cut)));will-change:width,height,transform,clip-path}
.sequence-on .world-title{left:calc(var(--content-left) - var(--world-x) * 1vw);top:calc(13svh - var(--world-y) * 1svh);opacity:calc(var(--world-labels) * (1 - var(--archive-progress)));transform:translateY(calc((1 - var(--world-labels)) * 42svh - var(--archive-progress) * 30svh))}
.sequence-on .world-copy{left:calc(var(--content-left) - var(--world-x) * 1vw);bottom:calc(12svh - (100 - var(--world-y) - var(--world-height)) * 1svh);opacity:calc(var(--world-labels) * (1 - var(--archive-progress)));transform:translateY(calc((1 - var(--world-labels)) * 60px));width:min(580px,calc(100vw - var(--content-left) - var(--content-right)))}
.sequence-on .world-grid{opacity:calc(.18 * var(--world-labels) * (1 - var(--archive-progress)))}
.sequence-on .world-orbit{opacity:calc(.7 * var(--world-labels) * (1 - var(--archive-progress)))}
/* Keep the outgoing art saturated; the portal occludes it before it fades. */
.sequence-on .hero-visual{opacity:calc(1 - clamp(0,(var(--hero-out) - .7) * 3.33333,1));transform:perspective(1500px) translate3d(calc(var(--hero-out) * -80vw),0,0) rotateY(calc(var(--reframe) * -4deg - var(--hero-out) * 5deg)) rotateZ(calc(var(--reframe) * 1deg - var(--hero-out) * 4deg))}
.sequence-on .story-copy{opacity:calc(var(--reframe) * (1 - clamp(0,(var(--hero-out) - .7) * 3.33333,1)))}
.sequence-on .story-art-small,.sequence-on .story-art-wide{opacity:calc(var(--collage) * (1 - clamp(0,(var(--hero-out) - .7) * 3.33333,1)))}
.sequence-on .world-title{left:max(calc(var(--content-left) - var(--world-x) * 1vw),3vw);opacity:calc(var(--world-in) * (1 - var(--archive-progress)));transform:translateY(calc((1 - var(--world-labels)) * 42svh - var(--world-exit) * 26svh - var(--archive-progress) * 30svh))}
.sequence-on .world-copy{opacity:calc(var(--world-labels) * max(0,1 - var(--world-exit) * 3))}
.sequence-on .world-grid{opacity:calc(.18 * var(--world-labels) * max(0,1 - var(--world-exit) * 2))}
.sequence-on .world-orbit{opacity:calc(.7 * var(--world-labels) * max(0,1 - var(--world-exit) * 2))}
.sequence-on .world-orbit{transform:perspective(1000px) rotateX(calc(var(--cine-world-depth) * 9deg)) rotateZ(calc(var(--cine-world-depth) * 44deg));transform-origin:50% 50%}
.sequence-on .world-grid{background-position:calc(var(--cine-world-depth) * 14px) calc(var(--cine-world-depth) * -21px)}
.sequence-on .archive-handoff{display:block;position:absolute;inset:0;z-index:2;opacity:var(--archive-in);pointer-events:none;overflow:hidden}
.sequence-on .archive-handoff>.works{margin:0;position:relative;min-height:100svh}
.sequence-on .archive-handoff .archive-heading{transform:translateY(calc((1 - var(--archive-in)) * 80px))}
.sequence-on .archive-handoff .project-portrait{transform:translateY(calc((1 - var(--archive-in)) * 130px)) rotate(calc((1 - var(--archive-in)) * 5deg));transform-origin:50% 100%}
.sequence-on .archive-handoff .case-content{display:none}
.sequence-on .archive-handoff .text-project,.sequence-on .archive-handoff .concept-process{opacity:clamp(0,calc((var(--archive-progress) - .1) * 1.111111),1)}
.sequence-on .archive-handoff .project-art img{opacity:calc(1 - clamp(0,var(--archive-progress) * 10,1))}
.sequence-on main>.works{position:relative;z-index:1;margin-top:-100svh;scroll-margin-top:0}
.sequence-on body[data-theme="light"]:not([data-chapter="about"]) .hud-header{background:white;color:var(--ink)}
/* A preference change returns the complete site to ordinary document flow. */
.motion-ready:not(.sequence-on) .hero-route,.motion-ready:not(.sequence-on) .world-route{height:auto}
.motion-ready:not(.sequence-on) .stage{position:relative}
.motion-ready:not(.sequence-on) .hero-stage{height:auto}
.motion-ready:not(.sequence-on) .hero-visual{inset:0;width:100%;height:100svh;min-height:640px;clip-path:none;transform:none;filter:none;opacity:1}
.motion-ready:not(.sequence-on) .hero-copy{position:relative;height:100svh;min-height:640px}
.motion-ready:not(.sequence-on) .hero-headline>span,.motion-ready:not(.sequence-on) .hero-intro,.motion-ready:not(.sequence-on) .hero-action,.motion-ready:not(.sequence-on) .scroll-cue{opacity:1;transform:none}
.motion-ready:not(.sequence-on) .story-copy{position:relative;left:auto;top:auto;padding:70px var(--content-right) 70px var(--content-left);width:auto;opacity:1;transform:none;background:white}
.motion-ready:not(.sequence-on) .story-art-small,.motion-ready:not(.sequence-on) .story-art-wide{display:none}
.motion-ready:not(.sequence-on) [data-reveal]{opacity:1;transform:none}
@media(max-width:820px){
 .sequence-on .hero-headline>span:nth-child(1){transform:translate(calc(var(--cine-line) * -75px),calc(var(--cine-line) * -55px)) rotate(calc(var(--cine-line) * -3deg))}
 .sequence-on .hero-headline>span:nth-child(2){transform:translate(calc(var(--cine-line) * 90px),calc(var(--cine-line) * 22px)) rotate(calc(var(--cine-line) * 3deg))}
 .sequence-on .hero-headline>span:nth-child(3){transform:translate(calc(var(--cine-line) * -25px),calc(var(--cine-line) * 80px)) rotate(calc(var(--cine-line) * -2deg))}
 .sequence-on .scroll-sequence{height:520svh}
 .sequence-on .hero-visual{left:calc(var(--reframe) * 24%);top:calc(var(--reframe) * 64%);width:calc(100% - var(--reframe) * 62%);height:calc(100% - var(--reframe) * 72%)}
 .sequence-on .story-copy{left:var(--content-left);top:14%;width:43%}
 .sequence-on .story-copy h2{font-size:clamp(29px,5.2vw,44px);margin:18px 0 17px}
 .sequence-on .story-copy>p:last-of-type{font-size:12px;max-width:18em}
 .sequence-on .story-art-small{left:66%;top:12%;width:30%;height:58%;clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,24px 100%,0 calc(100% - 24px))}
 .sequence-on .story-art-wide{left:12%;top:49%;width:30%;height:17%}
 .sequence-on .world-visual{--archive-cut:calc(var(--archive-progress) * 30px)}
 .sequence-on .world-title{top:calc(15svh - var(--world-y) * 1svh)}
 .sequence-on .world-orbit{opacity:calc(.45 * var(--world-labels) * max(0,1 - var(--world-exit) * 2))}
}
@media(max-width:500px){
 .sequence-on .hero-visual{left:calc(var(--reframe) * 18%);top:calc(var(--reframe) * 65%);width:calc(100% - var(--reframe) * 58%);height:calc(100% - var(--reframe) * 72%)}
 .sequence-on .story-copy{width:35%;top:14%}
 .sequence-on .story-copy h2{font-size:27px;line-height:1.25}
 .sequence-on .story-copy>p:last-of-type{font-size:11px}
 .sequence-on .story-art-small{left:59%;top:13%;width:36%;height:48%}
 .sequence-on .story-art-wide{left:18%;top:49%;width:28%;height:15%}
}