/* ============================ Keyframes ============================ */
@keyframes shimmer { to { background-position: -400% 0; } }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toast-out {
  to { opacity: 0; transform: translateY(10px) scale(.96); }
}

@keyframes glass-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.35) rotate(-6deg); }
  100% { transform: scale(1); }
}

@keyframes fav-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.4); }
  100% { transform: scale(1); }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pop-in {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1); }
}

/* ============================ View Transitions ============================ */
.view-enter { animation: fade-up var(--dur) var(--ease-out) both; }

/* Reveal-on-scroll (IntersectionObserver fügt .in hinzu) */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }

/* Gestaffelte Karten */
.stagger > * { animation: fade-up var(--dur) var(--ease-out) both; }
.stagger > *:nth-child(1) { animation-delay: .02s; }
.stagger > *:nth-child(2) { animation-delay: .06s; }
.stagger > *:nth-child(3) { animation-delay: .10s; }
.stagger > *:nth-child(4) { animation-delay: .14s; }
.stagger > *:nth-child(5) { animation-delay: .18s; }
.stagger > *:nth-child(6) { animation-delay: .22s; }
.stagger > *:nth-child(7) { animation-delay: .26s; }
.stagger > *:nth-child(8) { animation-delay: .30s; }

.fav-anim { animation: fav-pop var(--dur-slow) var(--ease); }
.pop-in { animation: pop-in var(--dur) var(--ease-out) both; }

/* Button-Ladespinner */
.spin { width: 18px; height: 18px; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: rot .7s linear infinite; }
@keyframes rot { to { transform: rotate(360deg); } }

/* sanftes Routing-Slide für Detail-Ansicht */
.slide-in { animation: slide-in var(--dur) var(--ease-out) both; }
@keyframes slide-in {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}