
:root{
 --mo-press:100ms;--mo-fast:150ms;--mo-nav-out:160ms;--mo-nav:200ms;--mo-draw:550ms;--mo-cable:650ms;
 --mo-hero:600ms;--mo-reveal:650ms;--mo-drop:600ms;--mo-jump:950ms;
 --mo-out:cubic-bezier(.16,1,.3,1);   
 --mo-std:cubic-bezier(.2,0,0,1);     
 --mo-in:cubic-bezier(.3,0,1,1);      
 --mo-rise:48px;--mo-fall:64px;--mo-settle:6px;--mo-drift:36px;
}
html{scroll-padding-top:80px}


.top{position:relative;z-index:50;background:var(--paper)}
.top[data-return]{position:sticky;top:0;transition:transform 300ms var(--mo-std)} 
.nav-away .top[data-return]{transform:translateY(-100%);transition-duration:200ms}
@media (prefers-reduced-motion:reduce){.top[data-return]{transition:none}}


.steps li::before{z-index:1}
.steps li:not(:last-child)::after{content:"";position:absolute;left:calc(var(--g)/2 - 1px);top:calc(var(--g)/2);bottom:calc(var(--g)/-2);width:2px;background:var(--char);transform-origin:50% 0}


.mo .mo-rv{opacity:0}
.mo .mo-go{animation:mo-rise var(--mo-reveal) var(--mo-out) var(--d,0ms) both}
.mo .mo-go.mo-back{animation-name:mo-fall}
.mo .mo-go.mo-hero{animation-duration:var(--mo-hero)}
.mo .mo-fade{animation:mo-fade var(--mo-reveal) var(--mo-out) var(--d,0ms) both}
.mo .mo-drop{animation:mo-drop var(--mo-drop) var(--mo-std) var(--d,0ms) both,mo-fade var(--mo-fast) var(--mo-out) var(--d,0ms) both}
.mo .steps li.mo-rv::after{transform:scaleY(0)}
.mo .steps li.mo-go::after{animation:mo-cable var(--mo-cable) var(--mo-std) calc(var(--d,0ms) + var(--mo-fast)) both}

.mo .mo-mk{background:none;position:relative;isolation:isolate}
.mo .mo-mk::before{content:"";position:absolute;left:0;right:0;top:42%;bottom:6%;background:var(--amber);z-index:-1;transform:scaleX(0);transform-origin:0 50%}
.mo .mo-mk.mo-draw::before{animation:mo-draw var(--mo-draw) var(--mo-out) var(--d,0ms) both}

.mo-n{display:inline-grid}
.mo-n>span{grid-area:1/1}
.mo-n>.mo-t{opacity:0}

.mo-snap .mo-a{transform:none!important;translate:none!important}
.mo-snap .photo{translate:none!important}

@keyframes mo-rise{from{opacity:0;transform:translateY(var(--mo-rise))}to{opacity:1;transform:none}}
@keyframes mo-fall{from{opacity:0;transform:translateY(calc(var(--mo-rise)*-1))}to{opacity:1;transform:none}}
@keyframes mo-fade{from{opacity:0}to{opacity:1}}

@keyframes mo-drop{
 0%{transform:translateY(calc(var(--mo-fall)*-1));animation-timing-function:var(--mo-in)}
 60%{transform:none;animation-timing-function:var(--mo-out)}
 80%{transform:translateY(calc(var(--mo-settle)*-1));animation-timing-function:var(--mo-std)}
 100%{transform:none}}

.mo .mo-mk.mo-back::before{transform-origin:100% 50%}
.mo .steps li.mo-back::after{transform-origin:50% 100%}
.mo .mo-drop.mo-back{animation-name:mo-lift,mo-fade}
@keyframes mo-lift{
 0%{transform:translateY(var(--mo-fall));animation-timing-function:var(--mo-in)}
 60%{transform:none;animation-timing-function:var(--mo-out)}
 80%{transform:translateY(var(--mo-settle));animation-timing-function:var(--mo-std)}
 100%{transform:none}}

html.mo body{overflow-x:clip} 
.mo .mo-jump{transform-origin:50% 100%;animation:mo-jump var(--mo-jump) linear var(--d,0ms) both}
.mo .mo-jump.mo-back{animation-name:mo-jump-r}

.mo .mo-kbw{position:relative;display:block;width:max-content;line-height:0}.mo .mo-kbw>img.kb{display:block}
.mo-rig{position:absolute;top:0;left:-9.58%;width:97.2%;aspect-ratio:400/483;opacity:0;pointer-events:none} 
.mo-rig.mo-fit-wave{left:-9.8%;width:103.6%}
.mo-rig img{position:absolute;inset:0;width:100%;height:100%}
.mo-rig .mo-arm-l{transform-origin:20.43% 49.15%}.mo-rig .mo-arm-r{transform-origin:81.27% 49.15%}
.mo-rig .mo-leg-l{transform-origin:35.87% 75.47%}.mo-rig .mo-leg-r{transform-origin:65.83% 75.47%}
.mo .mo-kbw.mo-jump .mo-rig{animation:mo-rig-on var(--mo-jump) linear var(--d,0ms) both}
.mo .mo-kbw.mo-jump>picture,.mo .mo-kbw.mo-jump>img{animation:mo-rig-off var(--mo-jump) linear var(--d,0ms) both}
.mo .mo-kbw.mo-jump .mo-arm-l{animation:mo-arm-l var(--mo-jump) linear var(--d,0ms) both}
.mo .mo-kbw.mo-jump .mo-arm-r{animation:mo-arm-r var(--mo-jump) linear var(--d,0ms) both}
.mo .mo-kbw.mo-jump .mo-leg-l{animation:mo-leg-l var(--mo-jump) linear var(--d,0ms) both}
.mo .mo-kbw.mo-jump .mo-leg-r{animation:mo-leg-r var(--mo-jump) linear var(--d,0ms) both}
@keyframes mo-rig-on{0%,76%{opacity:1}82%,100%{opacity:0}}
@keyframes mo-rig-off{0%,76%{opacity:0}82%,100%{opacity:1}}

@keyframes mo-arm-l{0%{transform:rotate(18deg)}20%{transform:rotate(-12deg)}45%{transform:rotate(-32deg)}68%{transform:rotate(10deg)}84%{transform:rotate(-5deg)}100%{transform:none}}
@keyframes mo-arm-r{0%{transform:rotate(-18deg)}20%{transform:rotate(12deg)}45%{transform:rotate(32deg)}68%{transform:rotate(-10deg)}84%{transform:rotate(5deg)}100%{transform:none}}
@keyframes mo-leg-l{0%{transform:rotate(-8deg)}25%{transform:rotate(14deg) scaleY(.9)}45%{transform:rotate(26deg) scaleY(.8)}66%{transform:rotate(-6deg)}100%{transform:none}}
@keyframes mo-leg-r{0%{transform:rotate(8deg)}25%{transform:rotate(-14deg) scaleY(.9)}45%{transform:rotate(-26deg) scaleY(.8)}66%{transform:rotate(6deg)}100%{transform:none}}
@keyframes mo-jump{
 0%{opacity:0;transform:translate(-120px,30px) rotate(-8deg) scale(.96,1.04);animation-timing-function:cubic-bezier(.2,.6,.4,1)}
 12%{opacity:1}
 45%{transform:translate(-40px,-90px) rotate(5deg);animation-timing-function:cubic-bezier(.5,0,.9,.6)}
 68%{transform:translate(0,0) scale(1.1,.84);animation-timing-function:var(--mo-out)}
 82%{transform:translate(0,-14px) scale(.97,1.04);animation-timing-function:cubic-bezier(.5,0,.9,.6)}
 92%{transform:translate(0,0) scale(1.03,.97)}
 100%{opacity:1;transform:none}}
@keyframes mo-jump-r{
 0%{opacity:0;transform:translate(120px,30px) rotate(8deg) scale(.96,1.04);animation-timing-function:cubic-bezier(.2,.6,.4,1)}
 12%{opacity:1}
 45%{transform:translate(40px,-90px) rotate(-5deg);animation-timing-function:cubic-bezier(.5,0,.9,.6)}
 68%{transform:translate(0,0) scale(1.1,.84);animation-timing-function:var(--mo-out)}
 82%{transform:translate(0,-14px) scale(.97,1.04);animation-timing-function:cubic-bezier(.5,0,.9,.6)}
 92%{transform:translate(0,0) scale(1.03,.97)}
 100%{opacity:1;transform:none}}
@keyframes mo-draw{from{transform:scaleX(0)}to{transform:none}}
@keyframes mo-cable{from{transform:scaleY(0)}to{transform:none}}
@keyframes mo-drift{from{translate:0 var(--mo-drift)}to{translate:0 calc(var(--mo-drift)*-1)}}

@media (prefers-reduced-motion:no-preference){
 
 .btn,.faq summary,.pl{transition:transform var(--mo-fast) var(--mo-out)}
 .btn:active,.faq summary:active,.pl:has(a:active){transform:scale(.98);transition-duration:var(--mo-press)}
 
 @supports (animation-timeline:view()){
  .photo{animation:mo-drift linear both;animation-timeline:view();animation-range:cover}
  .mo .photo.mo-go{animation:mo-rise var(--mo-reveal) var(--mo-out) var(--d,0ms) both,mo-drift linear both;animation-timeline:auto,view();animation-range:normal,cover}
  .mo .photo.mo-go.mo-back{animation-name:mo-fall,mo-drift}
 }
}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@media print{.mo .mo-rv{opacity:1}}
