/* ═══════════════════════════════════════════════════════════════════════════
   BRIGHTFITNESS — MICRO-INTERACTIONS & POLISH
   Lädt zuletzt. Dezente Lebendigkeit, kein Re-Design. + Light-Mode Logo-Fix.
   ═══════════════════════════════════════════════════════════════════════════ */

:root { --mi-ease: cubic-bezier(.22,1,.36,1); --mi-spring: cubic-bezier(.34,1.56,.64,1); }

/* ── BUGFIX: Logo folgt im Light-Mode der Theme-Farbe ──────────────────────── */
[data-theme="light"] .header-title {
  background: linear-gradient(120deg, var(--accent2), var(--accent)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ── 1. Seiten-Eintritt: sanftes Aufsteigen + Stagger der Kinder ────────────── */
.tab-content { animation: miPageIn .4s var(--mi-ease) both; }
@keyframes miPageIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

.tab-content > * { animation: miRise .5s var(--mi-ease) both !important; }
.tab-content > *:nth-child(1){ animation-delay:.03s !important; }
.tab-content > *:nth-child(2){ animation-delay:.07s !important; }
.tab-content > *:nth-child(3){ animation-delay:.11s !important; }
.tab-content > *:nth-child(4){ animation-delay:.15s !important; }
.tab-content > *:nth-child(5){ animation-delay:.19s !important; }
.tab-content > *:nth-child(6){ animation-delay:.22s !important; }
.tab-content > *:nth-child(n+7){ animation-delay:.25s !important; }
@keyframes miRise { from { opacity:0; transform:translateY(14px) scale(.99); } to { opacity:1; transform:none; } }

/* ── 2. Cards: taktiles Drücken + Hover-Lift ───────────────────────────────── */
.card, .db-card, .nut-card, .nut-yaz-overview, .bf-hub-card {
  transition: transform .24s var(--mi-ease), box-shadow .24s var(--mi-ease), border-color .2s !important;
}
.card:active, .db-card:active, .nut-card:active { transform: scale(.985); }
@media (hover:hover) {
  .card:hover, .db-card:hover, .nut-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh-md);
    border-color: var(--border2);
  }
}

/* ── 3. Buttons: tactiles Drücken + Hover-Shine ────────────────────────────── */
.btn { transition: transform .14s var(--mi-spring), box-shadow .22s, filter .22s, background .2s !important; position: relative; overflow: hidden; }
.btn:active { transform: scale(.93) !important; }
.btn-primary::after {
  content: ''; position: absolute; top: 0; left: -120%;
  width: 80%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-18deg);
  transition: left .55s var(--mi-ease);
  pointer-events: none;
}
@media (hover:hover) { .btn-primary:hover::after { left: 130%; } }

/* ── 4. Pills, Tabs, Chips, Icon-Buttons: federndes Antippen ───────────────── */
.db-card-btn, .nut-pill, .nut-rec-pill, .yaz-sub-tab, .yaz-hero-btn,
.plan-icon-btn, .yaz-icon-btn, .theme-toggle, .nut-btn-sm, .mehr-item, .nav-item {
  transition: transform .16s var(--mi-spring), background .2s, color .2s, border-color .2s !important;
}
.db-card-btn:active, .nut-pill:active, .nut-rec-pill:active, .yaz-sub-tab:active,
.yaz-hero-btn:active, .nut-btn-sm:active { transform: scale(.92); }
.plan-icon-btn:active, .yaz-icon-btn:active, .theme-toggle:active { transform: scale(.86) rotate(-4deg); }

/* ── 5. Navigations-Items (Sidebar + Mehr): sanftes Einrücken ──────────────── */
@media (hover:hover) {
  .nav-item:hover { transform: translateX(3px); }
}
.nav-item:active, .mehr-item:active { transform: scale(.96); }

/* ── 6. Listenzeilen (letzte Workouts, Rezepte etc.) ───────────────────────── */
.db-recent-row, .nut-rec-list > *, .exlib-row, .lib-thumb {
  transition: transform .16s var(--mi-ease), background .2s !important;
}
.db-recent-row:active, .nut-rec-list > *:active { transform: scale(.98); }

/* ── 7. Theme-Toggle dreht beim Wechsel ────────────────────────────────────── */
.theme-toggle svg { transition: transform .5s var(--mi-spring); }
.theme-toggle:hover svg { transform: rotate(35deg); }

/* ── 8. Progress-/XP-Bars: dezentes Schimmern beim Eintreten ───────────────── */
.db-hero-xp-fill, .nut-yaz-macro-fill { position: relative; }

/* ── Reduced motion: alles ruhig ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .tab-content, .tab-content > *, .btn-primary::after, .theme-toggle svg {
    animation: none !important; transition: none !important; left: auto !important; transform: none !important;
  }
}