/* NOTE: use CSS for this file because sass compiler throws on entry/exit keywords */

/**
 Helper to fine tune settings: https://scroll-driven-animations.style/tools/view-timeline/ranges/

@use '.SPiNNthemeFSE-base/components/_scss/mixins/animation.mixin';

.element {
    @include animation.wrapper() {
        animation: fly-in ease-out both;
        animation-timeline: view();
    }
}
*/

@keyframes fly-in-out {
    entry 0% {
        transform: translateY(100%);
        opacity: 0;
    }

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

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

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

@keyframes fly-in {
    entry 0% {
        transform: translateY(100%);
        opacity: 0;
    }

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

@keyframes clip-in-out {
    entry 0% {
        opacity: 0;
        clip-path: inset(45% 20% 45% 20%);
    }

    entry 100% {
        opacity: 1;
        clip-path: inset(0% 0% 0% 0%);
    }

    exit 0% {
        opacity: 1;
        clip-path: inset(0% 0% 0% 0%);
    }

    exit 100% {
        opacity: 0;
        clip-path: inset(45% 20% 45% 20%);
    }
}

@keyframes clip-in {
    entry 0% {
        opacity: 0;
        clip-path: inset(45% 20% 45% 20%);
    }

    entry 100% {
        opacity: 1;
        clip-path: inset(0% 0% 0% 0%);
    }
}

@keyframes ltr-in-out {
    entry 0% {
        transform: translateX(100%);
        opacity: 0;
    }

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

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

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

@keyframes ltr-in {
    entry 0% {
        transform: translateX(100%);
        opacity: 0;
    }

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

@keyframes rtl-in-out {
    entry 0% {
        transform: translateX(-100%);
        opacity: 0;
    }

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

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

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

@keyframes rtl-in {
    entry 0% {
        transform: translateX(-100%);
        opacity: 0;
    }

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

@keyframes reveal-in-out {
    entry 0% {
        opacity: 0;
    }

    entry 100% {
        opacity: 1;
    }

    exit 0% {
        opacity: 1;
    }

    exit 100% {
        opacity: 0;
    }
}

@keyframes reveal-in {
    entry 0% {
        opacity: 0;
    }

    entry 100% {
        opacity: 1;
    }
}