@supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
        .hero {
            view-timeline: --hero-view;
        }

        .fixed-bg::after {
            content: "";
            position: absolute;
            inset: 0;
            animation: hero-fadeBlur linear;
            animation-timeline: --hero-view;
            animation-range: exit;
        }

        .hero__content {
            animation: hero-fadeOut linear;
            animation-timeline: --hero-view;
            animation-range: exit;
        }

        @keyframes hero-fadeOut {
            to {
                scale: 0.5;
                opacity: 0;
                filter: blur(16px);
            }
        }

        @keyframes hero-fadeBlur {
            to {
                backdrop-filter: blur(24px) grayscale(1) sepia(0.5) brightness(0.8);
            }
        }

        .animation-card {
            animation: scroll-scaleIn ease-out both;
            animation-timeline: view();
            animation-range: cover -10% cover 30%;
        }

        @keyframes scroll-scaleIn {
            0% {
                scale: 0.5;
                opacity: 0;
            }

            100% {
                scale: 1;
                opacity: 1;
            }
        }

        .animation-fadeIn {
            animation: scroll-fadeIn ease-out both;
            animation-timeline: view();
            animation-range: cover 0% cover 40%;
        }

        @keyframes scroll-fadeIn {
            from {
                opacity: 0;
                filter: blur(24px);
            }

            to {
                opacity: 1;
                filter: blur(0);
            }
        }
    }
}