/* ============================================================
   FlowKater — Animationen & Übergänge
   ============================================================ */

/* ── Slide-In von rechts (Detail-Panel Desktop/Tablet) ── */
@keyframes slide-in-right {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

/* ── Slide-In von unten (Bottom-Sheet Mobile) ── */
@keyframes slide-in-bottom {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* ── Fade-In ── */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Scale-In ── */
@keyframes scale-in {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Kater-Sprung (Aufgabe erledigt) ── */
@keyframes kater-jump {
  0%   { transform: translateY(0) rotate(0deg) scale(1); }
  20%  { transform: translateY(-20px) rotate(-6deg) scale(1.05); }
  45%  { transform: translateY(-28px) rotate(6deg) scale(1.08); }
  65%  { transform: translateY(-12px) rotate(-3deg) scale(1.03); }
  80%  { transform: translateY(-4px) rotate(1deg) scale(1.01); }
  100% { transform: translateY(0) rotate(0deg) scale(1); }
}

/* ── Kater-Nickerchen (Pulsieren) ── */
@keyframes kater-snooze {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-4px) scale(1.02); }
}

/* ── Checkmark-Erscheinen ── */
@keyframes check-pop {
  0%   { transform: scale(0) rotate(-45deg); opacity: 0; }
  60%  { transform: scale(1.3) rotate(5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* ── Confetti-ähnliche Partikel ── */
@keyframes particle-fly {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--dx, 40px), var(--dy, -60px)) rotate(360deg); opacity: 0; }
}

.particle {
  position: fixed;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 9999;
  animation: particle-fly 0.7s ease-out forwards;
}

/* ── Toast-Animationen ── */
@keyframes toast-in {
  from { opacity: 0; transform: translateX(24px) scale(0.95); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes toast-out {
  from { opacity: 1; transform: translateX(0) scale(1); }
  to   { opacity: 0; transform: translateX(24px) scale(0.95); }
}

.toast-leaving { animation: toast-out var(--transition-normal) ease forwards; }

/* ── Sidebar Drawer ── */
@keyframes drawer-in {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

/* ── Skeleton-Loading ── */
@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 0.7; }
}

.skeleton {
  background: var(--color-border);
  border-radius: var(--radius-sm);
  animation: skeleton-pulse 1.5s ease infinite;
}

/* ── Kater-Animationen in der App ── */
.kater-dozing {
  animation: kater-snooze 3s ease-in-out infinite;
}

/* Sprung-Trigger wird per JS hinzugefügt */
.kater-jumping {
  animation: kater-jump 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
}

/* ── Drag-and-Drop ── */
.drag-placeholder {
  background: rgba(27, 79, 204, 0.08);
  border: 2px dashed var(--color-primary);
  border-radius: var(--radius-md);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.drag-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 9000;
  opacity: 0.85;
  transform: rotate(3deg) scale(1.03);
  box-shadow: var(--shadow-xl);
  border-radius: var(--radius-md);
  transition: none;
}

/* ── FAB-Pulsieren (Neues Element) ── */
@keyframes fab-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(27, 79, 204, 0.4); }
  70%  { box-shadow: 0 0 0 14px rgba(27, 79, 204, 0); }
  100% { box-shadow: 0 0 0 0 rgba(27, 79, 204, 0); }
}

.fab-pulse { animation: fab-pulse 1.5s ease-out; }

/* ── Navigations-Wechsel ── */
.view-enter {
  animation: scale-in var(--transition-normal) ease forwards;
}

/* ── Live-Indikator Pulsieren ── */
@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

.live-indicator.connected {
  animation: live-pulse 2.5s ease-in-out infinite;
}

/* ── Swipe-Feedback ── */
.card-swipe-complete {
  animation: scale-in 0.15s ease, fade-in 0.15s ease reverse;
  animation-fill-mode: forwards;
}