/* chirp-ui View Transitions — scoped to #main for app shell layouts.
   Include after chirpui.css when using AppConfig(view_transitions=True).

   Chirp base injects root-level crossfade for all layouts. This stylesheet
   overrides that to scope transitions to #main so the app shell (topbar,
   sidebar) stays frozen during navigation. Only the page content animates.

   #main persists in the DOM (innerHTML swap, not outerHTML) so
   view-transition-name pairing works correctly for both htmx swaps
   (SPA) and MPA navigations. Modals use view-transition-name: none
   because multiple dialogs can coexist and would duplicate the name.
*/

/* Scope transitions to the main content area */
#main {
    view-transition-name: page-content;
}

/* Suppress root animation — shell stays frozen */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
}

/* Modal — opt out; multiple dialogs share the class and would duplicate */
dialog.chirpui-modal,
.chirpui-modal {
    view-transition-name: none;
}

/* OOB shell regions — exclude from view transition and suppress outline flash.
   Sidebar and breadcrumbs update via hx-swap-oob; aria-live can trigger a brief
   focus ring when content updates. These are layout containers; links inside
   keep their own focus styles for keyboard nav. */
.chirpui-app-shell__sidebar,
#chirpui-topbar-breadcrumbs,
#chirpui-sidebar-nav {
    view-transition-name: none;
    outline: none;
    box-shadow: none;
}

/* Fragment islands — removes this element from named view-transition
   participation. However, swaps that target elements *inside*
   #page-content still trigger the page-content VT (the parent animates,
   not the island). Use hx-swap="innerHTML transition:false" on forms
   that post to fragment endpoints to suppress the flash. */
.chirpui-fragment-island {
    view-transition-name: none;
}

::view-transition-old(page-content) {
    animation: chirpui-vt-fade-out 0.12s ease-out forwards;
}

::view-transition-new(page-content) {
    animation: chirpui-vt-fade-in 0.15s ease-out forwards;
}

@keyframes chirpui-vt-fade-out {
    to {
        opacity: 0;
    }
}

@keyframes chirpui-vt-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(page-content),
    ::view-transition-new(page-content) {
        animation: none;
    }
}