/* V3 — editorial opening, frosted navigation, and slow scroll choreography */
:root{--night:#090a0e;--ink:#f3f1f7;--muted:#a6a1b3;--violet:#b797ff;--acid:#d4ff5d;--glass:rgba(18,18,27,.58)}
html{scroll-padding-top:110px}
body{background:var(--night);overflow-x:hidden}
body::before{height:100vh;background:radial-gradient(ellipse at 75% 18%,#4d2c8d22,transparent 48%),radial-gradient(ellipse at 10% 70%,#d4ff5d08,transparent 45%)}
.site-header{position:fixed;z-index:60;top:18px;left:50%;transform:translateX(-50%);width:calc(100% - 56px);max-width:1380px;height:68px;padding:0 20px;border:1px solid transparent;border-radius:18px;background:rgba(12,13,18,.12);backdrop-filter:blur(0);transition:top .7s cubic-bezier(.2,.8,.2,1),background .7s,border-color .7s,box-shadow .7s}
.site-header.nav-scrolled{top:14px;background:rgba(15,15,22,.68);border-color:#ffffff1d;backdrop-filter:blur(22px) saturate(130%);box-shadow:0 12px 45px #0005}
.site-header .brand,.site-header nav,.site-header .header-contact,.site-header .motion-toggle{position:relative;z-index:2}
.site-header nav{color:#c4bfce}
.site-header nav a{position:relative;padding-block:9px}
.site-header nav a::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px;background:var(--acid);transition:right .45s cubic-bezier(.2,.8,.2,1)}
.site-header nav a:hover::after{right:0}
.header-contact{border-radius:100px;background:#ffffff06;border-color:#ffffff30}
.header-contact:hover{background:var(--acid);color:#11150b;border-color:var(--acid)}
.hero-opening{position:relative;display:grid;grid-template-columns:minmax(380px,.86fr) minmax(500px,1.14fr);align-items:stretch;gap:3vw;width:100%;min-height:100svh;height:max(760px,100svh);padding:145px 6.8vw 66px;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 78% 45%,#23183d 0%,transparent 45%),linear-gradient(112deg,#0b0b10 0%,#0b0b10 42%,#151225 100%)}
.hero-opening::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#090a0eee 0%,#090a0e9a 33%,transparent 73%),linear-gradient(0deg,#090a0e 0%,transparent 20%);pointer-events:none}
.hero-noise{position:absolute;inset:0;z-index:0;opacity:.16;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");mix-blend-mode:soft-light}
.hero-copy{position:relative;z-index:5;align-self:center;max-width:670px;padding-top:30px}
.hero-kicker{font-size:10px;letter-spacing:2px;color:#b7b1c4;animation:hero-fade-up 1s .25s both cubic-bezier(.16,1,.3,1)}
.kicker-slash{color:#6a6476;padding-inline:8px}
.hero-intro{font-size:15px;color:#d0cbd8;margin:38px 0 17px;animation:hero-fade-up 1s .38s both cubic-bezier(.16,1,.3,1)}
.hero-title{font-size:clamp(54px,7.4vw,116px);line-height:.96;letter-spacing:-.085em;font-weight:620;max-width:760px}
.hero-title-line{display:block;overflow:hidden;clip-path:inset(0 0 0 0);height:1.02em}
.hero-title-line>span{display:block;transform:translateY(115%) scaleX(.92);transform-origin:left center;animation:title-raise 1.15s both cubic-bezier(.16,1,.3,1)}
.hero-title-line:nth-child(1)>span{animation-delay:.5s}.hero-title-line:nth-child(2)>span{animation-delay:.66s}.hero-title-line:nth-child(3)>span{animation-delay:.82s}
.hero-title-accent{color:var(--acid)}
.hero-description{font-size:14px;line-height:1.95;color:#a9a3b2;margin-top:27px;animation:hero-fade-up 1s 1.08s both cubic-bezier(.16,1,.3,1)}
.hero-description strong{color:#eeeaf4;font-weight:500}
.hero-actions{animation:hero-fade-up 1s 1.2s both cubic-bezier(.16,1,.3,1)}
.hero-meta{animation:hero-fade-up 1s 1.36s both cubic-bezier(.16,1,.3,1)}
.hero-character-stage{position:relative;z-index:2;min-height:640px;align-self:stretch;overflow:hidden;border-left:1px solid #ffffff10;background:radial-gradient(ellipse at 56% 48%,#8d59dd2b 0%,#4c2f8120 23%,transparent 62%);clip-path:inset(0 0 0 0)}
.hero-character-stage::before{content:"";position:absolute;inset:6% 0 5% 6%;border:1px solid #d1b4ff24;border-radius:50%;transform:rotate(-17deg) scaleY(.72);box-shadow:0 0 70px #8158e620;animation:orbit-breathe 9s ease-in-out infinite alternate}
.hero-character-stage::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#090a0e 0%,transparent 19%),linear-gradient(0deg,#090a0e 0%,transparent 20%);pointer-events:none}
.hero-character-glow{position:absolute;width:70%;aspect-ratio:1;right:10%;top:13%;border-radius:50%;background:radial-gradient(circle,#b997ff35 0%,#5832a31e 36%,transparent 70%);filter:blur(18px);animation:glow-pulse 8s ease-in-out infinite alternate}
.hero-character-shadow{position:absolute;bottom:9%;right:17%;width:56%;height:9%;border-radius:50%;background:#0008;filter:blur(20px);animation:shadow-breathe 5s ease-in-out infinite alternate}
.hero-character{position:absolute;z-index:2;bottom:-6%;right:5%;width:min(75%,760px);max-height:93%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 28px 45px #0008);transform:translate3d(calc(var(--pointer-x,0) * 1px),calc(var(--pointer-y,0) * 1px),0) scale(1.02);animation:character-enter 1.6s 0.25s both cubic-bezier(.16,1,.3,1)}
.hero-character-copy{position:absolute;z-index:3;left:9%;bottom:17%;display:flex;align-items:center;gap:18px;color:#ddd6e8;font-size:9px;letter-spacing:2px;line-height:1.6;animation:hero-fade-up 1s 1.2s both cubic-bezier(.16,1,.3,1)}
.hero-character-copy b{color:var(--acid);font-size:28px;font-weight:300}
.hero-character-tags{position:absolute;z-index:3;right:6%;top:20%;display:flex;flex-direction:column;gap:7px;animation:hero-fade-up 1s 1.1s both cubic-bezier(.16,1,.3,1)}
.hero-character-tags span{border:1px solid #cdb4f24c;border-radius:30px;padding:6px 11px;color:#cab9df;font-size:8px;letter-spacing:1.6px;background:#151120a8;backdrop-filter:blur(8px)}
.hero-stage-label{position:absolute;z-index:3;color:#8f829f;font-size:8px;letter-spacing:2px}.hero-stage-label-top{left:8%;top:4%;animation:hero-fade-up 1s .9s both cubic-bezier(.16,1,.3,1)}.hero-stage-label-bottom{right:7%;bottom:5%;animation:hero-fade-up 1s 1.45s both cubic-bezier(.16,1,.3,1)}
.hero-orbit-lines{position:absolute;z-index:1;right:7%;top:20%;width:48vw;max-width:760px;aspect-ratio:1;pointer-events:none;opacity:.75}.hero-orbit-lines span{position:absolute;inset:0;border:1px solid #b694f32f;border-radius:50%;transform:rotate(25deg) scaleY(.55);animation:orbit-spin 20s linear infinite}.hero-orbit-lines span:nth-child(2){inset:13%;transform:rotate(-52deg) scaleY(.44);animation-duration:27s;animation-direction:reverse}.hero-orbit-lines span:nth-child(3){inset:26%;transform:rotate(75deg) scaleY(.7);animation-duration:15s}
.hero-scroll-cue{position:absolute;z-index:5;bottom:28px;left:6.8vw;display:flex;align-items:center;gap:14px;color:#84788e;font-size:8px;letter-spacing:2px;animation:hero-fade-up 1s 1.6s both cubic-bezier(.16,1,.3,1)}.hero-scroll-cue i{display:block;width:56px;height:1px;background:linear-gradient(90deg,var(--acid),transparent);transform-origin:left;animation:cue-pulse 2s ease-in-out infinite}
.principle-strip{position:relative;z-index:4;margin-top:0}
.scroll-section{position:relative;isolation:isolate}
.scroll-section::before{content:attr(data-display);position:absolute;z-index:-1;left:3.8vw;top:22px;font-size:clamp(70px,13vw,210px);font-weight:650;letter-spacing:-.08em;line-height:.9;white-space:nowrap;color:#fff;opacity:0;transform:translateY(90px) scale(1.12);transform-origin:left top;transition:opacity 1.5s .05s,transform 1.5s .05s cubic-bezier(.16,1,.3,1);pointer-events:none}
.scroll-section.is-visible::before{opacity:.045;transform:none}
.scroll-section .section-heading,.scroll-section .internship-panel,.scroll-section .project-grid,.scroll-section .source-note,.scroll-section .belief-grid,.scroll-section .thinking-note,.scroll-section .about-copy,.scroll-section .resume-file,.scroll-section .contact-actions{position:relative;z-index:2}
.scroll-section .section-heading{transform:translateY(55px);opacity:0;transition:transform 1s .15s,opacity 1s .15s cubic-bezier(.16,1,.3,1)}
.scroll-section.is-visible .section-heading{transform:none;opacity:1}
.scroll-reveal{opacity:0;transform:translateY(55px) scale(.97);transition:opacity 1s var(--delay,0s),transform 1.1s var(--delay,0s) cubic-bezier(.16,1,.3,1)}
.scroll-reveal.is-visible{opacity:1;transform:none}
.internship-panel{transition:transform 1.2s .22s cubic-bezier(.16,1,.3,1),opacity 1s .22s!important}
.project-card{overflow:hidden}
.project-cover{position:relative}
.project-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,#ffffff35 47%,transparent 64%);transform:translateX(-120%);transition:transform 1.2s .35s cubic-bezier(.16,1,.3,1);pointer-events:none}
.project-card.is-visible .project-cover::after{transform:translateX(120%)}
.project-cover img,.case-process img,.case-gallery img{transition:transform 1.4s cubic-bezier(.16,1,.3,1);will-change:transform}
.project-card:hover .project-cover img{transform:scale(1.035)}
.belief-grid .belief{transform:translateY(65px);opacity:0;transition:transform 1.1s var(--delay,0s) cubic-bezier(.16,1,.3,1),opacity 1s var(--delay,0s)}
.scroll-section.is-visible .belief{transform:none;opacity:1}
.resume-file,.contact-section{overflow:hidden}
.contact-section::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 20%,#ffffff0b 46%,transparent 60%);transform:translateX(-100%);transition:transform 1.4s .35s cubic-bezier(.16,1,.3,1);pointer-events:none}.contact-section.is-visible::after{transform:translateX(100%)}
@keyframes title-raise{0%{transform:translateY(115%) scaleX(.92)}72%{transform:translateY(-3%) scaleX(1.015)}100%{transform:translateY(0) scaleX(1)}}
@keyframes hero-fade-up{0%{opacity:0;transform:translateY(24px)}100%{opacity:1;transform:none}}
@keyframes character-enter{0%{opacity:0;transform:translate3d(8vw,12vh,0) scale(1.12);filter:blur(10px) drop-shadow(0 30px 45px #0008)}100%{opacity:1;transform:translate3d(calc(var(--pointer-x,0) * 1px),calc(var(--pointer-y,0) * 1px),0) scale(1.02);filter:blur(0) drop-shadow(0 28px 45px #0008)}}
@keyframes orbit-spin{to{transform:rotate(385deg) scaleY(.55)}}
@keyframes orbit-breathe{to{transform:rotate(-12deg) scaleY(.77) scale(1.04);opacity:.7}}
@keyframes glow-pulse{to{transform:scale(1.16);opacity:.72}}
@keyframes shadow-breathe{to{transform:scaleX(.8);opacity:.65}}
@keyframes cue-pulse{50%{transform:scaleX(.5);opacity:.45}}
@media(max-width:1100px){.site-header{width:calc(100% - 36px)}.hero-opening{grid-template-columns:minmax(330px,.9fr) minmax(360px,1.1fr);padding-inline:5.6vw;gap:1vw}.hero-title{font-size:clamp(54px,7vw,84px)}.hero-character{width:86%;right:-2%}.hero-character-tags{right:2%}.hero-character-copy{left:3%}.hero-scroll-cue{left:5.6vw}}
@media(max-width:800px){.site-header{height:62px;top:12px;padding-inline:13px}.site-header.nav-scrolled{top:8px}.hero-opening{grid-template-columns:1fr;min-height:900px;height:auto;padding:140px 6vw 70px;gap:24px}.hero-copy{align-self:start;padding-top:20px}.hero-title{font-size:clamp(58px,11vw,88px)}.hero-character-stage{min-height:540px;margin-inline:-6vw;border-left:0}.hero-character{width:76%;right:9%;bottom:-4%}.hero-character-tags{right:7%;top:16%}.hero-character-copy{left:12%;bottom:16%}.hero-orbit-lines{right:3%;top:43%;width:86vw}.hero-scroll-cue{left:6vw}.scroll-section::before{font-size:clamp(58px,14vw,120px);top:14px}}
@media(max-width:600px){.site-header{width:calc(100% - 24px);border-radius:15px}.site-header .brand-mark{border-radius:6px}.hero-opening{min-height:780px;padding:120px 20px 46px;gap:4px}.hero-kicker{font-size:8px;letter-spacing:1.3px}.hero-intro{margin-top:28px;font-size:14px}.hero-title{font-size:clamp(48px,13vw,66px);letter-spacing:-.075em}.hero-description{font-size:12px;margin-top:22px}.hero-actions{margin-top:24px}.hero-meta{font-size:8px;margin-top:22px}.hero-character-stage{min-height:390px;margin-inline:-20px}.hero-character{width:92%;right:1%;bottom:-2%}.hero-character-tags{right:5%;top:14%;gap:5px}.hero-character-tags span{font-size:6px;padding:5px 8px}.hero-character-copy{left:10%;bottom:12%;font-size:7px}.hero-character-copy b{font-size:21px}.hero-stage-label{font-size:6px;letter-spacing:1px}.hero-orbit-lines{width:108vw;right:-11%;top:42%}.hero-scroll-cue{bottom:18px;left:20px;font-size:7px}.hero-scroll-cue i{width:36px}.scroll-section::before{font-size:18vw;left:20px;top:10px}.scroll-section .section-heading{transform:translateY(35px)}.scroll-reveal{transform:translateY(35px) scale(.98)}body{overflow-x:hidden}}
@media(prefers-reduced-motion:reduce){.hero-title-line>span,.hero-kicker,.hero-intro,.hero-description,.hero-actions,.hero-meta,.hero-character,.hero-character-copy,.hero-character-tags,.hero-stage-label,.hero-scroll-cue{animation:none!important;transform:none!important;opacity:1!important}.hero-orbit-lines span,.hero-character-stage::before,.hero-character-glow,.hero-character-shadow,.hero-scroll-cue i{animation:none!important}.scroll-section::before,.scroll-section .section-heading,.scroll-reveal,.belief-grid .belief{transition:none!important;transform:none!important;opacity:1!important}}

html,body{width:100%;max-width:100%;overflow-x:clip}
.scroll-section::before{right:0;width:100%;max-width:100%;overflow:hidden}
.hero-orbit-lines{max-width:100%;overflow:hidden}

.scroll-section{overflow-x:clip}

/* Studio identity additions: keep the title and team legible without turning the page into a resume wall. */
.hero-role{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;margin-top:17px;color:#a9a2b6;font-size:11px;line-height:1.5;letter-spacing:.02em;animation:hero-fade-up 1s 1.16s both cubic-bezier(.16,1,.3,1)}
.hero-role span{color:#e0d9e8}.hero-role i{width:3px;height:3px;border-radius:50%;background:#71657f;display:inline-block}.hero-role strong{color:var(--acid);font-weight:500}
.studio-profile{display:flex;align-items:center;gap:18px;max-width:580px;margin:25px 0 27px;padding:15px;border:1px solid #ffffff1a;border-radius:14px;background:linear-gradient(110deg,#17131f,#12131a 78%);box-shadow:0 14px 32px #0002}
.studio-logo-frame{width:150px;height:62px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:9px;background:#fff;border:1px solid #ffffff30}
.studio-logo-frame img{width:100%;height:100%;object-fit:contain}
.studio-profile-copy{min-width:0}.studio-kicker{display:block;color:#9384a6;font-size:8px;letter-spacing:1.7px;line-height:1.2}.studio-profile-copy strong{display:block;margin-top:8px;color:#e6deef;font-size:13px;line-height:1.5;font-weight:500}.studio-profile-copy p{margin:7px 0 9px!important;color:#9f93ae!important;font-size:11px!important;line-height:1.7!important}.studio-wechat-label{display:inline-block;margin-right:8px;color:#81758f;font-size:9px}.studio-wechat-name{color:var(--acid);font-size:10px;letter-spacing:.15px}
.contact-studio{margin-top:8px!important;color:#a697b5!important;font-size:10px!important}.contact-studio strong{color:var(--acid);font-weight:500}
@media(max-width:600px){.hero-role{font-size:10px;gap:7px 9px;margin-top:15px}.studio-profile{align-items:flex-start;gap:13px;margin:22px 0 24px;padding:13px}.studio-logo-frame{width:132px;height:50px}.studio-profile-copy strong{font-size:12px;margin-top:6px}.studio-profile-copy p{font-size:10px!important}.studio-wechat-label{font-size:8px}.studio-wechat-name{font-size:9px}.contact-studio{font-size:9px!important}}