/* =========================================================
   NAVBAR — vidro líquido (2026-11-13) · JS: js/nav-liquido.js
   Pílula flutuante com:
   - reflexo que segue o mouse (--mx, --my) e borda de luz em gradiente
   - tinta mais limpa sobre a hero e um pouco mais densa no resto da página
   - some ao descer a página e volta ao subir (transform, não mexe no layout)
   Vem depois de visual.css e extras.css. A lente de verdade (bordas que curvam o fundo)
   continua no js/vidro-liquido.js, só no Chromium com mouse.
   ========================================================= */
nav {
  --mx: 50%; --my: 0%;
  top: 14px; max-width: 1080px; border-radius: 22px; padding: .45rem .5rem .45rem 1.25rem;
  background:
    radial-gradient(160px 80px at var(--mx) var(--my), rgba(255, 255, 255, .16), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)),
    rgba(18, 18, 20, .42) !important;
  border: 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    inset 0 -1px 0 rgba(255, 255, 255, .06),
    inset 0 0 0 1px rgba(255, 255, 255, .1),
    0 12px 40px rgba(0, 0, 0, .28) !important;
  -webkit-backdrop-filter: blur(18px) saturate(190%); backdrop-filter: blur(18px) saturate(190%);
  transition: transform .45s cubic-bezier(0.32, 0.72, 0, 1), opacity .3s ease, background-color .3s ease;
}
/* borda de luz: um aro em gradiente que acende do lado do mouse */
nav::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: radial-gradient(220px 120px at var(--mx) var(--my), rgba(255, 255, 255, .55), rgba(255, 255, 255, .08) 60%, rgba(255, 255, 255, .04));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
body.on-hero nav, body.on-hero nav.is-liquido {
  background:
    radial-gradient(160px 80px at var(--mx) var(--my), rgba(255, 255, 255, .2), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02)) !important;
}
body.light-theme nav {
  background:
    radial-gradient(160px 80px at var(--mx) var(--my), rgba(255, 255, 255, .9), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .5)),
    rgba(250, 248, 242, .5) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(19, 32, 30, .08), 0 12px 36px rgba(19, 32, 30, .12) !important;
}
body.light-theme nav::before { background: radial-gradient(220px 120px at var(--mx) var(--my), rgba(255, 255, 255, 1), rgba(19, 32, 30, .08) 60%, rgba(19, 32, 30, .04)); }

/* some ao descer, volta ao subir (o menu do celular aberto segura ela no lugar) */
nav.is-escondida { transform: translateY(calc(-100% - 24px)); }
nav.is-escondida:focus-within { transform: none; }

/* botões dentro da pílula: gotas de vidro */
nav .lang-btn, nav .theme-btn, nav .nav-toggle, nav .paleta-botao, nav .nav-icone {
  border-radius: 12px !important; border: 0 !important;
  background: rgba(255, 255, 255, .08) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 0 0 1px rgba(255, 255, 255, .08);
}
body.light-theme nav .lang-btn, body.light-theme nav .theme-btn, body.light-theme nav .paleta-botao, body.light-theme nav .nav-icone {
  background: rgba(255, 255, 255, .6) !important; box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(19, 32, 30, .08);
}
nav .nav-cta { border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 18px var(--accent-glow); }
/* indicador do link atual: uma gota de vidro mais viva */
.nav-indicador { background: rgba(255, 255, 255, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -1px 0 rgba(255, 255, 255, .06), 0 4px 14px rgba(0, 0, 0, .18); }

html.perf-low nav { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(24, 24, 26, .9) !important; }
html.perf-low body.light-theme nav { background: rgba(250, 248, 242, .95) !important; }
@media (max-width: 900px) { nav { top: 10px; left: 10px; right: 10px; border-radius: 18px; } }
@media (prefers-reduced-motion: reduce) { nav { transition: opacity .2s ease; } nav.is-escondida { transform: none; } }