/* BTN-04 · Botão de vidro líquido — reescrito do original do 21st.dev sem React e sem Tailwind.

   O truque não é transparência: é DISTORÇÃO. Um filtro SVG (`feTurbulence` + `feDisplacementMap`)
   empurra os pixels do que está atrás do botão, como vidro grosso irregular. O `backdrop-filter`
   aponta para esse filtro por id.

   ⚠️ **O `isolation: isolate` no BOTÃO não é enfeite — sem ele o efeito não existe.** Medido em
   06/10/2026: uma camada com `z-index: -1` dentro de um pai que não isola tem o backdrop VAZIO, e
   o `backdrop-filter` não desenha nada. É assim que o original vem (`-z-10` dentro de um
   `relative`), e por isso o vidro dele **não renderiza em navegador nenhum**. Pondo o
   `isolation` no pai, o botão vira o backdrop root e a camada passa a enxergar o que está atrás.
   Medições: `z-index:-1` sozinho → nada · `z-index:-1` + `isolation` na própria camada → nada ·
   `isolation` no pai → renderiza · `z-index:0` → renderiza.

   A pilha de sombras é o que desenha a "borda de vidro": duas sombras internas opostas fazem o
   bisel, duas mais fechadas fazem o brilho da aresta, e duas largas fazem o corpo do vidro. */
.c-vidro {
  --c-liq-tinta: #ebebeb;
  --c-liq-raio: 6px;
  --c-liq-altura: 56px;
  --c-liq-padding: 40px;

  position: relative;
  /* OBRIGATÓRIO: faz do botão o backdrop root. Sem isto, a lente de z-index -1 tem o backdrop
     vazio e o filtro não desenha. Foi o defeito do original. */
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--c-liq-altura);
  padding: 0 var(--c-liq-padding);
  border: 0;
  border-radius: var(--c-liq-raio);
  background: transparent;
  color: var(--c-liq-tinta);
  font: 500 14px/1 inherit;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: transform .3s ease;
}
.c-vidro:hover { transform: scale(1.05); }
.c-vidro[disabled] { opacity: .5; pointer-events: none; }
.c-vidro:focus-visible { outline: 3px solid rgba(232, 173, 50, .5); outline-offset: 2px; }

/* a camada que distorce o fundo. Fica ATRÁS do rótulo (z-index -1 com isolation no pai). */
.c-vidro__lente {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  border-radius: var(--c-liq-raio);
  /* o isolation NÃO vai aqui: na própria camada ele cria um backdrop root vazio e mata o efeito.
     Vai no pai (.c-vidro). Medido. */
  -webkit-backdrop-filter: url("#c-vidro-filtro");
  backdrop-filter: url("#c-vidro-filtro");
}
/* a pilha de sombras que desenha a borda do vidro. O original usava rounded-full aqui e
   rounded-md no botão — era incoerência dele; aqui as duas seguem --c-liq-raio. */
.c-vidro__borda {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  border-radius: var(--c-liq-raio);
  box-shadow:
    0 0 8px rgba(0, 0, 0, .03),
    0 2px 6px rgba(0, 0, 0, .08),
    inset 3px 3px 0.5px -3.5px rgba(255, 255, 255, .09),
    inset -3px -3px 0.5px -3.5px rgba(255, 255, 255, .85),
    inset 1px 1px 1px -0.5px rgba(255, 255, 255, .6),
    inset -1px -1px 1px -0.5px rgba(255, 255, 255, .6),
    inset 0 0 6px 6px rgba(255, 255, 255, .12),
    inset 0 0 2px 2px rgba(255, 255, 255, .06),
    0 0 12px rgba(0, 0, 0, .15);
  transition: box-shadow .3s ease;
}
.c-vidro__rotulo { position: relative; z-index: 1; pointer-events: none; }
.c-vidro svg { width: 16px; height: 16px; flex: none; }

/* tamanhos do original */
.c-vidro--p  { --c-liq-altura: 32px; --c-liq-padding: 16px; font-size: 12px; }
.c-vidro--m  { --c-liq-altura: 36px; --c-liq-padding: 16px; }
.c-vidro--g  { --c-liq-altura: 40px; --c-liq-padding: 24px; }
.c-vidro--gg { --c-liq-altura: 48px; --c-liq-padding: 32px; }

/* o filtro é caro: com "reduzir movimento" o botão para de crescer, mas a lente fica —
   ela não se move, é estática */
@media (prefers-reduced-motion: reduce) {
  .c-vidro, .c-vidro__borda { transition: none; }
  .c-vidro:hover { transform: none; }
}