/* =============================================================================
   FitnessFinder — PAGE TRANSITIONS (results ⇄ provider)
   -----------------------------------------------------------------------------
   Linked by results.html and provider.html only. A cross-document view transition
   happens when BOTH pages of a same-site navigation opt in, so moving between a
   search and a provider (either way, including Back) dissolves instead of
   flashing to white, while every other page keeps a normal page load.

   - The header is given its own name, so it stays perfectly still while the page
     content cross-fades beneath it.
   - Browsers without cross-document view transitions (Firefox at the time of
     writing) get a short fade-in on load instead.
   - Reduced motion: no transition at all.
   ========================================================================== */

@view-transition {
  navigation: auto;
}

/* The header is identical on both pages: hold it in place rather than fading it. */
body > header { view-transition-name: ff-site-header; }
::view-transition-group(ff-site-header) { animation: none; }
::view-transition-old(ff-site-header) { display: none; }
::view-transition-new(ff-site-header) { animation: none; }

/* The content dissolves: a quick fade out, a slightly longer fade in with a few
   pixels of rise, so the new page reads as arriving rather than snapping. */
::view-transition-old(root) {
  animation: ff-pt-out 180ms cubic-bezier(0.4, 0, 1, 1) both;
}
::view-transition-new(root) {
  animation: ff-pt-in 260ms cubic-bezier(0, 0, 0.2, 1) 40ms both;
}
@keyframes ff-pt-out {
  to { opacity: 0; }
}
@keyframes ff-pt-in {
  from { opacity: 0; transform: translateY(6px); }
}

/* Fallback: no view transitions → fade the page in as it loads. */
@supports not (view-transition-name: none) {
  body { animation: ff-pt-fallback 240ms cubic-bezier(0, 0, 0.2, 1) both; }
  @keyframes ff-pt-fallback {
    from { opacity: 0; }
  }
}

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