/* ===========================================================================
   Cryptiq — cross-page transitions
   ---------------------------------------------------------------------------
   Native cross-document view transitions. Both the outgoing and incoming page
   must opt in via @view-transition, so this file is linked on every page that
   navigates to another. Deliberately CSS-only: a JS fade would have to hide
   the body on unload, which strands a blank page in the bfcache when the user
   hits Back. Browsers without support (Firefox today) simply navigate as
   before — nothing to fall back to, nothing to break.
   =========================================================================== */

@view-transition { navigation: auto; }

/* Snappier than the 250ms UA default: the outgoing page clears quickly and the
   incoming one settles in, which keeps the dark home -> light About jump from
   reading as a muddy dissolve. */
::view-transition-old(root),
::view-transition-old(cq-brand) {
  animation: cq-vt-out 160ms cubic-bezier(.4, 0, 1, 1) both;
}
::view-transition-new(root),
::view-transition-new(cq-brand) {
  animation: cq-vt-in 260ms cubic-bezier(0, 0, .2, 1) both;
}

@keyframes cq-vt-out { from { opacity: 1; } to   { opacity: 0; } }
@keyframes cq-vt-in  { from { opacity: 0; } to   { opacity: 1; } }

/* The nav lock-up sits at identical coordinates on Home and About, so naming it
   lifts it out of the root snapshot and pins it in place — the page cross-fades
   behind a logo that never moves, and the key/wordmark just shift colourway.
   Applied via an explicit class, not `.logo`, so the Demo Hub's unrelated
   dot+text mark never inherits the name (a shared name across mismatched marks
   would morph one into the other). Where the name exists on only one side, its
   old/new share the root timing above, so it reads as a plain cross-fade. */
.cq-brand-lockup { view-transition-name: cq-brand; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}