/* Production mascot actions: 4 columns x 4 rows, transparent sprite sheet. */
#west-mascot-only[data-mood="happy"] .west-mascot-sprite,
#west-mascot-only[data-mood="laugh"] .west-mascot-sprite,
#west-mascot-only[data-mood="jump"] .west-mascot-sprite,
#west-mascot-only[data-action="wave"] .west-mascot-sprite,
#west-mascot-only[data-action="cast"] .west-mascot-sprite {
  width:108px;
  height:107px;
  margin:21px 0 0 -6px;
  background-image:url('/assets/img/west-guide-actions-v1.png');
  background-repeat:no-repeat;
  background-size:400% 400%;
  animation:west-guide-action-v1 1.15s steps(1,end) 1 both !important;
  filter:drop-shadow(0 9px 8px rgba(0,0,0,.48));
}
#west-mascot-only[data-mood="happy"] .west-mascot-sprite,
#west-mascot-only[data-action="wave"] .west-mascot-sprite { --west-action-y:0%; }
#west-mascot-only[data-action="cast"] .west-mascot-sprite { --west-action-y:33.3333%; }
#west-mascot-only[data-mood="jump"] .west-mascot-sprite { --west-action-y:66.6667%; }
#west-mascot-only[data-mood="laugh"] .west-mascot-sprite { --west-action-y:100%; }
@keyframes west-guide-action-v1 {
  0%,20% { background-position:0% var(--west-action-y); }
  25%,45% { background-position:33.3333% var(--west-action-y); }
  50%,70% { background-position:66.6667% var(--west-action-y); }
  75%,100% { background-position:100% var(--west-action-y); }
}
@media(max-width:600px) {
  #west-mascot-only[data-mood="happy"] .west-mascot-sprite,
  #west-mascot-only[data-mood="laugh"] .west-mascot-sprite,
  #west-mascot-only[data-mood="jump"] .west-mascot-sprite,
  #west-mascot-only[data-action] .west-mascot-sprite {
    margin:15px 0 0 -5px;
    transform:scale(.72);
    transform-origin:top left;
  }
}
@media(prefers-reduced-motion:reduce) {
  #west-mascot-only[data-mood] .west-mascot-sprite,
  #west-mascot-only[data-action] .west-mascot-sprite { animation:none!important; }
}