/* ============================================================================
   page-transitions.css — shared cross-document view transitions

   Linked by every page a visitor can reach from the landing page without
   signing in:

     resources/views/welcome.blade.php          the landing page
     resources/views/layouts/public.blade.php   news, events, about, posts
     resources/views/layouts/guest.blade.php    the sign-in screen

   Why one file rather than a block in each stylesheet: a cross-document view
   transition only runs when *both* the outgoing and the incoming document
   opt in, and a shared element only morphs when both documents give it the
   same view-transition-name. Three copies of those rules would drift apart,
   and the symptom of drift is not an error — the navigation silently goes
   back to a white flash. One file makes agreement structural.

   Nothing here needs a fallback. A browser without view-transition support
   ignores the whole block and navigates exactly as it did before.
   ========================================================================= */

/* The opt-in sits inside a no-preference query because a visitor who has
   asked the OS to reduce motion is asking for instant navigation, and the
   default cross-fade is still motion. Leaving it unguarded and then trying
   to cancel it with ::view-transition-group animation overrides is both
   longer and less reliable. */
@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }

    /* ---- Shared elements ------------------------------------------------
       These two names must be identical across all three layouts, which is
       the entire reason this file exists. The header and the school brand
       are the elements that genuinely persist between pages, so naming them
       makes the bar hold still while the content underneath changes —
       instead of the whole viewport cross-fading, header included.

       A view-transition-name has to be unique within one document. Each
       layout applies these names via its own selector below, and no two of
       those selectors appear on the same page.
       --------------------------------------------------------------------- */

    /* welcome.blade.php */
    .lp-header { view-transition-name: site-header; }
    .lp-brand { view-transition-name: site-brand; }

    /* layouts/public.blade.php */
    .public-nav { view-transition-name: site-header; }
    .public-nav__brand { view-transition-name: site-brand; }

    /* layouts/guest.blade.php — the sign-in screen has no persistent header,
       so only the page body participates and the default cross-fade applies. */

    /* ---- Timing ---------------------------------------------------------
       The browser default is around 250ms. Shortened, because these are
       same-site document swaps where the content is the point: a transition
       long enough to notice is a transition long enough to wait for.
       --------------------------------------------------------------------- */
    ::view-transition-group(root) {
        animation-duration: 180ms;
        animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    }

    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: 180ms;
    }

    /* The named elements move rather than fade — a header that cross-fades
       into another header at the same position just looks like a flicker. */
    ::view-transition-group(site-header),
    ::view-transition-group(site-brand) {
        animation-duration: 220ms;
        animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    }

    ::view-transition-old(site-header),
    ::view-transition-new(site-header),
    ::view-transition-old(site-brand),
    ::view-transition-new(site-brand) {
        /* Suppress the default fade on the persistent chrome so it reads as
           one element being repositioned, not two being swapped. */
        animation: none;
        mix-blend-mode: normal;
    }
}

/* ---------------------------------------------------------------------------
   Reduced motion

   Last in the file. The query above never matches when this one does, so
   this is defence against a future edit moving the opt-in out of its guard
   rather than a rule that is needed today — but it costs nothing and the
   failure it prevents is a visitor getting motion they explicitly declined.
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}