:root{--red:#ee4855;--ink:#161616;--paper:#f6f6f6;--header-height:clamp(3.375rem,calc(2.5rem + 1.25 * var(--layout-unit)),6rem);--page-height-unit:1svh;--layout-unit:1vw;--ease:cubic-bezier(.22,1,.36,1);color-scheme:light}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:var(--header-height)}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,"Microsoft YaHei","PingFang SC",sans-serif;overflow-x:clip}body.modal-open{overflow:hidden}img{display:block;width:100%;height:auto}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button{padding:0;border:0;background:none}button:focus-visible,a:focus-visible{outline:3px solid var(--red);outline-offset:5px}h2,h3,p{margin:0}section{position:relative}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.site-header{position:sticky;top:0;z-index:20;height:var(--header-height);background:#141414;color:#fff;display:flex;align-items:center;padding:0 2.9%;gap:3.1%;isolation:isolate}.logo{width:10%;flex:none}.site-header nav{height:100%;display:flex;gap:calc(1.2 * var(--layout-unit));align-items:stretch}.site-header nav a{position:relative;display:flex;align-items:center;justify-content:center;width:calc(6.33 * var(--layout-unit));font-size:clamp(12px,calc(.94 * var(--layout-unit)),30px);white-space:nowrap}.site-header nav a::after{content:"";position:absolute;bottom:0;left:0;right:0;height:clamp(2px,calc(.39 * var(--layout-unit)),10px);background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}.site-header nav a.active::after,.site-header nav a:hover::after{transform:scaleX(1)}.site-header nav a span{transition:color .35s,translate .5s var(--ease)}.site-header nav a:hover span{color:var(--red);translate:0 -2px}.social-icons{margin-left:auto;display:flex;align-items:center;gap:calc(.65 * var(--layout-unit))}.social-icons img{width:calc(3.52 * var(--layout-unit));max-width:106px}
.hero{height:calc(100 * var(--page-height-unit) - var(--header-height));min-height:400px;background:#17151c;overflow:hidden}.hero-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}.slogan{position:absolute;left:3.6%;bottom:8.5%;width:37.5%}.scroll-cue{position:absolute;left:48.65%;bottom:7.6%;width:2.735%;min-width:24px;animation:scroll-cue 1.8s ease-in-out infinite}@keyframes scroll-cue{50%{translate:0 6px}}
.scene{width:100%;background-repeat:no-repeat;background-size:100% 100%;isolation:isolate}.about{aspect-ratio:1280/800;background-image:url('assets/design/about-bg.webp')}.intro-title{position:absolute;left:7.4%;top:22.5%;width:28.6%;z-index:2}.intro-copy{position:absolute;left:7.85%;top:64%;width:30.47%;z-index:2}.character{position:absolute;left:40.2%;top:-1%;width:53.28%;height:auto;z-index:1}.showreel{aspect-ratio:1280/600;background-image:url('assets/design/reel-bg.webp')}.reel-heading{position:absolute;z-index:3;left:7.65%;top:-6.7%;font-size:calc(6.72 * var(--layout-unit));line-height:1.1;font-weight:800;letter-spacing:calc(-.18 * var(--layout-unit));color:var(--red)}.reel{position:absolute;right:0;top:1.8%;width:86.33%;text-align:left;display:block}.reel-cover{width:100%;border-radius:calc(4.7 * var(--layout-unit)) 0 0 calc(4.7 * var(--layout-unit))}.play-icon{position:absolute;left:3%;top:50%;width:8.326%;transition:transform .5s var(--ease),filter .5s}.reel-copy{position:absolute;left:3%;top:73%;width:41.63%}.cat{position:absolute;z-index:4;left:0;top:74.3%;width:15.31%;pointer-events:none}
.works{background-image:url('assets/design/works-bg.webp');padding:calc(10 * var(--layout-unit)) calc(6.64 * var(--layout-unit)) calc(7.34 * var(--layout-unit));min-height:calc(81.25 * var(--layout-unit))}.works-heading{height:calc(6.25 * var(--layout-unit));display:flex;align-items:center;justify-content:center;gap:calc(2.1 * var(--layout-unit));color:var(--red);font-size:calc(6.4 * var(--layout-unit));line-height:1;font-weight:800;letter-spacing:calc(-.15 * var(--layout-unit))}.title-dots{font-size:calc(2.4 * var(--layout-unit));letter-spacing:0}.filters{display:flex;align-items:center;justify-content:center;gap:calc(8.52 * var(--layout-unit));margin:calc(3.438 * var(--layout-unit)) auto calc(4.532 * var(--layout-unit))}.filters button{display:flex;flex-direction:column;align-items:center;width:calc(13.125 * var(--layout-unit));color:var(--red);font-size:calc(1.88 * var(--layout-unit));line-height:1;font-weight:500}.tab-main{display:flex;width:100%;height:calc(3.594 * var(--layout-unit));align-items:center;justify-content:center;border-radius:999px;transition:background .35s,color .35s}.filters small{font-size:calc(.547 * var(--layout-unit));height:calc(1.56 * var(--layout-unit));display:flex;align-items:center;white-space:nowrap;font-weight:600}.filters button:focus-visible .tab-main{background:var(--red);color:white}@media(hover:hover){.filters button:hover .tab-main{background:var(--red);color:white}}.works-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(3.59 * var(--layout-unit)) calc(3.125 * var(--layout-unit))}.work-card{position:relative;display:block;aspect-ratio:344/194;overflow:hidden;border-radius:calc(1.1 * var(--layout-unit));background:#e7e7e7;width:100%}.work-card>img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}.work-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(1.6 * var(--layout-unit));background:#ed4855ed;color:white;opacity:0;transition:opacity .35s}.work-overlay>span{font-size:clamp(10px,calc(1 * var(--layout-unit)),30px)}.work-overlay b{font-size:clamp(12px,calc(1.05 * var(--layout-unit)),32px);font-weight:500;padding:.5em 3em;border-radius:999px;background:white;color:var(--red)}.work-card:hover .work-overlay,.work-card:focus-visible .work-overlay{opacity:1}.work-card:hover>img{transform:scale(1.035)}.more{display:flex;align-items:center;justify-content:space-between;width:calc(20.156 * var(--layout-unit));height:calc(4.766 * var(--layout-unit));margin:calc(5.94 * var(--layout-unit)) auto 0;padding:0 calc(1.6 * var(--layout-unit));border:clamp(1px,calc(.16 * var(--layout-unit)),4px) solid var(--red);border-radius:999px;color:var(--red);font-size:calc(2.03 * var(--layout-unit));line-height:1;transition:background .3s,color .3s}.more:hover{background:var(--red);color:#fff}
.service{aspect-ratio:1280/832;background-image:url('assets/design/service-bg.webp')}.camera{position:absolute;z-index:4;left:75.2%;top:-11%;width:23.05%}.service-heading{position:absolute;left:6.56%;top:1%;color:#fff;line-height:1}.service-title-line{display:flex;align-items:center;gap:calc(1.3 * var(--layout-unit));font-size:calc(6.4 * var(--layout-unit));font-weight:800;letter-spacing:calc(-.12 * var(--layout-unit))}.service-title-line>small{position:relative;align-self:flex-end;margin-bottom:calc(.4 * var(--layout-unit));font-size:calc(3.12 * var(--layout-unit));letter-spacing:calc(-.06 * var(--layout-unit))}.service-title-line>small i{position:absolute;left:0;bottom:75%;font-style:normal;font-size:calc(3.5 * var(--layout-unit));line-height:1}.service-heading>b{display:block;margin-top:calc(.3 * var(--layout-unit));padding:calc(.1 * var(--layout-unit)) calc(.45 * var(--layout-unit)) calc(.2 * var(--layout-unit));background:var(--paper);color:var(--red);border-radius:0 999px 999px 0;width:calc(15.55 * var(--layout-unit));font-size:calc(2.73 * var(--layout-unit));font-weight:500}.chibi{position:absolute;left:0;top:18.5%;width:44.61%}.service-list{position:absolute;left:50.86%;top:22.6%;width:34.92%;display:grid;gap:calc(2.81 * var(--layout-unit))}.service-list a{position:relative;display:flex;justify-content:center;align-items:center;min-height:calc(4.65 * var(--layout-unit));border-radius:999px;color:#fff;background:#222;font-size:calc(1.72 * var(--layout-unit));line-height:1.15;white-space:nowrap;transition:color .3s,background .3s}.service-list a::before{content:"";position:absolute;left:4.5%;width:calc(1 * var(--layout-unit));aspect-ratio:1;border-radius:50%;background:var(--red)}.service-list a::after{content:"MONTHLY\A MOVIE";white-space:pre;position:absolute;right:4%;font-size:calc(.4 * var(--layout-unit));color:var(--red);line-height:1.1;text-align:right}.service-list a:hover{background:#333;color:#ff7a85}
.contact{aspect-ratio:1280/770;background-image:url('assets/design/contact-bg.webp');background-color:#141414;color:white}.contact-heading{position:absolute;top:6.3%;left:28%;width:44%;height:11%;display:grid;place-items:center}.contact-heading>span{position:absolute;font-size:calc(5.47 * var(--layout-unit));font-weight:800;color:#2a2a2a;white-space:nowrap;letter-spacing:calc(-.15 * var(--layout-unit))}.contact-heading>b{z-index:1;font-size:calc(2.6 * var(--layout-unit));font-weight:500}.contact-heading>b::before,.contact-heading>b::after{content:"··";color:var(--red);letter-spacing:calc(.25 * var(--layout-unit));padding:0 calc(1.2 * var(--layout-unit));font-weight:900}.contact-label{font-size:calc(2.5 * var(--layout-unit));line-height:1.2;font-weight:500}.contact-label>i{font-style:normal;color:var(--red);font-size:calc(2.6 * var(--layout-unit))}.address-label{position:absolute;top:24%;left:14.76%}.map-button{position:absolute;left:14.76%;top:52.5%;width:13.2%;height:5.05%;border-radius:999px;display:flex;align-items:center;justify-content:center;background:var(--red);color:#fff;font-size:calc(1.48 * var(--layout-unit));transition:background .3s}.map-button:hover{background:#fd6672}.contact-card-hit{position:absolute;top:63.51%;width:24.85%;height:23.5%;border-radius:calc(2 * var(--layout-unit))}.contact-card-hit h3{position:absolute;left:13.3%;top:21.5%;pointer-events:none}.contact-card-hit>a,.contact-card-hit>button{display:block;position:absolute;inset:0;width:100%;height:100%;border-radius:inherit}.email-card{left:11.5%}.huaxia-card{left:37.41%}.xianbai-card{left:63.33%}.site-footer{position:relative;height:calc(13.83 * var(--layout-unit));background:#000;color:#888;display:flex;align-items:center;padding:0 11.5%;justify-content:space-between}.site-footer>small{font-size:calc(.92 * var(--layout-unit));letter-spacing:calc(.04 * var(--layout-unit));line-height:2}.site-footer>small span{font-size:calc(.5 * var(--layout-unit));letter-spacing:calc(.12 * var(--layout-unit))}.footer-logo{position:absolute;left:44.15%;width:11.7%}.footer-social{display:flex;align-items:center;gap:calc(1.8 * var(--layout-unit))}.footer-social>a,.footer-social>button{width:calc(3.2 * var(--layout-unit));display:block}
/* Effects return to the exact reference coordinates after entry. */
.motion-ready .reveal{opacity:0;translate:0 calc(2.5 * var(--layout-unit));transition:opacity .8s var(--ease) var(--delay,0ms),translate 1s var(--ease) var(--delay,0ms)}.motion-ready .reveal.is-visible{opacity:1;translate:0 0}.motion-ready .reveal-art{opacity:0;translate:calc(2.2 * var(--layout-unit)) calc(1.8 * var(--layout-unit));transition:opacity 1s var(--ease),translate 1.2s var(--ease)}.motion-ready .reveal-art.is-visible{opacity:1;translate:0 0}.letter-mask{display:inline-block;overflow:hidden;vertical-align:bottom}.letter-mask>span{display:inline-block}.motion-ready .text-reveal .letter-mask>span{transform:translateY(110%);transition:transform .95s var(--ease);transition-delay:calc(var(--char,0)*32ms)}.motion-ready .text-reveal.is-visible .letter-mask>span{transform:translateY(0)}.enter{animation:hero-enter 1.1s var(--ease) both}@keyframes hero-enter{from{opacity:0;translate:0 20px}to{opacity:1;translate:0 0}}
dialog{border:0;color:#fff;background:#121212;padding:0;max-width:96vw;max-height:94dvh;box-shadow:0 24px 100px #0007;border-radius:12px}dialog::backdrop{background:#000d;backdrop-filter:blur(8px)}.video-dialog{width:min(90vw,2200px)}.video-bar,.dialog-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 20px;border-bottom:1px solid #ffffff20}.video-bar h2,.dialog-bar h2{font-size:clamp(14px,1.2vw,30px);font-weight:500}.dialog-close{width:44px;height:44px;line-height:1;font-size:36px;color:#fff;border-radius:50%;flex:none}.dialog-close:hover{background:var(--red)}#showreel-video{display:block;width:100%;max-height:calc(90dvh - 70px);aspect-ratio:16/9;background:#000;object-fit:contain}#video-status{padding:14px 20px;background:#191919;color:#eee;font-size:14px}.gallery-dialog{width:min(92vw,2400px);background:var(--paper);color:#191919}.gallery-dialog .dialog-bar{position:sticky;top:0;z-index:2;background:var(--paper);border-color:#ddd}.gallery-dialog .dialog-close{color:#191919}.all-works-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,36px);padding:clamp(16px,3vw,60px)}.all-works-grid .work-card{border-radius:12px}.image-dialog{width:94vw;height:94dvh;overflow:hidden}.image-dialog[open]{display:flex;flex-direction:column}.viewer-toolbar{display:flex;gap:10px;padding:10px 20px;flex-wrap:wrap}.viewer-toolbar button,.viewer-toolbar a{padding:10px 15px;border-radius:999px;background:#303030;font-size:clamp(12px,1vw,24px)}.viewer-toolbar [aria-pressed=true]{background:var(--red)}.viewer-toolbar a{margin-left:auto}.image-viewport{flex:1;min-height:0;overflow:auto;display:flex;align-items:center;justify-content:center;background:#080808}.image-viewport img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}.original-size .image-viewport{display:block}.original-size .image-viewport img{max-width:none;max-height:none;width:auto;height:auto}.gallery-nav{display:flex;justify-content:center;align-items:center;gap:24px;padding:10px}.gallery-nav button{width:48px;height:40px;border-radius:8px;background:#303030;font-size:22px}.gallery-nav button:hover{background:var(--red)}#toast{position:fixed;left:50%;bottom:5vh;z-index:100;transform:translate(-50%,15px);opacity:0;pointer-events:none;background:#161616;color:#fff;border-radius:999px;padding:14px 24px;font-size:14px;transition:opacity .25s,transform .25s}#toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:700px){.all-works-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.all-works-grid .work-overlay>span{font-size:10px}.all-works-grid .work-overlay b{font-size:10px;padding:.5em 1.4em}.gallery-dialog,.video-dialog{width:96vw}.video-bar,.dialog-bar{padding:8px 12px}.viewer-toolbar{padding:8px 12px;gap:6px}.viewer-toolbar button,.viewer-toolbar a{padding:8px 10px}.viewer-toolbar a{margin-left:0}}@media(max-width:700px){:root:where(:not(.layout-ready)){--header-height:54px;--layout-unit:1vw}:where(html:not(.layout-ready)) .site-header{padding:0 3%;gap:5%}:where(html:not(.layout-ready)) .logo{width:20%;max-width:105px}:where(html:not(.layout-ready)) .site-header nav{flex:1;justify-content:space-between;gap:0}:where(html:not(.layout-ready)) .site-header nav a{width:auto;padding:0 7px;font-size:12px}:where(html:not(.layout-ready)) .social-icons{display:none}:where(html:not(.layout-ready)) .hero{height:calc(82 * var(--page-height-unit) - var(--header-height));min-height:370px}:where(html:not(.layout-ready)) .hero-art{object-position:62% center}:where(html:not(.layout-ready)) .slogan{left:4%;bottom:9%;width:67%}:where(html:not(.layout-ready)) .scroll-cue{left:auto;right:6%;bottom:10%;width:24px}:where(html:not(.layout-ready)) .about{min-height:calc(88 * var(--layout-unit))}:where(html:not(.layout-ready)) .intro-title{top:24%;width:32%;left:6.5%}:where(html:not(.layout-ready)) .intro-copy{top:60%;width:34%;left:6.5%}:where(html:not(.layout-ready)) .character{width:59%;left:39%;top:3%}:where(html:not(.layout-ready)) .showreel{aspect-ratio:1280/670}:where(html:not(.layout-ready)) .reel{top:7%;width:91%}:where(html:not(.layout-ready)) .reel-heading{left:6%;font-size:calc(8 * var(--layout-unit));top:-4%}:where(html:not(.layout-ready)) .cat{top:72%;width:18%}:where(html:not(.layout-ready)) .works{padding-top:calc(12 * var(--layout-unit));min-height:calc(92 * var(--layout-unit))}:where(html:not(.layout-ready)) .works-heading{font-size:calc(7.5 * var(--layout-unit));height:calc(8 * var(--layout-unit))}:where(html:not(.layout-ready)) .filters{margin-top:calc(4 * var(--layout-unit));gap:calc(6.5 * var(--layout-unit))}:where(html:not(.layout-ready)) .filters button{width:calc(18 * var(--layout-unit));font-size:calc(2.7 * var(--layout-unit))}:where(html:not(.layout-ready)) .tab-main{height:calc(4.8 * var(--layout-unit))}:where(html:not(.layout-ready)) .filters small{font-size:calc(.85 * var(--layout-unit));height:calc(2.4 * var(--layout-unit))}:where(html:not(.layout-ready)) .more{width:calc(25 * var(--layout-unit));height:calc(6.1 * var(--layout-unit));font-size:calc(2.5 * var(--layout-unit))}:where(html:not(.layout-ready)) .service-list a{font-size:calc(1.75 * var(--layout-unit))}:where(html:not(.layout-ready)) .contact-label{font-weight:600}:where(html:not(.layout-ready)) .site-footer>small{font-size:calc(1.1 * var(--layout-unit))}:where(html:not(.layout-ready)) .site-footer>small span{font-size:calc(.6 * var(--layout-unit))}:where(html:not(.layout-ready)) .footer-social>a,:where(html:not(.layout-ready)) .footer-social>button{width:calc(4 * var(--layout-unit))}}
:root:where(.layout-mobile){--header-height:54px;--layout-unit:1vw}:where(html.layout-mobile) .site-header{padding:0 3%;gap:5%}:where(html.layout-mobile) .logo{width:20%;max-width:105px}:where(html.layout-mobile) .site-header nav{flex:1;justify-content:space-between;gap:0}:where(html.layout-mobile) .site-header nav a{width:auto;padding:0 7px;font-size:12px}:where(html.layout-mobile) .social-icons{display:none}:where(html.layout-mobile) .hero{height:calc(82 * var(--page-height-unit) - var(--header-height));min-height:370px}:where(html.layout-mobile) .hero-art{object-position:62% center}:where(html.layout-mobile) .slogan{left:4%;bottom:9%;width:67%}:where(html.layout-mobile) .scroll-cue{left:auto;right:6%;bottom:10%;width:24px}:where(html.layout-mobile) .about{min-height:calc(88 * var(--layout-unit))}:where(html.layout-mobile) .intro-title{top:24%;width:32%;left:6.5%}:where(html.layout-mobile) .intro-copy{top:60%;width:34%;left:6.5%}:where(html.layout-mobile) .character{width:59%;left:39%;top:3%}:where(html.layout-mobile) .showreel{aspect-ratio:1280/670}:where(html.layout-mobile) .reel{top:7%;width:91%}:where(html.layout-mobile) .reel-heading{left:6%;font-size:calc(8 * var(--layout-unit));top:-4%}:where(html.layout-mobile) .cat{top:72%;width:18%}:where(html.layout-mobile) .works{padding-top:calc(12 * var(--layout-unit));min-height:calc(92 * var(--layout-unit))}:where(html.layout-mobile) .works-heading{font-size:calc(7.5 * var(--layout-unit));height:calc(8 * var(--layout-unit))}:where(html.layout-mobile) .filters{margin-top:calc(4 * var(--layout-unit));gap:calc(6.5 * var(--layout-unit))}:where(html.layout-mobile) .filters button{width:calc(18 * var(--layout-unit));font-size:calc(2.7 * var(--layout-unit))}:where(html.layout-mobile) .tab-main{height:calc(4.8 * var(--layout-unit))}:where(html.layout-mobile) .filters small{font-size:calc(.85 * var(--layout-unit));height:calc(2.4 * var(--layout-unit))}:where(html.layout-mobile) .more{width:calc(25 * var(--layout-unit));height:calc(6.1 * var(--layout-unit));font-size:calc(2.5 * var(--layout-unit))}:where(html.layout-mobile) .service-list a{font-size:calc(1.75 * var(--layout-unit))}:where(html.layout-mobile) .contact-label{font-weight:600}:where(html.layout-mobile) .site-footer>small{font-size:calc(1.1 * var(--layout-unit))}:where(html.layout-mobile) .site-footer>small span{font-size:calc(.6 * var(--layout-unit))}:where(html.layout-mobile) .footer-social>a,:where(html.layout-mobile) .footer-social>button{width:calc(4 * var(--layout-unit))}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.motion-ready .reveal,.motion-ready .reveal-art{opacity:1;translate:none}.motion-ready .text-reveal .letter-mask>span{transform:none}}

/* Crisp live lettering masks the raster labels without changing the artwork. */
.works-values{position:absolute;left:15.8%;top:0;display:flex;align-items:center;gap:calc(1.15 * var(--layout-unit));min-height:calc(2.1 * var(--layout-unit));padding:calc(.35 * var(--layout-unit)) calc(.3 * var(--layout-unit));width:27%;background:#f6f6f6;color:var(--red);font-size:clamp(10px,calc(.8 * var(--layout-unit)),32px);font-weight:700;line-height:1.2;white-space:nowrap}
@media(max-width:700px){:where(html:not(.layout-ready)) .filters{margin-bottom:calc(5.738 * var(--layout-unit))}:where(html:not(.layout-ready)) .works-values{gap:calc(1.2 * var(--layout-unit));width:40%;min-height:calc(3.7 * var(--layout-unit));padding:calc(.3 * var(--layout-unit));font-size:clamp(8px,calc(1.6 * var(--layout-unit)),11px)}}
:where(html.layout-mobile) .filters{margin-bottom:calc(5.738 * var(--layout-unit))}:where(html.layout-mobile) .works-values{gap:calc(1.2 * var(--layout-unit));width:40%;min-height:calc(3.7 * var(--layout-unit));padding:calc(.3 * var(--layout-unit));font-size:clamp(8px,calc(1.6 * var(--layout-unit)),11px)}

/* Restore the supplied header artwork and add restrained homepage feedback. */
.site-header{background:#141414 url('assets/design/header-texture.png') center / 100% 100% no-repeat}
.social-icons>a{display:block;flex:none;border-radius:.3em;transition:transform .35s var(--ease),filter .35s var(--ease)}
.social-icons>a:focus-visible{transform:translateY(-3px) scale(1.08);filter:brightness(1.2)}
@media(hover:hover) and (pointer:fine){.social-icons>a:hover{transform:translateY(-3px) scale(1.08);filter:brightness(1.2)}}
@media(prefers-reduced-motion:reduce){.social-icons>a:hover,.social-icons>a:focus-visible{transform:none;transition:none}}

/* Supplied lettering keeps its exact layout, with separate viewport cues. */
.about-monthly-label{position:absolute;left:7.48%;top:48.5%;width:1.4%;height:10.5%;z-index:3;background:#f6f6f6;color:var(--red);font:700 clamp(6px,calc(.62 * var(--layout-unit)),26px)/1 Arial,sans-serif;writing-mode:vertical-rl;text-orientation:mixed;white-space:nowrap;padding:calc(.1 * var(--layout-unit)) calc(.15 * var(--layout-unit))}

.intro-title{aspect-ratio:732/346}
.intro-copy{aspect-ratio:780/278}
.about-line{position:absolute;left:0;width:100%;overflow:hidden}
.about-line-motion{position:absolute;inset:0;display:block}
.about-line img{position:absolute;left:0;width:100%;height:auto;max-width:none}
.about-sequence-ready .about-line-motion{transform:translate3d(0,45%,0);opacity:0;clip-path:inset(0 100% 0 0)}
.about-sequence-ready .character{--character-arrival-y:clamp(32px,calc(4.4 * var(--layout-unit)),88px);opacity:0;transform:translate3d(0,var(--character-arrival-y),0) scale(.984);transform-origin:55% 80%}
.about-sequence-ready.about-playing .intro-title .about-line-motion{animation:about-line-reveal .78s cubic-bezier(.2,.75,.25,1) var(--line-delay,0s) both}
.about-sequence-ready .intro-copy.copy-playing .about-line-motion{animation:about-line-reveal .85s cubic-bezier(.16,.75,.22,1) var(--line-delay,0s) both}
.about-sequence-ready.about-playing .character{animation:about-character-appear 1.2s cubic-bezier(.25,.46,.45,.94) .24s both,about-character-settle 1.9s cubic-bezier(.22,.75,.22,1) .24s both}
@keyframes about-line-reveal{0%{opacity:0;transform:translate3d(0,45%,0);clip-path:inset(0 100% 0 0)}65%{opacity:1;clip-path:inset(0 0 0 0)}100%{opacity:1;transform:translate3d(0,0,0);clip-path:inset(0 0 0 0)}}
/* The title leads by a fraction of a second; one shared layer carries the
   poster and Spine canvas, including their existing lower-body fade. */
@keyframes about-character-appear{from{opacity:0}to{opacity:1}}
@keyframes about-character-settle{from{transform:translate3d(0,var(--character-arrival-y),0) scale(.984)}to{transform:translate3d(0,0,0) scale(1)}}
@media(prefers-reduced-motion:reduce){.about-sequence-ready .about-line-motion,.about-sequence-ready .character{opacity:1;transform:none;clip-path:none;animation:none!important}}

/* The supplied transparent lettering is independent from the clean KV. */
.hero-title-art{position:absolute;left:3.2%;top:8.5%;width:32.06%;height:auto;pointer-events:none;transform:none}
.hero-side-art{position:absolute;right:2.35%;top:16%;width:.75%;height:auto;pointer-events:none;transform:none}
.slogan{transform:none!important}
@media(max-width:700px){:where(html:not(.layout-ready)) .hero-title-art{left:4%;top:6%;width:48%}:where(html:not(.layout-ready)) .hero-side-art{right:2.5%;top:20%;width:1.35%}}
:where(html.layout-mobile) .hero-title-art{left:4%;top:6%;width:48%}:where(html.layout-mobile) .hero-side-art{right:2.5%;top:20%;width:1.35%}

/* Looping video zooms inside a fixed frame; the control only scales. */
.reel{aspect-ratio:1105/571;overflow:hidden;border-radius:calc(4.7 * var(--layout-unit)) 0 0 calc(4.7 * var(--layout-unit));isolation:isolate}
.reel-media{display:block;position:absolute;inset:0;overflow:hidden;border-radius:inherit;z-index:0}
.reel .reel-cover{display:block;width:100%;height:100%;object-fit:cover;border-radius:0;transform:scale(1);transition:transform .85s var(--ease);pointer-events:none}
.reel-play-control{position:absolute;left:3%;top:50%;width:8.326%;aspect-ratio:1;z-index:2;border-radius:50%;transition:transform .45s var(--ease)}
.reel-button-face{position:absolute;inset:0;display:block;border-radius:50%;overflow:hidden;isolation:isolate}
.reel .play-icon{position:relative;left:auto;top:auto;width:100%;height:100%;z-index:0}
.reel-copy{z-index:3;pointer-events:none}
/* Soft red light follows the pointer within the video, beneath its controls. */
.reel-pointer-glow{position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(circle clamp(120px,calc(19 * var(--layout-unit)),560px) at var(--glow-x,50%) var(--glow-y,50%),rgba(238,72,85,.2) 0%,rgba(238,72,85,.11) 30%,rgba(238,72,85,.035) 56%,rgba(238,72,85,0) 80%);opacity:0;transition:opacity .4s ease}
@media(hover:hover) and (pointer:fine){.reel:hover .reel-cover{transform:scale(1.035)}.reel-play-control:hover{transform:scale(1.08)}.reel.has-reel-pointer .reel-pointer-glow{opacity:1}}
.reel:focus-visible .reel-play-control{transform:scale(1.08)}
@media(prefers-reduced-motion:reduce){.reel:hover .reel-cover,.reel-play-control:hover,.reel:focus-visible .reel-play-control{transform:none}.reel-pointer-glow{transition:none}}

.video-dialog{background:#000;transform-origin:50% 50%}
.video-dialog[open]{animation:video-dialog-enter .65s cubic-bezier(.2,.7,.25,1) both}
.video-dialog[open]::backdrop{background:#000d;backdrop-filter:blur(5px);animation:video-backdrop-enter .45s ease both}
.video-dialog #showreel-video{opacity:0;transition:opacity .55s ease}
.video-dialog.intro-settled.video-ready #showreel-video{opacity:1}
@keyframes video-dialog-enter{0%{opacity:0;transform:translateY(16px) scale(.97)}20%{opacity:0}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes video-backdrop-enter{from{background:#0000;backdrop-filter:blur(0)}to{background:#000d;backdrop-filter:blur(5px)}}
@media(prefers-reduced-motion:reduce){.video-dialog[open],.video-dialog[open]::backdrop{animation:none}.video-dialog #showreel-video{transition:none}.reel-play-control{transition:none}}

/* Keep the selected category emphasized after pointer departure. */
.filters button[aria-selected="true"] .tab-main{background:var(--red);color:#fff}
/* Category entrances share a stationary trigger and keep tab interactions intact. */
.filters-intro-ready>button{--tab-delay:0ms;opacity:0;translate:0 clamp(16px,calc(1.25 * var(--layout-unit)),30px);filter:blur(3px);transition:opacity .7s cubic-bezier(.22,.65,.3,1) var(--tab-delay),translate 1.05s cubic-bezier(.16,1,.3,1) var(--tab-delay),filter .8s cubic-bezier(.22,.65,.3,1) var(--tab-delay)}
.filters-intro-ready>button:nth-child(2){--tab-delay:80ms}
.filters-intro-ready>button:nth-child(3){--tab-delay:160ms}
.filters-intro-ready>button>small{opacity:0;translate:0 .35em;transition:opacity .65s ease calc(var(--tab-delay) + 70ms),translate .9s cubic-bezier(.16,1,.3,1) calc(var(--tab-delay) + 70ms)}
.filters-intro-visible>button,.filters-intro-visible>button>small{opacity:1;translate:0 0;filter:none}
.filters-intro-ready:focus-within>button,.filters-intro-ready:focus-within>button>small{transition-delay:0s}
@media(prefers-reduced-motion:reduce){.filters-intro-ready>button,.filters-intro-ready>button>small{opacity:1;translate:none;filter:none;transition:none}}

/* The outline arrives first; the label settles gently without changing hover. */
.more.more-intro-ready{opacity:0;translate:0 clamp(14px,calc(1.1 * var(--layout-unit)),26px);filter:blur(2px);transition:background .3s,color .3s,opacity .8s cubic-bezier(.22,.65,.3,1),translate 1.1s cubic-bezier(.16,1,.3,1),filter .8s ease}
.more-intro-ready>span{opacity:0;translate:0 .25em;transition:opacity .7s ease 90ms,translate .95s cubic-bezier(.16,1,.3,1) 90ms}
.more.more-intro-visible,.more-intro-visible>span{opacity:1;translate:0 0;filter:none}
@media(prefers-reduced-motion:reduce){.more.more-intro-ready,.more-intro-ready>span{opacity:1;translate:none;filter:none;transition:none}}

/* Separate the supplied card artwork into motion layers without moving its layout. */
.contact{background-image:none}
.contact::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url('assets/design/contact-bg.webp') 0 0 / 100% 100% no-repeat;-webkit-mask:url('assets/design/contact-card-mask.svg') 0 0 / 100% 100% no-repeat;mask:url('assets/design/contact-card-mask.svg') 0 0 / 100% 100% no-repeat;mask-mode:luminance}
.contact-card-hit{top:63.376623%;width:24.921875%;height:23.636364%;isolation:isolate;--card-delay:0ms}
.email-card{left:11.445313%;--card-x:15.244537%}
.huaxia-card{left:37.34375%;--card-x:49.739854%;--card-delay:110ms}
.xianbai-card{left:63.242188%;--card-x:84.235172%;--card-delay:220ms}
.contact-card-art,.contact-card-detail{position:absolute;inset:0;display:block;pointer-events:none;background:url('assets/design/contact-bg.webp') var(--card-x) 82.993197% / 401.253918% 423.076923% no-repeat}
.contact-card-art::after{content:"";position:absolute;left:.31348%;right:.31348%;top:55%;bottom:15%;background:#000}
.contact-card-detail{clip-path:inset(55% 0 15% 0);z-index:1}
.contact-card-hit h3{z-index:2}
.contact-card-hit>a,.contact-card-hit>button{z-index:3}
.contact-cards-ready .contact-card-hit{opacity:0;transform:translate3d(0,clamp(16px,calc(1.8 * var(--layout-unit)),52px),0) scale(.985);transition:opacity .85s ease var(--card-delay),transform 1.05s cubic-bezier(.16,1,.3,1) var(--card-delay)}
.contact-cards-ready .contact-card-hit h3,.contact-cards-ready .contact-card-detail{opacity:0;translate:0 clamp(5px,calc(.55 * var(--layout-unit)),16px);transition:opacity .75s ease calc(var(--card-delay) + 140ms),translate .95s cubic-bezier(.16,1,.3,1) calc(var(--card-delay) + 140ms)}
.contact-cards-ready .contact-card-detail{transition-delay:calc(var(--card-delay) + 240ms)}
.contact-cards-ready.contact-cards-visible .contact-card-hit{opacity:1;transform:none}
.contact-cards-ready.contact-cards-visible .contact-card-hit h3,.contact-cards-ready.contact-cards-visible .contact-card-detail{opacity:1;translate:0 0}
@media(prefers-reduced-motion:reduce){.contact-cards-ready .contact-card-hit,.contact-cards-ready .contact-card-hit h3,.contact-cards-ready .contact-card-detail{opacity:1;transform:none;translate:none;transition:none}}

/* Footer QR cards stay open while the pointer moves onto the code itself. */
.site-footer{z-index:6}
.qr-contact{position:relative;width:calc(3.2 * var(--layout-unit));flex:none}
.qr-trigger{display:block;width:100%;border-radius:50%}
.qr-trigger>img{transition:transform .3s var(--ease)}
.qr-contact.qr-open .qr-trigger>img{transform:translateY(-2px) scale(1.06)}
.qr-popup{position:absolute;left:50%;right:auto;translate:calc(-50% + var(--qr-shift,0px)) 0;bottom:calc(100% + 16px);width:clamp(220px,19vw,340px);max-width:calc(100vw - 32px);padding:8px;border-radius:14px;background:#fff;box-shadow:0 12px 45px #0006;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px) scale(.98);transform-origin:50% 100%;transition:opacity .25s ease,transform .35s var(--ease),visibility 0s .25s}
.qr-popup::after{content:"";position:absolute;left:0;right:0;top:100%;height:18px}
.qr-popup>img{display:block;width:100%;height:auto;max-height:70svh;object-fit:contain;border-radius:8px}
#qq-qr-popup{background:#27272c}
.qr-contact.qr-open .qr-popup{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:0s}
@media(max-width:700px){:where(html:not(.layout-ready)) .qr-contact{width:calc(4 * var(--layout-unit))}:where(html:not(.layout-ready)) .qr-popup{width:220px}}
:where(html.layout-mobile) .qr-contact{width:calc(4 * var(--layout-unit))}:where(html.layout-mobile) .qr-popup{width:220px}
@media(prefers-reduced-motion:reduce){.qr-popup,.qr-trigger>img{transition:none;transform:none!important}}

/* Filename titles wrap inside the existing cards and preview header. */
.work-overlay>span{max-width:92%;text-align:center;line-height:1.4;overflow-wrap:anywhere}
.dialog-bar h2{min-width:0;overflow-wrap:anywhere}
@media(max-width:700px){:where(html:not(.layout-ready)) .works-grid .work-overlay{gap:calc(.8 * var(--layout-unit))}:where(html:not(.layout-ready)) .works-grid .work-overlay>span{font-size:clamp(7px,calc(1.3 * var(--layout-unit)),10px);line-height:1.3}:where(html:not(.layout-ready)) .works-grid .work-overlay b{font-size:clamp(8px,calc(1.35 * var(--layout-unit)),11px);padding:.3em 1.5em}}
:where(html.layout-mobile) .works-grid .work-overlay{gap:calc(.8 * var(--layout-unit))}:where(html.layout-mobile) .works-grid .work-overlay>span{font-size:clamp(7px,calc(1.3 * var(--layout-unit)),10px);line-height:1.3}:where(html.layout-mobile) .works-grid .work-overlay b{font-size:clamp(8px,calc(1.35 * var(--layout-unit)),11px);padding:.3em 1.5em}

/* Intact supplied lettering; entrance never splits or clips either artwork. */
.hero-title-art{aspect-ratio:820/274}
.hero-title-motion{position:absolute;inset:0;display:block}
.hero-title-motion img{position:absolute;left:0;top:0;width:100%;height:auto;max-width:none}
.slogan{aspect-ratio:959/242;pointer-events:none}
.slogan-motion{display:block;width:100%;height:100%}

/* The original map pixels become an independent entrance layer. */
.contact-map{position:absolute;left:11.5234375%;top:19.2207792%;width:76.5625%;height:42.4675325%;isolation:isolate}
.contact-map-art{position:absolute;inset:0;display:block;pointer-events:none;background:url('assets/design/contact-bg.webp') 49.1666667% 33.4085779% / 130.6122449% 235.4740061% no-repeat}
.contact-map .address-label{left:4.2273469%;top:11.2538226%;display:flex;align-items:center;gap:calc(.65 * var(--layout-unit))}
.contact-map .address-mark{display:block;flex:none;width:calc(1.40625 * var(--layout-unit));height:auto;aspect-ratio:36/41;object-fit:contain}
.contact-map .map-button{left:4.2273469%;top:78.3639144%;width:17.2408163%;height:11.8914373%}
.contact-map.map-intro-ready{opacity:0;transform:translate3d(0,clamp(18px,calc(2 * var(--layout-unit)),54px),0);transition:opacity .95s ease,transform 1.2s cubic-bezier(.16,1,.3,1)}
.contact-map.map-intro-ready .address-label,.contact-map.map-intro-ready .map-button{opacity:0;translate:0 clamp(6px,calc(.65 * var(--layout-unit)),18px);transition:opacity .8s ease .16s,translate 1s cubic-bezier(.16,1,.3,1) .16s}
.contact-map.map-intro-ready .map-button{transition:opacity .8s ease .28s,translate 1s cubic-bezier(.16,1,.3,1) .28s,background .3s}
.contact-map.map-intro-ready.is-intro-visible{opacity:1;transform:none}
.contact-map.map-intro-ready.is-intro-visible .address-label,.contact-map.map-intro-ready.is-intro-visible .map-button{opacity:1;translate:0 0}
@media(prefers-reduced-motion:reduce){.contact-map.map-intro-ready,.contact-map.map-intro-ready .address-label,.contact-map.map-intro-ready .map-button{opacity:1;transform:none;translate:none;filter:none;clip-path:none;animation:none!important;transition:none!important}}

/* Shorter gallery motion starts before the card edge enters the viewport. */
.motion-ready .work-enter{opacity:0;translate:0 clamp(8px,calc(.85 * var(--layout-unit)),24px);transition:opacity .5s cubic-bezier(.2,.65,.3,1) var(--work-delay,0ms),translate .75s cubic-bezier(.16,1,.3,1) var(--work-delay,0ms)}
.motion-ready .work-enter.is-visible{opacity:1;translate:0 0}
/* The stationary slot preserves the original grid and provides an early cue. */
.brand-slot{position:relative;min-width:0;aspect-ratio:344/194}
.brand-slot>.work-card{height:100%}
/* Soft opacity onset, a short upward drift and a long, quiet settle. */
.motion-ready .brand-enter{translate:0 clamp(14px,calc(1.2 * var(--layout-unit)),28px);transition:opacity 1.1s cubic-bezier(.33,0,.2,1) var(--work-delay,0ms),translate 1.4s cubic-bezier(.22,1,.36,1) var(--work-delay,0ms)}

/* Footer details settle in gently; QR popup containers stay stationary. */
.footer-intro-ready>small,.footer-intro-ready>.footer-logo,.footer-intro-ready .qr-trigger{opacity:0;translate:0 clamp(7px,calc(.8 * var(--layout-unit)),22px);transition:opacity .7s ease var(--footer-delay,0ms),translate .95s cubic-bezier(.16,1,.3,1) var(--footer-delay,0ms)}
.footer-intro-ready>.footer-logo{--footer-delay:80ms}
.footer-intro-ready .qr-contact:first-child .qr-trigger{--footer-delay:140ms}
.footer-intro-ready .qr-contact:last-child .qr-trigger{--footer-delay:180ms}
.footer-intro-visible>small,.footer-intro-visible>.footer-logo,.footer-intro-visible .qr-trigger,.footer-intro-ready:focus-within>small,.footer-intro-ready:focus-within>.footer-logo,.footer-intro-ready:focus-within .qr-trigger{opacity:1;translate:0 0}
@media(prefers-reduced-motion:reduce){.motion-ready .work-enter,.footer-intro-ready>small,.footer-intro-ready>.footer-logo,.footer-intro-ready .qr-trigger{opacity:1;translate:none;transition:none}}

/* Keep every source pixel; register the transparent 1920×1080 sequence to the original logo slot. */
.site-header .logo{position:relative;display:block;aspect-ratio:256/110;overflow:hidden}
.site-header .logo-static,.site-header .logo-sequence{position:absolute;left:-44.921875%;top:-72.0454545%;width:187.5%;height:auto;max-width:none;pointer-events:none}
.site-header .logo-static{opacity:1}
.site-header .logo-sequence{opacity:0}
.site-header .logo.logo-motion-ready .logo-sequence{opacity:1}
.site-header .logo.logo-motion-ready .logo-static{opacity:0}

/* The reference scan is isolated from its background and aligned to the original map. */
.map-scan-layer{position:absolute;inset:0;z-index:1;display:block;overflow:hidden;border-radius:calc(2 * var(--layout-unit));pointer-events:none;mix-blend-mode:screen;opacity:0;transition:opacity .55s cubic-bezier(.4,0,.2,1);background:url('assets/design/map-scan-loop-ready-v2.webp') center top / 100.136054% 100.30581% no-repeat}
.map-scan-layer video{position:absolute;left:-.085034%;top:0;width:100.136054%;height:100.30581%;max-width:none;object-fit:fill;pointer-events:none;opacity:0;transition:opacity .4s ease}
.contact-map.scan-frame-ready .map-scan-layer video{opacity:1}
.contact-map.map-scan-active .map-scan-layer{opacity:1;transition:opacity .85s cubic-bezier(.4,0,.2,1)}
.map-mascot{position:absolute;z-index:3;left:66.45408%;top:49.3119%;width:5.2%;height:19%;min-width:24px;min-height:24px;translate:-50% -50%;border-radius:50%;cursor:pointer}
.map-mascot:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.contact-map .address-label,.contact-map .map-button{z-index:2}
@media(prefers-reduced-motion:reduce){.map-scan-layer,.map-scan-layer video,.contact-map.map-scan-active .map-scan-layer{transition:none}}

/* Keep the original mascot pixels, on a separate layer so its breathing is independent. */
.map-mascot-underlay{position:absolute;left:64.2346939%;top:41.5902141%;width:4.4897959%;height:15.2905199%;background:linear-gradient(90deg,#1a1a1a,#181818);pointer-events:none}
.map-mascot-art{position:absolute;left:50%;top:50%;translate:-50% -50%;display:block;width:calc(3.4375 * var(--layout-unit));height:calc(3.90625 * var(--layout-unit));pointer-events:none;background:url('assets/design/contact-bg.webp') 62.8640777% 39.4444444% / 2909.0909091% 1540% no-repeat;clip-path:polygon(39% 7%,62% 24%,52% 31%,57% 32%,88% 17%,89% 65%,85% 78%,72% 89%,52% 96%,31% 93%,17% 84%,8% 70%,8% 17%,30% 31%,42% 29%);transform:scale(1);transition:transform .35s var(--ease)}
.map-scan-active .map-mascot-art{animation:map-mascot-breathe 1.65s ease-in-out infinite}
@keyframes map-mascot-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.13)}}
@media(prefers-reduced-motion:reduce){.map-scan-active .map-mascot-art{animation:none;transform:scale(1.08)}}

/* Transparent puppet canvases retain the artwork's original responsive composition. */
.puppet{pointer-events:none;isolation:isolate}
.character.puppet{aspect-ratio:1364/1652;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 72%,rgba(0,0,0,.96) 79%,rgba(0,0,0,.7) 86%,rgba(0,0,0,.3) 93%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 72%,rgba(0,0,0,.96) 79%,rgba(0,0,0,.7) 86%,rgba(0,0,0,.3) 93%,transparent 100%);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.chibi{aspect-ratio:1142/1204}
.chibi-motion{position:absolute;inset:0;transform-origin:50% 85%}
/* The prepared Spine frame floats into its unchanged stationary slot. */
.motion-ready .chibi-intro-ready .chibi-motion{opacity:0;transform:translate3d(0,clamp(24px,calc(3.2 * var(--layout-unit)),56px),0) scale(.99);transition:opacity 1.2s cubic-bezier(.22,.61,.36,1),transform 1.8s cubic-bezier(.16,1,.3,1)}
.motion-ready .chibi-intro-visible .chibi-motion{opacity:1;transform:translate3d(0,0,0) scale(1)}
.chibi-motion>canvas,.chibi-motion>.puppet-poster{transition:opacity .45s cubic-bezier(.22,.61,.36,1)}
@media(prefers-reduced-motion:reduce){.motion-ready .chibi-intro-ready .chibi-motion{opacity:1;transform:none;transition:none}}
.puppet-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.puppet>canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0}
.puppet>video{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none}
.puppet.puppet-ready>canvas{opacity:1}
.puppet.puppet-ready>.puppet-poster{opacity:0}

/* A film-led opening: restrained branding, fine progress light, continuous dissolve. */
html{scrollbar-gutter:stable}
html.site-loading,html.site-loading body{overflow:hidden}
.site-loader{display:none}
.site-loading .site-loader{position:fixed;inset:0;z-index:1000;display:block;min-height:100svh;overflow:hidden;background:#09090c;color:#f6f5f3;isolation:isolate;touch-action:none;opacity:1;transition:opacity .72s cubic-bezier(.4,0,.2,1)}
.loader-film{position:absolute;inset:0;overflow:hidden;background:#09090c url('assets/design/home-opening02-poster.webp') center / cover no-repeat;transform:scale(1.035);opacity:var(--film-opacity,.86);transition:transform 4.2s cubic-bezier(.2,.65,.3,1)}
.loader-film video{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .75s ease}
.is-video-ready .loader-film{transform:scale(1)}
.is-video-ready .loader-film video{opacity:1}
.loader-veil{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#08080b4d 0%,transparent 38%,#08080b20 58%,#08080bd9 100%),radial-gradient(ellipse at 50% 43%,transparent 20%,#08080b70 100%)}
.loader-progress{position:absolute;left:50%;bottom:max(7.5svh,32px);width:min(520px,72vw);translate:-50% 0;transition:opacity .45s ease,transform .85s cubic-bezier(.22,1,.36,1);animation:loader-details-arrive .9s cubic-bezier(.16,1,.3,1) .12s backwards}
.loader-status{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:17px}
.loader-state{font-family:Arial,sans-serif;font-size:10px;line-height:1;letter-spacing:.26em;color:#e8e7eb;transition:color .3s}
.loader-percent{display:flex;align-items:baseline;gap:3px;font-family:Arial,sans-serif;font-size:clamp(26px,2.3vw,38px);font-weight:400;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.045em}
.loader-count{min-width:3ch;text-align:right}
.loader-percent small{font-size:10px;letter-spacing:0;color:#b6b4bc}
.loader-track{position:relative;height:1px;background:#ffffff24;overflow:visible}
.loader-track>span{position:absolute;inset:0;transform:scaleX(var(--load-progress,0));transform-origin:0 50%;background:linear-gradient(90deg,#96343e,var(--red) 65%,#ffd7d9);box-shadow:0 0 8px #ef48554d;transition:background .3s}
.loader-track>i{position:absolute;left:calc(var(--load-progress,0) * 100%);top:50%;translate:-50% -50%;width:4px;height:4px;border-radius:50%;background:#ffe2e5;box-shadow:0 0 8px #ef4855,0 0 18px #ef48554d;opacity:clamp(0,calc(var(--load-progress,0) * 30),1);transition:opacity .3s}
.loader-signature{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:18px;color:#a6a2ac;font-size:9px;font-weight:400;line-height:1.5;letter-spacing:.13em;white-space:nowrap}
.loader-signature>span:last-child{font-size:10px;letter-spacing:.2em}
.site-loader.is-loaded .loader-state{color:#ff9da6}
.site-loader.is-loaded .loader-track>span{background:#ffc7ce}
.site-loader.is-loaded .loader-track>i{opacity:0}
.site-loading .site-loader.is-exiting{opacity:0}
.site-loader.is-exiting .loader-progress{opacity:0;transform:translateY(-18px)}
.site-loader.is-exiting .loader-film{transform:scale(1.025);transition:transform .9s cubic-bezier(.22,1,.36,1)}
@keyframes loader-details-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:700px){.loader-progress{width:80vw;bottom:max(8svh,32px)}.loader-status{margin-bottom:15px}.loader-signature{font-size:7px;gap:8px;letter-spacing:.1em}.loader-signature>span:last-child{font-size:8px;letter-spacing:.1em}}
@media(max-height:480px) and (min-width:701px){.loader-progress{bottom:24px;width:min(440px,70vw)}.loader-status{margin-bottom:12px}.loader-signature{margin-top:12px}}
@media(prefers-reduced-motion:reduce){.site-loading .site-loader,.loader-film,.loader-film video,.loader-progress{animation:none;transition:none;transform:none}.loader-film video{display:none}}

/* A continuous camera settle with two intact type artworks at slightly different depths. */
.hero-visual{position:absolute;inset:0;overflow:hidden;pointer-events:none;transform-origin:65% 50%}
.hero-art>.hero-poster,.hero-art>.hero-motion{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:inherit}
.hero-motion{opacity:0;transition:opacity .3s ease}
.hero-video-ready .hero-motion{opacity:1}
.home-enter-ready .hero-visual,.home-enter-ready .site-header,.home-enter-ready .hero-title-motion,.home-enter-ready .slogan-motion,.home-enter-ready .hero-side-art,.home-enter-ready .scroll-cue img{opacity:0}
.home-enter-ready .scroll-cue,.home-enter-active .scroll-cue{animation-play-state:paused}
.home-enter-active .hero-visual{animation:home-scene-arrive 1.8s cubic-bezier(.22,1,.36,1) both;will-change:transform,opacity}
.home-enter-active .site-header{animation:home-header-arrive .6s ease both}
.home-enter-active .site-header>.logo{animation:home-ui-arrive .95s cubic-bezier(.22,1,.36,1) .08s backwards}
.home-enter-active .site-header nav>a{animation:home-ui-arrive .9s cubic-bezier(.22,1,.36,1) var(--enter-delay,.16s) backwards}
.home-enter-active .site-header nav>a:nth-child(2){--enter-delay:.22s}
.home-enter-active .site-header nav>a:nth-child(3){--enter-delay:.28s}
.home-enter-active .site-header nav>a:nth-child(4){--enter-delay:.34s}
.home-enter-active .social-icons>a{animation:home-ui-arrive .8s cubic-bezier(.22,1,.36,1) var(--enter-delay,.36s) backwards}
.home-enter-active .social-icons>a:nth-child(2){--enter-delay:.42s}
.home-enter-active .social-icons>a:nth-child(3){--enter-delay:.48s}
.home-enter-active .social-icons>a:nth-child(4){--enter-delay:.54s}
.home-enter-active .hero-title-motion{--type-x:clamp(-20px,calc(-.55 * var(--layout-unit)),-6px);--type-y:clamp(14px,calc(1.35 * var(--layout-unit)),40px);--type-scale:1.018;transform-origin:25% 50%;animation:home-type-reveal .9s cubic-bezier(.25,.46,.45,.94) .2s both,home-type-settle 1.75s cubic-bezier(.16,1,.3,1) .2s both}
.home-enter-active .slogan-motion{--type-x:0px;--type-y:clamp(12px,calc(1 * var(--layout-unit)),30px);--type-scale:1.012;transform-origin:15% 55%;animation:home-type-reveal 1s cubic-bezier(.25,.46,.45,.94) .36s both,home-type-settle 1.75s cubic-bezier(.16,1,.3,1) .36s both}
.home-enter-active .hero-side-art{animation:home-side-arrive 1.1s cubic-bezier(.22,1,.36,1) .5s both}
.home-enter-active .scroll-cue img{animation:home-cue-arrive .95s cubic-bezier(.22,1,.36,1) .7s both}
@keyframes home-scene-arrive{from{opacity:.2;transform:scale(1.035)}30%{opacity:1}to{opacity:1;transform:scale(1)}}
@keyframes home-header-arrive{from{opacity:0}to{opacity:1}}
@keyframes home-ui-arrive{from{opacity:0;transform:translate3d(0,clamp(8px,calc(.8 * var(--layout-unit)),24px),0)}45%{opacity:1}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes home-type-reveal{from{opacity:0}to{opacity:1}}
@keyframes home-type-settle{from{transform:translate3d(var(--type-x,0px),var(--type-y,20px),0) scale(var(--type-scale,1.018))}to{transform:translate3d(0,0,0) scale(1)}}
@keyframes home-side-arrive{from{opacity:0;transform:translate3d(0,clamp(8px,calc(.8 * var(--layout-unit)),20px),0);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:translate3d(0,0,0);clip-path:inset(0)}}
@keyframes home-cue-arrive{from{opacity:0;transform:translate3d(0,clamp(8px,calc(1 * var(--layout-unit)),24px),0)}to{opacity:1;transform:translate3d(0,0,0)}}
@media(prefers-reduced-motion:reduce){.home-enter-ready .hero-visual,.home-enter-ready .site-header,.home-enter-ready .hero-title-motion,.home-enter-ready .slogan-motion,.home-enter-ready .hero-side-art,.home-enter-ready .scroll-cue img{opacity:1}.home-enter-active .hero-visual,.home-enter-active .site-header,.home-enter-active .site-header>.logo,.home-enter-active .site-header nav>a,.home-enter-active .social-icons>a,.home-enter-active .hero-title-motion,.home-enter-active .slogan-motion,.home-enter-active .hero-side-art,.home-enter-active .scroll-cue img{opacity:1;animation:none;transform:none;filter:none;clip-path:none}}

/* Full-width sections: the viewport is the canvas, with proportional local layout. */
.scene{width:100%;max-width:none;margin-inline:0}
.section-band{background:var(--paper)}
.works-band{background:linear-gradient(to bottom,var(--paper) 92.7%,#e84c51 92.7%)}
.service-band{background:#e84c51}
.contact-band{background:linear-gradient(to bottom,#141414 70%,#000 100%)}
@media(min-width:701px){:where(html:not(.layout-ready)) .site-header{padding-inline:max(2.9%,calc((100% - 94.2 * var(--layout-unit)) / 2))}:where(html:not(.layout-ready)) .site-footer{padding-inline:max(11.5%,calc((100% - 77 * var(--layout-unit)) / 2))}:where(html:not(.layout-ready)) .footer-logo{left:calc(50% - 5.85 * var(--layout-unit));width:calc(11.7 * var(--layout-unit))}:where(html:not(.layout-ready)) .hero-title-art{left:calc(50% - 46.8 * var(--layout-unit));width:calc(32.06 * var(--layout-unit))}:where(html:not(.layout-ready)) .slogan{left:calc(50% - 46.4 * var(--layout-unit));width:calc(37.5 * var(--layout-unit))}:where(html:not(.layout-ready)) .hero-side-art{right:calc(50% - 47.65 * var(--layout-unit));width:calc(.75 * var(--layout-unit))}:where(html:not(.layout-ready)) .scroll-cue{left:calc(50% - 1.35 * var(--layout-unit));width:calc(2.735 * var(--layout-unit))}}
:where(html.layout-desktop) .site-header{padding-inline:max(2.9%,calc((100% - 94.2 * var(--layout-unit)) / 2))}:where(html.layout-desktop) .site-footer{padding-inline:max(11.5%,calc((100% - 77 * var(--layout-unit)) / 2))}:where(html.layout-desktop) .footer-logo{left:calc(50% - 5.85 * var(--layout-unit));width:calc(11.7 * var(--layout-unit))}:where(html.layout-desktop) .hero-title-art{left:calc(50% - 46.8 * var(--layout-unit));width:calc(32.06 * var(--layout-unit))}:where(html.layout-desktop) .slogan{left:calc(50% - 46.4 * var(--layout-unit));width:calc(37.5 * var(--layout-unit))}:where(html.layout-desktop) .hero-side-art{right:calc(50% - 47.65 * var(--layout-unit));width:calc(.75 * var(--layout-unit))}:where(html.layout-desktop) .scroll-cue{left:calc(50% - 1.35 * var(--layout-unit));width:calc(2.735 * var(--layout-unit))}

/* Large-screen controls grow with the full-width composition. */
@media (min-width:120rem) {
 .loader-progress{width:min(calc(41.1392405 * var(--layout-unit)),72vw)}
 .loader-percent{font-size:calc(3.0063291 * var(--layout-unit))}
 .loader-state,.loader-percent small{font-size:calc(.79113924 * var(--layout-unit))}
 .loader-signature{font-size:calc(.7120253 * var(--layout-unit));gap:calc(1.2658228 * var(--layout-unit));margin-top:calc(1.4240506 * var(--layout-unit))}
 .loader-signature>span:last-child{font-size:calc(.79113924 * var(--layout-unit))}
 .loader-status{margin-bottom:calc(1.3449367 * var(--layout-unit))}}@media (min-width:120rem) {:root:where(:not(.layout-ready)){
  --layout-unit:1vw;
  --header-height:calc(5.0632911392 * var(--layout-unit));
 }:where(html:not(.layout-ready)) .qr-popup{width:min(calc(26.898734 * var(--layout-unit)),calc(calc(100 * var(--layout-unit)) - 2rem))}}
:root:where(.layout-wide){
  --layout-unit:1vw;
  --header-height:calc(5.0632911392 * var(--layout-unit));
 }:where(html.layout-wide) .qr-popup{width:min(calc(26.898734 * var(--layout-unit)),calc(calc(100 * var(--layout-unit)) - 2rem))}

@media(min-width:701px){:root:where(:not(.layout-ready)){--header-height:max(3.375rem,calc(5 * var(--layout-unit)))}:where(html:not(.layout-ready)) .site-header{padding-inline:2.9%}:where(html:not(.layout-ready)) .site-footer{padding-inline:11.5%}:where(html:not(.layout-ready)) .hero-title-art{left:3.2%;width:32.06%}:where(html:not(.layout-ready)) .slogan{left:3.6%;width:37.5%}:where(html:not(.layout-ready)) .hero-side-art{right:2.35%;width:.75%}:where(html:not(.layout-ready)) .scroll-cue{left:48.65%;width:2.735%}:where(html:not(.layout-ready)) .site-header nav a{font-size:max(.75rem,calc(.94 * var(--layout-unit)))}:where(html:not(.layout-ready)) .social-icons img{max-width:none}:where(html:not(.layout-ready)) .work-overlay>span{font-size:max(.625rem,var(--layout-unit))}:where(html:not(.layout-ready)) .work-overlay b{font-size:max(.75rem,calc(1.05 * var(--layout-unit)))}}
:root:where(.layout-desktop){--header-height:max(3.375rem,calc(5 * var(--layout-unit)))}:where(html.layout-desktop) .site-header{padding-inline:2.9%}:where(html.layout-desktop) .site-footer{padding-inline:11.5%}:where(html.layout-desktop) .hero-title-art{left:3.2%;width:32.06%}:where(html.layout-desktop) .slogan{left:3.6%;width:37.5%}:where(html.layout-desktop) .hero-side-art{right:2.35%;width:.75%}:where(html.layout-desktop) .scroll-cue{left:48.65%;width:2.735%}:where(html.layout-desktop) .site-header nav a{font-size:max(.75rem,calc(.94 * var(--layout-unit)))}:where(html.layout-desktop) .social-icons img{max-width:none}:where(html.layout-desktop) .work-overlay>span{font-size:max(.625rem,var(--layout-unit))}:where(html.layout-desktop) .work-overlay b{font-size:max(.75rem,calc(1.05 * var(--layout-unit)))}

/* A distinct, visible entrance for the full-width Showreel surface. */
.motion-ready .reel.reveal{
 opacity:0;translate:0 clamp(24px,4svh,80px);
 clip-path:inset(0 0 10% 0 round 0);
 transition:opacity .9s ease,translate 1.2s var(--ease),clip-path 1.2s var(--ease);
}
.motion-ready .reel.reveal.is-visible{opacity:1;translate:0 0;clip-path:inset(0)}
.motion-ready .reel.reveal .reel-play-control,.motion-ready .reel.reveal .reel-copy{
 opacity:0;translate:0 clamp(8px,1.2svh,24px);
 transition:opacity .65s ease .22s,translate .85s var(--ease) .22s,transform .45s var(--ease);
}
.motion-ready .reel.reveal.is-visible .reel-play-control,.motion-ready .reel.reveal.is-visible .reel-copy{opacity:1;translate:0 0}
@media(prefers-reduced-motion:reduce){
 .motion-ready .reel.reveal,.motion-ready .reel.reveal .reel-play-control,.motion-ready .reel.reveal .reel-copy{opacity:1;translate:none;clip-path:none;transition:none}
}

/* Preserve the existing composition at 100%; native browser zoom then magnifies
   it without viewport-based sizing cancelling the user's chosen zoom. Dialogs,
   loader and QR popovers continue to fit the actual visible viewport. */
html.layout-ready body{width:var(--page-layout-width);margin-inline:auto}
html.layout-ready.page-magnified:not(.site-loading) body:not(.modal-open){overflow-x:visible}

/* Spine uses the original character box and scale, with overscan for hair/halo.
   Fade stops are remapped to the larger canvas so they stay at the same page Y. */
.character[data-spine]{-webkit-mask-image:none;mask-image:none}
.character[data-spine]>.puppet-poster{-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 72%,rgba(0,0,0,.96) 79%,rgba(0,0,0,.7) 86%,rgba(0,0,0,.3) 93%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 72%,rgba(0,0,0,.96) 79%,rgba(0,0,0,.7) 86%,rgba(0,0,0,.3) 93%,transparent 100%)}
.character[data-spine]>canvas{inset:auto;left:-4%;top:-4%;width:124%;height:104%;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 73.076923%,rgba(0,0,0,.96) 79.807692%,rgba(0,0,0,.7) 86.538462%,rgba(0,0,0,.3) 93.269231%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 73.076923%,rgba(0,0,0,.96) 79.807692%,rgba(0,0,0,.7) 86.538462%,rgba(0,0,0,.3) 93.269231%,transparent 100%)}
.character[data-spine]>canvas,.character[data-spine]>.puppet-poster{transition:opacity .35s cubic-bezier(.22,.61,.36,1);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
@media(prefers-reduced-motion:reduce){.character[data-spine]>canvas,.character[data-spine]>.puppet-poster{transition:none}}

/* Drawing space only: preserve the Q版 slot and its existing entrance transform. */
.chibi-motion[data-spine]>canvas{inset:auto;left:-2%;top:-1%;width:109%;height:102%}
.chibi-motion[data-spine]>canvas,.chibi-motion[data-spine]>.puppet-poster{transition:none}
.chibi-motion[data-spine].puppet-ready>.puppet-poster{visibility:hidden}