/* Header: a smaller bar that never gets a plate; instead .tb-blur
   (index.html) blurs the page under it more toward the top edge. Six stacked
   layers, each blurring twice the one below, each masked to its own strip —
   a smooth ramp, not steps. 09.10: phones get the same bar as desktop — it
   overrides the old opaque phone plate in lantern-v3.css. */

/* ── the bar: smaller, and never a plate in any state ─────────────────── */
.topbar,
body.at-hero .topbar,
body.at-hero.past-hero .topbar,
body.at-hero.hero-exit-live .topbar,
body.at-hero.scrolled-off-hero .topbar,
body.hero-p2.at-hero .topbar,
body.nav-on-dark .topbar {
  padding-top: 12px;
  padding-bottom: 12px;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}
.topbar .brand { font-size: 19px; gap: 8px; }
.topbar .brand .lmark { width: 24px; height: 24px; }
.topbar .nav-links,
.topbar .lang-switch-nav { font-size: 15px; }

@media (min-width: 921px) {
  .topbar .nav-links { gap: 26px; margin-right: 24px; }
  .topbar .pill { font-size: 14px; padding: 8px 15px; min-width: 0; }
  .topbar .pill svg { width: 16px; height: 16px; }
  /* with no dark plate behind it any more, the ink pill vanishes over the dark
     section — flip it to paper there */
  body.nav-on-dark .topbar .pill { background: var(--paper); color: var(--ink); }
}

/* ── the progressive blur band under it ───────────────────────────────── */
.tb-blur {
  display: block; position: fixed; top: 0; left: 0; right: 0; height: 110px;
  z-index: calc(var(--z-popup) - 1); pointer-events: none;
  transition: opacity .3s;
}
/* phones: the CTA screen hides the bar (lantern-hero-mobile.css) — the band goes with it */
@media (max-width: 920px) {
  .tb-blur { height: 90px; }
  body.ph-cta .tb-blur { opacity: 0; }
}
.tb-blur::before {
  content: ''; position: absolute; inset: 0 0 30% 0;
  background: linear-gradient(color-mix(in srgb, var(--paper) 55%, transparent), transparent);
}
body.nav-on-dark .tb-blur::before {
  background: linear-gradient(rgba(var(--ink-rgb), .55), transparent);
}
.tb-blur i { position: absolute; inset: 0; }
.tb-blur i:nth-child(1) { backdrop-filter: blur(.25px); -webkit-backdrop-filter: blur(.25px);
  mask: linear-gradient(to top, transparent 0%, #000 16.7%, #000 33.3%, transparent 50%); }
.tb-blur i:nth-child(2) { backdrop-filter: blur(.5px); -webkit-backdrop-filter: blur(.5px);
  mask: linear-gradient(to top, transparent 16.7%, #000 33.3%, #000 50%, transparent 66.7%); }
.tb-blur i:nth-child(3) { backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px);
  mask: linear-gradient(to top, transparent 33.3%, #000 50%, #000 66.7%, transparent 83.3%); }
.tb-blur i:nth-child(4) { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  mask: linear-gradient(to top, transparent 50%, #000 66.7%, #000 83.3%, transparent 100%); }
.tb-blur i:nth-child(5) { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  mask: linear-gradient(to top, transparent 66.7%, #000 83.3%, #000 100%); }
.tb-blur i:nth-child(6) { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  mask: linear-gradient(to top, transparent 83.3%, #000 100%); }