/* LernPy-Maskottchen — 1:1 aus D:\mascot übernommen.
 *
 * Bewusst voll gekapselt: alle Regeln hängen unter `.mascot`, die Farben leben
 * als eigene Variablen am Maskottchen (nicht an den Seiten-Tokens). So verändert
 * die Webseite den Look des Maskottchens nicht und das Maskottchen nicht den der
 * Seite — es wird nur an den passenden Stellen hinzugefügt.
 *
 * Zustände werden über eine Klasse am <svg> gesteuert:
 *   is-idle · is-coding · is-happy · is-thinking
 * Ohne Zustandsklasse steht das Maskottchen still (z.B. als kleines Chat-Icon).
 */

.mascot {
  --ink: #ffffff;
  --bg: #141414;
  display: block;
}

/* Die Bühne füllt ihren Rahmen. Das Badge behält bewusst die per width/height
   gesetzte Größe (sein size-Argument), statt vom Grundstil überschrieben zu
   werden. */
.mascot-stage { width: 100%; height: auto; }

/* Der transparente Sprite sitzt auf einer Fläche. Rein dekorativ (klick-durchlässig),
   der weiche Kontaktschatten erdet ihn und hält den weißen Körper auch auf hellem
   Grund lesbar. Die Breite legt der jeweilige Platz fest. */
.mascot-sprite {
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.38));
}

.mascot .m-fig { fill: var(--ink); transform-box: view-box; transform-origin: 655px 780px; }
.mascot .m-ball { transform-box: view-box; transform-origin: 1133px 328px; }
.mascot .m-eye { fill: var(--bg); transform-box: fill-box; transform-origin: center; }
.mascot .m-bg { fill: var(--bg); }

/* ---- idle: ruhiges Atmen ---- */
.mascot.is-idle .m-fig { animation: mascot-breathe 3.4s ease-in-out infinite; }
.mascot.is-idle .m-eye { animation: mascot-blink 5.2s infinite; }

/* ---- coding: trippelnde Beine, leichtes Wippen ---- */
.mascot.is-coding .m-fig { animation: mascot-bob 0.52s ease-in-out infinite; }
.mascot.is-coding .m-ball { animation: mascot-ballFollow 0.52s ease-in-out infinite; animation-delay: 0.06s; }
.mascot.is-coding .m-eye { animation: mascot-blink 2.6s infinite; }
.mascot.is-coding .m-leg { animation: mascot-tap 0.52s ease-in-out infinite; }
.mascot.is-coding .m-leg:nth-of-type(2) { animation-delay: -0.17s; }
.mascot.is-coding .m-leg:nth-of-type(3) { animation-delay: -0.34s; }

/* ---- happy: Hüpfen mit Squash & Stretch ---- */
.mascot.is-happy .m-fig { animation: mascot-hop 1.1s cubic-bezier(.3, .7, .4, 1) infinite; }
.mascot.is-happy .m-ball { animation: mascot-ballHop 1.1s ease-in-out infinite; animation-delay: 0.08s; }
.mascot.is-happy .m-eye { transform: scaleY(0.5); }

/* ---- thinking: geneigter Kopf, langsames Schweben ---- */
.mascot.is-thinking .m-fig { animation: mascot-ponder 3.6s ease-in-out infinite; }
.mascot.is-thinking .m-eye { animation: mascot-blink 4.4s infinite; }

@keyframes mascot-breathe {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.02); }
}
@keyframes mascot-bob {
  0%, 100% { transform: scaleY(1) rotate(0deg); }
  50% { transform: scaleY(0.99) rotate(0.6deg); }
}
@keyframes mascot-tap {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-16px); }
}
@keyframes mascot-hop {
  0% { transform: translateY(0) scale(1, 1); }
  12% { transform: translateY(0) scale(1.07, 0.93); }
  30% { transform: translateY(-70px) scale(0.96, 1.05); }
  50% { transform: translateY(-78px) scale(1, 1); }
  70% { transform: translateY(-70px) scale(0.97, 1.04); }
  88% { transform: translateY(0) scale(1.08, 0.92); }
  100% { transform: translateY(0) scale(1, 1); }
}
@keyframes mascot-ponder {
  0%, 100% { transform: rotate(-4deg) translateY(0); }
  50% { transform: rotate(-4deg) translateY(-7px); }
}
@keyframes mascot-ballFollow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes mascot-ballHop {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-9px); }
  70% { transform: translateY(3px); }
}
@keyframes mascot-blink {
  0%, 92%, 100% { transform: scaleY(1); }
  96% { transform: scaleY(0.08); }
}

@media (prefers-reduced-motion: reduce) {
  .mascot .m-fig,
  .mascot .m-ball,
  .mascot .m-eye,
  .mascot .m-leg { animation: none !important; }
}