@media (prefers-reduced-motion: no-preference) {
    @media (min-width: 768px) {
        html.retreva-vt-card-detail .retreva-vt-primary-image {
            view-transition-name: retreva-shared-image;
            contain: layout;
        }

        html::view-transition-group(retreva-shared-image) {
            animation-duration: 560ms;
            animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        html::view-transition-old(retreva-shared-image),
        html::view-transition-new(retreva-shared-image) {
            animation-duration: 560ms;
            animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
            height: 100%;
            object-fit: cover;
            overflow: clip;
        }

        html.retreva-vt-card-forward::view-transition-old(retreva-shared-image) {
            animation-name: retreva-vt-card-image-out;
        }

        html.retreva-vt-card-detail::view-transition-new(retreva-shared-image) {
            animation-name: retreva-vt-card-image-in;
        }
    }

    @media (max-width: 767.98px) {
        html::view-transition-group(page-content) {
            animation-duration: 300ms;
            animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
        }

        html.retreva-vt-mobile-forward::view-transition-old(page-content) {
            animation-name: retreva-vt-mobile-forward-out;
        }

        html.retreva-vt-mobile-detail::view-transition-new(page-content) {
            animation-name: retreva-vt-mobile-forward-in;
        }

        html.retreva-vt-back::view-transition-new(page-content) {
            animation-name: retreva-vt-mobile-back-in;
        }
    }

    @keyframes retreva-vt-card-image-out {
        from {
            opacity: 1;
            transform: scale(1);
            filter: saturate(1);
        }

        to {
            opacity: 0.92;
            transform: scale(0.985);
            filter: saturate(1.04);
        }
    }

    @keyframes retreva-vt-card-image-in {
        from {
            opacity: 0.92;
            transform: scale(1.015);
            filter: saturate(1.04);
        }

        to {
            opacity: 1;
            transform: scale(1);
            filter: saturate(1);
        }
    }

    @keyframes retreva-vt-mobile-forward-out {
        to {
            opacity: 0;
            transform: translateX(-18px);
        }
    }

    @keyframes retreva-vt-mobile-forward-in {
        from {
            opacity: 0;
            transform: translateX(18px);
        }
    }

    @keyframes retreva-vt-mobile-back-in {
        from {
            opacity: 0;
            transform: translateX(-18px);
        }
    }
}