@media (max-width:820px) {
  .header, .mobile-dock {
    transition: transform 750ms cubic-bezier(.22,.61,.36,1), opacity 750ms ease;
    opacity: calc(1 - var(--mobile-bars-hide, 0));
  }
  .header {
    transform: translateY(calc((100% + 2px) * var(--mobile-bars-hide, 0) * -1));
  }
  .mobile-dock {
    transform: translateY(calc((100% + 18px + env(safe-area-inset-bottom)) * var(--mobile-bars-hide, 0)));
  }
  .mobile-bars-hidden :is(.header, .mobile-dock) { pointer-events: none; }
  .header:has(:focus-visible), .mobile-dock:has(:focus-visible) {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }
}
@media (max-width:820px) and (prefers-reduced-motion:reduce) {
  .header, .mobile-dock { transition: none; }
}