.fade-in,
.slide-in-left,
.slide-in-right,
.slide-in-up,
.zoom-in,
.rotate-in,
.blur-in,
.scale-up {
  opacity: 0;
  will-change: opacity, transform, filter;
  transform: none;
  filter: none;
  transition:
    opacity 0.8s ease-out,
    transform 0.8s cubic-bezier(0.25, 1, 0.5, 1),
    filter 0.8s ease-out;
}

/* Sichtbar-Zustand */
.fade-in.visible,
.slide-in-left.visible,
.slide-in-right.visible,
.slide-in-up.visible,
.zoom-in.visible,
.rotate-in.visible,
.blur-in.visible,
.scale-up.visible {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Effekte mit smoothen Bewegungen */
.fade-in         { transform: translateY(1em) scale(0.98); }
.slide-in-left   { transform: translateX(-1em) scale(0.98); }
.slide-in-right  { transform: translateX(1em) scale(0.98); }
.slide-in-up     { transform: translateY(1.25em) scale(0.98); }
.zoom-in         { transform: scale(0.92); }
.rotate-in       { transform: rotate(-2deg) scale(0.96); }
.blur-in         { filter: blur(8px); }
.scale-up        { transform: scale(0.85); }

/* Unterstützt individuelles Delay per data-animate-delay */
[data-animate-child][data-animate-delay] {
  transition-delay: var(--delay, 0ms);
}

/* Optional: setze JS-basierte Delay-Variable */
[data-animate-child] {
  transition-delay: var(--delay, 0ms);
}

/* Barrierefreiheit: keine Bewegung bei System-Einstellung */
@media (prefers-reduced-motion: reduce) {
  .fade-in,
  .slide-in-left,
  .slide-in-right,
  .slide-in-up,
  .zoom-in,
  .rotate-in,
  .blur-in,
  .scale-up,
  .fade-in.visible,
  .slide-in-left.visible,
  .slide-in-right.visible,
  .slide-in-up.visible,
  .zoom-in.visible,
  .rotate-in.visible,
  .blur-in.visible,
  .scale-up.visible {
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }
}