/* Synaps — cross-page navigation (landing + all solution sub-pages).
   Modern: @view-transition navigation:auto + persistent header group.
   Fallback: fade page content only; header stays put (nav-transitions.js). */

@view-transition {
  navigation: auto;
}

/* Root crossfade — everything except named groups below */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 320ms;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Header stays fixed across MPA navigations (landing ↔ solutions, etc.) */
.header#header {
  view-transition-name: site-header;
}

::view-transition-group(site-header) {
  z-index: 200;
  animation-duration: 320ms;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}

::view-transition-old(site-header),
::view-transition-new(site-header) {
  height: 100%;
  object-fit: none;
}

/* Solution + site sub-pages on phones — skip crossfade (content-first, no hero drama). */
@media (max-width: 900px) {
  html.solution-subpage,
  html.site-subpage {
    view-transition-name: none;
  }

  html.solution-subpage .header#header,
  html.site-subpage .header#header {
    view-transition-name: none;
  }

  html.solution-subpage.synaps-nav-exit .page-layer > :not(.header),
  html.site-subpage.synaps-nav-exit .page-layer > :not(.header),
  html.solution-subpage.synaps-nav-enter .page-layer > :not(.header),
  html.site-subpage.synaps-nav-enter .page-layer > :not(.header),
  html.solution-subpage.synaps-nav-enter.synaps-nav-enter-active .page-layer > :not(.header),
  html.site-subpage.synaps-nav-enter.synaps-nav-enter-active .page-layer > :not(.header) {
    opacity: 1 !important;
    transition: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .header#header {
    view-transition-name: none;
  }

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }

  html.synaps-nav-exit .page-layer > :not(.header),
  html.synaps-nav-enter .page-layer > :not(.header),
  html.synaps-nav-enter.synaps-nav-enter-active .page-layer > :not(.header) {
    opacity: 1 !important;
    transition: none !important;
  }
}

/* JS fallback — content fades, header does not */
@media (prefers-reduced-motion: no-preference) {
  html.synaps-nav-exit .page-layer > :not(.header) {
    opacity: 0;
    transition: opacity 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  html.synaps-nav-enter .page-layer > :not(.header) {
    opacity: 0;
  }

  html.synaps-nav-enter.synaps-nav-enter-active .page-layer > :not(.header) {
    opacity: 1;
    transition: opacity 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }
}