/* Two small animations: the house waves, the mailbox flag drops and pops back up.
   Each figure is a body image plus one moving layer of the same size, stacked exactly.
   Transform only, so nothing shifts. Pivots are the wrist and the red circle of the flag. */

/* Wrapper that must not change the figure's layout: the image classes sit on both images, which overlap (absolute figures). */
.mo--abs{display:contents}

/* Wrapper for an in-flow figure: it takes the image's place, the layer sits on top of the body. */
.mo--box{display:block;position:relative}
.mo.mo--box>img{display:block;width:100%;height:auto;margin:0}
.mo.mo--box>img.mo-top{position:absolute;left:0;top:0;height:100%}
.tx-circle .mo--box{width:84%;margin-bottom:5%}

.mo-house .mo-top{transform-origin:89.46% 67.86%}
.mo-mailbox .mo-top{transform-origin:64.08% 36.40%}

@keyframes mo-wave{
  0%,10%{transform:rotate(0)}
  14%{transform:rotate(18deg)}
  19%{transform:rotate(-12deg)}
  24%{transform:rotate(18deg)}
  29%{transform:rotate(-12deg)}
  34%{transform:rotate(18deg)}
  38.6%,100%{transform:rotate(0)}
}
@keyframes mo-flag{
  0%,64%{transform:rotate(0);animation-timing-function:ease-in}
  70%{transform:rotate(80deg);animation-timing-function:linear}
  74%{transform:rotate(80deg);animation-timing-function:cubic-bezier(.2,.7,.3,1)}
  79%{transform:rotate(-12deg);animation-timing-function:ease-in-out}
  84%{transform:rotate(5deg);animation-timing-function:ease-in-out}
  89%{transform:rotate(-2deg);animation-timing-function:ease-in-out}
  93%,100%{transform:rotate(0)}
}

@media (prefers-reduced-motion:no-preference){
  .mo-house .mo-top{animation:mo-wave 4.9s ease-in-out infinite}
  .mo-mailbox .mo-top{animation:mo-flag 6s linear infinite}
}