.fadeLeft {
    animation: fade-left linear forwards;
    animation-timeline: view();
    animation-range-start: 10px;
    animation-range-end: 300px;
}

.fadeRight {
    animation: fade-right linear forwards;
    animation-timeline: view();
    animation-range-start: 10px;
    animation-range-end: 300px;
}

.fadeRightText {
    animation: fade-right-text linear forwards;
    animation-timeline: view();
    animation-range-start: 10px;
    animation-range-end: 300px;
}

@media (prefers-reduced-motion: no-preference) {
    @keyframes fade-left {
        from {
            transform: translateX(-180px);  /* Start from the left */
            opacity: 0.8;
        }
        to {
            transform: translateX(0);  /* End at normal position */
            opacity: 1;
        }
    }

    @keyframes fade-right {
        from {
            transform: translateX(180px);  /* Start from the right */
            opacity: 0.8;
        }
        to {
            transform: translateX(0);  /* End at normal position */
            opacity: 1;
        }
    }

    @keyframes fade-right-text {
        from {
            transform: translateX(150px);  /* Start from the right */
            opacity: 0.6;
        }
        to {
            transform: translateX(0);  /* End at normal position */
            opacity: 1;
        }
    }
}