/* CROSS-DOCUMENT PAGE TRANSITION - deliberately NOT in a shared stylesheet.

   `@view-transition` is a document-level at-rule: it cannot be scoped with a
   selector, only by WHICH PAGES LOAD IT. That matters here, because putting it
   in hub.css opted every game page in too, and a view transition snapshots the
   whole document as a texture - on pages that are wall-to-wall backdrop-filter
   glass (sidebar, every panel, the animated sky) that doubled the most
   expensive compositing work on the page and made navigation visibly laggy.

   So this file is linked by exactly three light pages:
       /            frontend/root/index.html
       /hub/        frontend/root/hub/index.html
       /signin/     frontend/root/signin/index.html
   Both ends of a navigation must opt in for the transition to run, so the hop
   animates between those three and nowhere else. Do NOT link it from a game
   page - that is the regression this comment exists to prevent. */
@view-transition { navigation: auto; }

/* The brand is in all three documents, so name it and it MORPHS across the
   navigation instead of cross-fading with everything else.

   The name must be unique per document or the browser abandons the transition
   for the whole page - which is why these are scoped rather than a bare
   `.hub-logo` / `.brand`: /hub/ carries a second .hub-logo in its footer, and
   the landing carries a second .brand in its footer. */
.nav__in .brand,          /* landing  */
.hub-side .hub-logo,      /* hub      */
.hub-auth .hub-logo       /* sign in  */
{ view-transition-name: brand; }

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