/* lever-Maskottchen: das App-Icon mit Gesicht. Steuerung in assets/mascot.js.
   --m ist die Breite der Figur. Die Figur steht mit den Füßen an der Unterkante ihres Rahmens. */

.mascot{position:absolute;left:0;top:0;width:calc(var(--m,64px) * 1.5);height:calc(var(--m,64px) * 2.3);pointer-events:none;z-index:2}
.mascot.clip{overflow:hidden}
.m-char{position:absolute;left:50%;bottom:0;width:var(--m,64px);transform:translate(-50%,100%);pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.m-svg{display:block;width:100%;height:auto;overflow:visible}

.m-legs path{fill:none;stroke:#141414;stroke-width:6;stroke-linecap:round}
.m-legs rect{fill:#141414}
.m-gloss{fill:none;stroke:#fff;stroke-opacity:.5;stroke-width:5;stroke-linecap:round}
.m-mark{fill:none;stroke:#fff;stroke-width:4.2;stroke-linejoin:miter;opacity:.95}
.m-cheek{fill:#ff4d2e;opacity:.32}
.m-eye ellipse{fill:#141414}
.m-glint{fill:#fff}
.m-mouth{fill:none;stroke:#141414;stroke-width:4.5;stroke-linecap:round}
.m-mouth-open{fill:#141414;display:none}
.m-arms path{fill:none;stroke:#141414;stroke-width:6;stroke-linecap:round}
.m-arms circle{fill:#141414}

/* Haltungen: rest (Arme hängen), climb (Hände greifen die Kante), ledge (Unterarme auf der Kante) */
.m-up,.m-ledge{display:none}
.mascot[data-pose="climb"] .m-rest,.mascot[data-pose="ledge"] .m-rest{display:none}
.mascot[data-pose="climb"] .m-up{display:inline}
.mascot[data-pose="ledge"] .m-ledge{display:inline}

.m-body,.m-arm-l,.m-arm-r{transform-box:view-box}
.m-body{transform-origin:60px 146px}
.m-arm-l{transform-origin:14px 72px}
.m-arm-r{transform-origin:106px 72px}
.m-eye{transform-box:fill-box;transform-origin:center;transition:transform 90ms ease}
.mascot.blink .m-eye{transform:scaleY(.1)}

.mascot.waving .m-arm-r{animation:m-wave .34s ease-in-out infinite alternate}
.mascot.waving .m-mouth{display:none}
.mascot.waving .m-mouth-open{display:inline}
@keyframes m-wave{from{transform:rotate(-126deg)}to{transform:rotate(-166deg)}}

.mascot.idle .m-body{animation:m-breathe 3.4s ease-in-out infinite}
@keyframes m-breathe{0%,100%{transform:none}50%{transform:scale(1.025,.975)}}

/* Funken aus dem Logo, wenn die Figur hüpft */
.m-spark{position:absolute;left:0;top:0;width:18px;height:18px;pointer-events:none;z-index:3}
.m-spark svg{display:block;width:100%;height:100%;overflow:visible}
.m-spark path{fill:none;stroke:#ff7a00;stroke-width:2.8;stroke-linejoin:miter}

/* Figur im Schluss-Abschnitt */
.mascot-stand{position:relative;--m:88px;width:calc(var(--m) * 1.6);height:calc(var(--m) * 1.7);margin:0 auto 18px}
.mascot-stand .mascot{width:100%;height:100%}
.mascot-stand .m-char{transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  .mascot.idle .m-body,.mascot.waving .m-arm-r{animation:none}
  .mascot.waving .m-arm-r{transform:rotate(-146deg)}
}