/* =========================================================
   Scroll Animations – Fade & Slide
   Aktivierung über JS via .is-visible
   ========================================================= */

/* Basiszustand */
.animate {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    transition:
        opacity 0.4s ease-out,
        transform 0.4s ease-out;
    will-change: opacity, transform;
}

/* Richtungen */
.animate.fadein-left {
    transform: translate3d(-100px, 0, 0);
}

.animate.fadein-right {
    transform: translate3d(100px, 0, 0);
}

.animate.fadein-top {
    transform: translate3d(0, -100px, 0);
}

.animate.fadein-bottom {
    transform: translate3d(0, 100px, 0);
}

/* Sichtbarer Zustand */
.animate.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Optionale Delays */
.animate.delay-1 { transition-delay: 0.1s; }
.animate.delay-2 { transition-delay: 0.2s; }
.animate.delay-3 { transition-delay: 0.3s; }
.animate.delay-4 { transition-delay: 0.4s; }
.animate.delay-5 { transition-delay: 0.5s; }

/* =========================================================
   Accessibility: prefers-reduced-motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    .animate {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}