/* Cross-document page transitions.
   Shared by every page so the effect is defined once - and because a view
   transition only happens when BOTH the page being left and the page being
   entered opt in, which is easy to get half-right if each page carries its
   own copy.

   This is the declarative View Transitions API: no JavaScript, and the browser
   owns the timing. That matters for back/forward navigation, where a
   hand-rolled "fade out then navigate" script is prone to restoring a page
   from bfcache still stuck at opacity 0.

   Browsers without support simply navigate instantly, which is the correct
   fallback - nothing is broken, there is just no fade. */

@view-transition {
  navigation: auto;
}

/* The default is already a cross-fade; this takes control of the timing so it
   reads as a deliberate phase rather than a flicker.

   Note the two durations do NOT add up: the outgoing and incoming snapshots
   animate concurrently, so the transition lasts as long as the LONGER of the
   two, not their sum. Tune the incoming duration to change how long the whole
   thing feels; the outgoing one only controls how quickly the old page clears
   out from underneath it. */
::view-transition-old(root) {
  animation: echoxiv-fade-out 180ms cubic-bezier(.4, 0, 1, 1) both;
}
::view-transition-new(root) {
  animation: echoxiv-fade-in 260ms cubic-bezier(0, 0, .2, 1) both;
}

@keyframes echoxiv-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes echoxiv-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Reduce motion means no movement, but a plain fade is still gentler than a
   hard cut, so the translate is dropped rather than the whole transition. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-new(root) {
    animation: echoxiv-fade-in 160ms linear both;
  }
  @keyframes echoxiv-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}