/* =========================================================================
   eViewTransition.css — cross-document (MPA) View Transitions

   Goal: on same-origin page navigation the left chrome (sidebar) stays put while
   only the main content pane (.content-wrapper) animates: the old page fades out
   and the new page rises up from below and fades in (a calm, premium "settle").

   How it works: the native cross-document View Transition API. Both the outgoing
   and the incoming document opt in via @view-transition, so the browser plays the
   animation automatically — no JavaScript drives it. This file is linked from the
   shared _Styles partials, so every page that uses them opts in.

   Support: Chromium 126+ (Chrome/Edge). Firefox/Safari ignore these at-rules and
   pseudo-elements and simply navigate normally — graceful degradation, nothing
   breaks. The whole feature sits under prefers-reduced-motion: no-preference, so a
   user who asks for reduced motion gets plain navigation too.

   Note: the navigation loader overlay (#blurOverlay) is hidden in the `pageswap`
   handler (site.js › NavigationLoader) so it is NOT captured into the outgoing
   snapshot and does not slide with the content.
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {

    /* Opt every same-origin navigation into a cross-document transition. Must be
       present in BOTH the old and the new document — it is, via the shared layout. */
    @view-transition {
        navigation: auto;
    }

    /* --- The content pane: the only thing that moves --------------------- */
    /* Lifting it into its own named group lets it animate independently of the
       chrome. Its snapshot is rendered in the top-layer VT overlay, so the
       .admin { overflow: hidden } / its own overflow-y do not clip the animation. */
    .content-wrapper {
        view-transition-name: page-content;
    }

    /* Premium "rise + fade" (Stripe / Linear / Vercel-style):
       - the old page fades out FAST so there is no long muddy cross-fade;
       - the new page rises up from below and fades in with an ease-out "settle".
       Durations are set per pseudo-element (not relying on the group's inherited
       duration) so the asymmetric quick-out / graceful-in timing is explicit. */
    ::view-transition-group(page-content) {
        animation-duration: 0.5s;
    }

    ::view-transition-old(page-content) {
        animation-name: evt-zoom-out;
        animation-duration: 0.22s;
        animation-timing-function: ease-in;
    }

    ::view-transition-new(page-content) {
        animation-name: evt-rise-zoom-in;
        animation-duration: 0.5s;
        /* easeOutExpo — decisive start, soft landing; reads as "settling into place" */
        animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* --- The sidebar: kept genuinely static ----------------------------- */
    /* The active menu item and the expanded accordion differ between pages in
       different menu groups. Left in the default `root` group that difference
       would cross-fade (a visible shimmer / height wobble). Giving the sidebar its
       own group and cancelling all of its animation makes the new snapshot appear
       instantly and hold for the whole transition — no slide, no fade. If a browser
       ignored the override it would merely fall back to the same cross-fade as if
       the sidebar were unnamed, so there is no downside. */
    .sidebar {
        view-transition-name: page-sidebar;
    }

    ::view-transition-group(page-sidebar),
    ::view-transition-old(page-sidebar),
    ::view-transition-new(page-sidebar) {
        animation: none;
    }

    ::view-transition-old(page-sidebar) {
        opacity: 0; /* drop the old snapshot immediately */
    }

    ::view-transition-new(page-sidebar) {
        opacity: 1; /* show the new snapshot immediately */
    }

    /* --- Everything else (favorite/help rails, chrome) ------------------ */
    /* Identical across authorized pages, so keep the root swap short and quiet. */
    ::view-transition-group(root) {
        animation-duration: 0.25s;
    }

    /* Old content fades out while easing back slightly (scale 1 → 0.99) — a small
       "step back" that makes the departure clearly readable without any translation. */
    @keyframes evt-zoom-out {
        to {
            opacity: 0;
            transform: scale(0.99);
        }
    }

    /* New content rises up from below AND zooms in slightly (scale 0.96 → 1) while
       fading in. The second dimension (scale) is what makes the transition obviously
       readable yet premium — it reads as content "settling into place", never as a
       glitch. Vertical motion keeps it entirely clear of the sidebar. */
    @keyframes evt-rise-zoom-in {
        from {
            opacity: 0;
            transform: translateY(56px) scale(0.96);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }
}