/**
 * Theme swap crossfade. The toggle control itself is part of the site header
 * (site-header.css); --theme-transition-duration is hosted on html in global.css.
 */
@media (prefers-reduced-motion: no-preference) {
    ::view-transition-old(root) {
        animation: lunarcat-theme-fade-out var(--theme-transition-duration) cubic-bezier(.4, 0, .2, 1) both;
    }

    ::view-transition-new(root) {
        animation: lunarcat-theme-fade-in var(--theme-transition-duration) cubic-bezier(.4, 0, .2, 1) both;
    }
}

@keyframes lunarcat-theme-fade-out {
    to {
        opacity: 0;
    }
}

@keyframes lunarcat-theme-fade-in {
    from {
        opacity: 0;
    }
}