/* Cross-document transition between /login and /signup.
 * ---------------------------------------------------------------------------
 * Both pages share a backdrop and sit either side of a single decision, so
 * navigating between them should read as one screen changing rather than two
 * documents swapping.
 *
 * This uses cross-document View Transitions rather than an SPA-style fetch and
 * DOM swap. That matters:
 *
 *   - No JavaScript. Nothing to run, nothing to go wrong, no lag from waiting
 *     on a fetch before anything moves.
 *   - The real navigation still happens. The URL, the back button, bookmarks,
 *     the browser's own restore behaviour and both pages' auth scripts all keep
 *     working exactly as they did.
 *   - Browsers without support simply navigate. There is no fallback path to
 *     maintain because the unsupported behaviour IS the old behaviour.
 *
 * Loaded by login.html and signup.html only. Deliberately not in core.css:
 * `@view-transition` is a document-level opt-in, and putting it there would
 * turn on animated navigation across the whole app.
 */

@view-transition { navigation: auto; }

/* The backdrop is the same photograph, the same blur and the same veil on both
 * pages. Naming it lifts it out of the page snapshot into its own layer that
 * persists across the navigation, so it holds still while the card moves.
 * Without this the whole viewport cross-fades and the background visibly
 * blinks, which is the one thing it must not do.
 *
 * Its geometry is identical on both pages, so the default group animation has
 * nothing to interpolate and the layer simply sits there. If the two pages
 * happen to be showing different photos mid-rotation, the cross-fade between
 * them is the right result anyway. */
.ob-bg { view-transition-name: auth-backdrop; }

/* Everything else — card, top bar, footer — travels together. 26px and
 * cubic-bezier(.22,1,.36,1) are lifted from signup's own pane transition
 * (.ob-pane), so moving between the two pages feels like moving between two
 * steps of the wizard. */
@keyframes auth-slide-out {
  to { opacity: 0; transform: translateX(-26px); }
}
@keyframes auth-slide-in {
  from { opacity: 0; transform: translateX(26px); }
}

::view-transition-old(root) {
  animation: auth-slide-out .26s cubic-bezier(.22, 1, .36, 1) both;
}
::view-transition-new(root) {
  animation: auth-slide-in .3s cubic-bezier(.22, 1, .36, 1) .03s both;
}

/* Snapshots are painted into a fixed-position overlay, so a page that scrolls
   would otherwise jump to the top mid-transition. Neither of these pages
   scrolls at desktop sizes, but a short viewport can. */
::view-transition-group(root) { animation-duration: .3s; }

@media (prefers-reduced-motion: reduce) {
  /* Not `navigation: none` — that would disable the transition machinery
     entirely and could reintroduce a hard flash. A plain cross-fade with no
     movement is the right reduced-motion answer. */
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-name: none;
    animation-duration: .12s;
  }
}