/* Xingxu motion system — 2026-10-09. All effects share the hero motion control. */
:root{--brand-blue:#4f66e8;--motion-ease:cubic-bezier(.16,1,.3,1);--page-progress:0}
.brand img.brand-logo{width:128px;height:auto;border-radius:0;filter:none}.brand{gap:0}.site-header:after{content:"";position:absolute;bottom:-1px;left:0;width:100%;height:2px;background:linear-gradient(90deg,#4f66e8,#90ddff,#fff);transform:scaleX(var(--page-progress));transform-origin:left;box-shadow:0 0 14px #648bffa0;pointer-events:none}
.site-nav a{position:relative}.site-nav a:not(.nav-cta):after{content:"";position:absolute;bottom:-7px;left:0;width:100%;height:1px;background:#8dc9ff;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--motion-ease)}.site-nav a:hover:after,.site-nav a[aria-current="location"]:after{transform:scaleX(1)}
.hero{background:radial-gradient(ellipse at 77% 46%,#132e5b 0,#0b172b 31%,#05080e 70%)}.hero-nebula{position:absolute;inset:-12%;background:radial-gradient(ellipse at 73% 50%,#4f66e836,transparent 32%),radial-gradient(ellipse at 83% 31%,#3888c91f,transparent 23%);opacity:.8;will-change:transform}.hero-shade{background:linear-gradient(90deg,#05080ee6 0%,#05080e88 31%,transparent 62%),linear-gradient(0deg,#05080e,transparent 20%,transparent 82%,#05080e66)}
.hero h1 span{color:#a4d6ff}.hero-actions .button-light,.contact-actions .button-light{position:relative;overflow:hidden;background:#f2f4f7;border-color:#ffffff8c;box-shadow:0 0 26px #4f66e824;transition:box-shadow .3s,background .3s,transform .3s}.button-light:hover{box-shadow:0 0 36px #4f66e86b;background:#d4eaff;transform:translateY(-2px)}.button-light:after{content:"";position:absolute;inset:-100% -70%;background:linear-gradient(110deg,transparent 44%,#fff9 50%,transparent 56%);transform:translateX(-65%);pointer-events:none}.text-link span,.project-more i,.project-rows i{transition:transform .4s var(--motion-ease)}.text-link:hover span,.project-card:hover .project-more i,.project-rows button:hover i{transform:translate(4px,-4px)}
.motion-toggle{background:#07111ee8;border-color:#5e85b58c;min-height:44px;box-shadow:0 0 24px #4166b81c}.motion-toggle:hover{border-color:#a5caff;background:#152c4d}.scroll-cue{position:absolute;z-index:3;left:50%;bottom:34px;display:flex;align-items:center;gap:12px;transform:translateX(-50%);min-height:44px;color:#9baec6}.scroll-cue>span{width:16px;height:27px;border:1px solid #7093c4;border-radius:10px;position:relative}.scroll-cue>span:after{content:"";width:2px;height:6px;background:#d5edff;position:absolute;left:6px;top:5px;border-radius:2px}.scroll-cue small{font-size:10px;letter-spacing:2px}.hero-caption{color:#91b7da;opacity:.65}
.section{position:relative;isolation:isolate}.section>.shell{position:relative;z-index:1}.section:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}.approach:before{background:radial-gradient(ellipse at 16% 20%,#273b7c25,transparent 55%)}.projects:before{background:radial-gradient(ellipse at 95% 24%,#163f712c,transparent 53%)}.services:before{background:radial-gradient(ellipse at 10% 50%,#1b38712e,transparent 58%)}.process:before{background-image:linear-gradient(#80a8f609 1px,transparent 1px),linear-gradient(90deg,#80a8f609 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(transparent,#000 25%,#000 70%,transparent)}
.fx-reveal{--reveal-delay:0ms}.approach-grid article{position:relative;overflow:hidden}.step-line{position:relative;overflow:hidden}.step-line:after{content:"";position:absolute;top:50%;left:50px;width:90px;height:1px;background:linear-gradient(90deg,transparent,#9fd7ff,transparent);box-shadow:0 0 10px #739bff;transform:translateX(-130%);opacity:.9}
.project-card{--tilt-x:0deg;--tilt-y:0deg;--spot-x:50%;--spot-y:50%;transform:perspective(1000px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));transition:transform .5s var(--motion-ease),box-shadow .5s,border-color .5s;border:1px solid #7d9ab825;box-shadow:0 12px 44px #0003}.project-card:hover{border-color:#accbff85;box-shadow:0 24px 60px #0008,0 0 28px #4f66e81c}.project-card img{transition:transform 1.2s var(--motion-ease),filter .8s;transform:scale(1.025)}.project-card:hover img{transform:scale(1.075);filter:saturate(.95) brightness(1.04)}.project-card:before{content:"";position:absolute;inset:-60%;z-index:3;pointer-events:none;background:linear-gradient(120deg,transparent 40%,#a5d9ff24 48%,#fff3 50%,transparent 57%);transform:translateX(-70%)}.project-content{transition:transform .6s var(--motion-ease)}.project-card:hover .project-content{transform:translateY(-5px)}.project-rows button{position:relative;overflow:hidden;padding-left:0;transition:background .3s,color .3s}.project-rows button:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:1px;background:linear-gradient(90deg,#4f66e8,#9ddfff,transparent);transform:scaleX(0);transform-origin:left;transition:transform .65s var(--motion-ease)}.project-rows button:hover:after{transform:scaleX(1)}
.service-visual{top:122px;border-color:#6a8cbd66;box-shadow:0 24px 90px #06173555}.service-visual>.galaxy-image{object-position:65% 50%;filter:brightness(.85) saturate(.9);transform:scale(1.07)}.service-visual:after{background:linear-gradient(180deg,#03091891,transparent 56%,#030918d6);z-index:1}.service-visual>.visual-logo{position:absolute;inset:auto;left:36px;bottom:90px;width:min(255px,70%);height:auto;object-fit:contain;filter:none;z-index:3}.visual-title{top:40px;z-index:3;font-size:39px;text-shadow:0 4px 24px #000}.service-visual figcaption{z-index:3}.visual-grid{position:absolute;inset:0;z-index:2;opacity:.2;background-image:linear-gradient(#a0caff44 1px,transparent 1px),linear-gradient(90deg,#a0caff44 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(transparent 10%,#000 80%);pointer-events:none}.visual-scan{position:absolute;z-index:2;left:0;right:0;top:10%;height:1px;background:linear-gradient(90deg,transparent,#b8e3ff,transparent);box-shadow:0 0 20px 3px #4f91ff65;pointer-events:none}.service-list details{position:relative;transition:background .4s}.service-list details[open]{background:linear-gradient(100deg,#4f66e80f,transparent 75%)}.service-list summary{transition:color .3s}.service-list summary:hover{color:#a4d6ff}.service-list details[open] .service-detail{animation:detail-in .5s var(--motion-ease)}
.process-track li:before{width:8px;height:8px;background:#c2e3ff;box-shadow:0 0 0 5px #4f66e821,0 0 20px #7397ff9c;transition:box-shadow .5s}.process-track li{overflow:visible}.process-track li:after{content:"";position:absolute;top:-1px;left:0;width:55%;height:1px;background:linear-gradient(90deg,transparent,#bfe9ff,transparent);transform:translateX(0);opacity:.8;pointer-events:none}.process-track li:hover:before{box-shadow:0 0 0 8px #4f66e82b,0 0 28px #96beff}.process-track li:hover h3{color:#b2d9ff}.delivery-assurances{position:relative}.delivery-assurances:before{content:"";position:absolute;top:-1px;left:0;width:100%;height:1px;background:linear-gradient(90deg,transparent,#536ddd88,transparent)}
.budget-panel{position:relative;isolation:isolate;box-shadow:0 20px 80px #0003}.budget-panel:before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;background:conic-gradient(from var(--border-turn,0deg),transparent 0deg,#4f66e855 60deg,#a0dfff 95deg,transparent 130deg,transparent 240deg,#4f66e855 310deg,transparent 360deg);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;z-index:2}.price strong{color:#f2f4f7;text-shadow:0 0 45px #7697ff20}
.contact{min-height:610px;background:radial-gradient(ellipse at 50% 90%,#213e723d,transparent 65%)}.contact-inner{z-index:2!important}.contact-orbit{position:absolute;inset:auto 0 -330px;height:580px;pointer-events:none;opacity:.7;z-index:0}.contact-orbit i{position:absolute;width:900px;height:360px;left:50%;top:60px;margin-left:-450px;border:1px solid #637edf42;border-radius:50%;transform:rotate(-18deg);box-shadow:0 0 45px #4f66e811,inset 0 0 35px #4f66e80c}.contact-orbit i:nth-child(2){transform:rotate(18deg);border-color:#85b6e632}.contact-orbit i:nth-child(3){width:670px;height:290px;margin-left:-335px;top:90px;border-color:#99d4ff46;transform:rotate(-35deg)}.contact-orbit i:after{content:"";position:absolute;width:6px;height:6px;top:50%;left:-3px;border-radius:50%;background:#b3ddff;box-shadow:0 0 18px 4px #7c9dff7d}.contact-orbit img{position:absolute;left:50%;top:120px;transform:translateX(-50%);width:110px;height:auto;opacity:.16;filter:drop-shadow(0 0 22px #739bff)}
@property --border-turn{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes reveal-rise{from{opacity:.18;translate:0 24px}to{opacity:1;translate:0 0}}
@keyframes image-pass{0%{transform:translateX(-70%)}100%{transform:translateX(70%)}}
@keyframes light-travel{0%{transform:translateX(-130%)}100%{transform:translateX(500%)}}
@keyframes galaxy-drift{from{transform:scale(1.07) translate(-1%,1%)}to{transform:scale(1.17) translate(2%,-2%)}}
@keyframes scan-travel{0%,100%{top:10%;opacity:.25}50%{top:90%;opacity:1}}
@keyframes track-travel{from{transform:translateX(0);opacity:0}20%{opacity:1}to{transform:translateX(80%);opacity:0}}
@keyframes track-vertical{from{transform:translateY(0);opacity:0}20%{opacity:1}to{transform:translateY(80%);opacity:0}}
@keyframes orbit-drift{from{transform:rotate(-18deg)}to{transform:rotate(18deg)}}
@keyframes border-travel{to{--border-turn:360deg}}
@keyframes detail-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes nebula-drift{to{transform:translate(-2%,3%) scale(1.08)}}
@keyframes scroll-dot{0%,100%{transform:translateY(0);opacity:.4}60%{transform:translateY(8px);opacity:1}}
html[data-motion="active"] .hero.fx-visible .hero-nebula{animation:nebula-drift 10s ease-in-out infinite alternate}
html[data-motion="active"] .hero.fx-visible .scroll-cue>span:after{animation:scroll-dot 2s ease-in-out infinite}
html[data-motion="active"] .fx-reveal.is-revealed{animation:reveal-rise 1s var(--motion-ease) var(--reveal-delay) both}
html[data-motion="active"] .fx-visible .step-line:after{animation:light-travel 5s ease-in-out infinite}
html[data-motion="active"] .approach-grid article:nth-child(2) .step-line:after{animation-delay:1.5s}
html[data-motion="active"] .approach-grid article:nth-child(3) .step-line:after{animation-delay:3s}
html[data-motion="active"] .project-card.is-revealed:before{animation:image-pass 1.5s var(--motion-ease) .15s both}
html[data-motion="active"] .project-card:hover:before{animation:image-pass 1.3s var(--motion-ease)}
html[data-motion="active"] .fx-visible .service-visual>.galaxy-image{animation:galaxy-drift 13s ease-in-out infinite alternate}
html[data-motion="active"] .fx-visible .visual-scan{animation:scan-travel 7s ease-in-out infinite}
html[data-motion="active"] .fx-visible .process-track li:after{animation:track-travel 4s ease-in-out infinite}
html[data-motion="active"] .process-track li:nth-child(2):after{animation-delay:.4s}html[data-motion="active"] .process-track li:nth-child(3):after{animation-delay:.8s}html[data-motion="active"] .process-track li:nth-child(4):after{animation-delay:1.2s}html[data-motion="active"] .process-track li:nth-child(5):after{animation-delay:1.6s}
html[data-motion="active"] .fx-visible .budget-panel:before{animation:border-travel 12s linear infinite}
html[data-motion="active"] .fx-visible .contact-orbit i{animation:orbit-drift 15s ease-in-out infinite alternate}
html[data-motion="active"] .contact-orbit i:nth-child(2){animation-direction:alternate-reverse;animation-duration:19s}
html[data-motion="active"] .contact-orbit i:nth-child(3){animation-duration:22s;animation-delay:-8s}
html[data-motion="active"] .button-light:hover:after{animation:image-pass .8s var(--motion-ease)}
html:not([data-motion="active"]) .project-card{transform:none!important}html:not([data-motion="active"]) .project-card:hover img{transform:scale(1.025)}html:not([data-motion="active"]) .service-detail{animation:none!important}
html[data-motion="paused"]{scroll-behavior:auto}html[data-motion="paused"] *,html[data-motion="paused"] *:before,html[data-motion="paused"] *:after{animation:none!important;transition:none!important}html[data-motion="paused"] .button-light:hover,html[data-motion="paused"] .project-card:hover .project-content,html[data-motion="paused"] .text-link:hover span,html[data-motion="paused"] .project-card:hover .project-more i,html[data-motion="paused"] .project-rows button:hover i{transform:none}
html[data-page-hidden="true"] *,html[data-page-hidden="true"] *:before,html[data-page-hidden="true"] *:after{animation-play-state:paused!important}
@media(max-width:1100px){.scroll-cue{display:none}.hero-shade{background:linear-gradient(90deg,#05080ed9,#05080e70 30%,transparent 65%),linear-gradient(0deg,#05080e,transparent 22%)}.brand img.brand-logo{width:120px}.service-visual>.visual-logo{left:28px;width:215px}.visual-title{left:28px}}
@media(max-width:800px){.brand img.brand-logo{width:116px}.site-nav a:not(.nav-cta):after{bottom:4px;width:42px}.hero-shade{background:linear-gradient(180deg,#05080e66,#05080e55 30%,transparent 59%,#05080e 98%)}.hero-nebula{background:radial-gradient(ellipse at 50% 73%,#4f66e84a,transparent 50%)}.service-visual{top:auto}.service-visual>.visual-logo{width:200px;bottom:64px}.visual-title{font-size:34px}.contact-orbit{bottom:-350px}.contact-orbit i{width:720px;margin-left:-360px}.contact-orbit i:nth-child(3){width:570px;margin-left:-285px}}
@media(max-width:560px){.brand img.brand-logo{width:110px}.hero h1{font-size:clamp(34px,8.4vw,46px)}.service-visual>.visual-logo{left:26px;width:180px;bottom:62px}.visual-title{font-size:32px;left:26px;top:28px}.service-visual figcaption{font-size:9px}.process-track li:after{top:0;left:-1px;width:1px;height:50%;background:linear-gradient(180deg,transparent,#bfe9ff,transparent)}.process-track li:last-child:after{display:none}.process-track li:before{left:-4px;top:9px}.contact{min-height:570px}.contact-orbit{bottom:-345px}.contact-orbit img{width:90px}.project-card{transform:none!important}.project-card:hover .project-content{transform:none}}
@media(prefers-reduced-motion:reduce){html:not([data-motion="active"]) .button-light:hover{transform:none}html:not([data-motion="active"]) .project-card:before{display:none}}
@media(max-width:560px){html[data-motion="active"] .fx-visible .process-track li:after{animation-name:track-vertical}}