/*
 * Scroll Animations
 *
 * Nutzung:
 * - .js-animate aktiviert die Scroll-Erkennung per JavaScript
 * - Fade-Varianten: .fade-in, .fade-in-left, .fade-in-right, .fade-in-up, .fade-in-down
 * - Bounce-Varianten: .bounce-in, .bounce-in-left, .bounce-in-right, .bounce-in-up, .bounce-in-down
 * - Verzögerung per Klasse: .delay-100 bis .delay-1000
 * - Geschwindigkeit per Klasse: .duration-300 bis .duration-1000
 * - Distanz per Klasse: .distance-10 bis .distance-100
 *
 * Hinweise:
 * - .fade-in blendet nur ein, ohne Bewegung.
 * - .fade-in-up bedeutet: Das Element kommt von unten nach oben.
 * - .fade-in-down bedeutet: Das Element kommt von oben nach unten.
 * - .bounce-in-up bedeutet: Das Element kommt von unten nach oben.
 * - .bounce-in-down bedeutet: Das Element kommt von oben nach unten.
 */


/*
 * Basis
 */
.js-animate {
    --animation-duration: 0.7s;
    --animation-delay: 0s;
    --animation-distance: 300px;

    opacity: 0;
    transition:
        opacity var(--animation-duration) ease var(--animation-delay),
        transform var(--animation-duration) ease var(--animation-delay);
    will-change: opacity, transform;
}

.js-animate:not(.is-visible) {
    opacity: 0;
}

.js-animate.is-visible {
    opacity: 1;
    transform: translate(0, 0);
}


/*
 * Fade In
 */
.fade-in {
    transform: none;
}

.fade-in-up {
    transform: translateY(var(--animation-distance));
}

.fade-in-down {
    transform: translateY(calc(var(--animation-distance) * -1));
}

.fade-in-left {
    transform: translateX(calc(var(--animation-distance) * -1));
}

.fade-in-right {
    transform: translateX(var(--animation-distance));
}


/*
 * Bounce In
 *
 * Kommt aus der jeweiligen Richtung und schwingt leicht aus.
 * Keine Skalierung.
 */
.bounce-in {
    transform: translateY(var(--animation-distance));
}

.bounce-in-up {
    transform: translateY(var(--animation-distance));
}

.bounce-in-down {
    transform: translateY(calc(var(--animation-distance) * -1));
}

.bounce-in-left {
    transform: translateX(calc(var(--animation-distance) * -1));
}

.bounce-in-right {
    transform: translateX(var(--animation-distance));
}

.bounce-in.is-visible,
.bounce-in-up.is-visible,
.bounce-in-down.is-visible,
.bounce-in-left.is-visible,
.bounce-in-right.is-visible {
    transition: none;
    animation-duration: var(--animation-duration);
    animation-delay: var(--animation-delay);
    animation-fill-mode: both;
    animation-timing-function: ease-out;
}

.bounce-in.is-visible,
.bounce-in-up.is-visible {
    animation-name: bounceInUp;
}

.bounce-in-down.is-visible {
    animation-name: bounceInDown;
}

.bounce-in-left.is-visible {
    animation-name: bounceInLeft;
}

.bounce-in-right.is-visible {
    animation-name: bounceInRight;
}


/*
 * Bounce Keyframes
 */
@keyframes bounceInUp {
    0% {
        opacity: 0;
        transform: translateY(var(--animation-distance));
    }

    60% {
        opacity: 1;
        transform: translateY(-8px);
    }

    80% {
        transform: translateY(4px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounceInDown {
    0% {
        opacity: 0;
        transform: translateY(calc(var(--animation-distance) * -1));
    }

    60% {
        opacity: 1;
        transform: translateY(8px);
    }

    80% {
        transform: translateY(-4px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounceInLeft {
    0% {
        opacity: 0;
        transform: translateX(calc(var(--animation-distance) * -1));
    }

    60% {
        opacity: 1;
        transform: translateX(8px);
    }

    80% {
        transform: translateX(-4px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes bounceInRight {
    0% {
        opacity: 0;
        transform: translateX(var(--animation-distance));
    }

    60% {
        opacity: 1;
        transform: translateX(-8px);
    }

    80% {
        transform: translateX(4px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}


/*
 * Verzögerungen
 */
.delay-100 { --animation-delay: 0.1s; }
.delay-200 { --animation-delay: 0.2s; }
.delay-300 { --animation-delay: 0.3s; }
.delay-400 { --animation-delay: 0.4s; }
.delay-500 { --animation-delay: 0.5s; }
.delay-600 { --animation-delay: 0.6s; }
.delay-700 { --animation-delay: 0.7s; }
.delay-800 { --animation-delay: 0.8s; }
.delay-900 { --animation-delay: 0.9s; }
.delay-1000 { --animation-delay: 1s; }


/*
 * Geschwindigkeiten
 */
.duration-300 { --animation-duration: 0.3s; }
.duration-500 { --animation-duration: 0.5s; }
.duration-700 { --animation-duration: 0.7s; }
.duration-1000 { --animation-duration: 1s; }


/*
 * Distanzen
 */
.distance-10 { --animation-distance: 10px; }
.distance-20 { --animation-distance: 20px; }
.distance-30 { --animation-distance: 30px; }
.distance-40 { --animation-distance: 40px; }
.distance-50 { --animation-distance: 50px; }
.distance-75 { --animation-distance: 75px; }
.distance-100 { --animation-distance: 100px; }


/*
 * Barrierefreiheit:
 * Animationen deaktivieren, wenn Nutzer reduzierte Bewegung bevorzugen.
 */
@media (prefers-reduced-motion: reduce) {
    .js-animate {
        opacity: 1;
        transform: none;
        transition: none;
        animation: none;
    }
}