/* Block Gemini — seamless navigation transitions (lightweight).
 *
 *  1) Browser-native View Transitions API for cross-document nav
 *     (Chromium 126+, Safari 18+). Older browsers ignore the at-rule.
 *  2) Instant top progress bar on click — no full-screen curtain,
 *     no backdrop-filter, no radial gradient. Composited transform-only.
 *  3) Honours `prefers-reduced-motion`.
 *
 * Paired with /bg-nav.js which toggles the `bg-navigating` class.
 */

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: bg-vt-out 140ms ease-out forwards;
}
::view-transition-new(root) {
  animation: bg-vt-in 160ms ease-out backwards;
}

@keyframes bg-vt-out { to   { opacity: 0; } }
@keyframes bg-vt-in  { from { opacity: 0; } }

/* Top progress bar — the only visible feedback. Transform-only animation
 * so the compositor does the work; no layout/paint cost on every frame. */
html.bg-navigating::after {
  content: "";
  position: fixed;
  left: 0;
  top: 0;
  height: 2px;
  width: 100%;
  z-index: 2147483647;
  background: linear-gradient(
    90deg,
    var(--bg-primary-bright, #2d7bff) 0%,
    var(--bg-primary, #0055ff) 50%,
    var(--bg-primary-violet, #1900ff) 100%
  );
  transform-origin: 0 50%;
  transform: scaleX(0);
  animation: bg-progress 700ms cubic-bezier(0.2, 0.8, 0.1, 1) forwards;
  will-change: transform;
  pointer-events: none;
}

@keyframes bg-progress {
  0%   { transform: scaleX(0);   opacity: 1; }
  60%  { transform: scaleX(0.85); }
  100% { transform: scaleX(1);   opacity: 0.6; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  html.bg-navigating::after {
    animation-duration: 1ms;
  }
}

/* Nav container — ZERO horizontal padding. In the three-part nav the
   20px side gutter lives on the outer `.nav-wrap`; `.container.nav` only
   caps the row at 1440px and centres it, and `.nav-inner` is the
   100%-wide flex row. The gutter is a single constant (20px) at every
   breakpoint — consistent, not viewport-scaled — so it reads well from
   320px phones through 1440px+ desktops.

   The 2-class selector `.nav-wrap .container.nav` (specificity 0,3,0)
   + !important beats both the site-wide `.container` padding net in
   bg-typography.css (§47, .container = 0,1,0 !important) and the base
   `.container` rule in styles.css. */
.nav-wrap .container.nav,
.container.nav {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Defensive: always keep the search button visible at every responsive
   breakpoint. Three-class selector (0,3,0) + !important so neither a
   stray `display:none` net nor a future Section-32-style button net can
   accidentally hide it on narrow phones. The kbd hint (⌘K) is still
   hidden ≤980px by search.css — only the icon button itself is forced
   visible here. */
.nav-wrap .nav-cta .nav-search-btn {
  display: inline-flex !important;
}

/* The /assets/block_gemini_logo.svg has a TIGHT viewBox (0 0 206 72)
   with no empty whitespace — getBBox() reports content x:0, w:205.67,
   i.e. the artwork fills the viewBox edge-to-edge. So the IMG needs NO
   horizontal nudge: at its natural flex position the visible logo sits
   exactly on the 20px .nav-wrap gutter, mirroring the search/hamburger
   cluster on the right.

   (An earlier `transform: translateX(-13px)` here assumed ~13px of
   left whitespace that does not exist — it pushed the logo 13px past
   the gutter, overflowing its block. Do not re-add it.) */