/* ==========================================================================
   Page-to-page transitions — Home, Commercial, Residential
   --------------------------------------------------------------------------
   Uses the browser's built-in cross-document View Transitions. No JavaScript.
   Browsers without support (e.g. Firefox today) load the page normally.

   A transition only runs when BOTH pages opt in, and only these three pages
   link this file — so arriving at /scan (QR funnel) or /thanks (after a quote)
   is never slowed or animated. Script-driven navigation, like the form's jump
   to /thanks, never animates either.
   ========================================================================== */

@view-transition { navigation: auto; }

/* The header and the mobile call bar are identical on every page. Naming them
   lifts them out of the crossfade, so they hold still instead of flickering.
   If the old page was scrolled, the sticky header glides back under the
   utility bar. Each name must exist only once per page. */
.header  { view-transition-name: site-header; }
.callbar { view-transition-name: site-callbar; }

/* Everything else crossfades using the browser's own fade. Old and new must
   run together over the same duration: the browser blends the pair so their
   opacities add up to a solid page. Staggering or delaying them lets the sum
   drop below 1 mid-way, and the page visibly flashes toward white. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 220ms;
  animation-timing-function: ease;
}

::view-transition-group(site-header),
::view-transition-group(site-callbar) {
  animation-duration: 220ms;
  animation-timing-function: ease;
}

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