/* ============================================================
   Beirat Akademie — MOMENTE (momente.css)
   ============================================================
   Das Vokabular der Belohnungsmomente, das Innenraum UND Blog teilen (v4, 18.09.2026):
   XP-Chip, Rang-/Badge-Zeilen, Gold-Funken und die Moment-Karte von momente.js.
   Herausgeloest aus innen.css, damit der Blog denselben Stack laedt statt ihn zu kopieren
   (Kanon academy-experience §11 Regel 7). Eigene Tokens --moment-* mit Hex-Fallback: im
   Blog mappt merkbar.css --innen-tinte auf die Buehnenfarbe, der Chip bleibt aber ueberall
   Gold auf Tinte. Nur transform/opacity; calm/off ohne Bewegung; Reduced Motion still.
   Kanon: .claude/skills/academy-experience/SKILL.md (8a Momente, 8f Aufblenden, 8g Funken)
   ============================================================ */

:root {
  --moment-tinte: #14203a;
  --moment-tinte-dim: #4d5a75;
  --moment-gold: #d9b36c;
  --moment-bronze: #a2662f;
  --moment-stein: #faf5ea;
  --moment-fuge: #d3c3a4;
  --moment-patina: #4f8f83;
  --moment-patina-tief: #2f6b62;
  --moment-wasser: #7fd1df;
}

/* ---- Zeilen und Chip im Ergebnis (Mission, Check, Merkkasten, Blog-Merksatz) ---- */
.innen-mission-rang, .innen-mission-badge { margin: .5rem 0 0; font-weight: 600; color: var(--moment-patina-tief); }
.innen-xp-chip {
  display: inline-block;
  margin-left: .5rem;
  padding: .15rem .65rem;
  border-radius: 999px;
  background: var(--moment-tinte);
  color: var(--moment-gold);
  font-size: .9rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
[data-motion="cinematic"] .innen-xp-chip,
[data-motion="spectacle"] .innen-xp-chip { animation: innen-ankommen .5s .25s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes innen-ankommen {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ---- Gold-Funken, leise: steigen aus dem Kasten, wenn XP kommen (nur transform/opacity) ---- */
.hat-funken { position: relative; overflow: visible; }
.hat-funken::before, .hat-funken::after {
  content: ""; position: absolute; left: 12%; top: 40%; width: 76%; height: 40%; pointer-events: none;
  background:
    radial-gradient(circle, rgba(217, 179, 108, .95) 0 2px, transparent 3px) 4% 30% / 14px 14px no-repeat,
    radial-gradient(circle, rgba(127, 209, 223, .9) 0 1.5px, transparent 2.5px) 22% 70% / 10px 10px no-repeat,
    radial-gradient(circle, rgba(217, 179, 108, .95) 0 2.5px, transparent 3.5px) 40% 20% / 16px 16px no-repeat,
    radial-gradient(circle, rgba(217, 179, 108, .9) 0 1.5px, transparent 2.5px) 58% 60% / 10px 10px no-repeat,
    radial-gradient(circle, rgba(127, 209, 223, .9) 0 2px, transparent 3px) 76% 25% / 12px 12px no-repeat,
    radial-gradient(circle, rgba(217, 179, 108, .95) 0 2px, transparent 3px) 94% 65% / 14px 14px no-repeat;
  opacity: 0;
}
[data-motion="cinematic"] .hat-funken::before, [data-motion="spectacle"] .hat-funken::before { animation: merk-funken 1.4s ease-out .1s both; }
[data-motion="cinematic"] .hat-funken::after, [data-motion="spectacle"] .hat-funken::after { animation: merk-funken 1.6s ease-out .35s both; transform: scaleX(-1); }
@keyframes merk-funken { 0% { opacity: 0; transform: translateY(12px) scale(.8); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-70px) scale(1.15); } }

/* ---- Moment-Karte (momente.js): kleine Karte unten, nie zwei gleichzeitig ---- */
.moment {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  z-index: 60;
  width: min(28rem, calc(100% - 2rem));
  padding: .9rem 1.1rem 1rem;
  border-radius: 1rem;
  border: 1px solid var(--moment-gold);
  background: var(--moment-stein);
  color: var(--moment-tinte);
  box-shadow: 0 18px 44px rgba(20, 32, 58, 0.22);
  opacity: 0;
  transform: translate(-50%, 12px);
  transition: opacity .26s ease, transform .26s ease;
  cursor: pointer;
  text-align: left;
}
.moment.ist-sichtbar { opacity: 1; transform: translate(-50%, 0); }
.moment-titel { margin: 0; font-weight: 700; font-size: 1.05rem; color: var(--moment-tinte); }
.moment-text { margin: .25rem 0 0; color: var(--moment-tinte-dim); }
.moment .moment-zu { margin-top: .6rem; min-height: 36px; padding: .35rem .9rem; border-radius: 999px; border: 1px solid var(--moment-fuge); background: transparent; color: var(--moment-tinte); font: inherit; font-weight: 600; cursor: pointer; }
.moment--rang { border-color: var(--moment-patina); }
.moment--badge { border-color: var(--moment-bronze); }
/* Rang-Karte mit der Figur im neuen Rang (Blog-Merksatz, v4): Figur links, Text rechts. */
.moment--mit-figur { display: grid; grid-template-columns: 64px 1fr; column-gap: .85rem; align-items: center; }
.moment-avatar { grid-row: 1 / span 3; }
.moment-avatar .avatar { display: block; width: 64px; height: 83px; }
[data-motion="cinematic"] .moment-avatar .avatar, [data-motion="spectacle"] .moment-avatar .avatar { animation: moment-avatar-auf .45s .1s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes moment-avatar-auf { from { opacity: 0; transform: scale(.85) translateY(6px); } to { opacity: 1; transform: none; } }
[data-motion="calm"] .moment, [data-motion="off"] .moment { transition: none; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  .moment { transition: none; transform: translate(-50%, 0); }
  .innen-xp-chip, .moment-avatar .avatar { animation: none !important; }
  .hat-funken::before, .hat-funken::after { display: none; }
}