/* ============================================================
   Bewegung. Physik als Leitlinie:
   - Dinge, die ins Bild kommen, bremsen ab (ease-out).
   - Dinge, die gehen, beschleunigen (ease-in) und sind kürzer.
   - Dinge, die sich nur verschieben, starten und stoppen weich (ease-in-out).
   - Antippen = kurzes Eindrücken (Scale), wie eine Taste mit Federweg.
   Alles unter 0,35 s. Kein linear.
   ============================================================ */
:root {
  --ease-io: cubic-bezier(.45, 0, .2, 1);
  --ease-out: cubic-bezier(.16, .84, .3, 1);
  --ease-in: cubic-bezier(.4, 0, .85, .3);
  --t-press: 110ms;
  --t-state: 200ms;
  --t-move: 290ms;
  --t-enter: 280ms;
  --t-exit: 190ms;
}

/* ---------- Antippen: dezentes Eindrücken ---------- */
button, a.btn, .row, .sl-card, .icon-btn, .round-btn, .btn {
  transition: transform var(--t-press) var(--ease-io), background-color var(--t-state) var(--ease-io), color var(--t-state) var(--ease-io),
    opacity var(--t-state) var(--ease-io), border-color var(--t-state) var(--ease-io), box-shadow var(--t-state) var(--ease-io);
}
button:active, a.btn:active, .btn:active, .icon-btn:active, .round-btn:active { transform: scale(.95); }
.row:active, .sl-card:active { transform: scale(.985); }
.tabbar button:active, .seg button:active { transform: scale(.94); }
.qv-name:active { transform: scale(.97); }
.grip:active, .focus-handle:active { transform: none; }
.focus-handle:active { transform: translateX(-50%) scale(.94); }
button[disabled]:active, .btn[disabled]:active { transform: none; }

/* ---------- Seiten und Listen kommen herein ---------- */
@keyframes fadeIn { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } }
@keyframes popIn { from { opacity: 0; transform: scale(.9); } }
@keyframes slideNext { from { opacity: 0; transform: translateX(28px); } }
@keyframes slidePrev { from { opacity: 0; transform: translateX(-28px); } }

.page { animation: fadeIn var(--t-enter) var(--ease-out) backwards; }
/* Alles auf einer Seite (Kopfzeile, Untertitel, Meta-Zeilen, Listen) fährt gestaffelt ein, nichts poppt vorher auf */
.page:not(.page-song) > * { animation: rise var(--t-enter) var(--ease-out) backwards; }
.page:not(.page-song) > :nth-child(2) { animation-delay: 40ms; }
.page:not(.page-song) > :nth-child(3) { animation-delay: 80ms; }
.page:not(.page-song) > :nth-child(4) { animation-delay: 120ms; }
.page:not(.page-song) > :nth-child(5) { animation-delay: 160ms; }
.page:not(.page-song) > :nth-child(6) { animation-delay: 190ms; }
.page:not(.page-song) > :nth-child(n+7) { animation-delay: 210ms; }
.list > li, .sl-card, .qv-row, .empty, .card.ed-sec { animation: rise var(--t-enter) var(--ease-out) backwards; }
.list > li:nth-child(2), .qv-row:nth-child(2), .sl-card:nth-of-type(2) { animation-delay: 22ms; }
.list > li:nth-child(3), .qv-row:nth-child(3), .sl-card:nth-of-type(3) { animation-delay: 44ms; }
.list > li:nth-child(4), .qv-row:nth-child(4) { animation-delay: 66ms; }
.list > li:nth-child(5), .qv-row:nth-child(5) { animation-delay: 88ms; }
.list > li:nth-child(6), .qv-row:nth-child(6) { animation-delay: 110ms; }
.list > li:nth-child(7), .qv-row:nth-child(7) { animation-delay: 132ms; }
.list > li:nth-child(n+8), .qv-row:nth-child(n+8) { animation-delay: 150ms; }
.pdf-slide canvas, .video-frame { animation: fadeIn 320ms var(--ease-out) backwards; }

/* Songwechsel in der Setliste: Inhalt schiebt in Blickrichtung nach */
.page.dir-next .qv, .page.dir-next .pdf-pages, .page.dir-next .song-pad { animation: slideNext var(--t-enter) var(--ease-out) backwards; }
.page.dir-prev .qv, .page.dir-prev .pdf-pages, .page.dir-prev .song-pad { animation: slidePrev var(--t-enter) var(--ease-out) backwards; }
.page.dir-next .qv-row, .page.dir-prev .qv-row { animation: none; }

/* Ton-Badges blenden bei Tuning-Wechsel weich ein */
.pos { animation: popIn 260ms var(--ease-out) backwards; }

/* ---------- Leisten fahren ein und aus ---------- */
.dock, .song-bar { transition: transform var(--t-move) var(--ease-io), opacity var(--t-move) var(--ease-io); }
body.focus .dock, body.focus .song-bar { opacity: 0; }
.screen.song { transition: padding var(--t-move) var(--ease-io); }
@keyframes dockIn { from { opacity: 0; transform: translateY(90px) scale(.96); } }
@keyframes dockOut { to { opacity: 0; transform: translateY(90px) scale(.96); } }
.dock > * { animation: dockIn var(--t-enter) var(--ease-out) backwards; }
.dock.out > * { animation: dockOut var(--t-exit) var(--ease-in) forwards; }
.dock > *:nth-child(2) { animation-delay: 30ms; }
@keyframes handleIn { from { opacity: 0; transform: translateX(-50%) translateY(60px); } }
body.focus .focus-handle { animation: handleIn var(--t-enter) var(--ease-out) 120ms backwards; }

/* ---------- Suche ---------- */
/* Suchergebnisse fliegen von unten ein, hinter der Leiste hervor */
@keyframes resultsIn { from { opacity: 0; transform: translateY(100%); } }
@keyframes resultsOut { to { opacity: 0; transform: translateY(100%); } }
.results { animation: resultsIn 340ms var(--ease-out) backwards; }
.results.out { animation: resultsOut var(--t-exit) var(--ease-in) forwards; }

/* ---------- Sheets ---------- */
@keyframes sheetUp { from { transform: translateY(100%); } }
@keyframes sheetDown { to { transform: translateY(100%); } }
@keyframes backIn { from { opacity: 0; } }
@keyframes backOut { to { opacity: 0; } }
.sheet-back { animation: backIn var(--t-enter) var(--ease-out) backwards; }
.sheet { animation: sheetUp 320ms var(--ease-out) backwards; }
.sheet-back.out { animation: backOut var(--t-exit) var(--ease-in) forwards; }
.sheet-back.out .sheet { animation: sheetDown var(--t-exit) var(--ease-in) forwards; }

/* ---------- Toast ---------- */
@keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(80px) scale(.96); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(-50%) translateY(80px) scale(.96); } }
.toast { animation: toastIn var(--t-enter) var(--ease-out) backwards; }
.toast.out { animation: toastOut var(--t-exit) var(--ease-in) forwards; }

/* ---------- Gleitender Indikator (Segmente, Tab-Leiste) ---------- */
.seg, .tabbar { position: relative; }
.seg > button, .tabbar > button { position: relative; z-index: 1; }
.ind { position: absolute; left: 0; top: 0; z-index: 0; border-radius: var(--r-pill); background: var(--accent);  pointer-events: none; opacity: 0; }
.ind.ready { transition: transform var(--t-move) var(--ease-io), width var(--t-move) var(--ease-io), height var(--t-move) var(--ease-io), opacity var(--t-state) var(--ease-io); }
.seg button[aria-selected="true"], .tabbar button[aria-current="page"] { background: transparent; box-shadow: none; }
.seg button[aria-selected="true"], .tabbar button[aria-current="page"] { color: var(--on-accent); }

/* ---------- Schalter, Hinweis-Punkt, Theme-Icon ---------- */
@keyframes swapIn { from { opacity: 0; transform: rotate(-70deg) scale(.5); } }
.swap .icon { animation: swapIn 320ms var(--ease-out) backwards; }
.chev { transition: transform var(--t-state) var(--ease-io); }
.row:active .chev { transform: translateX(3px); }

/* ---------- Drag & Drop ---------- */
.list > li.shifting { transition: transform 170ms var(--ease-io); animation: none; }
.list > li.dragging { animation: none; transition: none; }
.list > li.dragging.settling { transition: transform 150ms var(--ease-out); }

/* ---------- Theme-Wechsel blendet Farben weich über ---------- */
html.theming *, html.theming *::before, html.theming *::after {
  transition: background-color 320ms var(--ease-io), color 320ms var(--ease-io), border-color 320ms var(--ease-io), fill 320ms var(--ease-io), box-shadow 320ms var(--ease-io) !important;
}

/* Wer Bewegung reduziert haben will, bekommt sie reduziert */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
}

/* Listen, die per Drag & Drop sortiert wurden, liegen still: kein erneutes Einfahren, wenn Einträge im DOM verschoben werden */
.list.settled > li { animation: none; }

@keyframes dialogIn { from { opacity: 0; transform: scale(.94) translateY(8px); } }
@keyframes dialogOut { to { opacity: 0; transform: scale(.96) translateY(6px); } }
.dialog-back { animation: backIn var(--t-enter) var(--ease-out) backwards; }
.dialog { animation: dialogIn var(--t-enter) var(--ease-out) backwards; }
.dialog-back.out { animation: backOut var(--t-exit) var(--ease-in) forwards; }
.dialog-back.out .dialog { animation: dialogOut var(--t-exit) var(--ease-in) forwards; }

/* Der Schalter streckt seinen Knopf, er wird nicht eingedrückt */
.switch:active { transform: none; }
/* Theme-Button: bleibt still, wenn er schon da war; fährt nur ein, wenn man aus der Song-Ansicht kommt */
.page-head { animation: none !important; }
.page:not(.page-song) > .page-head .ph-left, .page:not(.page-song) > .page-head .ph-right > :not(.theme-btn) { animation: rise var(--t-enter) var(--ease-out) backwards; }
.page-head .theme-btn.enter { animation: rise var(--t-enter) var(--ease-out) backwards; }