/* Moving between states. Every change someone makes runs as a view transition where the browser
   has them: elements with a view-transition-name glide from where they were to where they are,
   and the rest cross-fades. Nothing moves for anyone who asks for less motion. */

@media (prefers-reduced-motion: no-preference) {
    ::view-transition-group(*) {
        animation-duration: var(--duration-move);
        animation-timing-function: var(--ease-settle);
    }

    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: var(--duration-fast);
    }

    ::view-transition-new(*):only-child {
        animation: pod-arrive var(--duration-move) var(--ease-settle);
    }

    ::view-transition-old(*):only-child {
        animation: pod-depart var(--duration-fast) var(--ease-standard) forwards;
    }

    @keyframes pod-arrive {
        from {
            opacity: 0;
            scale: 0.96;
        }
    }

    @keyframes pod-depart {
        to {
            opacity: 0;
            scale: 0.96;
        }
    }
}