/* Motion layer. Everything is scoped to .motion on the root, which the script sets only when motion is on. */
.motion{scroll-behavior:smooth}
.motion .btn,.motion .ctl{transition:transform .12s ease,box-shadow .12s ease}
.motion .site-head{transition:box-shadow .25s ease}
.motion .site-head.is-stuck{box-shadow:0 6px 0 -3px rgba(30,20,17,.12)}

@keyframes draw{to{stroke-dashoffset:0}}
@keyframes wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes pop{0%{transform:scale(0) rotate(-20deg)}70%{transform:scale(1.25) rotate(6deg)}100%{transform:scale(1) rotate(0)}}
@keyframes thump{0%{transform:rotate(4deg) scale(2);opacity:0}60%{transform:rotate(4deg) scale(.9);opacity:1}100%{transform:rotate(4deg) scale(1);opacity:1}}
@keyframes chip-in{0%{transform:translateY(-10px) rotate(0) scale(.9)}60%{transform:translateY(2px) rotate(var(--cr,0deg)) scale(1.06)}100%{transform:rotate(var(--cr,0deg)) scale(1)}}
@keyframes snip{0%,100%{transform:rotate(0)}30%{transform:rotate(-28deg) scale(1.2)}60%{transform:rotate(18deg) scale(1.1)}}
@keyframes wiggle{0%,100%{transform:rotate(0)}50%{transform:rotate(-5deg) translateY(-2px)}}
@keyframes bob{0%,100%{transform:translate(0,0)}50%{transform:translate(4px,-6px)}}
@keyframes boil{0%,100%{transform:rotate(0) scale(1)}33%{transform:rotate(.7deg) scale(1.012)}66%{transform:rotate(-.6deg) scale(.992)}}

/* strokes that draw themselves once they scroll into view */
.motion .draw path{stroke-dasharray:1;stroke-dashoffset:1}
.motion .draw.in path,.motion .in .draw path{animation:draw .8s cubic-bezier(.6,.1,.2,1) forwards;animation-delay:var(--d,0s)}
.motion .wipe{clip-path:inset(0 100% 0 0)}
.motion .in .wipe,.motion .wipe.in{animation:wipe .65s cubic-bezier(.7,0,.2,1) forwards;animation-delay:var(--d,0s)}
.motion .burst>svg{transform:scale(0);transform-origin:80% 80%}
.motion .in .burst>svg{animation:pop .45s cubic-bezier(.3,1.6,.5,1) .15s forwards}
.motion h1 .loop>svg{--d:.55s}
.motion h1 .mark>svg{--d:.25s}

/* problem */
.motion .todo li:nth-child(1){--d:.1s}.motion .todo li:nth-child(2){--d:.55s}
.motion .todo .strike path{animation-duration:.45s}
.motion .todo .note{--d:1.1s}
.motion .todo .note span{opacity:0;transition:opacity .3s ease 1.6s,transform .5s cubic-bezier(.3,1.6,.5,1) 1.6s;transform:rotate(-8deg) scale(.7)}
.motion .todo.in .note span{opacity:1;transform:rotate(-8deg) scale(1)}
.motion .settle{transition:transform .7s cubic-bezier(.2,1.5,.4,1);transition-delay:var(--sd,0s)}
.motion .settle:not(.in){transform:translateY(22px) rotate(var(--r0,2deg))}
.motion .pcard::before{transition:transform .45s cubic-bezier(.3,1.6,.5,1);transition-delay:calc(var(--sd,0s) + .35s)}
.motion .pcard:not(.in)::before{transform:rotate(var(--tr,-3deg)) scale(1.6) translateY(-14px)}
.motion .pcard:hover{transform:rotate(-1deg) translateY(-4px)}
/* ticking the list: the note rewrites itself, and shouts once the pile wins */
@keyframes rewrite{from{clip-path:inset(-20% 100% -20% 0)}to{clip-path:inset(-20% -10% -20% 0)}}
@keyframes shout{0%,100%{transform:scale(1)}40%{transform:scale(1.18) rotate(-3deg)}}
@keyframes refuse{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg)}60%{transform:rotate(10deg)}}
@keyframes bump{0%,100%{transform:none}40%{transform:translateY(-3px) scale(1.04)}}
.motion .todo .note.is-rewrite span{animation:rewrite .55s steps(9) both}
.motion .todo .note.is-shout{animation:shout .45s cubic-bezier(.3,1.6,.5,1)}
.motion .todo .box.is-refusing{animation:refuse .4s ease-out}
.motion .tally.is-bump{animation:bump .35s ease-out}
.motion .tally{transform-origin:0 50%}

/* solution */
.motion .step .dot{transition:transform .3s cubic-bezier(.3,1.6,.5,1),box-shadow .3s ease}
.motion .step .dot{transition:transform .45s cubic-bezier(.3,1.6,.5,1),box-shadow .3s ease,background-color .3s}
.motion .step{transition:opacity .3s}
.motion .stepnav.live .step:not(.is-on):not(.is-past){opacity:.5}
.motion .stepnav.live .step:not(.is-on):not(.is-past) .dot{background:var(--paper)}
.motion .step.is-on .dot{transform:scale(1.25) rotate(-8deg);box-shadow:2px 2px 0 var(--ink)}
/* dealt-card stack: the step bar sticks under the header and each card sticks a little lower */
.motion .stacking .stepnav{position:sticky;top:var(--hdr,72px)}
.motion .stacking .scard{position:sticky;top:calc(var(--hdr,72px) + var(--steps-h,56px) + 14px + var(--i,0) * 22px);transform-origin:50% 0;z-index:1}
.motion .scrib text{opacity:0;transition:opacity .6s ease .7s}
.motion .scrib.in text{opacity:1}
.motion .panel .ill{transform-origin:50% 60%}
.motion .panel:hover .ill{animation:boil .45s steps(3) infinite}
.motion .scard.settle:not(.in){transform:translateY(28px) rotate(var(--r0,-1deg))}
/* solution illustrations play once the card settles in */
@keyframes it-pop{0%{opacity:0;transform:translateY(14px) scale(.5) rotate(-10deg)}70%{opacity:1;transform:translateY(-3px) scale(1.06) rotate(2deg)}100%{opacity:1;transform:none}}
@keyframes bar-in{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes twinkle{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(18deg) scale(1.18)}}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(-1.5deg)}}
.motion .panel .ill .it,.motion .panel .ill .bar,.motion .panel .ill .rise,.motion .panel .ill .note,.motion .panel .ill .pop,.motion .panel .ill .star{transform-box:fill-box;transform-origin:50% 50%}
.motion .scard:not(.in) .ill .it,.motion .scard:not(.in) .ill .rise,.motion .scard:not(.in) .ill .note,.motion .scard:not(.in) .ill .pop{opacity:0}
.motion .scard:not(.in) .ill .bar{transform:scaleX(0)}
.motion .ill .ln{stroke-dasharray:1;stroke-dashoffset:1}
.motion .scard.in .ill .ln{animation:draw .7s cubic-bezier(.6,.1,.2,1) forwards;animation-delay:var(--d,0s)}
.motion .scard.in .ill .it{animation:it-pop .55s cubic-bezier(.3,1.4,.5,1) both;animation-delay:calc(.3s + var(--i) * .1s)}
.motion .ill .bar{transform-origin:0 50%}
.motion .scard.in .ill .bar{animation:bar-in .45s cubic-bezier(.6,0,.2,1) both;animation-delay:calc(.3s + var(--i) * .14s)}
.motion .scard.in .ill .rise{animation:rise .5s cubic-bezier(.3,1.3,.5,1) both;animation-delay:calc(.5s + var(--i) * .1s)}
.motion .scard.in .ill .note{animation:it-pop .5s cubic-bezier(.3,1.4,.5,1) var(--d,0s) both,float 3.2s ease-in-out calc(var(--d,0s) + .6s) infinite}
.motion .scard.in .ill .pop{animation:it-pop .45s cubic-bezier(.3,1.4,.5,1) var(--d,0s) both}
.motion .scard.in .ill .star{animation:twinkle 2.4s ease-in-out 1.4s infinite}

/* why */
.motion .whyc{transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.motion .whyc:hover{transform:rotate(-1deg) translateY(-6px)}
.motion .portrait svg path:nth-child(n+3){--d:.5s}

/* work */
.motion .wcard{transition:transform .35s cubic-bezier(.3,1.4,.5,1),box-shadow .35s ease}
.motion .ph{transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
.motion .wcard:hover .ph{transform:rotate(calc(var(--pr,0deg) * 1.6)) translateY(-4px)}
.motion .wcard:hover{transform:rotate(0deg) translateY(-10px);box-shadow:11px 11px 0 var(--ink)}
.motion .track{scroll-behavior:smooth}
.motion .progress i{transition:width .2s ease}
.motion .dragnote{animation:bob 2.2s ease-in-out infinite}

/* pricing */
.motion .slider input::-webkit-slider-thumb{transition:background-color .3s ease}
.motion .chip.ours.fresh{animation:chip-in .45s cubic-bezier(.3,1.5,.5,1) both;animation-delay:var(--cd,0s)}
.motion .handoff.fresh .snip{animation:snip .5s ease}
.motion .tier{transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
.motion .tier:not(.is-pick):hover{transform:translateY(-6px)}
.motion .tier.is-pick .stamp{animation:thump .4s cubic-bezier(.3,1.4,.5,1) .15s both}

/* pencil divider and contact */
.motion .pencil-line svg{animation:wiggle 1.1s ease-in-out infinite;transform-origin:10% 80%}
/* the door: swings a little, air rushes out, sheets fly off */
@keyframes whoosh{from{stroke-dashoffset:64}to{stroke-dashoffset:0}}
@keyframes fly-out{0%{opacity:0;transform:translate(-26px,10px) rotate(-10deg)}18%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translate(22px,-18px) rotate(12deg)}}
.motion .door .leaf,.motion .door .fly,.motion .door .fly2{transform-box:fill-box}
.motion .door .whoosh{stroke-dasharray:20 12;animation:whoosh 1s linear infinite}
.motion .door .fly,.motion .door .fly2{transform-origin:50% 50%}
.motion .door path:not(.whoosh){stroke-dasharray:1 2;stroke-dashoffset:1}
.motion .door.in path:not(.whoosh){animation:draw 1.1s cubic-bezier(.6,.1,.2,1) .2s forwards}
.motion .door .whoosh,.motion .door>span{opacity:0;transition:opacity .6s ease 1.2s}
.motion .door.in .whoosh,.motion .door.in>span{opacity:1}
.motion .door.in .fly{animation:draw 1.1s cubic-bezier(.6,.1,.2,1) .2s forwards,fly-out 3.6s ease-in-out 1.8s infinite}
.motion .door.in .fly2{animation:draw 1.1s cubic-bezier(.6,.1,.2,1) .2s forwards,fly-out 3.6s ease-in-out 2.9s infinite}

/* faq */
.motion .qi::after{transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.motion .qi{transition:background-color .2s ease}
.motion .qa[open] .ans{animation:ans-in .35s cubic-bezier(.2,.9,.3,1) both}
@keyframes ans-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* mobile menu: rows deal in one after another */
@keyframes deal{from{opacity:0;transform:translateX(-18px) rotate(-1.5deg)}to{opacity:1;transform:none}}
.motion .mnav li{animation:deal .32s cubic-bezier(.3,1.3,.5,1) both;animation-delay:calc(var(--i,0) * 40ms)}
.motion .mnav .btn{animation:deal .32s cubic-bezier(.3,1.3,.5,1) .3s both}