/* vidro.css · Liquid Glass ("vitrificação"). Reusar as classes.

   Vidro é o material do que FLUTUA (barra, telinha, controles e painéis sobre mídia,
   cards de feitos, painel de compra, modal). Só fica bonito com luz atrás: todo vidro
   precisa de mídia ou campo de luz por baixo. Sobre preto puro, use superfície fosca.

   Camadas
   1. Corpo ........... backdrop-filter blur/saturate/brightness + fundo rgba(255,255,255,.055)
   2. Borda de luz .... ::before, 1 px em degradê por máscara (claro no alto à esquerda,
                        quase nada embaixo à direita) + inset 0 1px 0 rgba(255,255,255,.30)
   3. Brilho especular  ::after, degradê radial em --mx/--my (0..1 no próprio elemento).
                        main.js atualiza: ponteiro no computador, rolagem no celular.
   4. Lente ........... só Chromium de computador: vidro.js põe --vidro-lente: url(#lente-N) em
                        quem tem .vidro--lente. O filtro SVG refaz o corpo (desfoque, saturação,
                        brilho, lidos de --vidro-filtro) e depois refrata a borda (feDisplacementMap).
                        Safari/Firefox/celular: camadas 1-3.
   5. Sem backdrop .... fundo rgba(22,23,27,.92).

   Consequências para quem usa:
   - .vidro usa ::before e ::after. Para enfeite extra, use um filho, não pseudo-elemento.
   - .vidro cria contexto de empilhamento (isolation) e é containing block de filhos fixed.
   - Conteúdo fica entre o brilho (atrás) e a borda (na frente).
   - Raio: defina --vidro-raio no elemento; filhos usam .raio-dentro (raio − --vidro-recuo).
   - No celular, no máximo 3 ou 4 vidros com blur visíveis ao mesmo tempo. */

.vidro {
  --vidro-raio: var(--raio-painel);
  --vidro-recuo: 12px;                                      /* espaço até o filho (raios concêntricos) */
  --vidro-fundo: rgb(255 255 255 / .055);
  --vidro-filtro: blur(22px) saturate(170%) brightness(1.08);
  --vidro-borda: linear-gradient(var(--vidro-borda-angulo, 150deg),
      rgb(255 255 255 / .62) 0%,
      rgb(255 255 255 / .22) 18%,
      rgb(255 255 255 / .07) 42%,
      rgb(255 255 255 / .02) 72%,
      rgb(255 255 255 / .06) 100%);
  --vidro-brilho-cor: rgb(255 255 255 / .16);
  --vidro-brilho-tam: 75% 85%;
  --vidro-sombra: 0 30px 60px -30px rgb(0 0 0 / .75), 0 2px 8px -2px rgb(0 0 0 / .35);
  --vidro-texto-2: #CDCDD2;                                 /* texto secundário sobre vidro (AA sobre luz) */
  --mx: .22;
  --my: 0;

  isolation: isolate;
  border-radius: var(--vidro-raio);
  background-color: var(--vidro-fundo);
  -webkit-backdrop-filter: var(--vidro-filtro);
  backdrop-filter: var(--vidro-lente, var(--vidro-filtro));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .30), var(--vidro-sombra);
  color: var(--gelo);
}

/* âncora das camadas ::before/::after. Um <dialog> modal fica de fora: qualquer regra de autor
   vence a do navegador (dialog:modal { position: fixed }) e o modal sairia do lugar. */
.vidro:where(:not(dialog)) { position: relative; }

/* 2. Borda de luz (na frente do conteúdo, sem pegar clique) */
.vidro::before {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  border-radius: inherit;
  padding: 1px;
  background: var(--vidro-borda);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}

/* 3. Brilho especular (atrás do conteúdo, acima do corpo) */
.vidro::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(var(--vidro-brilho-tam) at calc(var(--mx) * 100%) calc(var(--my) * 100%),
      var(--vidro-brilho-cor), rgb(255 255 255 / .035) 45%, transparent 72%);
  pointer-events: none;
}

/* ---------- Variações ---------- */
.vidro--pilula { --vidro-raio: 999px; }
.vidro--redondo { --vidro-raio: 50%; }

/* Controles pequenos sobre mídia: menos blur, mais barato */
.vidro--fino {
  --vidro-filtro: blur(14px) saturate(160%) brightness(1.06);
  --vidro-fundo: rgb(255 255 255 / .1);
  --vidro-sombra: 0 10px 24px -12px rgb(0 0 0 / .6);
}

/* Sobre mídia muito clara ou agitada: um pouco de fumaça para o texto ler */
.vidro--fumaca {
  --vidro-fundo: rgb(18 18 22 / .34);
}

/* Filho com raio concêntrico: raio de fora − recuo */
.raio-dentro { border-radius: max(8px, calc(var(--vidro-raio) - var(--vidro-recuo))); }

/* 5. Navegador sem backdrop-filter */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .vidro { background-color: rgb(22 23 27 / .92); }
}

/* Quem pede menos transparência recebe a superfície fosca */
@media (prefers-reduced-transparency: reduce) {
  .vidro {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: rgb(22 23 27 / .96);
  }
}

/* Contêiner dos filtros da lente (criado por vidro.js) */
.lentes-svg { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }