/* ============================================================
   Beirat Akademie — BEGLEITER «Lumo» (begleiter.css)
   ============================================================
   Die einzige Quelle der Figur und ihrer Sprechblase (begleiter.js). Herausgeloest aus
   interaktionen.css wie momente.css (academy-experience 2.9.0), damit die Startseite den
   Begleiter laden kann, ohne die Lektions-Interaktionen mitzubringen. Geladen in Lektion,
   Kommandobruecke, Blog und Startseite. Farben ueber --innen-* (Blog und Startseite bilden
   sie auf die Galaxie ab); nur transform/opacity; calm/off und Reduced Motion still.
   Auf der Startseite lebt Lumo kurz (begleiter--kurz, hoechstens 5 s Bewegung).
   Kanon: .claude/skills/academy-experience/SKILL.md (8c), merkbar-content (Regel 6, §5)
   ============================================================ */

.hat-begleiter { position: relative; }
.begleiter {
  display: flex;
  align-items: flex-end;
  gap: .5rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .4s ease, transform .4s cubic-bezier(.2, .7, .2, 1);
  pointer-events: none;
}
.begleiter.ist-da { opacity: 1; transform: none; }
.begleiter--sagt { margin: -.25rem 0 .75rem; }
.begleiter--jubel { margin-top: .75rem; }
.lumo-svg { width: 4.25rem; height: 4.25rem; flex: 0 0 auto; overflow: visible; }
.begleiter-blase {
  margin: 0 0 1.1rem;
  padding: .55rem .85rem;
  max-width: 34rem;
  border-radius: 1rem 1rem 1rem .25rem;
  background: #faf5ea;
  border: 1px solid var(--innen-gold);
  box-shadow: 0 8px 22px rgba(20, 32, 58, 0.12);
  font-size: .92rem;
  line-height: 1.4;
  color: var(--innen-tinte);
}
.begleiter--jubel .begleiter-blase { border-color: var(--innen-patina); }
/* Bewegung: Schweben, Fluegel, Blinzeln, Licht. In Blog und Kommandobruecke dauerhaft,
   in der Lektion still (calm-Zone, Regel unten), auf der Startseite kurz (begleiter--kurz). */
.begleiter.ist-da .lumo-koerper { animation: lumo-schweben 3.6s ease-in-out infinite; transform-origin: 60px 64px; }
.begleiter.ist-da .lumo-fluegel--l { animation: lumo-fluegel-l .9s ease-in-out infinite alternate; transform-origin: 34px 62px; }
.begleiter.ist-da .lumo-fluegel--r { animation: lumo-fluegel-r .9s ease-in-out infinite alternate; transform-origin: 86px 62px; }
.begleiter.ist-da .lumo-lider { animation: lumo-blinzeln 5s ease-in-out infinite; transform-origin: 60px 48px; transform: scaleY(0); }
.begleiter.ist-da .lumo-licht { animation: lumo-licht 2.4s ease-in-out infinite; }
.begleiter--jubel.ist-da .lumo-koerper { animation: lumo-huepfen .7s cubic-bezier(.3, .8, .3, 1) 2; }
@keyframes lumo-schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes lumo-fluegel-l { from { transform: rotate(0); } to { transform: rotate(-14deg); } }
@keyframes lumo-fluegel-r { from { transform: rotate(0); } to { transform: rotate(14deg); } }
@keyframes lumo-blinzeln { 0%, 92%, 100% { transform: scaleY(0); } 95% { transform: scaleY(1); } }
@keyframes lumo-licht { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
@keyframes lumo-huepfen { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-14px) scale(1.04); } }
[data-motion="calm"] .begleiter, [data-motion="off"] .begleiter { transition: none; }
[data-motion="calm"] .begleiter *, [data-motion="off"] .begleiter * { animation: none !important; }
@media (max-width: 40rem) {
  .lumo-svg { width: 3.4rem; height: 3.4rem; }
  .begleiter-blase { font-size: .86rem; }
}
@media (prefers-reduced-motion: reduce) {
  .begleiter { transition: none; opacity: 1; transform: none; }
  .begleiter * { animation: none !important; }
  .begleiter .lumo-lider { transform: scaleY(0); }
}

/* ---- Startseite: genau ein Lumo im Kompass-Check (Charles, 22.09.2026) ----------------
   Kurz statt dauerhaft, weil dort nichts dauernd rechnen soll: ein Schwebe-Zyklus (3,6 s),
   vier Fluegelschlaege (3,6 s, enden angelegt), das Licht anderthalb Mal (endet hell, ohne
   Sprung), einmal Blinzeln (5 s). Der Jubel bleibt zwei Huepfer (1,4 s). Danach: Ruhe. */
.begleiter--kurz:not(.begleiter--jubel).ist-da .lumo-koerper { animation-iteration-count: 1; }
.begleiter--kurz.ist-da .lumo-fluegel--l,
.begleiter--kurz.ist-da .lumo-fluegel--r { animation-iteration-count: 4; }
.begleiter--kurz.ist-da .lumo-licht { animation-iteration-count: 1.5; }
.begleiter--kurz.ist-da .lumo-lider { animation-iteration-count: 1; }
/* Zieht Lumo zur naechsten Karte weiter, geht der alte ganz (begleiter.js, halteFest): kein
   leerer Platz, kein Sprung, nie zwei zugleich. Wo er steht, legt galaxie.css fest (im Rand
   neben der Karte oder darunter, «Kompass-Check»). */
/* Beim Ergebnis nimmt das Antennenlicht die Torfarbe des empfohlenen Bereichs an (dieselben
   Werte wie .aurelia[data-eintritt] in galaxie.css). */
.begleiter[data-kurs="einsteiger"] .lumo-licht { fill: rgb(255, 240, 214); }
.begleiter[data-kurs="fortgeschritten"] .lumo-licht { fill: rgb(214, 244, 250); }
.begleiter[data-kurs="experte"] .lumo-licht { fill: rgb(255, 226, 160); }
[data-bc-theme="light"] .begleiter[data-kurs] .lumo-licht { stroke: #8a6410; stroke-width: 1.5; }