:root{--bg:#07070f;--text:#f0f0ff;--muted:#77778f;--purple:#8b5cf6;--line:rgba(255,255,255,.08)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,"PingFang SC",system-ui,sans-serif}a{color:inherit;text-decoration:none}header{height:74px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 max(24px,calc((100% - 1152px)/2));position:fixed;top:0;width:100%;z-index:20;background:rgba(7,7,15,.8);backdrop-filter:blur(18px)}.brand{font-size:14px;font-weight:700}.brand b{display:inline-grid;place-items:center;background:#6d28d9;border-radius:50%;width:28px;height:28px;margin-right:8px}nav{display:flex;gap:40px;margin:auto;color:#77778f;font-size:12px}nav a:hover{color:#fff}.actions{display:flex;gap:10px}.actions a,.hero-buttons a{border:1px solid var(--line);padding:11px 22px;border-radius:24px;font-size:12px}.primary{background:linear-gradient(135deg,#7c3aed,#5b21b6)!important;border:0!important;box-shadow:0 0 28px #6d28d966}.menu{display:none;margin-left:auto;background:none;border:0;color:white;font-size:20px}.hero{height:930px;padding-top:215px;text-align:center;position:relative;overflow:hidden}.hero h1{font-size:68px;line-height:1.1;letter-spacing:-3px;margin:35px 0 24px}.hero em,.contact em{font-style:normal;color:#a78bfa}.hero p,.contact p,.about p{color:var(--muted);line-height:1.8;font-size:14px}.available{display:inline-block;color:#a78bfa;border:1px solid #7c3aed55;border-radius:18px;padding:7px 14px;font:10px monospace;letter-spacing:2px}.hero-buttons{display:flex;justify-content:center;gap:16px;margin:42px}.socials{display:flex;justify-content:center;gap:13px}.socials button{border:1px solid var(--line);background:none;color:#77778f;border-radius:50%;width:34px;height:34px}.scroll{position:absolute;bottom:50px;left:50%;color:#292938;font-size:10px}.orb{position:absolute;border-radius:50%;background:radial-gradient(circle at 30% 30%,#b4a24c,#7013bd 45%,#2d0d75);filter:saturate(1.2);z-index:-1}.one{width:170px;height:170px;left:7%;top:115px}.two{width:480px;height:310px;right:12%;top:40px;border-radius:40% 60% 50% 55%;opacity:.8}.three{width:155px;height:155px;right:4%;top:88px}.work,.about,.motion{max-width:1152px;margin:auto;padding:100px 0}.section-head{display:flex;align-items:end;justify-content:space-between}.section-head small,.about small,.motion small,.contact small{color:#a78bfa;font:10px monospace;letter-spacing:2px}.section-head h2,.motion h2{font-size:40px;margin:12px 0 0}.section-head>a{color:var(--muted);font-size:12px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px}.card{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:rgba(255,255,255,.02);transition:.3s}.card:hover{transform:translateY(-8px);border-color:#8b5cf688;box-shadow:0 18px 40px #000}.card img{width:100%;height:195px;object-fit:cover;display:block}.card-body{padding:16px 18px}.card small{font:10px monospace;color:var(--muted);letter-spacing:1px}.card h3{font-size:13px;margin:7px 0}.about{max-width:none;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-left:max(24px,calc((100% - 1152px)/2));padding-right:max(24px,calc((100% - 1152px)/2));background:radial-gradient(circle at 70% 40%,#24154a44,transparent 28%)}.about h2{font-size:40px;line-height:1.25}.about p{max-width:1050px}.skill{margin-top:28px;font-size:12px}.skill span{float:right;color:#a78bfa}.bar{height:3px;background:#171722;margin-top:10px}.bar i{display:block;height:100%;background:linear-gradient(90deg,#a78bfa,#7c3aed)}.motion-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:50px}.motion article{padding:35px 30px;border-radius:20px;background:linear-gradient(135deg,#28155a,#272278);min-height:215px}.motion article:nth-child(3){background:linear-gradient(135deg,#073e31,#102b38)}.motion i{font-size:32px;color:#a78bfa}.motion h3{font-size:14px;margin-top:28px}.motion p{color:#999;font-size:12px}.motion button{background:none;border:0;color:#a78bfa;padding:0;cursor:pointer}.contact{text-align:center;padding:110px 24px 30px;border-top:1px solid var(--line)}.contact h2{font-size:48px;margin:20px}.contact .primary{display:inline-block;padding:14px 28px;border-radius:24px;margin:25px}footer{max-width:640px;margin:65px auto 0;padding-top:25px;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:#55556b;font:9px monospace}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}.work,.motion{padding-left:24px;padding-right:24px}.hero h1{font-size:52px}.orb.two{right:-150px}.motion-grid{grid-template-columns:1fr}nav{gap:18px}.actions{display:none}}
@media(max-width:600px){header{height:62px}.menu{display:block}nav{display:none;position:absolute;top:62px;left:0;width:100%;background:#0d0d18;padding:24px;flex-direction:column}nav.open{display:flex}.hero{height:760px;padding:170px 20px 0}.hero h1{font-size:39px;letter-spacing:-2px}.hero p br{display:none}.one{width:90px;height:90px;left:-20px}.two{width:300px;height:220px;right:-130px}.three{display:none}.grid{grid-template-columns:1fr}.card img{height:220px}.section-head h2,.about h2,.motion h2{font-size:32px}.work,.about,.motion{padding-top:70px;padding-bottom:70px}.contact h2{font-size:36px}footer{flex-direction:column;gap:12px}.hero-buttons{margin:34px 0}.section-head>a{display:none}}

/* Hero motion */
.hero{--mx:0px;--my:0px;isolation:isolate}.hero:after{content:"";position:absolute;inset:auto 0 0;height:38%;z-index:-1;background:linear-gradient(180deg,transparent,var(--bg));pointer-events:none}.hero-glow{position:absolute;width:720px;height:720px;left:50%;top:44%;z-index:-3;transform:translate(-50%,-50%);background:radial-gradient(circle,#6d28d91f 0,transparent 64%);animation:glow-breathe 7s ease-in-out infinite}.hero-orbits{position:absolute;inset:0;z-index:-2;transform:translate3d(calc(var(--mx)*-.12),calc(var(--my)*-.12),0);transition:transform .45s ease-out;pointer-events:none}.hero-orbits i{position:absolute;border:1px solid rgba(167,139,250,.12);border-radius:50%;width:670px;height:230px;left:50%;top:405px;transform:translate(-50%,-50%) rotate(-9deg);animation:orbit-turn 26s linear infinite}.hero-orbits i:after{content:"";position:absolute;width:6px;height:6px;right:74px;top:24px;border-radius:50%;background:#a78bfa;box-shadow:0 0 18px #8b5cf6}.hero-orbits i:nth-child(2){width:870px;height:330px;top:390px;opacity:.5;animation-direction:reverse;animation-duration:34s}.hero h1{position:relative}.hero h1 em{background:linear-gradient(100deg,#a78bfa 10%,#ddd6fe 48%,#8b5cf6 78%);background-size:220% 100%;color:transparent;background-clip:text;-webkit-background-clip:text;animation:title-shine 6s ease-in-out 1.2s infinite}.available{display:inline-flex;align-items:center;gap:8px;background:#0b071a8c;box-shadow:inset 0 0 18px #7c3aed12}.available i{width:5px;height:5px;border-radius:50%;background:#a78bfa;box-shadow:0 0 0 0 #a78bfa99;animation:status-pulse 2s ease-out infinite}.hero-buttons a{transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}.hero-buttons a:hover{transform:translateY(-3px);border-color:#8b5cf688}.hero-buttons .primary:hover{box-shadow:0 10px 38px #6d28d988}.socials button{cursor:pointer;transition:color .25s ease,border-color .25s ease,transform .25s ease,background .25s ease}.socials button:hover{color:#fff;border-color:#8b5cf688;background:#8b5cf614;transform:translateY(-3px) rotate(6deg)}.scroll{transform:translateX(-50%);letter-spacing:2px}.scroll i{display:inline-block;font-style:normal;animation:scroll-cue 1.8s ease-in-out infinite}.orb{will-change:transform,border-radius}.one{animation:orb-float-one 8s ease-in-out infinite}.two{animation:orb-float-two 11s ease-in-out infinite}.three{animation:orb-float-three 9s ease-in-out -2s infinite}.hero.motion-ready .available,.hero.motion-ready h1,.hero.motion-ready>p,.hero.motion-ready .hero-buttons,.hero.motion-ready .socials,.hero.motion-ready .scroll{animation:hero-reveal .85s cubic-bezier(.2,.7,.2,1) both}.hero.motion-ready h1{animation-delay:.1s}.hero.motion-ready>p{animation-delay:.2s}.hero.motion-ready .hero-buttons{animation-delay:.3s}.hero.motion-ready .socials{animation-delay:.42s}.hero.motion-ready .scroll{animation-delay:.62s}
@keyframes hero-reveal{from{opacity:0;transform:translateY(22px);filter:blur(8px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}@keyframes title-shine{0%,35%{background-position:100% 0}70%,100%{background-position:-100% 0}}@keyframes status-pulse{0%{box-shadow:0 0 0 0 #a78bfa88}65%,100%{box-shadow:0 0 0 7px transparent}}@keyframes glow-breathe{50%{opacity:.55;transform:translate(-50%,-50%) scale(1.12)}}@keyframes orbit-turn{to{transform:translate(-50%,-50%) rotate(351deg)}}@keyframes orb-float-one{50%{transform:translate3d(calc(var(--mx)*.28),calc(22px + var(--my)*.28),0) rotate(8deg);border-radius:56% 44% 48% 52%}}@keyframes orb-float-two{50%{transform:translate3d(calc(var(--mx)*.16),calc(18px + var(--my)*.16),0) rotate(-5deg);border-radius:54% 46% 58% 42%}}@keyframes orb-float-three{50%{transform:translate3d(calc(var(--mx)*.36),calc(-18px + var(--my)*.36),0) rotate(9deg);border-radius:44% 56% 53% 47%}}@keyframes scroll-cue{50%{transform:translateY(7px);color:#a78bfa}}
@media(max-width:600px){.hero-orbits i{width:460px;top:350px}.hero-orbits i:nth-child(2){width:620px;height:250px;top:340px}.hero-glow{width:460px;height:460px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero *,.hero *:before,.hero *:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.hero-orbits{display:none}}
.hero.motion-ready .scroll{animation-name:hero-reveal-scroll}@keyframes hero-reveal-scroll{from{opacity:0;transform:translate(-50%,22px);filter:blur(8px)}to{opacity:1;transform:translate(-50%,0);filter:blur(0)}}

/* Keep the main hero sphere perfectly circular at every animation frame. */
.two{width:400px;height:400px;border-radius:50%}
@keyframes orb-float-two{0%,100%{border-radius:50%}50%{transform:translate3d(calc(var(--mx)*.16),calc(18px + var(--my)*.16),0) rotate(-5deg);border-radius:50%}}
@media(max-width:600px){.two{width:280px;height:280px}}

/* Contact QR card */
.wechat-card{width:min(520px,100%);margin:34px auto 0;padding:18px;display:flex;align-items:center;gap:24px;text-align:left;border:1px solid rgba(139,92,246,.35);border-radius:24px;background:linear-gradient(135deg,rgba(139,92,246,.12),rgba(255,255,255,.025));box-shadow:0 22px 65px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.06)}.wechat-qr{width:156px;aspect-ratio:1;flex:0 0 auto;padding:8px;overflow:hidden;border-radius:17px;background:#fff}.wechat-qr img{width:100%;height:100%;display:block;object-fit:cover;object-position:center 62%;border-radius:10px}.wechat-copy{display:flex;flex-direction:column;align-items:flex-start}.wechat-copy>span{color:#a78bfa;font:10px monospace;letter-spacing:2px}.wechat-copy strong{margin-top:9px;font-size:20px}.wechat-copy small{margin-top:10px;color:var(--muted);font-size:12px}.wechat-card:hover{border-color:rgba(139,92,246,.65);transform:translateY(-3px);box-shadow:0 28px 75px rgba(0,0,0,.4),0 0 35px rgba(109,40,217,.15);transition:.3s ease}
@media(max-width:600px){.wechat-card{max-width:310px;padding:18px;flex-direction:column;text-align:center;gap:16px}.wechat-qr{width:190px}.wechat-copy{align-items:center}.wechat-copy strong{font-size:18px}}
.wechat-card{width:min(580px,100%)}.wechat-qr{width:210px;aspect-ratio:840/1000;padding:0}.wechat-qr img{object-fit:contain;object-position:center}
@media(max-width:600px){.wechat-qr{width:220px}}

/* Site-wide motion and interaction polish */
body{--cursor-x:50vw;--cursor-y:20vh;background-color:var(--bg);background-image:radial-gradient(560px circle at var(--cursor-x) var(--cursor-y),rgba(109,40,217,.075),transparent 58%),linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px);background-size:auto,54px 54px,54px 54px;background-attachment:fixed}.page-progress{position:fixed;left:0;top:0;width:100%;height:2px;z-index:40;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#7c3aed,#c4b5fd,#8b5cf6);box-shadow:0 0 16px #8b5cf6;pointer-events:none}header{transition:height .35s ease,background .35s ease,box-shadow .35s ease,border-color .35s ease}header.scrolled{height:64px;background:rgba(7,7,15,.92);border-color:rgba(139,92,246,.18);box-shadow:0 12px 45px rgba(0,0,0,.28)}nav a{position:relative;transition:color .25s ease}nav a:after{content:"";position:absolute;left:0;right:0;bottom:-12px;height:1px;transform:scaleX(0);background:#a78bfa;box-shadow:0 0 8px #8b5cf6;transition:transform .3s ease}nav a.active{color:#fff}nav a.active:after{transform:scaleX(1)}.reveal-item{opacity:0;transform:translateY(34px);filter:blur(8px);transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1),filter .75s ease;transition-delay:var(--delay,0ms)}.reveal-item.is-visible{opacity:1;transform:translateY(0);filter:blur(0)}.card{--spot-x:50%;--spot-y:50%;position:relative;isolation:isolate;transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .3s ease,box-shadow .4s ease}.card:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;background:radial-gradient(260px circle at var(--spot-x) var(--spot-y),rgba(167,139,250,.2),transparent 58%);transition:opacity .35s ease}.card:hover:before{opacity:1}.card:hover{transform:translateY(-10px) scale(1.012);box-shadow:0 24px 55px rgba(0,0,0,.48),0 0 0 1px rgba(139,92,246,.15)}.card img{transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .5s ease}.card:hover img{transform:scale(1.065);filter:saturate(1.08) contrast(1.04)}.card-body{position:relative;z-index:2;background:linear-gradient(180deg,rgba(7,7,15,.15),rgba(7,7,15,.86))}.card h3{transition:color .3s ease,transform .3s ease}.card:hover h3{color:#c4b5fd;transform:translateX(3px)}.section-head>a{transition:color .25s ease,transform .25s ease}.section-head>a:hover{color:#c4b5fd;transform:translateX(4px)}.skill .bar{overflow:hidden}.skill .bar i{transform:scaleX(0);transform-origin:left;transition:transform 1.15s cubic-bezier(.2,.8,.2,1) .18s;box-shadow:0 0 12px #8b5cf6}.skill.is-visible .bar i{transform:scaleX(1)}.about h2,.contact h2{background:linear-gradient(105deg,#fff 12%,#a78bfa 48%,#fff 82%);background-size:220% 100%;background-position:100% 0;color:transparent;background-clip:text;-webkit-background-clip:text}.about h2.is-visible,.contact h2.is-visible{animation:section-title-shine 1.8s ease .15s both}.wechat-card.is-visible{animation:qr-float 5s ease-in-out 1s infinite}.wechat-card:hover{animation-play-state:paused}.brand b{transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease}.brand:hover b{transform:rotate(-12deg) scale(1.1);box-shadow:0 0 24px #7c3aed}.primary{transition:transform .25s ease,box-shadow .3s ease,filter .3s ease}.primary:hover{filter:brightness(1.12)}@keyframes section-title-shine{to{background-position:-100% 0}}@keyframes qr-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media(max-width:600px){body{background-size:auto,38px 38px,38px 38px}.reveal-item{transform:translateY(22px)}header.scrolled{height:58px}.card:hover{transform:translateY(-5px)}}
@media(prefers-reduced-motion:reduce){.page-progress,.reveal-item,.card,.card img,.skill .bar i,.wechat-card{animation:none!important;transition:none!important}.reveal-item{opacity:1;transform:none;filter:none}.skill .bar i{transform:none}.wechat-card.is-visible{animation:none!important}}

/* Preserve all text and interface details inside project cover images. */
.card img{height:195px;object-fit:contain;object-position:center;background:radial-gradient(circle at 50% 45%,rgba(139,92,246,.1),transparent 62%),#0b0b14}
.card:hover img{transform:scale(1.018);filter:saturate(1.05) contrast(1.02)}
@media(max-width:600px){.card img{height:240px}}

/* Center the two selected visual-design projects. */
#visual-grid{grid-template-columns:repeat(2,minmax(0,380px));justify-content:center;gap:24px}
#visual-grid .card img{height:270px}
@media(max-width:900px){#visual-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){#visual-grid{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto}#visual-grid .card img{height:300px}}

/* Merged portfolio grid: visual projects are revealed on demand. */
.all-projects{padding:0;border:0;background:none;color:var(--muted);font:12px inherit;cursor:pointer;transition:color .25s ease,transform .25s ease}.all-projects:hover{color:#c4b5fd;transform:translateX(4px)}.extra-project{display:none}.grid.show-all{grid-template-columns:repeat(3,minmax(0,1fr))}.grid.show-all .extra-project{display:block;animation:project-unfold .65s cubic-bezier(.2,.8,.2,1) both}.grid.show-all .extra-project:nth-last-child(1){animation-delay:.08s}@keyframes project-unfold{from{opacity:0;transform:translateY(28px) scale(.97);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@media(max-width:900px){.grid.show-all{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.all-projects{display:block}.grid.show-all{grid-template-columns:1fr}.grid.show-all .extra-project .card img{height:240px}}
@media(prefers-reduced-motion:reduce){.grid.show-all .extra-project{animation:none}}