/* ==========================================================================
   Animations-Bibliothek
   Nutzung:  <div data-animate="fade-up" data-animate-delay="200"
                  data-animate-duration="800" data-animate-repeat>
   Neue Animation: [data-animate="name"] { Startzustand } – Endzustand
   ist immer .is-animated (opacity 1, transform none) oder eigene Regel.
   ========================================================================== */

[data-animate] {
  opacity: 0;
  transition-property: opacity, transform, filter;
  transition-duration: var(--anim-duration, 700ms);
  transition-delay: var(--anim-delay, 0ms);
  transition-timing-function: cubic-bezier(.2, .7, .2, 1);
  will-change: opacity, transform;
}
[data-animate].is-animated { opacity: 1; transform: none; filter: none; }

[data-animate="fade"]       { }
[data-animate="fade-up"]    { transform: translate3d(0, 40px, 0); }
[data-animate="fade-down"]  { transform: translate3d(0, -40px, 0); }
[data-animate="fade-left"]  { transform: translate3d(40px, 0, 0); }
[data-animate="fade-right"] { transform: translate3d(-40px, 0, 0); }
[data-animate="zoom-in"]    { transform: scale(.92); }
[data-animate="zoom-out"]   { transform: scale(1.08); }
[data-animate="blur-in"]    { filter: blur(12px); }
[data-animate="flip-up"]    { transform: perspective(900px) rotateX(18deg) translate3d(0, 30px, 0); transform-origin: bottom; }

/* Ohne JS alles sichtbar */
.no-js [data-animate] { opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
  [data-animate] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
}