/*
  Sloppy Standard-Animationsbibliothek.

  Bereitgestellt für den Dashboard "Design" -> Tab "Animationen"
  (siehe js/core/animation-library.js für die Metadaten je Animation,
  js/core/control-animations.js für die Laufzeit-Anwendung auf echte
  DOM-Events). Kategorien und Effekt-Namen sind an die beiden bekanntesten,
  umfangreichsten quelloffenen CSS-Animationsbibliotheken angelehnt -
  Animate.css (Attention Seekers / Entrances / Exits als Kategorien) und
  Animista (Namenskonvention einzelner Effekte) - JEDE Keyframe-Regel hier
  wurde jedoch für dieses Projekt eigenständig neu geschrieben, kein Code
  wurde aus diesen Bibliotheken übernommen.

  Wird von JEDER öffentlichen Seite geladen (auch vom Dashboard selbst, für
  die Live-Vorschau im Design-Panel) - reine @keyframes-Definitionen ohne
  Selektoren, daher völlig wirkungslos, bis eine Animation tatsächlich per
  `animation: sloppy-anim-<name> ...` referenziert wird (siehe
  control-animations.js). Kein Konflikt mit dem Farb-/Form-Theme-System.
*/

/* --- Attention Seekers (kurze Aufmerksamkeits-Effekte, z.B. auf Klick/Hover) --- */

@keyframes sloppy-anim-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

@keyframes sloppy-anim-shakeX {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-8px); }
  20%, 40%, 60%, 80% { transform: translateX(8px); }
}

@keyframes sloppy-anim-shakeY {
  0%, 100% { transform: translateY(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateY(-6px); }
  20%, 40%, 60%, 80% { transform: translateY(6px); }
}

@keyframes sloppy-anim-headShake {
  0% { transform: translateX(0); }
  6.5% { transform: translateX(-6px) rotateY(-9deg); }
  18.5% { transform: translateX(5px) rotateY(7deg); }
  31.5% { transform: translateX(-3px) rotateY(-5deg); }
  43.5% { transform: translateX(2px) rotateY(3deg); }
  50%, 100% { transform: translateX(0); }
}

@keyframes sloppy-anim-bounce {
  0%, 20%, 53%, 80%, 100% { transform: translateY(0); }
  40%, 43% { transform: translateY(-30%); }
  70% { transform: translateY(-15%); }
  90% { transform: translateY(-4%); }
}

@keyframes sloppy-anim-flash {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0; }
}

@keyframes sloppy-anim-rubberBand {
  0%, 100% { transform: scale3d(1, 1, 1); }
  30% { transform: scale3d(1.25, 0.75, 1); }
  40% { transform: scale3d(0.75, 1.25, 1); }
  50% { transform: scale3d(1.15, 0.85, 1); }
  65% { transform: scale3d(0.95, 1.05, 1); }
  75% { transform: scale3d(1.05, 0.95, 1); }
}

@keyframes sloppy-anim-swing {
  20% { transform: rotate(12deg); }
  40% { transform: rotate(-9deg); }
  60% { transform: rotate(6deg); }
  80% { transform: rotate(-3deg); }
  100% { transform: rotate(0deg); }
}

@keyframes sloppy-anim-tada {
  0%, 100% { transform: scale3d(1, 1, 1) rotate(0); }
  10%, 20% { transform: scale3d(0.9, 0.9, 1) rotate(-3deg); }
  30%, 50%, 70%, 90% { transform: scale3d(1.1, 1.1, 1) rotate(3deg); }
  40%, 60%, 80% { transform: scale3d(1.1, 1.1, 1) rotate(-3deg); }
}

@keyframes sloppy-anim-wobble {
  0%, 100% { transform: translateX(0%) rotate(0deg); }
  15% { transform: translateX(-25%) rotate(-5deg); }
  30% { transform: translateX(20%) rotate(3deg); }
  45% { transform: translateX(-15%) rotate(-3deg); }
  60% { transform: translateX(10%) rotate(2deg); }
  75% { transform: translateX(-5%) rotate(-1deg); }
}

@keyframes sloppy-anim-jello {
  0%, 100% { transform: skewX(0deg) skewY(0deg); }
  22% { transform: skewX(-12.5deg) skewY(-12.5deg); }
  33% { transform: skewX(6.25deg) skewY(6.25deg); }
  44% { transform: skewX(-3.125deg) skewY(-3.125deg); }
  55% { transform: skewX(1.5625deg) skewY(1.5625deg); }
  66% { transform: skewX(-0.78125deg) skewY(-0.78125deg); }
  77% { transform: skewX(0.390625deg) skewY(0.390625deg); }
}

@keyframes sloppy-anim-heartBeat {
  0%, 28%, 70%, 100% { transform: scale(1); }
  14%, 42% { transform: scale(1.3); }
}

/* --- Entrances (Erscheinen) --- */

@keyframes sloppy-anim-fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes sloppy-anim-zoomIn {
  0% { opacity: 0; transform: scale3d(0.3, 0.3, 1); }
  50% { opacity: 1; }
  100% { opacity: 1; transform: scale3d(1, 1, 1); }
}

@keyframes sloppy-anim-bounceIn {
  0% { opacity: 0; transform: scale3d(0.3, 0.3, 1); }
  20% { transform: scale3d(1.1, 1.1, 1); }
  40% { transform: scale3d(0.9, 0.9, 1); }
  60% { opacity: 1; transform: scale3d(1.03, 1.03, 1); }
  80% { transform: scale3d(0.97, 0.97, 1); }
  100% { opacity: 1; transform: scale3d(1, 1, 1); }
}

@keyframes sloppy-anim-slideInUp {
  0% { opacity: 0; transform: translate3d(0, 40px, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* --- Exits (Verschwinden) --- */

@keyframes sloppy-anim-fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes sloppy-anim-zoomOut {
  0% { opacity: 1; transform: scale3d(1, 1, 1); }
  50% { opacity: 0; transform: scale3d(0.3, 0.3, 1); }
  100% { opacity: 0; }
}