/* Generated by tools/export-mascot-aseprite.py from
 * tools/aseprite/grillmeister-sheet.json — do not edit.
 * 28 frames of 96x96 in one strip; tags idle 0-7, flip 8-19, fire 20-23, smoke 24-27.
 * Frames are stepped in percent, so the displayed size below is the
 * only thing that changes between breakpoints. */
.mascot{position:relative;display:inline-block;width:96px;height:96px;line-height:0;--m-paint-top:0.1771;--m-paint-right:0.0729;--m-paint-bottom:0.0417;--m-paint-left:0.0625}
.mascot-layer{position:absolute;left:0;top:0;width:100%;height:100%;background-image:url("grillmeister.edeb130d.png");background-repeat:no-repeat;background-size:2800% 100%;image-rendering:pixelated}

/* The kettle, the coals and the sausages are drawn into every figure
 * frame of this sheet, so there is no separate grill layer to show.
 * The element stays; a sheet that brings the grill back gets a
 * position here instead of being switched off. */
.m-grill{display:none}

/* Fire and smoke carry ONLY the effect and belong over the figure —
 * under it they would be behind the opaque kettle. DOM order puts
 * them below, so the order is stated here. */
.m-figure{z-index:1}
.m-fire{z-index:2}
.m-smoke{z-index:3}

/* 9510 ms: the idle loop 2x (3860 ms each) then the flip once (1790 ms), at the sheet's own frame times */
@keyframes m-figure{0.000%{background-position-x:0.0000%}9.464%{background-position-x:3.7037%}10.726%{background-position-x:7.4074%}14.090%{background-position-x:11.1111%}17.876%{background-position-x:14.8148%}22.292%{background-position-x:18.5185%}25.447%{background-position-x:22.2222%}32.387%{background-position-x:25.9259%}40.589%{background-position-x:0.0000%}50.053%{background-position-x:3.7037%}51.314%{background-position-x:7.4074%}54.679%{background-position-x:11.1111%}58.465%{background-position-x:14.8148%}62.881%{background-position-x:18.5185%}66.036%{background-position-x:22.2222%}72.976%{background-position-x:25.9259%}81.178%{background-position-x:29.6296%}83.491%{background-position-x:33.3333%}85.384%{background-position-x:37.0370%}86.751%{background-position-x:40.7407%}88.433%{background-position-x:44.4444%}89.800%{background-position-x:48.1481%}90.641%{background-position-x:51.8519%}91.483%{background-position-x:55.5556%}92.534%{background-position-x:59.2593%}93.375%{background-position-x:62.9630%}94.953%{background-position-x:66.6667%}97.266%{background-position-x:70.3704%}}
.m-figure{animation:m-figure 9510ms steps(1,end) infinite}

/* m-fire: its own loop, 480 ms, so it does not sync to the figure */
@keyframes m-fire{0.000%{background-position-x:74.0741%}25.000%{background-position-x:77.7778%}50.000%{background-position-x:81.4815%}75.000%{background-position-x:85.1852%}}
.m-fire{animation:m-fire 480ms steps(1,end) infinite}

/* m-smoke: its own loop, 1040 ms, so it does not sync to the figure */
@keyframes m-smoke{0.000%{background-position-x:88.8889%}25.000%{background-position-x:92.5926%}50.000%{background-position-x:96.2963%}75.000%{background-position-x:100.0000%}}
.m-smoke{animation:m-smoke 1040ms steps(1,end) infinite}

.mascot[data-paused="true"] .mascot-layer{animation-play-state:paused}

@media (prefers-reduced-motion: reduce){
  .mascot-layer{animation:none!important}
  .m-figure{background-position-x:0.0000%}
  .m-fire{background-position-x:74.0741%}
  .m-smoke{background-position-x:88.8889%}
}

@media (min-width: 640px){
  .mascot{width:192px;height:192px}
}