/* Smooth theme changes, with a circular reveal in browsers that support View Transitions. */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 650ms;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    mix-blend-mode: normal;
}

::view-transition-old(root) {
    animation-name: theme-old-root;
}

::view-transition-new(root) {
    animation-name: theme-new-root;
}

@keyframes theme-old-root {
    to {
        opacity: 0.92;
        transform: scale(1.012);
        filter: brightness(0.94);
    }
}

@keyframes theme-new-root {
    from {
        clip-path: circle(0 at var(--theme-origin-x) var(--theme-origin-y));
    }
    to {
        clip-path: circle(200vmax at var(--theme-origin-x) var(--theme-origin-y));
    }
}

/* Fallback motion for browsers without the View Transitions API. */
html.theme-transitioning body {
    animation: theme-fallback 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes theme-fallback {
    0% { opacity: 1; transform: scale(1); }
    42% { opacity: 0.88; transform: scale(0.996); }
    100% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: 1ms;
    }

    html.theme-transitioning body {
        animation: none;
    }
}