/* ============================================================
   Animationen — Keyframes, Utilities, Screen-Transitions
   Ausschließlich Vanilla CSS. Mobil-optimiert (transform/opacity).
   ============================================================ */

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

@keyframes fade-up {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes fade-down {
  from { opacity: 0; transform: translate3d(0, -12px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

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

@keyframes pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.14); }
  100% { transform: scale(1); }
}

@keyframes tap-bounce {
  0%   { transform: scale(1); }
  50%  { transform: scale(0.94); }
  100% { transform: scale(1); }
}

@keyframes shimmer {
  0%   { background-position: -160% 0; }
  100% { background-position: 260% 0; }
}

@keyframes spin { to { transform: rotate(360deg); } }

@keyframes pulse-ring {
  0%   { transform: scale(0.8); opacity: 0.55; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { opacity: 0; }
}

@keyframes count-tick {
  0%   { transform: translateY(0.5em); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes slide-in-right {
  from { opacity: 0; transform: translate3d(24px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes slide-in-left {
  from { opacity: 0; transform: translate3d(-24px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes toast-in {
  from { opacity: 0; transform: translate3d(0, -18px, 0) scale(0.96); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes modal-in {
  from { opacity: 0; transform: translate3d(0, 30px, 0) scale(0.97); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }

/* Krone — hochwertige, auffällige Inszenierung */
@keyframes crown-float {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-5px) rotate(4deg); }
}
@keyframes crown-land {
  0%   { transform: translateY(-60px) scale(0.4) rotate(-30deg); opacity: 0; }
  55%  { transform: translateY(6px) scale(1.25) rotate(8deg); opacity: 1; }
  75%  { transform: translateY(-3px) scale(0.95) rotate(-4deg); }
  100% { transform: translateY(0) scale(1) rotate(0); opacity: 1; }
}
@keyframes crown-shine {
  0%   { transform: translateX(-120%) skewX(-18deg); }
  100% { transform: translateX(220%) skewX(-18deg); }
}

/* Konfetti-Partikel (für Sieg/Kronen-Übernahme) */
@keyframes confetti-fall {
  0%   { transform: translate3d(0, -12vh, 0) rotate(0); opacity: 1; }
  100% { transform: translate3d(var(--cx, 0), 108vh, 0) rotate(var(--cr, 540deg)); opacity: 1; }
}

/* Rang-Verschiebung: Element gleitet an neue Position (FLIP nutzt das nicht,
   aber als Fallback/Highlight) */
@keyframes rank-rise {
  0%   { background: var(--fando-100); }
  100% { background: transparent; }
}
@keyframes rank-drop {
  0%   { background: var(--danger-tint); }
  100% { background: transparent; }
}

@keyframes nudge-up {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

@keyframes ring-expand {
  from { transform: scale(0.3); opacity: 0.55; }
  to   { transform: scale(2.6); opacity: 0; }
}

@keyframes pop-in {
  0%   { opacity: 0; transform: translateY(14px) scale(0.9); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- Animations-Utilities ------------------------------------- */
.anim-fade      { animation: fade-in var(--dur-3) var(--ease-out) both; }
.anim-fade-up   { animation: fade-up var(--dur-4) var(--ease-out) both; }
.anim-fade-down { animation: fade-down var(--dur-3) var(--ease-out) both; }
.anim-scale-in  { animation: scale-in var(--dur-3) var(--ease-spring) both; }
.anim-pop       { animation: pop var(--dur-3) var(--ease-spring); }

/* Gestaffeltes Einblenden: Kind-Elemente bekommen Delay per Index */
.stagger > * { animation: fade-up var(--dur-4) var(--ease-out) both; }
.stagger > *:nth-child(1)  { animation-delay: 40ms; }
.stagger > *:nth-child(2)  { animation-delay: 80ms; }
.stagger > *:nth-child(3)  { animation-delay: 120ms; }
.stagger > *:nth-child(4)  { animation-delay: 160ms; }
.stagger > *:nth-child(5)  { animation-delay: 200ms; }
.stagger > *:nth-child(6)  { animation-delay: 240ms; }
.stagger > *:nth-child(7)  { animation-delay: 280ms; }
.stagger > *:nth-child(8)  { animation-delay: 320ms; }
.stagger > *:nth-child(9)  { animation-delay: 360ms; }
.stagger > *:nth-child(10) { animation-delay: 400ms; }
.stagger > *:nth-child(n+11) { animation-delay: 440ms; }

/* Feineres Stagger über CSS-Variable (vom JS gesetzt) */
.stagger-var > * {
  animation: fade-up var(--dur-4) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 55ms);
}

/* Lazy-List: nachgeladene Zeilen sanft einblenden */
.lazy-sentinel { height: 1px; width: 100%; }
.lazy-in { animation: fade-up var(--dur-3) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 32ms); }

/* --- Screen-Transitions (Router) ------------------------------ */
.view-enter { animation: view-enter var(--dur-4) var(--ease-out) both; }
.view-leave { animation: view-leave var(--dur-2) var(--ease-standard) both; }
.view-enter.back { animation-name: view-enter-back; }
.view-leave.back { animation-name: view-leave-back; }

@keyframes view-enter {
  from { opacity: 0; transform: translate3d(0, 12px, 0) scale(0.995); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes view-leave {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to   { opacity: 0; transform: translate3d(0, -8px, 0); }
}
@keyframes view-enter-back {
  from { opacity: 0; transform: translate3d(-16px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes view-leave-back {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to   { opacity: 0; transform: translate3d(16px, 0, 0); }
}

/* --- Skeleton-Loader ------------------------------------------ */
.skeleton {
  background: linear-gradient(100deg,
    var(--stone-100) 30%, var(--stone-200) 50%, var(--stone-100) 70%);
  background-size: 220% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--r-sm);
}

/* --- Press-Feedback (Mikrointeraktion) ------------------------ */
.pressable { transition: transform var(--dur-1) var(--ease-standard); touch-action: manipulation; }
.pressable:active { transform: scale(0.96); }

/* --- Reduced Motion ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}