/* SMX motion language: quiet ambient light, physical surfaces, precise transitions. */
:root{--ease-out:cubic-bezier(.2,.7,.25,1);--ease-spring:cubic-bezier(.16,1,.3,1);--read-progress:0}
body{isolation:isolate}.ambient-field{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;contain:strict}
.ambient-violet,.ambient-blue{position:absolute;width:75vw;height:85vh;opacity:.5;background:radial-gradient(ellipse,#6225a91c,transparent 66%);animation:ambientDrift 28s ease-in-out infinite alternate}
.ambient-violet{left:-27vw;top:12vh}.ambient-blue{right:-28vw;top:40vh;background:radial-gradient(ellipse,#145da31c,transparent 67%);animation-duration:34s;animation-direction:alternate-reverse}
.ambient-grain{position:absolute;inset:0;opacity:.025;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='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}
.site-header{view-transition-name:site-header;transition:background .45s,box-shadow .45s,border-color .45s}.site-header.is-scrolled{background:#060711f5;border-bottom-color:#8274cb3d;box-shadow:0 10px 45px #01020888}
.reading-line{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;transform-origin:left;transform:scaleX(var(--read-progress));background:linear-gradient(90deg,#bd71ff,#897eff 45%,#64cfff);box-shadow:0 0 14px #8f8dff70}
.main-nav{position:relative}.nav-tracker{position:absolute;height:1px;left:0;bottom:-5px;background:linear-gradient(90deg,#ba83ff,#75cfff);opacity:0;pointer-events:none;transition:width .45s var(--ease-spring),transform .45s var(--ease-spring),opacity .2s}
.motion-ready .main-nav>a[aria-current]:not(.nav-contact)::after{opacity:.7}
.brand-mark{transition:filter .45s,transform .65s var(--ease-spring)}.brand:hover .brand-mark{transform:translateY(-2px) rotate(-4deg);filter:drop-shadow(0 0 13px #a36aff65)}.brand-lockup strong{transition:letter-spacing .5s var(--ease-spring)}.brand:hover .brand-lockup strong{letter-spacing:.07em}
.hero-line{display:block;position:relative}.hero h1{position:relative}.hero h1 em,.page-intro h1 em,.contact-intro h1 em{background-size:200% 100%;animation:chromaticShift 12s ease-in-out infinite alternate}
.headline-dot{animation:cursorGlow 3.8s ease-in-out infinite}.hero .eyebrow .status-dot{animation:signalPulse 4s ease-in-out infinite}
.hero-art{perspective:1000px;overflow:visible}.hero-scene{pointer-events:none;mask-image:radial-gradient(ellipse 64% 56% at 50% 53%,#000 42%,transparent 90%)}
.hero-image-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.signal-orbit{position:absolute;inset:0;width:100%;height:100%;opacity:.8;pointer-events:none;overflow:visible;stroke-width:1}
.orbit-slow,.orbit-reverse{transform-origin:300px 300px}.orbit-slow{animation:orbitClockwise 50s linear infinite}.orbit-reverse{animation:orbitCounter 70s linear infinite}
.hero-aura{inset:3% -4%;background:radial-gradient(ellipse at 35% 45%,#7f28f320,transparent 63%),radial-gradient(ellipse at 70% 65%,#066dcd22,transparent 62%);animation:auraBreathe 10s ease-in-out infinite alternate}
.art-topline{left:12px;right:12px;top:6px}.art-baseline{left:12px;right:12px;bottom:8px;pointer-events:none}.live-signal{display:flex;align-items:center;gap:6px}.live-signal i{display:inline-block;width:4px;height:4px;background:#a99aff;box-shadow:0 0 8px #9788ff;border-radius:50%}
.hero-project-chips{position:absolute;inset:0;pointer-events:none}.orbit-chip{pointer-events:auto;position:absolute;display:flex;align-items:center;gap:12px;border:1px solid #9f89e33d;background:linear-gradient(130deg,#151027c7,#090e1bc9);backdrop-filter:blur(16px);border-radius:6px;padding:11px 13px;box-shadow:0 12px 32px #0004,inset 0 1px 0 #e9d7ff0a;animation:chipFloat 7s ease-in-out infinite;transition:border-color .35s,box-shadow .35s,background .35s}
.chip-invoxa{top:25%;left:-3%;animation-delay:-2s}.chip-veyzor{right:-1%;top:60%;animation-delay:-4s}.chip-shop{bottom:11%;left:4%;animation-delay:-1s}
.motion-active[data-entry-state="entering"] .orbit-chip{animation-play-state:paused}
.chip-n{font:8px var(--mono);color:#9b8fc5;border:1px solid #73639140;padding:5px;border-radius:3px}.orbit-chip>span:nth-child(2){display:flex;flex-direction:column;gap:3px}.orbit-chip small{font:6px var(--mono);letter-spacing:.12em;color:#a0a6c7}.orbit-chip strong{font-size:12px;line-height:1.2;font-weight:600;letter-spacing:-.015em}.chip-arrow{color:#9acbff;font-size:15px;line-height:1;margin-left:5px;transition:transform .35s var(--ease-spring)}
.orbit-chip:hover,.orbit-chip:focus-visible{border-color:#a794ff99;box-shadow:0 8px 36px #6d37df38,0 0 18px #84a3ff12;background:linear-gradient(130deg,#261544ef,#0d1c31e8)}.orbit-chip:hover .chip-arrow{transform:translate(2px,-2px)}
.hero-foot a span{display:inline-block;animation:scrollNudge 3s ease-in-out infinite}.hero-foot button{transition:color .25s;text-underline-offset:4px}.hero-foot button:hover{text-decoration:underline}
.interactive-surface{position:relative;isolation:isolate}.interactive-surface::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;background:radial-gradient(420px circle at var(--pointer-x,50%) var(--pointer-y,50%),#b785ff16,transparent 65%);opacity:0;transition:opacity .5s}
.interactive-surface.pointer-active::after{opacity:1}.interactive-surface .image-arrow{z-index:3}
.depth-surface{transform:perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .7s var(--ease-spring),box-shadow .5s,border-color .5s;backface-visibility:hidden}
.depth-surface.pointer-active{transition:transform .16s ease-out,box-shadow .4s,border-color .4s}
.magnetic-surface{translate:var(--magnet-x,0px) var(--magnet-y,0px);transition:translate .6s var(--ease-spring),background .35s,box-shadow .35s,transform .35s,border-color .35s}
.magnetic-surface.pointer-active{transition:translate .2s ease-out,background .35s,box-shadow .35s,transform .35s}
.button-primary,.nav-contact{position:relative;overflow:hidden}.button-primary>span,.button-primary>svg,.nav-contact>svg{position:relative;z-index:1}.button-primary::before,.nav-contact::before{content:'';pointer-events:none;position:absolute;inset:-100% -70%;background:linear-gradient(110deg,transparent 36%,#fff5 48%,transparent 61%);transform:translateX(-70%);transition:transform .9s var(--ease-out)}.button-primary:hover::before,.nav-contact:hover::before{transform:translateX(70%)}
.hero-actions .button-primary::before{animation:buttonGleam 10s ease-in-out infinite}
.button svg,.nav-contact svg{transition:transform .5s var(--ease-spring)}.button:hover svg,.nav-contact:hover svg{transform:translate(2px,-2px)}
.button-outline:hover{box-shadow:inset 0 0 20px #8b65ff0b,0 0 22px #8b65ff10}
.text-link{position:relative}.text-link::after{content:'';position:absolute;left:0;right:40px;height:1px;bottom:6px;background:linear-gradient(90deg,#ba85ff,#77cfff);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-spring)}.text-link:hover::after{transform:scaleX(1)}
.discipline-strip a{position:relative;overflow:hidden;transition:background .5s,color .4s}.discipline-strip a::before{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,#a768ff,#69cfff);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease-spring)}.discipline-strip a:hover{background:#7d65e80a}.discipline-strip a:hover::before{transform:scaleX(1)}.discipline-strip strong{transition:translate .5s var(--ease-spring)}.discipline-strip a:hover strong{translate:5px 0}.discipline-strip svg{transition:transform .5s var(--ease-spring),color .3s}.discipline-strip a:hover svg{transform:translate(3px,-3px)}
.featured-image,.project-image{transition:border-color .5s,box-shadow .5s,transform .7s var(--ease-spring)}.featured-image:hover,.project-image:hover{border-color:#a289e85c;box-shadow:0 15px 48px #391c6d26,0 0 30px #5d4fc412}
.featured-image img{transform:translateY(var(--media-drift,0px)) scale(1.045);transition:transform 1.1s var(--ease-spring),filter .7s}.featured-image:hover img{transform:translateY(var(--media-drift,0px)) scale(1.08)}.project-image img{transition:transform 1s var(--ease-spring),filter .7s}.project-image:hover img{transform:scale(1.055)}
.project-card h2 a,.featured-heading h3 a{transition:color .35s}.project-card:hover h2 a,.featured-project:hover h3 a{color:#d0bcff}.project-card h2 svg{transition:transform .5s var(--ease-spring),color .3s}.project-card:hover h2 svg{transform:translate(3px,-3px);color:#9ed9ff}
.image-arrow{transition:background .4s,transform .55s var(--ease-spring),box-shadow .4s}.featured-image:hover .image-arrow,.project-image:hover .image-arrow{box-shadow:0 0 24px #929bff55;transform:rotate(45deg) scale(1.04)}
.service-row{transition:background .5s}.service-row::before{content:'';position:absolute;top:-1px;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,#bc7fff 30%,#6bcbff 70%,transparent);opacity:0;transform:scaleX(.3);transition:transform .8s var(--ease-spring),opacity .5s}.service-row:hover::before{opacity:1;transform:scaleX(1)}.service-glyph{transition:transform .8s var(--ease-spring),color .5s,text-shadow .5s}.service-row:hover .service-glyph{transform:rotate(-8deg) scale(1.07);color:#b8a3ff;text-shadow:0 0 40px #9d5dff66}
.studio-symbol,.manifesto-identity>img{animation:markFloat 9s ease-in-out infinite;filter:drop-shadow(0 0 28px #9450ff1a)}.studio-visual{border-radius:6px}.studio-visual::before,.studio-visual::after{animation:crossGlow 6s ease-in-out infinite alternate}.studio-visual>div:last-child>span{position:relative}.studio-visual>div:last-child>span::before{content:'';display:inline-block;width:3px;height:3px;background:#aa96f3;margin-right:7px;vertical-align:middle;box-shadow:0 0 5px #aa96f3}
.process-step{position:relative}.process-step>div{position:relative}.process-step>div::after{content:'';position:absolute;top:-1px;left:0;right:0;height:1px;background:linear-gradient(90deg,#b47cff,#68cfff);transform:scaleX(0);transform-origin:left;transition:transform .75s var(--ease-spring)}.process-step:hover>div::after{transform:scaleX(1)}.process-step h3{transition:color .4s}.process-step:hover h3{color:#d0beff}.process-step>div svg{transition:translate .5s var(--ease-spring)}.process-step:hover>div svg{translate:4px 0}
.faq-list details{transition:background .35s,border-color .35s;interpolate-size:allow-keywords}.faq-list details[open]{background:linear-gradient(90deg,#7945ae0c,transparent);border-top-color:#8a72b957}.faq-list summary{transition:color .3s}.faq-list summary:hover{color:#d4c3ff}.faq-plus{transition:transform .5s var(--ease-spring),color .4s}.faq-list details[open] .faq-plus{color:#79ceff}.faq-list details::details-content{block-size:0;overflow:clip;transition:block-size .45s var(--ease-spring),content-visibility .45s allow-discrete}.faq-list details[open]::details-content{block-size:auto}
.filter-buttons>button{transition:background .35s,border-color .35s,box-shadow .35s,translate .35s var(--ease-spring)}.filter-buttons>button:hover{translate:0 -2px}.filter-buttons>button[aria-pressed=true]{box-shadow:0 0 22px #7e6af72a}.project-search input{transition:border-color .35s,box-shadow .35s}.project-search input:focus{border-color:#9d91ff;box-shadow:0 0 0 3px #a278ff12}
.case-banner{overflow:clip}.case-preview{transition:filter .6s}.case-preview:hover{filter:drop-shadow(0 0 20px #6745bd15)}
.form-field input,.form-field select,.form-field textarea{transition:border-color .35s,box-shadow .35s,background .35s}.form-field input:focus,.form-field select:focus,.form-field textarea:focus{box-shadow:0 0 0 3px #9c77ff0d;background:#090e1e}.contact-form{transition:border-color .5s,box-shadow .5s}.contact-form:focus-within{border-color:#a185e875;box-shadow:0 0 45px #7645e512,inset 0 1px 0 #d5c5ff10}
.cta-circle::after{content:'';position:absolute;inset:-9px;border:1px solid #ac90ed2e;border-radius:50%;transition:inset .7s var(--ease-spring),border-color .5s}.cta-circle{position:relative}.cta-circle:hover::after{inset:-16px;border-color:#9ad7ff59}.cta-circle>svg{transition:transform .6s var(--ease-spring)}.cta-circle:hover>svg{transform:rotate(-45deg)}
.site-footer a:not(.brand){transition:color .35s}.footer-mail svg,.cta-bottom>a svg{transition:transform .5s var(--ease-spring)}.footer-mail:hover svg,.cta-bottom>a:hover svg{transform:translate(3px,-3px)}
.scroll-top{position:fixed;right:25px;bottom:24px;z-index:45;display:grid;place-items:center;width:47px;height:47px;border:1px solid #8d7ac44d;border-radius:50%;background:#0c1022d9;backdrop-filter:blur(14px);box-shadow:0 6px 25px #0004;transition:background .3s,border-color .3s,translate .4s var(--ease-spring)}.scroll-top svg{width:43px;height:43px;stroke:#cdc6ee;stroke-width:1.3}.scroll-track{stroke:#9386bf26}.scroll-progress{stroke:#9daaff;stroke-dasharray:132;stroke-dashoffset:calc(132 * (1 - var(--read-progress)));transform:rotate(-90deg);transform-origin:24px 24px}.scroll-top:hover{translate:0 -3px;border-color:#9cbfff;background:#19152fe8}
@view-transition{navigation:auto}
::view-transition,::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){pointer-events:none}
::view-transition-group(*){animation-duration:.6s;animation-timing-function:cubic-bezier(.22,.7,.2,1)}
::view-transition-old(root){animation:pageFadeOut .22s ease both}
::view-transition-new(root){animation:pageFadeIn .45s var(--ease-out) both}
::view-transition-old(site-header),::view-transition-new(site-header){animation:none}
@keyframes pageFadeOut{to{opacity:0;transform:translateY(-6px)}}
@keyframes pageFadeIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@keyframes ambientDrift{to{transform:translate3d(9%,7%,0) scale(1.08)}}
@keyframes chromaticShift{to{background-position:100% 50%}}
@keyframes cursorGlow{50%{opacity:.35}}
@keyframes signalPulse{50%{box-shadow:0 0 16px #81caffaa}}
@keyframes orbitClockwise{to{transform:rotate(360deg)}}
@keyframes orbitCounter{to{transform:rotate(-360deg)}}
@keyframes auraBreathe{to{opacity:.55;transform:scale(1.06)}}
@keyframes chipFloat{50%{transform:translateY(-7px)}}
@keyframes markFloat{50%{transform:translateY(-8px)}}
@keyframes crossGlow{to{opacity:.3}}
@keyframes scrollNudge{0%,65%,100%{transform:translateY(0)}80%{transform:translateY(3px)}}
@keyframes buttonGleam{0%,78%,100%{transform:translateX(-70%)}90%{transform:translateX(70%)}}
@keyframes menuReveal{from{opacity:.1;transform:translateY(-9px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1150px){.orbit-chip{padding:9px 10px;gap:9px}.orbit-chip strong{font-size:11px}.chip-invoxa{left:0}.chip-veyzor{right:0}.chip-shop{left:7%;bottom:10%}.chip-n{font-size:7px;padding:4px}.signal-orbit{inset:0 3%;width:94%}}
@media(max-width:900px){.orbit-chip{padding:8px}.orbit-chip strong{font-size:10px}.orbit-chip small{font-size:5px}.chip-n{display:none}.chip-invoxa{top:24%;left:3%}.chip-veyzor{top:59%;right:2%}.chip-shop{bottom:12%;left:12%}.chip-arrow{font-size:13px;margin-left:2px}.ambient-violet,.ambient-blue{opacity:.35}}
@media(max-width:700px){.nav-tracker{display:none}.js-menu.menu-open .main-nav{animation:menuReveal .3s var(--ease-out)}.hero-art{overflow:visible}.signal-orbit{inset:0;width:100%;opacity:.6}.hero-project-chips{display:flex;gap:7px;justify-content:center;align-items:flex-end;bottom:18px}.orbit-chip{position:relative;inset:auto;padding:8px 10px;border-radius:4px;gap:7px;animation-duration:9s;min-height:43px}.orbit-chip strong{font-size:9px}.orbit-chip small{font-size:5px;letter-spacing:.07em}.chip-arrow{font-size:12px}.art-baseline{bottom:0;font-size:5px}.art-topline{left:8px;right:8px;font-size:6px}.hero-foot{bottom:10px}.hero-art{margin-bottom:2px}.depth-surface{transform:none!important}.magnetic-surface{translate:none!important}.interactive-surface::after{display:none}.featured-image img,.featured-image:hover img{transform:scale(1.025)}.case-banner>img{transform:none}.scroll-top{width:42px;height:42px;right:14px;bottom:16px}.scroll-top svg{height:38px;width:38px}.cta-circle::after{inset:-6px}.cta-circle:hover::after{inset:-9px}.ambient-violet,.ambient-blue{animation:none;opacity:.25}}
@media(max-width:380px){.hero-project-chips{gap:5px;bottom:15px}.orbit-chip{padding:7px 8px;gap:5px;min-height:39px}.orbit-chip strong{font-size:8px}.orbit-chip small{font-size:4.5px}.art-topline{font-size:5px}.art-baseline{font-size:4.5px}.chip-arrow{font-size:11px}}
/* Pause cancels JS animations and freezes CSS loops; reduced motion is live. */
.motion-paused *,.motion-paused *::before,.motion-paused *::after,.motion-reduced *,.motion-reduced *::before,.motion-reduced *::after{transition:none!important}
.motion-offstage *,.motion-offstage *::before,.motion-offstage *::after{animation-play-state:paused!important}
:root:not(.motion-active) *,:root:not(.motion-active) *::before,:root:not(.motion-active) *::after{animation-play-state:paused!important}
:root.motion-paused::view-transition-group(*),:root.motion-paused::view-transition-old(*),:root.motion-paused::view-transition-new(*){animation:none!important}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.ambient-field{display:none}.depth-surface{transform:none!important}.magnetic-surface{translate:none!important}.featured-image img,.featured-image:hover img,.case-banner>img{transform:none!important}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}