/* FRAME / light, type and movement. All assets are served locally. */
@font-face{font-family:Frame Display;src:url('/display-font.ttf') format('truetype');font-style:normal;font-weight:500;font-display:swap}
:root{--bg:#111013;--paper:#f2eee8;--muted:#aba6b0;--line:#ffffff23;--accent:#ff9b78;--violet:#c1afff;--ice:#a9d6dc;--display:'Frame Display','Songti SC','STSong','SimSun',serif}
body{background:var(--bg);font-family:'Helvetica Neue','Segoe UI','PingFang SC','Microsoft YaHei',sans-serif}
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 90% 5%,#61507c18,transparent 48%),radial-gradient(ellipse at 5% 65%,#8c49300d,transparent 40%)}
::selection{background:#b9a6ef;color:#151117}
.scroll-progress{position:fixed;top:0;left:0;width:100%;height:3px;z-index:40;pointer-events:none;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#ff9b78,#c1afff 65%,#a9d6dc)}
.site-header{position:sticky;top:0;height:88px;background:#111013e8;backdrop-filter:blur(20px);border-color:#ffffff16;transition:height .35s,box-shadow .35s}
body.has-scrolled .site-header{height:72px;box-shadow:0 10px 36px #0002}
.wordmark{font-family:Arial,sans-serif;font-size:29px;font-weight:900;letter-spacing:-2px}
.brand-dot{background:#ff9b78;box-shadow:0 0 16px #ff9b7830}
.brand-label{font-family:'Microsoft YaHei',sans-serif;letter-spacing:2px;font-size:12px;color:#bab1b6}
nav{font-size:14px;gap:34px}
nav a{position:relative;padding:10px 0;transition:color .25s}
nav a::after{content:'';position:absolute;bottom:3px;left:0;right:0;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.16,1,.3,1)}
nav a:hover::after,nav a[aria-current=location]::after{transform:scaleX(1)}
.hero-showcase{position:relative;padding-top:27px;isolation:isolate}
.hero-showcase::before{content:'';position:absolute;z-index:-1;inset:-88px 0 0;pointer-events:none;background:radial-gradient(ellipse at 80% 20%,#76577d24,transparent 48%),radial-gradient(ellipse at 10% 50%,#a7462314,transparent 42%)}
.hero-topline{color:#b6adb9!important;letter-spacing:1.6px!important;font-family:'Courier New',monospace}
.hero-topline i{background:var(--ice);box-shadow:0 0 12px #a9d6dc80;animation:statusPulse 3.6s ease-in-out infinite}
.hero-intro{margin:49px 0 43px;gap:7vw;grid-template-columns:1.35fr 1fr}
.hero-kicker{color:var(--accent);font-size:12px;letter-spacing:2px;margin-bottom:22px}
.hero-intro h1{font-family:var(--display);font-size:clamp(48px,5.8vw,88px);font-weight:500;letter-spacing:-.065em;line-height:1.22;animation:none!important}
.hero-intro h1>span{color:var(--accent)}
.type-line{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .08em .12em 0;margin-bottom:-.12em}
.hero-intro h1 .display-char{display:inline-block;color:inherit;animation:typeEnter 1.15s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--char-index) * 55ms + 100ms)}
.hero-intro h1>.type-line:last-child{color:var(--accent)}
.hero-intro h1>.type-line:first-child{color:var(--paper)}
.hero-bio{padding-bottom:10px}
.hero-bio>p{font-size:20px;color:#e1dbe0;line-height:1.85;letter-spacing:.02em}
.hero-bio>span{font-size:13px;letter-spacing:.08em;color:#b5a9b5}
.hero-browse{margin-top:27px;gap:25px;font-size:14px}
.hero-browse>span{display:grid;place-items:center;border:1px solid #ffffff30;border-radius:50%;width:38px;height:38px;font-size:20px;transition:transform .4s,background .4s,color .4s}
.hero-browse:hover>span{background:var(--accent);color:#161014;transform:translate(-3px,3px)}
.hero-feature{animation:frameReveal 1.4s cubic-bezier(.16,1,.3,1) .25s both}
.hero-feature-shell{background:#19151b;border:1px solid #ffffff20}
.feature-screen{background:#19151b}
.feature-eyebrow{font-family:'Courier New','Microsoft YaHei',monospace;letter-spacing:2px}
.feature-title{font-family:var(--display);font-weight:500;letter-spacing:-.03em}
.feature-empty{min-height:400px;padding:112px 42px 44px;border:1px solid #e6c7df25;isolation:isolate;overflow:hidden;background:#19151e}
.feature-empty::before{content:'';position:absolute;inset:-40%;z-index:-2;background:radial-gradient(ellipse at 73% 40%,#d190af55,transparent 24%),radial-gradient(ellipse at 45% 80%,#8951a340,transparent 35%),radial-gradient(ellipse at 90% 70%,#e17d4730,transparent 35%);animation:lightDrift 18s ease-in-out infinite alternate}
.feature-empty::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#161119bb,transparent 75%),repeating-linear-gradient(0deg,#ffffff03 0 1px,transparent 1px 4px)}
.feature-empty h2{font-family:var(--display);font-size:clamp(30px,3.1vw,47px);font-weight:500;letter-spacing:-.03em;line-height:1.5;position:relative;z-index:2}
.feature-empty p{font-size:14px;color:#c2b3c0;position:relative;z-index:2;max-width:440px}
.feature-empty .feature-eyebrow{color:#d9c4d6;font-size:11px}
.feature-empty .btn{position:relative;z-index:2}
.light-study{position:absolute;width:410px;height:410px;right:5%;top:50%;transform:translateY(-50%);pointer-events:none;opacity:.9}
.light-study::before{content:'';position:absolute;inset:13%;border-radius:50%;background:radial-gradient(circle at 30% 28%,#f6c4a7 0%,#e5a28b 10%,#ad7c9c 24%,#69567c 43%,#262239 66%,#16131c 76%);box-shadow:inset -25px -24px 60px #09080f,0 0 70px #c282a327;animation:orbBreathe 8s ease-in-out infinite}
.light-study::after{content:'';position:absolute;inset:0;border:1px solid #eed4e54a;border-radius:50%;transform:rotate(-28deg) scaleY(.32);box-shadow:0 0 30px #e9bac80a;animation:orbitTilt 14s ease-in-out infinite alternate}
.light-study i{position:absolute;inset:3%;border:1px solid #d9c4ef25;border-radius:50%;transform:rotate(38deg) scaleX(.5)}
.study-caption{position:absolute;right:30px;bottom:25px;font:10px 'Courier New',monospace;letter-spacing:3px;color:#c7b4cb;z-index:2}
.hero-showcase .hero-foot{border-color:var(--line);color:#aca3ae;font-size:10px;letter-spacing:1.4px;padding:22px 0}
.hero-coordinate{color:var(--ice)}
.section-pad{padding-top:112px;padding-bottom:112px}
.section-eyebrow{color:#bab0bd;font-family:'Courier New','Microsoft YaHei',monospace;letter-spacing:1.6px;font-size:12px}
.section-eyebrow>span:first-child::before{content:'';display:inline-block;width:7px;height:7px;background:var(--accent);margin-right:12px;vertical-align:2px}
.section-eyebrow>span:last-child{color:var(--accent)}
.section-heading h2,.about-copy h2,.contact-main h2{font-family:var(--display);font-weight:500;letter-spacing:-.055em;line-height:1.3}
.section-heading h2{font-size:clamp(46px,5.2vw,76px)}
.section-heading h2 span{color:var(--violet)}
.section-heading p{color:#bcb3bf;font-size:15px;line-height:2}
.filters{gap:12px}
.filters button{border:1px solid #ffffff20;border-radius:3px;padding:11px 17px;font-size:14px;transition:background .3s,border-color .3s,color .3s,transform .3s}
.filters button.active{background:#c1afff1c;color:#e0d6ff;border-color:#c1afff65}
.filters button:hover{border-color:#c1afff80;transform:translateY(-2px)}
.filters span{color:#b3a3c8;font-size:10px}
.toolbar-note{color:#a999ae;font-size:10px}
.work-image{background:#27202b;border:1px solid #ffffff16}
.work-image::after{content:'';position:absolute;inset:0;pointer-events:none;border:1px solid transparent;transition:border-color .45s,box-shadow .45s}
.work-card:hover .work-image::after{border-color:#c1afff70;box-shadow:inset 0 0 35px #c1afff0c}
.work-card .work-info h3{transition:color .35s}
.work-card:hover .work-info h3{color:var(--violet)}
.work-info .work-arrow{color:var(--violet)}
.work-category{color:#b8a8c4;letter-spacing:.04em}
.empty-frame,.empty-frame.large{border-color:#c1afff25;background:radial-gradient(ellipse at 15% 10%,#7c539033,transparent 65%),#1c1822}
.empty-frame.small{background:radial-gradient(ellipse at 80% 90%,#49777e30,transparent 70%),#151d20;border-color:#a9d6dc30}
.empty-frame.large:hover{border-color:#c1afff70;background:#231c2b}
.empty-frame:disabled{opacity:1;cursor:default}
.empty-center>span{color:#dcd2e4}
.empty-center .empty-plus{font-size:43px;font-weight:200;color:var(--violet);transition:transform .7s}
.empty-frame:hover .empty-plus{transform:rotate(90deg)}
.slot-index,.slot-bottom{color:#b4a3be;letter-spacing:1.6px}
.empty-frame.small .slot-index,.empty-frame.small .slot-bottom,.empty-film{color:var(--ice)}
.empty-center small{color:#b1a6b8}
.about-section{position:relative;isolation:isolate;background:#172126;border-color:#a9d6dc28;overflow:hidden}
.about-section::before{content:'';position:absolute;z-index:-1;inset:0;background:radial-gradient(ellipse at 5% 90%,#43717a32,transparent 55%),linear-gradient(120deg,#1a2328,#171b22)}
.about-section .section-eyebrow>span:first-child::before{background:var(--ice)}
.about-section .section-eyebrow>span:last-child,.about-copy h2 span{color:var(--ice)}
.about-description{color:#b4c1c8;font-size:16px;line-height:2.1}
.capability,.capability:first-child{border-color:#a9d6dc30;transition:padding .5s,background .5s}
.capability:hover{padding-left:14px;background:#a9d6dc06}
.capability h3{font-size:27px;font-weight:400;letter-spacing:.06em}
.capability h3 span{color:#a9c7ce;font-family:'Courier New',monospace;font-size:11px;letter-spacing:2px}
.capability p{color:#a9b7c0;font-size:14px}
.cap-no{color:#91b0bb}
.cap-symbol{color:var(--ice);font-size:34px;transition:transform .6s}
.capability:hover .cap-symbol{transform:rotate(20deg)}
.contact-section{background:#ebe5dc;color:#292328;position:relative;overflow:hidden;--muted:#6d6268;--line:#29232830}
.contact-section .section-eyebrow{color:#76676e}
.contact-section .section-eyebrow>span:last-child{color:#9b4b39}
.contact-section .section-eyebrow>span:first-child::before{background:#bc634d}
.contact-main h2{font-size:clamp(55px,7vw,105px)}
.contact-main h2 span{color:#a94d3d}
.contact-arrow{width:115px;height:115px;font-size:55px;border-color:#9f777260;color:#a94d3d;transition:transform .5s,background .5s,color .5s}
.contact-arrow:hover{background:#a94d3d;color:#f9e9dc;border-color:#a94d3d;transform:rotate(8deg)}
.contact-bottom{font-size:14px;color:#6d6268}
.contact-section .email-link{color:#493039}
footer{background:#111013;gap:20px}
footer>span,footer>a:last-child{font-size:12px}
.reveal{transform:translateY(32px);transition-duration:1.1s;transition-delay:var(--reveal-delay,0ms)}
.dialog{background:#1c1820;border-color:#6e596d}
.dialog input,.dialog textarea,.dialog select{background:#151217;border-color:#665366}
.dialog .btn{background:var(--accent);border-color:var(--accent);color:#21151a}
.dialog .btn.secondary{background:transparent;color:var(--paper);border-color:#665366}
.dialog .btn.danger{background:#ad5045;border-color:#ad5045;color:white}
.toast{background:#211b27;border-color:#6e596d}
@keyframes typeEnter{from{opacity:0;transform:translate3d(0,110%,0) rotate(5deg);filter:blur(5px)}to{opacity:1;transform:translateZ(0) rotate(0);filter:blur(0)}}
@keyframes frameReveal{from{opacity:0;transform:translateY(32px);clip-path:inset(0 0 9% 0)}to{opacity:1;transform:translateY(0);clip-path:inset(0)}}
@keyframes lightDrift{from{transform:translate(-2%,-2%) rotate(-4deg)}to{transform:translate(3%,2%) rotate(5deg)}}
@keyframes orbBreathe{0%,100%{transform:scale(.97);filter:hue-rotate(-5deg)}50%{transform:scale(1.03);filter:hue-rotate(12deg)}}
@keyframes orbitTilt{from{transform:rotate(-28deg) scaleY(.32)}to{transform:rotate(-14deg) scaleY(.47)}}
@keyframes statusPulse{0%,100%{opacity:1}50%{opacity:.45}}
@media(min-width:701px){.hero-bio{animation:typeEnter 1.3s cubic-bezier(.16,1,.3,1) .45s both}.capability:nth-child(2){--reveal-delay:100ms}.capability:nth-child(3){--reveal-delay:200ms}}
@media(max-width:1000px){.hero-intro{gap:35px}.hero-intro h1{font-size:6.1vw}.hero-bio>p{font-size:18px}.light-study{right:-3%;width:350px;height:350px;opacity:.65}.feature-empty h2{max-width:65%}.toolbar-note{display:none}}
@media(max-width:700px){.site-header{height:76px}body.has-scrolled .site-header{height:68px}.wordmark{font-size:26px}nav{gap:22px;font-size:14px}.hero-intro{grid-template-columns:1fr;margin:33px 0 29px;gap:25px}.hero-intro h1{font-size:clamp(43px,10.8vw,65px);line-height:1.3}.hero-kicker{font-size:11px;letter-spacing:1.5px;margin-bottom:16px}.hero-bio>p{font-size:17px;line-height:1.8}.hero-bio>span{font-size:12px}.hero-browse{margin-top:18px;font-size:14px}.hero-browse>span{width:32px;height:32px}.feature-empty{min-height:360px;padding:80px 23px 95px}.feature-empty h2{font-size:29px;max-width:none;line-height:1.5}.feature-empty p{font-size:13px;max-width:230px;line-height:1.9}.light-study{width:260px;height:260px;right:-105px;top:65%;opacity:.38}.study-caption{font-size:8px;right:20px;bottom:20px;letter-spacing:2px}.feature-empty .feature-eyebrow{font-size:9px;letter-spacing:1px}.hero-showcase .hero-foot{font-size:8px;letter-spacing:.5px}.section-pad{padding-top:75px;padding-bottom:75px}.section-eyebrow{font-size:10px;letter-spacing:.8px}.section-eyebrow>span:last-child{font-size:11px}.section-eyebrow>span:first-child::before{width:5px;height:5px;margin-right:8px}.section-heading h2,.about-copy h2{font-size:47px}.section-heading p{font-size:14px}.filters{gap:8px}.filters button{font-size:12px;padding:10px 11px}.filters span{font-size:9px;margin-left:5px}.empty-grid{gap:18px}.empty-center>span{font-size:17px}.slot-index,.slot-bottom{font-size:9px;letter-spacing:.6px}.about-description{font-size:15px}.capability h3{font-size:24px}.capability p{font-size:13px}.capability h3 span{font-size:10px}.contact-main h2{font-size:52px}.contact-arrow{width:68px;height:68px;font-size:36px;flex-shrink:0}.contact-bottom{font-size:12px}footer>span,footer>a:last-child{font-size:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}.hero-intro h1 .display-char{opacity:1;transform:none;filter:none}}

/* Movement is tied to viewing, scrolling and pointing, rather than only page load. */
.motion-ready .hero-intro h1 .display-char{animation:none}
.motion-ready .hero-intro h1.title-running .display-char{animation:cinemaType 1.5s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--char-index) * 80ms + 80ms)}
.hero-intro h1.title-running .type-line:last-child{animation:titleGlow 2.3s ease-out .9s both}
.reveal{opacity:0;transform:translateY(54px);filter:blur(3px);transition:opacity 1.05s ease,transform 1.3s cubic-bezier(.16,1,.3,1),filter 1s ease;transition-delay:var(--reveal-delay,0ms)}
.reveal.visible{opacity:1;transform:translateY(0);filter:blur(0)}
.section-heading.reveal h2,.about-copy.reveal h2,.contact-main.reveal h2{clip-path:inset(0 0 100% 0);transform:translateY(22px);transition:clip-path 1.5s cubic-bezier(.16,1,.3,1),transform 1.5s cubic-bezier(.16,1,.3,1)}
.section-heading.reveal.visible h2,.about-copy.reveal.visible h2,.contact-main.reveal.visible h2{clip-path:inset(0);transform:translateY(0)}
.section-heading.reveal p{transition:opacity .8s .2s,transform 1.1s .2s;opacity:0;transform:translateY(20px)}
.section-heading.reveal.visible p{opacity:1;transform:translateY(0)}
.feature-empty::before{animation:lightDrift 7s ease-in-out infinite alternate}
.feature-empty::after{background:linear-gradient(115deg,transparent 30%,#ffd8d517 45%,transparent 60%),linear-gradient(90deg,#161119bb,transparent 75%),repeating-linear-gradient(0deg,#ffffff03 0 1px,transparent 1px 4px);background-size:260% 100%,100% 100%,100% 100%;animation:lightSweep 8s ease-in-out infinite}
.light-study{animation:orbFloat 6.5s ease-in-out infinite}
.light-study::before{animation:orbBreathe 5s ease-in-out infinite}
.light-study::after{animation:orbitTilt 7s ease-in-out infinite alternate}
.light-study i{animation:secondOrbit 9s ease-in-out infinite alternate}
.study-caption::before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent);margin-right:10px;animation:statusPulse 2.5s ease-in-out infinite}
.interactive-surface{transform-style:preserve-3d;transform:perspective(1400px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .65s cubic-bezier(.16,1,.3,1),border-color .4s;isolation:isolate}
.surface-light{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;background:radial-gradient(circle 280px at var(--pointer-x,50%) var(--pointer-y,50%),#f3dfec26,transparent 75%);mix-blend-mode:screen;transition:opacity .5s}
.pointer-inside>.surface-light{opacity:1}
.feature-empty.pointer-inside,.empty-frame.pointer-inside{border-color:#c1afff80}
.contact-arrow,.hero-browse>span{transition:translate .5s cubic-bezier(.16,1,.3,1),transform .5s,background .5s,color .5s}
.filters button{transition:background .35s,border-color .35s,color .35s,transform .4s,box-shadow .4s}
.filters button.active{box-shadow:0 4px 22px #c1afff12}
.capability:hover .cap-symbol{transform:rotate(35deg) scale(1.2);color:#e3f8ff}
.capability:hover h3{color:var(--ice)}
.capability h3{transition:color .35s}
.contact-arrow:hover{box-shadow:0 14px 35px #a94d3d25}
.work-card:hover .play-circle{transform:translate(-50%,-50%) scale(1.12);box-shadow:0 0 0 12px #ffffff0c}
.work-card:active .work-image{transform:scale(.985)}
@keyframes cinemaType{from{opacity:0;transform:translate3d(0,125%,0) rotate(7deg);filter:blur(7px)}to{opacity:1;transform:translateZ(0);filter:blur(0)}}
@keyframes titleGlow{0%{text-shadow:0 0 0 transparent}45%{text-shadow:0 0 34px #ff9b7850}100%{text-shadow:0 0 0 transparent}}
@keyframes orbFloat{0%,100%{transform:translateY(-50%) translateX(-5px) rotate(-3deg)}50%{transform:translateY(calc(-50% - 16px)) translateX(8px) rotate(3deg)}}
@keyframes secondOrbit{from{transform:rotate(20deg) scaleX(.4)}to{transform:rotate(65deg) scaleX(.7)}}
@keyframes lightSweep{0%,100%{background-position:100% 0,0 0,0 0}50%{background-position:0 0,0 0,0 0}}
@media(max-width:700px){.reveal{transform:translateY(35px)}.section-heading.reveal h2,.about-copy.reveal h2,.contact-main.reveal h2{transition-duration:1.2s}.light-study{animation-duration:7s}}
@media(prefers-reduced-motion:reduce){.motion-ready .hero-intro h1.title-running .display-char,.hero-intro h1.title-running .type-line:last-child{animation:none!important}.reveal,.reveal.visible{opacity:1;transform:none;filter:none}.section-heading.reveal h2,.about-copy.reveal h2,.contact-main.reveal h2,.section-heading.reveal p{opacity:1;transform:none;clip-path:none}.interactive-surface{transform:none!important}.surface-light{display:none}}

/* Registered website footer. Keep readable on narrow screens. */
footer{height:auto;min-height:115px;flex-wrap:wrap;padding-top:28px;padding-bottom:24px}
footer .site-registration{flex:0 0 100%;order:10;text-align:center;padding-top:18px;border-top:1px solid #ffffff1c;font-size:12px;line-height:1.8;letter-spacing:.04em;color:#c1b8c5;transition:color .25s}
footer .site-registration:hover{color:var(--accent)}
@media(max-width:700px){footer .site-registration{font-size:12px;padding-top:16px}}