/* chirp-ui View Transitions — scoped to the direct shell main boundary.
   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 the shell swap target so the app
   shell (topbar, sidebar) stays frozen during navigation. Only the page
   content animates.

   The broad #main selector is intentionally avoided: embedded app_shell()
   previews can nest another #main inside app_layout.html, and view-transition
   names must be unique in the rendered document. The direct-child selectors
   below cover app_layout.html and app_shell_layout.html without naming nested
   shell previews.
*/

/* Scope transitions to the direct shell swap boundary. */
body > #main,
body > .chirpui-app-shell > #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;
    }
}