/* Botão de Vidro Líquido
   Botão de vidro grosso sobre o seu fundo: a borda funciona como lente e curva o que está atrás (Chrome e
   Edge), um brilho segue o cursor e, no aperto, o botão amassa e volta como gelatina. Nos navegadores sem
   refração, fica o vidro fosco. Sem dependências externas. Tokens: :root (--fx-*). */
:root{
  --fx-bg:#0b0b0e;
  --fx-ink:#ffffff;                       /* cor do texto e dos ícones */
  --fx-accent:#ff7a2f;                    /* tinta do vidro (bem leve) */
  --fx-muted:rgba(255,255,255,.7);
  --fx-speed:1;
  --fx-radius:999px;                      /* 999px = pílula; 18px = retângulo arredondado */
  --fx-botao-vidro-liquido-altura:58px;
  --fx-botao-vidro-liquido-refracao:24;   /* força da lente na borda (0 a 90) */
  --fx-botao-vidro-liquido-tinta:8%;      /* quanto da cor do acento tinge o vidro */
  --fx-botao-vidro-liquido-escuro:rgba(16,16,20,.24);   /* escurece o vidro pra o texto ler sobre fundo claro */
}

.fx-botao-vidro-liquido{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:var(--fx-botao-vidro-liquido-altura);padding:0 30px;border:0;border-radius:var(--fx-radius);
  font:inherit;font-size:16px;font-weight:600;letter-spacing:.01em;color:var(--fx-ink);text-decoration:none;
  background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  text-shadow:0 1px 2px rgba(0,0,0,.45),0 0 12px rgba(0,0,0,.25);
}
/* sem isolation, transform ou will-change no botão: qualquer um deles corta a visão da lente (ver efeito.js) */
.fx-botao-vidro-liquido__texto{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:inherit;pointer-events:none;will-change:transform}
.fx-botao-vidro-liquido--redondo{width:var(--fx-botao-vidro-liquido-altura);padding:0}
.fx-botao-vidro-liquido svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}

/* a lente: o fundo visto pelo vidro (o JS troca pelo filtro de refração onde o navegador desenha) */
.fx-botao-vidro-liquido__lente{
  position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;will-change:transform;
  background:color-mix(in srgb,var(--fx-accent) var(--fx-botao-vidro-liquido-tinta),var(--fx-botao-vidro-liquido-escuro));
  -webkit-backdrop-filter:blur(10px) saturate(1.6) brightness(1.05);backdrop-filter:blur(10px) saturate(1.6) brightness(1.05);
}
/* borda do vidro: aresta clara em cima, escura embaixo, luz rebatida por dentro e a sombra no chão */
.fx-botao-vidro-liquido__borda{
  position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;will-change:transform;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.32),
    inset 0 1.5px 1px rgba(255,255,255,.7),
    inset 0 -1.5px 2px rgba(0,0,0,.28),
    inset 3px 5px 12px -4px rgba(255,255,255,.35),
    inset -3px -6px 14px -6px rgba(255,255,255,.22),
    0 12px 30px -12px rgba(0,0,0,.55),
    0 2px 6px rgba(0,0,0,.18);
}
/* brilho que segue o cursor */
.fx-botao-vidro-liquido__brilho{
  position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;opacity:0;will-change:transform,opacity;
  background:radial-gradient(60% 90% at var(--fx-botao-vidro-liquido-mx,50%) var(--fx-botao-vidro-liquido-my,0%),rgba(255,255,255,.42),rgba(255,255,255,0) 70%);
  mix-blend-mode:screen;transition:opacity calc(.3s * var(--fx-speed)) ease;
}
.fx-botao-vidro-liquido:hover .fx-botao-vidro-liquido__brilho,
.fx-botao-vidro-liquido:focus-visible .fx-botao-vidro-liquido__brilho{opacity:1}
.fx-botao-vidro-liquido:focus-visible{outline:2px solid var(--fx-ink);outline-offset:4px}

/* reduced motion: sem balanço (o JS põe a escala direto), brilho parado no alto */
.fx-botao-vidro-liquido.fx-rm .fx-botao-vidro-liquido__brilho{transition:none}