/* dcc motion pass: appended overrides, unique keyframe names */

/* hello: settle, squash, hop, land, two quick leans with holds, ears lag and twitch */
.run.hello .actor{animation:dcc-hello 2s ease-in-out both}
.run.hello .p0,.run.hello .p2,.run.hello .p3{animation:dcc-hello-ear-l 2s ease-out both;transform-origin:2px 3px}
.run.hello .p1,.run.hello .p4,.run.hello .p5{animation:dcc-hello-ear-r 2s ease-out both;transform-origin:12px 3px}
@keyframes dcc-hello{
0%,6%{transform:translateY(0) rotate(0) scale(1);animation-timing-function:ease-in}
14%{transform:translateY(3px) rotate(0) scale(1.07,.93);animation-timing-function:cubic-bezier(.2,.9,.4,1)}
24%{transform:translateY(-16px) rotate(0) scale(.95,1.05);animation-timing-function:ease-in}
32%{transform:translateY(0) rotate(0) scale(1.08,.92);animation-timing-function:cubic-bezier(.3,1.35,.5,1)}
40%,50%{transform:translateY(-1px) rotate(-9deg) scale(1);animation-timing-function:cubic-bezier(.3,1.35,.5,1)}
58%,68%{transform:translateY(-1px) rotate(8deg) scale(1);animation-timing-function:cubic-bezier(.3,1.1,.5,1)}
78%{transform:translateY(0) rotate(-3deg) scale(1)}
88%{transform:translateY(0) rotate(1deg) scale(1)}
100%{transform:translateY(0) rotate(0) scale(1)}
}
@keyframes dcc-hello-ear-l{
0%,27%{transform:none}
33%{transform:rotate(-13deg) translateY(.4px)}
39%{transform:rotate(1deg) translateY(0)}
44%{transform:rotate(7deg) translateY(0)}
52%{transform:none}
61%{transform:rotate(-7deg) translateY(0)}
70%,86%{transform:none}
90%{transform:rotate(-11deg) translateY(0)}
95%{transform:rotate(-2deg) translateY(0)}
100%{transform:none}
}
@keyframes dcc-hello-ear-r{
0%,27%{transform:none}
33%{transform:rotate(13deg) translateY(.4px)}
39%{transform:rotate(-1deg) translateY(0)}
45%{transform:rotate(6deg) translateY(0)}
53%{transform:none}
62%{transform:rotate(-6deg) translateY(0)}
71%,100%{transform:none}
}

/* crew: friends hop in from the sides and land on cc's baseline, cc perks an ear at each arrival, then the group does one small happy hop */
.crew .small{top:46px;transform-origin:50% 86%}
.crew .small.left{left:-56px}
.crew .small.right{right:-56px}
.run.crew .actor{animation:dcc-crew-main 3.4s ease-in-out both}
.run.crew .small.left{animation:dcc-crew-left 3.4s ease-out both}
.run.crew .small.right{animation:dcc-crew-right 3.4s ease-out both}
.run.crew .actor>svg .p0,.run.crew .actor>svg .p2,.run.crew .actor>svg .p3{animation:dcc-crew-ear-l 3.4s ease-out both;transform-origin:2px 3px}
.run.crew .actor>svg .p1,.run.crew .actor>svg .p4,.run.crew .actor>svg .p5{animation:dcc-crew-ear-r 3.4s ease-out both;transform-origin:12px 3px}
@keyframes dcc-crew-left{
0%,6%{opacity:0;transform:translate(-46px,4px) scale(1)}
9%{opacity:1;transform:translate(-40px,-4px) scale(1);animation-timing-function:cubic-bezier(.3,.8,.5,1)}
16%{transform:translate(-26px,-16px) scale(1);animation-timing-function:ease-in}
23%{transform:translate(-12px,0) scale(1.08,.92);animation-timing-function:cubic-bezier(.3,1,.5,1)}
29%{transform:translate(-5px,-8px) scale(1);animation-timing-function:ease-in}
35%{transform:translate(0,0) scale(1.05,.95)}
41%{transform:translate(0,-1px) scale(1)}
47%,100%{opacity:1;transform:translate(0,0) scale(1)}
}
@keyframes dcc-crew-right{
0%,18%{opacity:0;transform:translate(46px,4px) scale(1)}
21%{opacity:1;transform:translate(40px,-4px) scale(1);animation-timing-function:cubic-bezier(.3,.8,.5,1)}
28%{transform:translate(26px,-16px) scale(1);animation-timing-function:ease-in}
35%{transform:translate(12px,0) scale(1.08,.92);animation-timing-function:cubic-bezier(.3,1,.5,1)}
41%{transform:translate(5px,-8px) scale(1);animation-timing-function:ease-in}
47%{transform:translate(0,0) scale(1.05,.95)}
53%{transform:translate(0,-1px) scale(1)}
59%,100%{opacity:1;transform:translate(0,0) scale(1)}
}
@keyframes dcc-crew-main{
0%,62%{transform:translateY(0) scale(1);animation-timing-function:ease-in}
67%{transform:translateY(3px) scale(1.05,.95);animation-timing-function:cubic-bezier(.2,.9,.3,1)}
75%{transform:translateY(-9px) scale(.97,1.03);animation-timing-function:ease-in}
82%{transform:translateY(0) scale(1.04,.96);animation-timing-function:ease-out}
89%{transform:translateY(-2px) scale(1)}
100%{transform:translateY(0) scale(1)}
}
@keyframes dcc-crew-ear-l{
0%,22%{transform:none}
27%{transform:rotate(-12deg) translateY(-.4px)}
36%{transform:rotate(-7deg) translateY(-.2px)}
44%,64%{transform:none}
70%{transform:rotate(-5deg) translateY(0)}
77%{transform:rotate(-10deg) translateY(.3px)}
85%{transform:rotate(4deg) translateY(0)}
92%,100%{transform:none}
}
@keyframes dcc-crew-ear-r{
0%,34%{transform:none}
39%{transform:rotate(12deg) translateY(-.4px)}
48%{transform:rotate(7deg) translateY(-.2px)}
56%,64%{transform:none}
70%{transform:rotate(5deg) translateY(0)}
77%{transform:rotate(10deg) translateY(.3px)}
85%{transform:rotate(-4deg) translateY(0)}
92%,100%{transform:none}
}

/* peek: cc rests with feet on the line in every scene height (painted bottom = 42 + 15.7px, line top = 58px). fully hidden below the mask, pops ears up, two curious leans with holds and ear twitches, ducks, then leaps out and lands */
.peek .actor{margin-top:auto;margin-bottom:42px}
.run.peek .actor{animation:dcc-peek 3.2s ease-in-out both}
.run.peek .p0,.run.peek .p2,.run.peek .p3{animation:dcc-peek-ear-l 3.2s ease-out both;transform-origin:2px 3px}
.run.peek .p1,.run.peek .p4,.run.peek .p5{animation:dcc-peek-ear-r 3.2s ease-out both;transform-origin:12px 3px}
@keyframes dcc-peek{
0%,12%{transform:translateY(96px) rotate(0) scale(1);animation-timing-function:cubic-bezier(.2,.8,.25,1.2)}
21%{transform:translateY(44px) rotate(0) scale(1);animation-timing-function:ease-out}
26%,40%{transform:translateY(44px) rotate(-7deg) scale(1);animation-timing-function:ease-in-out}
46%,58%{transform:translateY(41px) rotate(6deg) scale(1);animation-timing-function:ease-in-out}
64%{transform:translateY(56px) rotate(0) scale(1);animation-timing-function:cubic-bezier(.15,.9,.3,1)}
76%{transform:translateY(-12px) rotate(0) scale(.94,1.06);animation-timing-function:ease-in}
84%{transform:translateY(2px) rotate(0) scale(1.06,.94);animation-timing-function:ease-out}
92%{transform:translateY(-3px) rotate(0) scale(1);animation-timing-function:ease-in-out}
100%{transform:translateY(0) rotate(0) scale(1)}
}
@keyframes dcc-peek-ear-l{
0%,28%{transform:none}
33%{transform:rotate(-14deg) translateY(.3px)}
38%{transform:rotate(-3deg) translateY(0)}
42%,60%{transform:none}
64%{transform:rotate(6deg) translateY(0)}
72%{transform:rotate(-12deg) translateY(.3px)}
80%{transform:rotate(-4deg) translateY(0)}
88%{transform:rotate(5deg) translateY(0)}
94%{transform:rotate(-2deg) translateY(0)}
100%{transform:none}
}
@keyframes dcc-peek-ear-r{
0%,46%{transform:none}
50%{transform:rotate(12deg) translateY(.3px)}
54%{transform:rotate(2deg) translateY(0)}
58%,60%{transform:none}
64%{transform:rotate(-6deg) translateY(0)}
72%{transform:rotate(12deg) translateY(.3px)}
80%{transform:rotate(4deg) translateY(0)}
88%{transform:rotate(-5deg) translateY(0)}
94%{transform:rotate(2deg) translateY(0)}
100%{transform:none}
}