/* Snapshots bridge client-side navigation while the header stays in place. */

::view-transition-group(root) { animation-duration: 360ms; }
::view-transition-old(root) { animation: bb-page-out 180ms cubic-bezier(.23,1,.32,1) both; }
::view-transition-new(root) { animation: bb-page-in 360ms cubic-bezier(.23,1,.32,1) both; }
::view-transition-old(root),
::view-transition-new(root) { mix-blend-mode: normal; }

.bb-header { view-transition-name: site-header; }
::view-transition-group(site-header) { z-index: 1; animation: none; }
::view-transition-old(site-header) { animation: bb-header-out 120ms ease-out both; }
::view-transition-new(site-header) { animation: bb-header-in 180ms ease-out both; }

@keyframes bb-page-out {
  to { opacity: 0; transform: translateY(-12px); }
}
@keyframes bb-page-in {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes bb-header-out { to { opacity: 0; } }
@keyframes bb-header-in { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {

  .bb-case-hero > .bb-section { animation: none; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none; }
}


main[tabindex="-1"]:focus { outline: none; }