/* Global navbar — motion (SAMPLE for the owner's approval, 2026-09-28). Brand mint only, subtle.
 * Nothing here changes layout: the underline is an absolutely placed pseudo-element scaled with
 * transform, the scrolled look is colour / blur / shadow only, the menus fade with opacity and a
 * 4 px transform. Everything sits inside prefers-reduced-motion: no-preference — a viewer who asks
 * for reduced motion gets today's bar exactly. The .is-scrolled class is set by navbar.js. */
@media (prefers-reduced-motion: no-preference) {
  /* 1. hover: a 2 px mint underline grows from the centre (150 ms, ease-out); the active link keeps it */
  .msx-nav .nav button { position: relative; }
  .msx-nav .nav button::after {
    content: ""; position: absolute; left: var(--nav-pad-x, 12px); right: var(--nav-pad-x, 12px); bottom: 1px; height: 2px; border-radius: 1px;
    background: var(--mint, #00D68F); transform: scaleX(0); transform-origin: 50% 50%;
    transition: transform 150ms ease-out; pointer-events: none;
  }
  .msx-nav .nav button:hover::after,
  .msx-nav .nav button:focus-visible::after,
  .msx-nav .nav button.active::after { transform: scaleX(1); }

  /* 2. scrolled past 8 px: a soft translucent backdrop + a hairline bottom shadow (200 ms).
     NOTE: on the static pages the bar is not sticky today — design/topmenu.css sets
     html, body { overflow-x: hidden }, which makes body the scroll container, so position:sticky
     (.msx-nav above) never engages and the bar scrolls away with the page. Until that changes this
     look shows only while the bar is still on screen. */
  .msx-nav {
    transition: background-color 200ms ease, box-shadow 200ms ease, -webkit-backdrop-filter 200ms ease, backdrop-filter 200ms ease;
  }
  .msx-nav .topbar, .msx-nav .ticker { transition: background-color 200ms ease; }
  /* only where color-mix() exists: an older WebView would otherwise turn the bar fully transparent */
  @supports (background-color: color-mix(in srgb, red 50%, transparent)) {
    .msx-nav.is-scrolled {
      background-color: color-mix(in srgb, var(--bg, #000000) 85%, transparent);
      -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 24px -12px rgba(0, 0, 0, 0.8);
    }
    .msx-nav.is-scrolled .topbar { background-color: transparent; }
    .msx-nav.is-scrolled .ticker { background-color: color-mix(in srgb, var(--surface, #141416) 70%, transparent); }
  }

  /* 3. menus (Assets, notifications, search results): fade + 4 px slide, 150 ms, on open and close.
     display is animated as a discrete property (allow-discrete + @starting-style), so a closed menu
     is still display:none — browsers without it simply open instantly, as today. */
  .msx-nav .am-panel, .msx-nav .ntf-panel, .msx-nav .tsearch-results, .msx-nav .nav-trade-menu {
    opacity: 0; transform: translateY(-4px);
    transition: opacity 150ms ease-out, transform 150ms ease-out, display 150ms allow-discrete;
  }
  .msx-nav .am-panel.open, .msx-nav .ntf-panel.open, .msx-nav .tsearch-results.open, .msx-nav .nav-trade-menu.open { opacity: 1; transform: none; }
  @starting-style {
    .msx-nav .am-panel.open, .msx-nav .ntf-panel.open, .msx-nav .tsearch-results.open, .msx-nav .nav-trade-menu.open { opacity: 0; transform: translateY(-4px); }
  }
}