/* Navigating between the two languages.

   Switching used to mean watching the loader again: measured on the live site,
   8.6s to get back to the hub, of which 7.3s was the boot sequence replaying.
   With that gated to once a visit the navigation itself is under two seconds,
   and this is what makes those seconds read as a deliberate change of language
   rather than a page blink.

   Native cross-document view transitions. No JavaScript, both URLs stay real
   documents so nothing changes for a crawler, and a browser without support
   simply navigates the way it does today — there is no fallback to maintain
   because the fallback IS today's behaviour. */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
  /* Leaving is quicker than arriving: the eye forgives a fast exit and reads a
     slower entrance as the page settling, rather than as a delay. */
  ::view-transition-old(root) { animation: atclLeave 240ms cubic-bezier(.4, 0, 1, 1) both; }
  ::view-transition-new(root) { animation: atclEnter 420ms cubic-bezier(.16, 1, .3, 1) both; }

  /* The direction carries the meaning. Arriving in Arabic, the page comes in
     from the right — the side its reading starts on — and leaves to the left;
     arriving in English it is the mirror. The motion says what changed before
     a word has been read. */
  html[dir="rtl"]::view-transition-old(root) { animation-name: atclLeaveRTL; }
  html[dir="rtl"]::view-transition-new(root) { animation-name: atclEnterRTL; }
}

@keyframes atclLeave    { to   { opacity: 0; transform: translateX(-3%); } }
@keyframes atclEnter    { from { opacity: 0; transform: translateX(3%);  } }
@keyframes atclLeaveRTL { to   { opacity: 0; transform: translateX(3%);  } }
@keyframes atclEnterRTL { from { opacity: 0; transform: translateX(-3%); } }

/* Someone who asked for less motion still gets the crossfade the browser does
   by default; only the travel is removed. */