@keyframes arrow-moving {
    0% {
        transform: translate(0, 0) rotate(-45deg);
    }
    45% {
        transform: translate(100%, -100%) rotate(-45deg);
    }
    50% {
        transform: translate(-100%, 100%) rotate(-45deg);
    }
    100% {
        transform: translate(0, 0) rotate(-45deg);
    }
}

@keyframes slide-down {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes fade-in {
    0% {
        transform: translateX(-100%);
        opacity: 0;
        filter: blur(50px);
    }
    100% {
        transform: translateX(0);
        opacity: 1;
        filter: blur(0);
    }
}

@keyframes fade-in-left {
    0% {
        transform: translateX(-100%);
        opacity: 0;
        filter: blur(50px);
    }
    100% {
        transform: translateX(0);
        opacity: 1;
        filter: blur(0);
    }
}

@keyframes fade-in-right {
    0% {
        transform: translateX(100%);
        opacity: 0;
        filter: blur(50px);
    }
    100% {
        transform: translateX(0);
        opacity: 1;
        filter: blur(0);
    }
}

@keyframes fade-in-up {
    0% {
        transform: translateY(100%);
        filter: blur(50px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        filter: blur(0);
        opacity: 1;
    }
}

.fade-in-left {
    animation: fade-in-left 1.5s both;
    animation-timeline: view();
    animation-range: entry 15% cover 50%;
}

.fade-in-right {
    animation: fade-in-right 1.5s both;
    animation-timeline: view();
    animation-range: entry 15% cover 50%;
}

.fade-in-up {
    animation: fade-in-up 1s both;
    animation-timeline: view();
    animation-range: entry 5% cover 30%;
}