/* ==================================================================== LernHub · Bewegung (überarbeitet)
   Grundsätze: kurz & federnd bei Aktionen, weich & gestaffelt beim Erscheinen, nie im Weg. */
:root {
  --e-out: cubic-bezier(.16, 1, .3, 1);      /* schnell raus, weich rein */
  --e-spring: cubic-bezier(.34, 1.56, .64, 1); /* leichtes Überschwingen */
  --e-snap: cubic-bezier(.2, .9, .1, 1);
}

/* ---------- Seitenwechsel: gestaffeltes Hereingleiten ---------- */
@keyframes enter { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.page-in > *, .panel > *:not(.fb-dock):not(.result) { animation: enter .5s var(--e-out) both !important; }
.page-in > *:nth-child(1) { animation-delay: 0s !important; } .page-in > *:nth-child(2) { animation-delay: .05s !important; }
.page-in > *:nth-child(3) { animation-delay: .1s !important; } .page-in > *:nth-child(4) { animation-delay: .15s !important; }
.page-in > *:nth-child(5) { animation-delay: .2s !important; } .page-in > *:nth-child(n+6) { animation-delay: .24s !important; }
/* Karten in Rastern einzeln nacheinander */
.set-grid > *, .shop-grid > *, .ach-grid > *, .st-tiles > *, .quick-links > *, .stat-tiles > *, .tiles > *, .classes > *, .mini-friends > *, .ex-grid > *, .feed > * { animation: enter .55s var(--e-out) both; }
:is(.set-grid, .shop-grid, .ach-grid, .st-tiles, .quick-links, .stat-tiles, .tiles, .classes, .mini-friends, .ex-grid, .feed) > :nth-child(1) { animation-delay: .06s; }
:is(.set-grid, .shop-grid, .ach-grid, .st-tiles, .quick-links, .stat-tiles, .tiles, .classes, .mini-friends, .ex-grid, .feed) > :nth-child(2) { animation-delay: .1s; }
:is(.set-grid, .shop-grid, .ach-grid, .st-tiles, .quick-links, .stat-tiles, .tiles, .classes, .mini-friends, .ex-grid, .feed) > :nth-child(3) { animation-delay: .14s; }
:is(.set-grid, .shop-grid, .ach-grid, .st-tiles, .quick-links, .stat-tiles, .tiles, .classes, .mini-friends, .ex-grid, .feed) > :nth-child(4) { animation-delay: .18s; }
:is(.set-grid, .shop-grid, .ach-grid, .st-tiles, .quick-links, .stat-tiles, .tiles, .classes, .mini-friends, .ex-grid, .feed) > :nth-child(5) { animation-delay: .22s; }
:is(.set-grid, .shop-grid, .ach-grid, .st-tiles, .quick-links, .stat-tiles, .tiles, .classes, .mini-friends, .ex-grid, .feed) > :nth-child(6) { animation-delay: .26s; }
:is(.set-grid, .shop-grid, .ach-grid, .st-tiles, .quick-links, .stat-tiles, .tiles, .classes, .mini-friends, .ex-grid, .feed) > :nth-child(n+7) { animation-delay: .3s; }
.dash-side > * { animation: enter .55s var(--e-out) both; } .dash-side > :nth-child(2) { animation-delay: .08s; } .dash-side > :nth-child(3) { animation-delay: .14s; } .dash-side > :nth-child(n+4) { animation-delay: .2s; }

/* ---------- Knöpfe: federndes Drücken + Klick-Welle ---------- */
.btn, .opt, .chip, .ex, .inv-item, .crate-btn, .icon-btn { transition: transform .35s var(--e-spring), box-shadow .2s, background-color .2s, border-color .2s, color .2s, filter .2s !important; }
.btn:active:not(:disabled), .opt:active, .chip:active, .ex:active, .inv-item:active, .crate-btn:active, .icon-btn:active { transform: scale(.95) !important; transition-duration: .08s !important; }
@media (hover: hover) { .btn:not(:disabled):not(.ghost):hover { transform: translateY(-1px); } .icon-btn:hover { transform: scale(1.08); } }
.has-ripple { overflow: hidden; isolation: isolate; }
.ripple { position: absolute; border-radius: 50%; background: currentColor; opacity: .18; transform: scale(0); pointer-events: none; animation: ripple .6s var(--e-out) forwards; z-index: -1; }
.btn.primary .ripple { background: #fff; opacity: .35; }
@keyframes ripple { to { transform: scale(1); opacity: 0; } }

/* ---------- Abfrage ---------- */
/* Antwort-Optionen: Auswahl federt */
.opt.on { animation: optPick .35s var(--e-spring); }
@keyframes optPick { 40% { transform: scale(1.03); } }
.opt.ok { animation: optOk .55s var(--e-spring); }
@keyframes optOk { 0% { transform: scale(.97); } 45% { transform: scale(1.04); box-shadow: 0 0 0 6px color-mix(in srgb, var(--ok) 25%, transparent); } 100% { transform: none; } }
.opt.bad { animation: shakeX .45s var(--e-out); }
.input.ok { animation: optOk .55s var(--e-spring); }
@keyframes shakeX { 15%, 55% { transform: translateX(-8px); } 35%, 75% { transform: translateX(8px); } 90% { transform: translateX(-2px); } }
/* Rückmeldung: Blatt federt hoch, Häkchen ploppt mit Ring */
.fb-sheet { animation: sheetSpring .5s var(--e-out) both !important; }
@keyframes sheetSpring { from { transform: translateY(40px); opacity: 0; } }
@media (max-width: 899px) { .fb-dock .fb-sheet { animation: sheetUp2 .45s var(--e-out) both !important; } @keyframes sheetUp2 { from { transform: translateY(100%); } } }
.fb-sheet .fb-badge { position: relative; animation: badgePop .55s var(--e-spring) .08s both !important; }
.fb-sheet.ok .fb-badge::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 3px solid var(--ok); animation: ringOut .7s var(--e-out) .15s both; }
@keyframes badgePop { from { transform: scale(0) rotate(-45deg); } }
@keyframes ringOut { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }
.fb-sheet .fb-next { animation: enter .4s var(--e-out) .15s both; }
.panel.wrong-flash { animation: wrongFlash .5s ease-out; }
@keyframes wrongFlash { 0% { box-shadow: inset 0 0 0 0 transparent; } 30% { box-shadow: inset 0 0 60px -10px color-mix(in srgb, var(--bad) 35%, transparent); } 100% { box-shadow: inset 0 0 0 0 transparent; } }
/* Fortschrittsbalken: federt, leuchtet beim Zuwachs */
.q-progress i { transition: width .7s var(--e-spring) !important; }
.q-progress.gain i { animation: barGlow .8s ease-out; }
@keyframes barGlow { 0% { filter: brightness(1); } 30% { filter: brightness(1.25) saturate(1.2); box-shadow: 0 0 14px color-mix(in srgb, var(--ok) 70%, transparent); } 100% { filter: none; } }
/* Streak-Flamme flackert, Zähler ploppt */
.q-streak.on .i { animation: flicker 1.4s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes flicker { 0%, 100% { transform: scale(1) rotate(0); } 25% { transform: scale(1.08, .95) rotate(-3deg); } 50% { transform: scale(.96, 1.06) rotate(2deg); } 75% { transform: scale(1.05, .97) rotate(-1deg); } }
.q-streak.pop b { display: inline-block; animation: numPop .5s var(--e-spring); }
@keyframes numPop { 0% { transform: translateY(8px) scale(.6); opacity: 0; } 100% { transform: none; opacity: 1; } }
/* Frage wechselt: Sprechblase & Maskottchen kommen neu herein */
.q-hero .bubble { animation: bubbleIn .45s var(--e-spring) both; transform-origin: 0 100%; }
@keyframes bubbleIn { from { transform: scale(.85) translateY(6px); opacity: 0; } }
.q-hero .mascot.react { animation: hop .55s var(--e-spring); }
@keyframes hop { 30% { transform: translateY(-14px) scale(1.04, .96); } 55% { transform: translateY(0) scale(.96, 1.04); } 75% { transform: translateY(-3px); } }

/* ---------- Funken ---------- */
.lh-sparks { position: fixed; z-index: 200; width: 0; height: 0; pointer-events: none; }
.lh-sparks i { position: absolute; left: 0; top: 0; width: var(--s); height: var(--s); margin: calc(var(--s) / -2); border-radius: 50%; background: var(--c); animation: spark .8s var(--e-out) forwards; }
.lh-sparks i.star { border-radius: 2px; transform: rotate(var(--r)); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); width: calc(var(--s) * 2); height: calc(var(--s) * 2); }
@keyframes spark { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(var(--x), var(--y)) scale(.2) rotate(var(--r)); opacity: 0; } }

/* ---------- Serien-Bildschirm ---------- */
.inter .mascot { animation: interJump .9s var(--e-spring) both; }
@keyframes interJump { 0% { transform: translateY(60px) scale(.6); opacity: 0; } 55% { transform: translateY(-16px) scale(1.06); opacity: 1; } 80% { transform: translateY(4px) scale(.98); } 100% { transform: none; } }
.inter-flame { animation: flameIn .7s var(--e-spring) .25s both !important; }
.inter-flame .i { animation: flicker 1.2s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes flameIn { from { transform: scale(0) rotate(-20deg); opacity: 0; } }
.inter h1 { animation: enter .5s var(--e-out) .4s both; } .inter p { animation: enter .5s var(--e-out) .5s both; } .inter .btn { animation: enter .5s var(--e-out) .65s both; }
.inter-glow { animation: spin 10s linear infinite, glowIn .8s ease-out both !important; }
@keyframes glowIn { from { opacity: 0; transform: scale(.4); } }

/* ---------- Ergebnis ---------- */
.result .mascot.big { animation: interJump .9s var(--e-spring) both; }
.result h1 { animation: enter .5s var(--e-out) .2s both; }
.result .tiles > * { animation: tileIn .55s var(--e-spring) both; }
.result .tiles > :nth-child(1) { animation-delay: .3s; } .result .tiles > :nth-child(2) { animation-delay: .38s; } .result .tiles > :nth-child(3) { animation-delay: .46s; } .result .tiles > :nth-child(4) { animation-delay: .54s; }
@keyframes tileIn { from { transform: translateY(18px) scale(.9); opacity: 0; } }
.result .gains > * { animation: tileIn .5s var(--e-spring) .7s both; }

/* ---------- Kopfzeile: Pudding & Streak hüpfen bei Änderung ---------- */
.gchip.bump { animation: chipBump .6s var(--e-spring); }
.gchip.bump-down { animation: chipDown .4s ease; }
@keyframes chipBump { 30% { transform: scale(1.18) rotate(-4deg); } 60% { transform: scale(.95) rotate(2deg); } }
@keyframes chipDown { 30% { transform: translateY(2px) scale(.95); } }
.gchip.bump svg { animation: pudWobble .7s var(--e-spring); transform-origin: 50% 90%; }
@keyframes pudWobble { 20% { transform: scale(1.15, .85); } 45% { transform: scale(.9, 1.12); } 70% { transform: scale(1.04, .97); } }

/* ---------- Startseite ---------- */
.hero-card .mascot { animation: interJump .8s var(--e-spring) .1s both; }
.hero-card .bubble { animation: bubbleIn .5s var(--e-spring) .35s both; }
.week .wd i { animation: dotPop .4s var(--e-spring) both; }
.week .wd:nth-child(1) i { animation-delay: .3s; } .week .wd:nth-child(2) i { animation-delay: .35s; } .week .wd:nth-child(3) i { animation-delay: .4s; } .week .wd:nth-child(4) i { animation-delay: .45s; }
.week .wd:nth-child(5) i { animation-delay: .5s; } .week .wd:nth-child(6) i { animation-delay: .55s; } .week .wd:nth-child(7) i { animation-delay: .6s; }
@keyframes dotPop { from { transform: scale(0); } }
.m-bar i, .bar i, .ach-bar i, .ss-p i, .ph-bar i, .lvl-bar i { animation: fillIn 1s var(--e-out) .3s both; transform-origin: left; }
@keyframes fillIn { from { transform: scaleX(0); } }
.mini-ring { animation: ringIn .8s var(--e-spring) .2s both; }
@keyframes ringIn { from { transform: scale(.5) rotate(-90deg); opacity: 0; } }
.mission.done .m-claimed, .btn.pulse { animation: pulseSoft 1.6s ease-in-out infinite; }
@keyframes pulseSoft { 50% { transform: scale(1.06); box-shadow: 0 0 0 6px color-mix(in srgb, var(--pen) 15%, transparent); } }
.crate-btn svg { animation: crateIdle 2.6s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes crateIdle { 0%, 75%, 100% { transform: none; } 80% { transform: rotate(-6deg) scale(1.05); } 85% { transform: rotate(6deg) scale(1.05); } 90% { transform: rotate(-3deg); } }

/* ---------- Karten & Hover ---------- */
@media (hover: hover) {
  .set-card, .shop-item, .ach, .ql, .fcard, .duel.card, .lrow { transition: transform .35s var(--e-spring), box-shadow .3s var(--e-out) !important; }
  .shop-item:hover .si-prev > * { animation: itemHover .6s var(--e-spring); }
  @keyframes itemHover { 40% { transform: translateY(-6px) rotate(-3deg); } }
}

/* ---------- Overlays: Modals, Toasts, Pop-ups ---------- */
.modal { animation: fadeIn .25s ease both !important; }
.modal-card { animation: modalIn .45s var(--e-spring) both !important; }
@keyframes modalIn { from { transform: translateY(24px) scale(.92); opacity: 0; } }
.modal.out { animation: fadeOut .22s ease forwards !important; } .modal.out .modal-card { animation: modalOut .22s ease forwards !important; }
@keyframes modalOut { to { transform: translateY(12px) scale(.96); opacity: 0; } }
.toast { animation: toastIn2 .45s var(--e-spring) both !important; }
@keyframes toastIn2 { from { opacity: 0; transform: translate(-50%, 24px) scale(.9); } }
.ach-toast { animation: achIn2 .6s var(--e-spring) both; }
@keyframes achIn2 { from { opacity: 0; transform: translate(-50%, -30px) scale(.85); } }
.ach-toast .bdg { animation: badgePop .7s var(--e-spring) .15s both; }

/* ---------- Level-Aufstieg ---------- */
.lvl-up { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 20px; background: rgb(10 20 40 / .45); animation: fadeIn .25s both; }
.lvl-up.out { animation: fadeOut .3s forwards; }
.lu-card { position: relative; overflow: hidden; display: grid; justify-items: center; gap: 8px; text-align: center; width: min(380px, 100%); padding: 34px 24px 24px; border-radius: 28px; background: var(--surface); box-shadow: 0 30px 80px -20px #0008; animation: modalIn .55s var(--e-spring) both; }
.lu-card h2 { margin: 6px 0 0; } .lu-card .btn { width: 100%; margin-top: 8px; }
.lu-rays { position: absolute; left: 50%; top: 90px; width: 600px; height: 600px; margin: -300px 0 0 -300px; background: repeating-conic-gradient(color-mix(in srgb, #ffc800 30%, transparent) 0 10deg, transparent 10deg 24deg); -webkit-mask: radial-gradient(circle, #000 10%, transparent 50%); mask: radial-gradient(circle, #000 10%, transparent 50%); animation: spin 14s linear infinite; }
.lu-badge { position: relative; width: 116px; height: 116px; border-radius: 34px; display: grid; place-content: center; color: #fff; background: linear-gradient(160deg, #a77bff, #6a3fe0); box-shadow: 0 6px 0 #4b2aa8, 0 16px 36px -10px #6a3fe0; animation: lvlBadge 1s var(--e-spring) .15s both; }
.lu-badge small { font: 800 13px var(--f-body); text-transform: uppercase; letter-spacing: .1em; opacity: .85; } .lu-badge b { font: 800 52px/1 var(--f-display); }
@keyframes lvlBadge { 0% { transform: scale(0) rotate(-30deg); } 60% { transform: scale(1.12) rotate(6deg); } 100% { transform: none; } }

/* ---------- Maskottchen lebt: atmen & blinzeln (nur wenn ruhig) ---------- */
.mascot:not(.react) .body-g { animation: breathe2 3.6s ease-in-out infinite; transform-origin: 50% 90%; transform-box: fill-box; }
@keyframes breathe2 { 50% { transform: scale(1.015, .985) translateY(1px); } }
.av-in .mascot .body-g { animation: none; }

/* ---------- Liga / Pass / Erfolge ---------- */
.lrow { animation: enter .45s var(--e-out) var(--d, 0s) both !important; }
.lrow.me { animation: enter .45s var(--e-out) var(--d, 0s) both, meGlow 2.4s ease-in-out 1s infinite !important; }
@keyframes meGlow { 50% { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--pen) 55%, transparent), 0 0 0 4px color-mix(in srgb, var(--pen) 10%, transparent); } }
.pt.reached:not(.claimed) .pt-card { animation: claimGlow 1.8s ease-in-out infinite; }
@keyframes claimGlow { 50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--duo-purple, #ce82ff) 45%, transparent), var(--soft); } }
.bar-c i { transition: height .6s var(--e-spring); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
}
.lu-rays { pointer-events: none; z-index: 0; } .lu-card > :not(.lu-rays) { position: relative; z-index: 1; }