/* Decorative motion shares the site's existing visibility and motion preferences. */
.motion-scene{position:relative;isolation:isolate}
.ambient-background{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;user-select:none}
.ambient-background>span{display:block;position:absolute;pointer-events:none}
.ambient-glow{width:760px;height:620px;right:-130px;top:-170px;background:radial-gradient(ellipse,#52b47816 0%,#52b47808 38%,transparent 70%)}
.ambient-grid{width:70%;height:calc(100% + 128px);right:-6%;top:-64px;background-image:linear-gradient(#376b4520 1px,transparent 1px),linear-gradient(90deg,#376b4520 1px,transparent 1px);background-size:64px 64px;opacity:.42;mask-image:linear-gradient(90deg,transparent 0%,#000 80%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 80%)}
.motion-scene-soft .ambient-glow{width:950px;height:800px;right:-200px;top:-220px}
.motion-scene-dark .ambient-glow{background:radial-gradient(ellipse,#6cdc8c12,transparent 70%);top:-300px}
.ambient-frame{width:540px;height:380px;right:-85px;top:-135px;border:1px solid #7de6a329;transform:rotate(-28deg)}
.ambient-frame:before{content:'';position:absolute;inset:52px 75px;border:1px solid #7de6a321}
.ambient-frame:after{content:'';position:absolute;inset:-110px 160px;border-left:1px dashed #7de6a326;border-right:1px solid #7de6a318}

.motion-title-ink{display:block}
.js-motion .motion-enter.motion-fade-group{translate:none}
.js-motion .reveal.motion-fade-group{transform:none}
.js-motion.visual-motion-ready .motion-title:not(.motion-complete)>.motion-title-ink{opacity:0}
.js-motion.visual-motion-ready .motion-title.has-entered:not(.motion-complete)>.motion-title-ink{animation:title-fade .7s ease-out both;animation-play-state:paused}
.js-motion.visual-motion-ready .hero .motion-title.has-entered>.motion-title-ink{animation-duration:.65s}
.motion-complete>.motion-title-ink{opacity:1!important;animation:none!important}
.js-motion.visual-motion-ready .motion-rule{transform-origin:left center;transform:scaleX(0)}
.js-motion.visual-motion-ready .motion-rule.has-entered{animation:rule-construction .75s cubic-bezier(.2,.65,.25,1) both;animation-play-state:paused}
.js-motion.visual-motion-ready .ambient-glow{animation:ambient-breathe 22s ease-in-out infinite alternate;animation-play-state:paused}
.js-motion.visual-motion-ready .ambient-grid{animation:ambient-survey 28s ease-in-out infinite alternate;animation-play-state:paused}
.js-motion.visual-motion-ready .ambient-frame{animation:ambient-framework 26s ease-in-out infinite alternate;animation-play-state:paused}
html.js-motion.visual-motion-ready:not(.motion-paused):not(.motion-suspended) body:not(.menu-open) :is(.motion-title.is-in-view>.motion-title-ink,.motion-rule.is-in-view){animation-play-state:running}
html.js-motion.visual-motion-ready:not(.motion-paused):not(.motion-suspended) body:not(.menu-open) .motion-scene.is-in-view .ambient-background>span{animation-play-state:running}

.company-principle-number{position:relative}
.company-principle-number:after{content:'';position:absolute;left:38px;top:.8em;width:32px;height:1px;background:currentColor;opacity:.5;transform-origin:left center}
.js-motion .company-principle.is-visible .company-principle-number:after{animation:rule-construction .8s cubic-bezier(.2,.65,.25,1) .15s both}

@keyframes title-fade{from{opacity:0}to{opacity:1}}
@keyframes rule-construction{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ambient-breathe{from{transform:translate3d(0,0,0);opacity:.75}to{transform:translate3d(-32px,24px,0);opacity:1}}
@keyframes ambient-survey{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,32px,0)}}
@keyframes ambient-framework{from{transform:translate3d(0,0,0) rotate(-28deg)}to{transform:translate3d(-16px,12px,0) rotate(-24deg)}}

@media(hover:hover){
 .project-image:after{content:'';position:absolute;inset:12px;pointer-events:none;background:linear-gradient(#b4edc7,#b4edc7) left top/18px 1px no-repeat,linear-gradient(#b4edc7,#b4edc7) left top/1px 18px no-repeat,linear-gradient(#b4edc7,#b4edc7) right bottom/18px 1px no-repeat,linear-gradient(#b4edc7,#b4edc7) right bottom/1px 18px no-repeat;opacity:0;transition:opacity .35s ease}
 .project-card:is(:hover,:focus-visible) .project-image:after{opacity:.9}
}
@media(max-width:760px){
 .ambient-grid{width:85%;right:-15%;opacity:.3}
 .ambient-glow{width:600px;height:570px;right:-250px}
 .motion-scene-soft .ambient-glow{width:700px;height:650px;right:-350px}
 .ambient-frame{right:-270px;opacity:.65}
}
.motion-paused :is(.motion-title-ink,.motion-rule,.ambient-background>span),.motion-paused .company-principle-number:after{animation:none!important}
.motion-paused .motion-title-ink{opacity:1!important}
.motion-paused .motion-rule{transform:scaleX(1)!important}
.motion-suspended .company-principle-number:after,.menu-open .company-principle-number:after{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){
 .motion-title-ink,.motion-rule,.ambient-background>span,.company-principle-number:after{animation:none!important}
 .motion-title-ink{opacity:1!important}
 .motion-rule{transform:scaleX(1)!important}
 .project-image:after{transition:none}
}