/* Auto-hiding toolbar ("focus mode") for the self-hosted PDF.js viewer.

   Smoothness note: only `transform` and `opacity` are animated here — the
   two properties a browser can animate purely on the compositor thread,
   with no per-frame layout/paint. That's what keeps this smooth instead of
   janky.

   Content-offset note: an earlier version also reclaimed the toolbar's
   space when hidden (by zeroing #viewerContainer's top inset), so the page
   area was always full height and the toolbar floated over it. That fought
   PDF.js's own scroll-position math: PDF.js computes where to scroll to
   using its own internal layout tracking, which doesn't know about CSS
   padding/margins injected from outside, so on small viewports the toolbar
   ended up crowding or clipping the top of page 1 regardless of what
   padding was added. Now #viewerContainer keeps PDF.js's *native*
   top-inset reservation (var(--toolbar-height), untouched) — the content
   area's geometry never changes, so PDF.js's own scroll math stays
   correct. Only the toolbar itself animates in front of that reserved
   strip. Trade-off: when hidden, that strip shows background color instead
   of page content (not truly full-bleed) — but content is never cut off. */

#toolbarContainer {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 1000;
  will-change: transform, opacity;
  transform: translateY(0);
  opacity: 1;
  /* Entrance: a touch slower, with a decelerating ("ease-out") curve —
     standard for elements arriving, so the motion settles rather than
     stopping abruptly. */
  transition:
    transform 220ms cubic-bezier(0, 0, 0.2, 1),
    opacity 220ms cubic-bezier(0, 0, 0.2, 1);
}

body.focus-mode-hide-toolbar #toolbarContainer {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  /* Exit: quicker, with an accelerating ("ease-in") curve — standard for
     elements leaving, since attention has already moved on. */
  transition:
    transform 160ms cubic-bezier(0.4, 0, 1, 1),
    opacity 160ms cubic-bezier(0.4, 0, 1, 1);
}

/* Respect reduced-motion: keep the show/hide functionality, drop the slide
   and shorten to a near-instant fade so there's no sustained motion. */
@media (prefers-reduced-motion: reduce) {
  #toolbarContainer,
  body.focus-mode-hide-toolbar #toolbarContainer {
    transform: none;
    transition-property: opacity;
    transition-duration: 1ms;
  }
}