:root{--ink:#090909;--paper:#f5f4f0;--white:#fff;--muted:#737373;--line:rgba(9,9,9,.14);--accent:#b71018;--shell:min(1540px,calc(100vw - 72px));--sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:400;-webkit-font-smoothing:antialiased}body.lock{overflow:hidden}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}button{font:inherit;color:inherit}.shell{width:var(--shell);margin:auto}.site-header{position:fixed;z-index:60;top:0;left:0;right:0;height:72px;background:rgba(245,244,240,.88);backdrop-filter:blur(20px);border-bottom:1px solid transparent;transition:.35s}.site-header.scrolled{border-color:var(--line)}.nav{height:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}.brand{font-size:13px;font-weight:700;letter-spacing:.08em}.nav-links{display:flex;gap:30px;font-size:12px}.nav-links a,.nav-mail{transition:opacity .2s}.nav-links a:hover,.nav-mail:hover{opacity:.5}.nav-mail{justify-self:end;font-size:12px}.menu-button{display:none;border:0;background:transparent;font-size:22px}.mobile-menu{display:none}
.hero{min-height:100svh;padding-top:72px;background:#080808;color:#fff;overflow:hidden}.hero-inner{width:var(--shell);min-height:calc(100svh - 72px);margin:auto;position:relative;display:grid;place-items:center;padding:70px 0}.hero-type{position:absolute;inset:auto 0;top:50%;transform:translateY(-50%);font-size:clamp(105px,17vw,290px);line-height:.74;letter-spacing:-.085em;font-weight:760;text-align:center;white-space:nowrap;color:#fff;z-index:0}.hero-poster{position:relative;z-index:2;width:min(58vw,760px);max-height:78svh;object-fit:contain;box-shadow:none;filter:drop-shadow(0 36px 55px rgba(0,0,0,.5))}.hero-topline,.hero-bottomline{position:absolute;z-index:3;left:0;right:0;display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.68)}.hero-topline{top:28px}.hero-bottomline{bottom:26px}.hero-bottomline strong{font-size:16px;letter-spacing:0;text-transform:none;color:#fff;font-weight:500}.hero-scroll{display:flex;align-items:center;gap:9px}.hero-scroll:before{content:"";width:42px;height:1px;background:currentColor}
.statement{padding:clamp(120px,15vw,235px) 0}.statement-grid{display:grid;grid-template-columns:1fr 3.1fr;gap:50px}.eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:9px 0 0}.statement h2{font-size:clamp(52px,7.4vw,124px);line-height:.94;letter-spacing:-.068em;margin:0;max-width:1320px;font-weight:620}.statement h2 span{color:#aaa}.statement-meta{grid-column:2;display:grid;grid-template-columns:1.2fr 1fr;gap:50px;margin-top:55px;padding-top:28px;border-top:1px solid var(--line)}.statement-meta p{font-size:clamp(18px,1.55vw,25px);line-height:1.55;margin:0;max-width:680px}.micro-list{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 35px;font-size:12px;color:var(--muted)}.micro-list span{padding-bottom:12px;border-bottom:1px solid var(--line)}
.projects{background:#fff}.project{min-height:100svh;border-top:1px solid var(--line);padding:clamp(80px,9vw,145px) 0;display:flex;align-items:center}.project-grid{display:grid;grid-template-columns:minmax(240px,.72fr) minmax(0,2.28fr);gap:clamp(45px,7vw,120px);align-items:center}.project-copy{align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;padding:4px 0}.project-no{font-size:11px;letter-spacing:.13em;color:var(--muted);text-transform:uppercase}.project-copy h3{font-size:clamp(48px,6.5vw,106px);line-height:.9;letter-spacing:-.07em;margin:30px 0 22px;font-weight:620}.project-copy p{font-size:15px;line-height:1.7;color:var(--muted);max-width:390px}.project-link{font-size:13px;display:inline-flex;align-items:center;gap:13px;margin-top:35px}.project-link:after{content:"↗";font-size:18px}.project-stage{min-height:min(76svh,880px);background:#f0efeb;display:grid;place-items:center;padding:clamp(28px,5vw,80px);overflow:hidden}.project-stage.dark{background:#101010}.project-stage.red{background:#ae1018}.project-stage.blue{background:#dce9f4}.project-stage.blush{background:#eee0de}.poster-set{height:min(66svh,720px);width:100%;display:flex;justify-content:center;align-items:center;gap:clamp(14px,2.2vw,36px)}.poster-set img{height:100%;width:auto;max-width:32%;object-fit:contain;box-shadow:0 22px 60px rgba(0,0,0,.2)}.poster-set img:nth-child(2){height:88%}.project:nth-child(even) .project-grid{grid-template-columns:minmax(0,2.28fr) minmax(240px,.72fr)}.project:nth-child(even) .project-copy{grid-column:2;grid-row:1}.project:nth-child(even) .project-stage{grid-column:1;grid-row:1}
.archive{padding:clamp(120px,14vw,220px) 0;background:var(--paper)}.archive-head{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:end;margin-bottom:70px}.archive h2{font-size:clamp(62px,8vw,132px);line-height:.86;letter-spacing:-.075em;margin:0;font-weight:620}.archive-head p{justify-self:end;max-width:460px;font-size:16px;line-height:1.7;color:var(--muted);margin:0}.uniform-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,24px)}.preview-card{min-width:0}.preview-frame{aspect-ratio:.72;background:#e8e7e3;overflow:hidden}.preview-frame img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .65s cubic-bezier(.2,.8,.2,1)}.preview-card:hover img{transform:scale(1.02)}.preview-meta{display:flex;justify-content:space-between;gap:12px;padding-top:11px;font-size:11px}.preview-meta span:last-child{color:var(--muted)}.archive-cta{margin-top:65px;padding-top:28px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.archive-cta strong{font-size:clamp(30px,4vw,65px);letter-spacing:-.045em;font-weight:580}.round-link{width:86px;height:86px;border-radius:50%;border:1px solid var(--ink);display:grid;place-items:center;font-size:25px;transition:.25s}.round-link:hover{background:var(--ink);color:var(--paper)}
.about{padding:clamp(120px,14vw,220px) 0;background:#0b0b0b;color:#fff}.about-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(55px,8vw,145px)}.about-profile img{width:min(100%,600px);aspect-ratio:.82;object-fit:cover;object-position:center top;filter:grayscale(100%)}.about-copy h2{font-size:clamp(58px,7vw,118px);line-height:.9;letter-spacing:-.07em;margin:0 0 55px;font-weight:600}.about-copy>p{font-size:clamp(19px,1.7vw,28px);line-height:1.55;color:#c5c5c5;max-width:780px}.facts{margin-top:70px;border-top:1px solid #333}.fact{display:grid;grid-template-columns:120px 1fr;gap:30px;padding:22px 0;border-bottom:1px solid #333;font-size:13px}.fact span{color:#777}.about-actions{display:flex;gap:14px;margin-top:42px}.button{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 22px;border:1px solid currentColor;border-radius:999px;font-size:12px}.button.fill{background:#fff;color:#090909;border-color:#fff}
.contact{padding:clamp(120px,16vw,250px) 0 40px;background:var(--accent);color:#fff}.contact h2{font-size:clamp(78px,13vw,216px);line-height:.78;letter-spacing:-.085em;margin:0;font-weight:650}.contact p{font-size:18px;max-width:520px;line-height:1.65;margin:55px 0}.contact-links{display:flex;gap:20px;flex-wrap:wrap;font-size:clamp(17px,2vw,28px)}.footer{margin-top:140px;padding-top:20px;border-top:1px solid rgba(255,255,255,.38);display:flex;justify-content:space-between;font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.page-hero{padding:165px 0 95px}.page-hero-grid{display:grid;grid-template-columns:1.4fr .6fr;gap:50px;align-items:end}.page-title{font-size:clamp(76px,12vw,198px);line-height:.78;letter-spacing:-.085em;margin:0;font-weight:650}.page-lead{font-size:17px;line-height:1.65;color:var(--muted);margin:0 0 8px}.filters-wrap{position:sticky;z-index:35;top:72px;background:rgba(245,244,240,.92);backdrop-filter:blur(18px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.filters{display:flex;gap:28px;overflow:auto;padding:19px 0;scrollbar-width:none}.filter{padding:0;border:0;background:none;font-size:12px;white-space:nowrap;cursor:pointer;color:var(--muted)}.filter.active{color:var(--ink);font-weight:650}.gallery-shell{padding:55px 0 150px}.work-grid{display:block;column-count:4;column-gap:18px}.work-card{cursor:zoom-in;min-width:0;width:100%;display:inline-block;break-inside:avoid;margin:0 0 38px}.work-card[hidden]{display:none}.work-frame{aspect-ratio:.72;background:#e6e5e1;overflow:hidden}.work-frame img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .65s}.work-card:hover img{transform:scale(1.02)}.work-grid .work-frame{aspect-ratio:auto;background:#e9e8e4;overflow:hidden}.work-grid .work-frame img{display:block;width:100%;height:auto;object-fit:contain;transform:none;transition:opacity .35s ease}.work-grid .work-card:hover img{transform:none;opacity:.94}.work-meta{display:flex;justify-content:space-between;gap:8px;margin-top:10px;font-size:10px}.work-meta strong{font-weight:560;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.work-meta span{color:var(--muted);white-space:nowrap}.lightbox{position:fixed;z-index:100;inset:0;background:rgba(5,5,5,.95);display:none;align-items:flex-start;justify-content:center;padding:76px 24px 24px;overflow:auto}.lightbox.open{display:flex}.lightbox-inner{max-width:min(1120px,100%)}.lightbox img{margin:auto;width:auto;max-width:100%;height:auto}.lightbox-close{position:fixed;right:22px;top:18px;width:45px;height:45px;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.3);color:#fff;border-radius:50%;font-size:19px;cursor:pointer}.lightbox-caption{color:#aaa;font-size:11px;text-align:center;padding:15px 0 30px}
.case-hero{padding:165px 0 100px}.case-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.case-title{font-size:clamp(72px,11vw,184px);line-height:.8;letter-spacing:-.085em;margin:28px 0 60px;font-weight:650}.case-info{display:grid;grid-template-columns:1.4fr .6fr;gap:80px;padding-top:28px;border-top:1px solid var(--line)}.case-info>p{font-size:clamp(19px,1.8vw,29px);line-height:1.55;margin:0;max-width:880px}.case-data{display:grid;grid-template-columns:1fr 1fr;gap:18px;font-size:11px}.case-data span{display:block;color:var(--muted);margin-bottom:5px}.case-cover{height:auto;min-height:0;background:#111;display:flex;justify-content:center;align-items:flex-start;padding:clamp(48px,6vw,96px) 24px;overflow:hidden}.case-cover img{display:block;width:min(520px,100%);height:auto;max-width:100%;max-height:none;object-fit:contain;box-shadow:0 30px 80px rgba(0,0,0,.38)}.case-gallery{padding:clamp(80px,10vw,150px) 0}.case-grid{display:block;column-count:3;column-gap:clamp(15px,2vw,30px)}.case-item{cursor:zoom-in;display:inline-block;width:100%;break-inside:avoid;margin:0 0 clamp(15px,2vw,30px)}.case-item .work-frame{aspect-ratio:auto;background:#e9e8e4;overflow:hidden}.case-item .work-frame img{display:block;width:100%;height:auto;object-fit:contain;object-position:top;transform:none;transition:opacity .35s ease}.case-item:hover .work-frame img{opacity:.94}.next-case{padding:85px 0;border-top:1px solid var(--line)}.next-link{display:flex;justify-content:space-between;align-items:center;font-size:clamp(42px,6vw,95px);letter-spacing:-.06em}
.resume-page{padding:150px 0 110px}.resume-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:40px}.resume-head h1{font-size:clamp(65px,10vw,165px);line-height:.8;letter-spacing:-.08em;margin:0}.resume-paper{background:#fff;padding:clamp(12px,2vw,30px);box-shadow:0 35px 100px rgba(0,0,0,.12)}.resume-paper img{width:100%}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}.reveal.visible{opacity:1;transform:none}
@media(max-width:1000px){:root{--shell:min(100% - 40px,1540px)}.nav{grid-template-columns:1fr auto}.nav-links,.nav-mail{display:none}.menu-button{display:block}.mobile-menu{position:fixed;z-index:55;top:72px;left:0;right:0;background:var(--paper);padding:22px 20px 30px;border-bottom:1px solid var(--line);gap:18px}.mobile-menu.open{display:grid}.hero-type{font-size:23vw}.hero-poster{width:min(76vw,680px)}.statement-grid,.statement-meta,.project-grid,.project:nth-child(even) .project-grid,.archive-head,.about-grid,.page-hero-grid,.case-info{grid-template-columns:1fr}.statement-meta{grid-column:1}.project-copy,.project:nth-child(even) .project-copy{grid-column:1;grid-row:1;min-height:280px}.project-stage,.project:nth-child(even) .project-stage{grid-column:1;grid-row:2}.uniform-grid{grid-template-columns:repeat(3,1fr)}.work-grid{column-count:3}.archive-head p{justify-self:start}.case-cover{height:auto;padding:56px 20px}.case-grid{column-count:2}}
@media(max-width:650px){:root{--shell:calc(100% - 28px)}.site-header{height:64px}.mobile-menu{top:64px}.hero{padding-top:64px}.hero-inner{min-height:calc(100svh - 64px);padding:55px 0}.hero-type{font-size:28vw;white-space:normal;line-height:.78}.hero-poster{width:min(94vw,560px);max-height:70svh}.hero-topline span:last-child{display:none}.hero-bottomline strong{font-size:13px}.statement{padding:100px 0}.statement h2{font-size:14vw}.statement-meta{margin-top:38px}.micro-list{grid-template-columns:1fr}.project{min-height:auto;padding:85px 0}.project-copy{min-height:0}.project-copy h3{font-size:16vw}.project-copy p{margin-bottom:30px}.project-stage{min-height:68svh;padding:28px 13px}.poster-set{height:57svh;gap:8px}.poster-set img{max-width:36%;box-shadow:0 15px 35px rgba(0,0,0,.2)}.poster-set img:nth-child(3){display:none}.uniform-grid{grid-template-columns:repeat(2,1fr);gap:24px 9px}.work-grid{column-count:2;column-gap:9px}.work-card{margin-bottom:25px}.archive{padding:100px 0}.archive h2{font-size:16vw}.archive-cta{align-items:flex-end}.round-link{width:66px;height:66px}.about{padding:100px 0}.about-copy h2{font-size:16vw}.fact{grid-template-columns:90px 1fr}.contact h2{font-size:22vw}.footer{margin-top:90px;gap:15px;flex-wrap:wrap}.page-hero{padding:125px 0 65px}.page-title{font-size:22vw}.filters-wrap{top:64px}.filters{gap:22px}.gallery-shell{padding-top:28px}.work-meta{display:block}.work-meta span{display:block;margin-top:3px}.case-hero{padding:125px 0 70px}.case-title{font-size:20vw;margin-bottom:42px}.case-data{grid-template-columns:1fr 1fr}.case-cover{height:auto;padding:30px 14px}.case-cover img{width:min(430px,100%)}.case-gallery{padding:55px 0 90px}.case-grid{column-count:2;column-gap:9px}.case-item{margin-bottom:9px}.resume-page{padding-top:120px}.resume-head{display:block}.resume-head h1{font-size:21vw}.resume-head .button{margin-top:30px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.preview-frame img,.work-frame img{transition:none}}


/* =========================
   Motion system · 2026
   ========================= */
html.js body{opacity:1}
html.js .site-header{opacity:0;transform:translate3d(0,-100%,0);transition:opacity .7s ease,transform .9s cubic-bezier(.16,1,.3,1),background-color .35s,border-color .35s}
html.js body.is-loaded .site-header{opacity:1;transform:none}

html.js .hero-type{opacity:0;transform:translate3d(0,calc(-50% + 50px),0);letter-spacing:-.045em;filter:blur(10px);transition:opacity 1.1s .16s ease,transform 1.25s .16s cubic-bezier(.16,1,.3,1),letter-spacing 1.35s .16s cubic-bezier(.16,1,.3,1),filter 1s .16s ease}
html.js body.is-loaded .hero-type{opacity:1;transform:translate3d(0,-50%,0);letter-spacing:-.085em;filter:none}
html.js .hero-poster{--hero-y:0px;--hero-r:0deg;opacity:0;transform:translate3d(0,calc(var(--hero-y) + 65px),0) rotate(-2.5deg) scale(.92);filter:drop-shadow(0 10px 22px rgba(0,0,0,.12)) blur(4px);transition:opacity 1.05s .42s ease,transform 1.35s .42s cubic-bezier(.16,1,.3,1),filter 1.3s .42s ease;will-change:transform}
html.js body.is-loaded .hero-poster{opacity:1;transform:translate3d(0,var(--hero-y),0) rotate(var(--hero-r)) scale(1);filter:drop-shadow(0 36px 55px rgba(0,0,0,.5))}
html.js body.motion-settled .hero-poster{transition:filter .45s ease}
html.js .hero-topline,html.js .hero-bottomline{opacity:0;transform:translate3d(0,14px,0);transition:opacity .8s .78s ease,transform .9s .78s cubic-bezier(.16,1,.3,1)}
html.js body.is-loaded .hero-topline,html.js body.is-loaded .hero-bottomline{opacity:1;transform:none}
.hero-scroll:before{transform-origin:left;animation:scrollLine 2.2s ease-in-out infinite}
@keyframes scrollLine{0%,100%{transform:scaleX(.35);opacity:.45}50%{transform:scaleX(1);opacity:1}}

html.js .reveal{opacity:0;filter:blur(6px);transform:translate3d(0,42px,0);transition-property:opacity,transform,filter;transition-duration:.9s,1s,.9s;transition-timing-function:ease,cubic-bezier(.16,1,.3,1),ease;transition-delay:var(--reveal-delay,0ms)}
html.js .reveal.motion-left{transform:translate3d(-48px,0,0)}
html.js .reveal.motion-right{transform:translate3d(48px,0,0)}
html.js .reveal.motion-scale{transform:translate3d(0,28px,0) scale(.965)}
html.js .reveal.motion-soft{transform:translate3d(0,22px,0);filter:blur(3px)}
html.js .reveal.visible{opacity:1;filter:none;transform:none}

.project-stage{transition:box-shadow .55s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1)}
.project-stage:hover{box-shadow:0 32px 90px rgba(0,0,0,.12)}
.poster-set{--tilt-x:0deg;--tilt-y:0deg;--move-x:0px;--move-y:0px;transform:perspective(1200px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translate3d(var(--move-x),var(--move-y),0);transform-style:preserve-3d;transition:transform .55s cubic-bezier(.16,1,.3,1);will-change:transform}
html.js .project-stage .poster-set img{opacity:0;transform:translate3d(0,55px,0) scale(.95);transition:opacity .75s ease,transform 1s cubic-bezier(.16,1,.3,1),box-shadow .4s ease}
html.js .project-stage.visible .poster-set img{opacity:1;transform:none}
html.js .project-stage.visible .poster-set img:nth-child(1){transition-delay:.12s}
html.js .project-stage.visible .poster-set img:nth-child(2){transition-delay:.24s}
html.js .project-stage.visible .poster-set img:nth-child(3){transition-delay:.36s}
.project-stage .poster-set img:hover{transform:translate3d(0,-12px,35px) scale(1.015)!important;box-shadow:0 35px 80px rgba(0,0,0,.28)}

.project-link,.nav-links a,.nav-mail,.contact-links a{position:relative}
.project-link:before,.nav-links a:after,.nav-mail:after,.contact-links a:after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.project-link:hover:before,.nav-links a:hover:after,.nav-mail:hover:after,.contact-links a:hover:after{transform:scaleX(1);transform-origin:left}
.project-link:after{transition:transform .35s cubic-bezier(.16,1,.3,1)}
.project-link:hover:after{transform:translate3d(4px,-4px,0)}

.preview-card,.work-card,.case-item{transition:transform .55s cubic-bezier(.16,1,.3,1)}
.preview-card:hover,.work-card:hover,.case-item:hover{transform:translate3d(0,-8px,0)}
.preview-frame,.work-frame{position:relative}
.preview-frame:after,.work-frame:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.22) 48%,transparent 70%);transform:translateX(-140%);transition:transform .9s cubic-bezier(.16,1,.3,1)}
.preview-card:hover .preview-frame:after,.work-card:hover .work-frame:after,.case-item:hover .work-frame:after{transform:translateX(140%)}

.round-link{position:relative;overflow:hidden;transition:color .35s ease,border-color .35s ease,transform .45s cubic-bezier(.16,1,.3,1)}
.round-link:before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--ink);transform:scale(0);transition:transform .45s cubic-bezier(.16,1,.3,1)}
.round-link:hover{background:transparent;color:var(--paper);transform:rotate(45deg) scale(1.05)}
.round-link:hover:before{transform:scale(1)}
.round-link{isolation:isolate}.round-link::after{content:"↗";position:relative;z-index:1}.round-link{font-size:0}
.button{position:relative;overflow:hidden;transition:transform .35s cubic-bezier(.16,1,.3,1),background-color .35s,color .35s}
.button:hover{transform:translate3d(0,-3px,0)}

.about-profile{overflow:hidden}
.about-profile img{transition:transform 1.1s cubic-bezier(.16,1,.3,1),filter .8s ease}
.about-profile:hover img{transform:scale(1.025);filter:grayscale(25%)}
.fact{transition:padding-left .35s cubic-bezier(.16,1,.3,1),background-color .35s}
.fact:hover{padding-left:12px;background:rgba(255,255,255,.035)}

.contact{position:relative;overflow:hidden;isolation:isolate}
.contact:before{content:"";position:absolute;z-index:-1;width:72vw;height:72vw;right:-28vw;top:-42vw;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.2),rgba(255,255,255,0) 67%);animation:contactGlow 11s ease-in-out infinite alternate}
@keyframes contactGlow{to{transform:translate3d(-8vw,10vw,0) scale(1.12)}}

.filters-wrap{transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .35s}
.filter{position:relative;transition:color .3s ease,transform .3s ease}
.filter:hover{transform:translateY(-2px)}
.filter:after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;background:currentColor;transform:scaleX(0);transition:transform .35s cubic-bezier(.16,1,.3,1)}
.filter.active:after{transform:scaleX(1)}
.work-card.filter-out{opacity:0;transform:translate3d(0,18px,0) scale(.97);transition:opacity .22s ease,transform .22s ease}
.work-card.filter-in{animation:filterIn .55s cubic-bezier(.16,1,.3,1) both}
@keyframes filterIn{from{opacity:0;transform:translate3d(0,22px,0) scale(.97)}to{opacity:1;transform:none}}

.case-cover{overflow:hidden}
.case-cover img{transform-origin:center;transition:transform 1.1s cubic-bezier(.16,1,.3,1),filter .8s ease}
.case-cover:hover img{transform:scale(1.012);filter:brightness(1.035)}

.lightbox{opacity:0;display:flex;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s}
.lightbox.open{opacity:1;visibility:visible;transition-delay:0s}
.lightbox-inner{opacity:0;transform:translate3d(0,35px,0) scale(.975);transition:opacity .5s .08s ease,transform .6s .08s cubic-bezier(.16,1,.3,1)}
.lightbox.open .lightbox-inner{opacity:1;transform:none}
.lightbox-close{transition:transform .35s cubic-bezier(.16,1,.3,1),background-color .3s}
.lightbox-close:hover{transform:rotate(90deg);background:rgba(255,255,255,.12)}

.page-wipe{position:fixed;z-index:9999;inset:0;background:#0a0a0a;transform:translate3d(0,102%,0);transition:transform .62s cubic-bezier(.76,0,.24,1);pointer-events:none}
.page-wipe.active{transform:translate3d(0,0,0)}
body.is-leaving main,body.is-leaving .site-header{opacity:.55;transition:opacity .35s ease}

@media(max-width:650px){
 html.js .hero-poster{transform:translate3d(0,calc(var(--hero-y) + 35px),0) rotate(-1.5deg) scale(.94)}
 html.js body.is-loaded .hero-poster{transform:translate3d(0,var(--hero-y),0) rotate(0deg) scale(1)}
 .project-stage:hover,.preview-card:hover,.work-card:hover,.case-item:hover{transform:none;box-shadow:none}
 .project-stage .poster-set img:hover{transform:none!important}
 .contact:before{width:120vw;height:120vw;right:-70vw;top:-25vw}
}

@media(prefers-reduced-motion:reduce){
 *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important;transition-delay:0ms!important}
 html.js .site-header,html.js .hero-type,html.js .hero-poster,html.js .hero-topline,html.js .hero-bottomline,html.js .reveal,html.js .project-stage .poster-set img{opacity:1!important;filter:none!important;transform:none!important}
 .page-wipe{display:none!important}
}