/* Vidro líquido (liquid glass) nas barras e nos botões, só com CSS e um filtro SVG.
   O expo-glass-effect é para apps de celular e não roda em site; este arquivo faz o equivalente na web.
   - Em navegadores Chrome/Edge/Brave: o fundo é DEFORMADO nas bordas (efeito de lente), com aro de luz.
   - Nos demais (Safari, Firefox): fundo desfocado com o mesmo aro de luz, sem a deformação.
   Para desligar tudo: remova de cada página as linhas que citam glass.css e glass.js. */

:root {
  --glass-rim:
    inset 0 0 0 1px rgba(255, 255, 255, 0.30),
    inset 2px 2px 2px -1px rgba(255, 255, 255, 0.85),
    inset -2px -2px 2px -1px rgba(255, 255, 255, 0.40),
    inset 0 0 22px rgba(255, 255, 255, 0.14);
  --glass-drop: 0 10px 30px rgba(0, 0, 0, 0.26);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

  /* ===== Barra do site: pílula de vidro transparente, sempre com a cor do fundo =====
     O glass.js troca a classe .on-dark / .on-light conforme o fundo que passa por baixo da barra,
     para o texto e o aro de luz continuarem visíveis. */
  header.bar {
    --bar-fg: #1E1E1E;
    --bar-rim: inset 0 0 0 1px rgba(30, 30, 30, 0.12), inset 2px 2px 2px -1px rgba(255, 255, 255, 0.95), inset -2px -2px 2px -1px rgba(30, 30, 30, 0.14);
    --bar-drop: 0 8px 26px rgba(30, 30, 30, 0.10);
    --bar-lens: rgba(30, 30, 30, 0.07);
    background: transparent; color: var(--bar-fg);
    position: sticky; top: 0; z-index: 50; padding-top: 12px;
  }
  header.bar.bar-over, header.bar.on-dark {
    --bar-fg: #FFFFFF;
    --bar-rim: var(--glass-rim);
    --bar-drop: 0 10px 30px rgba(0, 0, 0, 0.26);
    --bar-lens: rgba(255, 255, 255, 0.16);
  }
  header.bar.on-light {
    --bar-fg: #1E1E1E;
    --bar-rim: inset 0 0 0 1px rgba(30, 30, 30, 0.12), inset 2px 2px 2px -1px rgba(255, 255, 255, 0.95), inset -2px -2px 2px -1px rgba(30, 30, 30, 0.14);
    --bar-drop: 0 8px 26px rgba(30, 30, 30, 0.10);
    --bar-lens: rgba(30, 30, 30, 0.07);
  }
  header.bar .wrap {
    width: calc(100% - 2 * var(--margin, 16px)); max-width: 1180px; min-height: 64px;
    padding-inline: 24px 12px; border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 60%), rgba(255, 255, 255, 0.03);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    backdrop-filter: blur(12px) saturate(180%);
    box-shadow: var(--bar-rim), var(--bar-drop);
  }
  header.bar.on-light .logo svg { filter: drop-shadow(0 0 0.7px #1E1E1E) drop-shadow(0 0 0.7px #1E1E1E); }
  /* Na landing a barra flutua por cima da primeira seção, sem ocupar espaço. */
  header.bar.bar-over { height: 0; padding-top: 0; display: flow-root; }
  header.bar.bar-over .wrap { margin-top: 12px; }
  #topo.hero { padding-top: calc(clamp(40px, 5vw, 80px) + 84px); }

  /* Links da barra: ao passar o mouse, uma "lente" de vidro aparece embaixo do link */
  .nav a:not(.btn) { border-radius: 999px; transition: background 180ms, box-shadow 180ms; }
  @media (hover: hover) and (pointer: fine) {
    .nav a:not(.btn):hover {
      text-decoration: none; background: var(--bar-lens);
      -webkit-backdrop-filter: blur(6px) saturate(170%); backdrop-filter: blur(6px) saturate(170%);
      box-shadow: var(--bar-rim);
    }
  }
  .nav a:not(.btn):focus-visible { background: var(--bar-lens); box-shadow: var(--bar-rim); }

  /* Botão Login: amarelo, bem arredondado */
  .btn-login { border-radius: 999px; padding-inline: 28px; background-color: rgba(255, 199, 44, 0.92); color: #1E1E1E; }

  /* ===== Barra do painel ===== */
  .topbar {
    position: sticky; top: 0; z-index: 40;
    background: rgba(247, 244, 236, 0.62);
    -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%);
    border-bottom: 1px solid rgba(30, 30, 30, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    padding-bottom: 16px;
  }

  /* ===== Botões ===== */
  /* Cada botão mantém a cor que já tinha (para não perder contraste); o vidro entra como brilho, aro de luz e sombra. */
  .btn:where(:not([disabled]):not([aria-disabled="true"])) {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0) 55%);
    border: 0;
    box-shadow: var(--glass-rim), 0 8px 20px rgba(0, 0, 0, 0.16);
    -webkit-backdrop-filter: blur(10px) saturate(170%); backdrop-filter: blur(10px) saturate(170%);
  }
  /* Na primeira tela (fundo escuro) os botões ficam translúcidos de verdade, como as lentes de vidro. */
  .hero .btn:not(.btn-2) { background-color: rgba(255, 199, 44, 0.82); }
  .hero .btn-2 { background-color: rgba(60, 60, 60, 0.55); }
  header.bar .btn { background-color: rgba(255, 199, 44, 0.86); }
  .field-yellow .btn-2, .field-white .btn-2, .field-cera .btn-2 {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.1));
    box-shadow: inset 0 0 0 1px rgba(30, 30, 30, 0.14), inset 2px 2px 2px -1px rgba(255, 255, 255, 0.9), 0 6px 14px rgba(0, 0, 0, 0.08);
  }
  .btn-ghost { box-shadow: inset 0 0 0 1px rgba(30, 30, 30, 0.12), inset 2px 2px 2px -1px #fff, 0 6px 14px rgba(0, 0, 0, 0.08); }
  .on-field .btn-ghost { box-shadow: var(--glass-rim); }
  .btn-danger { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5), inset 2px 2px 2px -1px #fff; }
}

/* ===== Lente: deformação do fundo nas bordas (só Chrome/Edge/Brave; glass.js liga a classe .lens) ===== */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lens .btn:where(:not([disabled]):not([aria-disabled="true"])) { backdrop-filter: url(#hive-lens) blur(4px) saturate(170%); }
  @media (hover: hover) and (pointer: fine) {
    .lens .nav a:not(.btn):hover { backdrop-filter: url(#hive-lens) blur(3px) saturate(170%); }
  }
}

/* Quem pede menos transparência no sistema recebe cores sólidas. */
@media (prefers-reduced-transparency: reduce) {
  header.bar .wrap { background: rgba(255, 255, 255, 0.6); -webkit-backdrop-filter: none; backdrop-filter: none !important; box-shadow: none; }
  .topbar { background: #F7F4EC; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
  .btn { -webkit-backdrop-filter: none; backdrop-filter: none !important; }
}