/* fp-view-transitions.css — MPA View Transitions (Chromium 126+)
   Provides smooth animated page-to-page navigation.
   Non-supporting browsers silently ignore all rules.
   No JS required for basic transitions. */

/* Enable cross-document (MPA) view transitions */
@view-transition {
  navigation: auto;
}

/* Persist elements across navigations — they morph instead of re-rendering */
/* NOTE: .site-header CANNOT have view-transition-name because it creates a
   containing block that breaks position:fixed on the mobile nav panel.
   Same root cause as the v7 sticky header bug. Header transitions are
   handled by the default page crossfade instead. */

.sticky-bottom {
  view-transition-name: sticky-bar;
}

/* Chat widget persists across pages */
#fp-chat-toggle,
.fp-chat-bubble {
  view-transition-name: chat-widget;
}

/* Main content area gets a crossfade */
#main-content {
  view-transition-name: main-content;
}

/* Default transition: gentle crossfade */
::view-transition-old(main-content) {
  animation: vt-fade-out 0.15s ease-out forwards;
}

::view-transition-new(main-content) {
  animation: vt-fade-in 0.2s ease-in forwards;
}

/* Header and sticky bar: no animation (they stay put) */
::view-transition-old(sticky-bar),
::view-transition-new(sticky-bar),
::view-transition-old(chat-widget),
::view-transition-new(chat-widget) {
  animation: none;
}

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

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

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}