/* A family of movements: wandering aperture, drifting ring, rolling O and slow image zoom. */
.studio .section-orbit,.services .section-orbit,.gallery-page .section-orbit,.offer-orbit{animation-play-state:paused}
.motion-in-view .section-orbit,.motion-in-view .offer-orbit{animation-play-state:running}
.studio .section-orbit{animation:studio-drift 9s ease-in-out infinite paused}
.services .section-orbit{animation:service-bounce 5.5s ease-in-out infinite paused}
.offer-orbit{background:var(--sun);border:0;overflow:hidden}
.offer-orbit:after{content:'';position:absolute;inset:28%;border-radius:50%;background:var(--paper);animation:wandering-eye 6s ease-in-out infinite paused}
.motion-in-view .offer-orbit:after{animation-play-state:running}
.experience-image img{animation:food-closeup 16s ease-in-out infinite alternate paused;transform-origin:50% 55%}
.motion-in-view .experience-image img{animation-play-state:running}
.motion-rail{position:relative;height:105px;margin-top:65px;border-bottom:1px solid #00000044;overflow:hidden}
.rolling-o{position:absolute;bottom:0;left:0;width:86px;height:86px;animation:roll-across 9s cubic-bezier(.45,0,.55,1) infinite alternate paused}
.rolling-o i{display:block;width:100%;height:100%;border:25px solid var(--ink);border-radius:50%;animation:roll-bounce 3s ease-in-out infinite paused}
.motion-in-view .rolling-o,.motion-in-view .rolling-o i{animation-play-state:running}
.portfolio-links>a strong,.portfolio-links .door-arrow{transition:transform .4s cubic-bezier(.2,.7,.25,1)}
.portfolio-links>a:hover strong,.portfolio-links>a:focus-visible strong{transform:translateX(12px)}
.portfolio-links>a:hover .door-arrow{transform:translate(6px,-6px)}
.portfolio-image img{transition:transform .85s cubic-bezier(.2,.7,.25,1)}
.portfolio-image:hover img{transform:scale(1.045)}
@keyframes studio-drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-55px,45px) scale(.92)}}
@keyframes service-bounce{0%,100%{transform:translateY(0) scale(1)}45%{transform:translateY(50px) scale(.95,1.05)}55%{transform:translateY(53px) scale(1.06,.94)}75%{transform:translateY(15px) scale(1)}}
@keyframes wandering-eye{0%,100%{transform:translate(-18%,10%)}40%{transform:translate(25%,-18%) scale(.88)}70%{transform:translate(10%,20%) scale(1.05)}}
@keyframes food-closeup{from{transform:scale(1)}to{transform:scale(1.07)}}
@keyframes roll-across{from{left:0;transform:rotate(-35deg)}to{left:calc(100% - 86px);transform:rotate(325deg)}}
@keyframes roll-bounce{0%,100%{transform:scale(1)}45%{transform:scale(.91,1.09)}65%{transform:scale(1.07,.93)}}
@media(max-width:650px){.motion-rail{margin-top:40px;height:85px}.rolling-o{width:64px;height:64px}.rolling-o i{border-width:19px}@keyframes roll-across{from{left:0;transform:rotate(-35deg)}to{left:calc(100% - 64px);transform:rotate(325deg)}}}
body.motion-paused *,body.motion-paused *:before,body.motion-paused *:after{animation-play-state:paused!important}
body.motion-paused .portfolio-image img,body.motion-paused .portfolio-links strong,body.motion-paused .door-arrow{transition:none;transform:none}
@media(prefers-reduced-motion:reduce){.rolling-o,.rolling-o i,.offer-orbit:after,.experience-image img,.section-orbit{animation:none!important}.portfolio-links>a strong,.portfolio-links .door-arrow,.portfolio-image img{transition:none!important;transform:none!important}}

.studio.motion-in-view .section-orbit,.services.motion-in-view .section-orbit{animation-play-state:running}
/* A scroll-controlled guide, independent of content and hit targets. */
.stair-o{position:fixed;left:0;top:0;width:48px;height:48px;z-index:15;pointer-events:none;color:var(--sun);will-change:transform;contain:layout style;transition:color .25s}
.stair-o[hidden]{display:none}.stair-o-ring{display:block;width:100%;height:100%;border:14px solid currentColor;border-radius:50%;box-shadow:0 0 0 1px #7774;transform-origin:50% 85%}
@media(max-width:650px){.stair-o{width:26px;height:26px}.stair-o-ring{border-width:8px}}
@media(prefers-reduced-motion:reduce){.stair-o{display:none!important}}

/* Larger O, same proportions. */
.stair-o{width:72px;height:72px}.stair-o-ring{border-width:21px;transform-origin:50% 100%}
@media(max-width:650px){.stair-o{width:39px;height:39px}.stair-o-ring{border-width:12px}}