/* ============================= */
/*   ANIMATIONS.CSS              */
/*   Scroll-Reveal · Fade-In     */
/*   Keyframes                   */
/* ============================= */


/* ============================= */
/*        SCROLL-EFFEKTE         */
/* ============================= */

/* Elemente erscheinen beim Scrollen */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .45s ease, transform .45s ease;
  will-change: opacity, transform;
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: none;
}


/* ============================= */
/*         FADE-IN BEIM LADEN    */
/* ============================= */

.fade-in-on-load {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeSlideUp 1s ease-out forwards;
  animation-delay: .2s;
}


/* ============================= */
/*           KEYFRAMES           */
/* ============================= */

@keyframes fadeSlideUp {
  0%   { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}