/*!
 * Liquid Glass — camadas
 * Ordem igual à decomposição da Apple: lente (refração) → fosco → anel especular → conteúdo.
 * Requer liquid-glass.js, que preenche --lg-url com o filtro SVG do elemento.
 */

.lg {
  --lg-r: 999px;
  --lg-bevel: 15%;          /* largura da parede, % do menor lado; teto de 34px no JS */
  --lg-exp: 6;              /* subida da parede: maior = centro mais plano, parede mais abrupta */
  --lg-tip: .35;            /* queda antes da aresta. Perfil é u^exp·(1-u)^tip,
                               curva única — produto de duas curvas cria vinco
                               no pico e o vinco vira linha de cáustica. */
  --lg-ca: 0;               /* dispersão cromática. Desligada: vira linha colorida onde a lente dobra */
  --lg-url: none;           /* preenchido pelo JS */

  /* Meio pixel de blur DEPOIS do deslocamento. Na ponta do gancho o mapeamento
     tem uma dobra — cáustica — onde o gradiente é infinito e qualquer offset
     entre canais vira pixel saturado. O render de referência resolve isso por
     supersampling, que backdrop-filter não oferece; meio pixel antialiasa a
     dobra sem tirar nitidez do conteúdo. */
  --lg-blur: .5px;
  --lg-sat: 1.35;
  --lg-bright: 1;
  --lg-tint: transparent;

  /* cúpula: reflexo largo do céu na face. É isto que dá leitura de VOLUME —
     sem ele o vidro lê como película fina, por mais correta que a refração
     esteja. A normal da refração não serve para iluminar: ela é confinada à
     borda e deixa o miolo chapado.

     Centrada em x DE PROPÓSITO. A luz vem de cima, e só de cima: qualquer
     deslocamento horizontal faz a ponta esquerda e a direita mostrarem coisas
     diferentes, e num limite duro atravessando a peça isso lê como defeito. */
  --lg-sheen: .14;
  --lg-sheen-x: 50%;
  --lg-sheen-y: 4%;
  --lg-absorb: .055;        /* absorção no rodapé: vidro espesso escurece o que passa */

  /* anel especular: forte em cima, contra-brilho fraco embaixo — simétrico em x */
  --lg-edge-w: 1.5px;
  --lg-edge-key: 0.92;
  --lg-edge-back: 0.55;

  /* brilho interno da parede. O fio de 1.5px define a silhueta; é esta faixa
     larga e macia, deslocada na direção da luz, que dá o aro luminoso das
     referências. O deslocamento é só vertical: inset igual dos quatro lados
     vira anel de cartoon, mas deslocar em x quebra a simetria esquerda/direita. */
  --lg-wall-key: .5;
  --lg-wall-back: .3;
  --lg-wall-blur: 5px;

  --lg-shadow:
    0 1px 1px rgba(0, 0, 0, .05),
    0 6px 14px -4px rgba(0, 0, 0, .08),
    0 18px 40px -12px rgba(0, 0, 0, .11);

  position: relative;
  border-radius: var(--lg-r);
  isolation: isolate;
  /* Recorta o conteúdo interno. Não contém o backdrop-filter — o Chrome
     compõe a saída dele no backdrop root, fora do alcance de overflow e
     clip-path. O vazamento é resolvido no normal map, deixando a margem
     neutra (ver liquid-glass.js). */
  overflow: hidden;
  box-shadow: var(--lg-shadow);
  color: #fff;
  -webkit-tap-highlight-color: transparent;
}

/* ── 1+2. lente: refração + fosco. Sempre inset 0, nunca tinge o miolo por padrão. ── */
.lg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background:
    /* cúpula — brilho largo e macio no terço superior */
    radial-gradient(125% 95% at var(--lg-sheen-x) var(--lg-sheen-y),
      rgba(255, 255, 255, var(--lg-sheen)) 0%,
      rgba(255, 255, 255, calc(var(--lg-sheen) * .34)) 34%,
      rgba(255, 255, 255, 0) 62%),
    /* absorção — o fundo escurece de leve ao sair pela base */
    linear-gradient(to top,
      rgba(0, 0, 0, var(--lg-absorb)) 0%,
      rgba(0, 0, 0, 0) 38%),
    var(--lg-tint);
  box-shadow:
    inset 0 3px var(--lg-wall-blur) -2px rgba(255, 255, 255, var(--lg-wall-key)),
    inset 0 -3px var(--lg-wall-blur) -2px rgba(255, 255, 255, var(--lg-wall-back));
  clip-path: inset(0 round var(--lg-r));
  -webkit-backdrop-filter:
    var(--lg-url) blur(var(--lg-blur)) saturate(var(--lg-sat)) brightness(var(--lg-bright));
  backdrop-filter:
    var(--lg-url) blur(var(--lg-blur)) saturate(var(--lg-sat)) brightness(var(--lg-bright));
}

/* ── 3. anel especular (truque de borda por máscara) ──
   A 180°, não na diagonal: a diagonal fazia a ponta esquerda e a direita
   mostrarem coisas diferentes. Medido espelhando a peça na vertical, a
   diferença máxima caiu de 129/255 para 2/255 só com esta troca. */
.lg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: var(--lg-edge-w);
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, var(--lg-edge-key)) 0%,
    rgba(255, 255, 255, calc(var(--lg-edge-key) * .45)) 16%,
    rgba(255, 255, 255, .04) 38%,
    rgba(255, 255, 255, .04) 58%,
    rgba(255, 255, 255, calc(var(--lg-edge-back) * .38)) 80%,
    rgba(255, 255, 255, var(--lg-edge-back)) 100%
  );
  -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, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

/* ── 4. conteúdo acima de tudo ── */
.lg > * {
  position: relative;
  z-index: 3;
}

/* ═══════════ VARIANTES DE MATERIAL ═══════════ */

/* Clear — totalmente transparente. Só refrata. É o padrão das referências.
   Saturação quase neutra: acima de ~1.1 ela amplifica ruído do backdrop e o
   miolo perde o aspecto de "nada ali". */
.lg--clear {
  --lg-blur: .5px;
  --lg-sat: 1.06;
  --lg-tint: transparent;
}

/* Frost — blur branco. Camada de navegação sobre conteúdo. */
.lg--frost {
  --lg-sheen: .10;
  --lg-blur: 14px;
  --lg-sat: 1.8;
  --lg-bright: 1.06;
  --lg-tint: rgba(255, 255, 255, .16);
}

/* Frost escuro — mesma receita, véu escuro. */
.lg--frost-dark {
  --lg-wall-key: .26;
  --lg-wall-back: .12;
  --lg-sheen: .07;
  --lg-absorb: .09;
  --lg-blur: 18px;
  --lg-sat: 1.7;
  --lg-bright: .96;
  --lg-tint: rgba(8, 10, 14, .14);
  --lg-edge-key: .5;
  --lg-edge-back: .18;
  --lg-shadow:
    0 1px 1px rgba(0, 0, 0, .10),
    0 8px 20px -6px rgba(0, 0, 0, .18);
}

/* ═══════════ ÍCONE / TEXTO ═══════════ */

.lg--on-dark  { color: #fff; }                        /* sobre fundo escuro */
.lg--on-light { color: #14161a; }                     /* sobre fundo claro  */

.lg--on-dark  .lg-glyph { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); }
.lg--on-light .lg-glyph { filter: drop-shadow(0 1px 2px rgba(255, 255, 255, .55)); }

.lg-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ═══════════ INTERAÇÃO ═══════════ */

.lg--interactive {
  cursor: pointer;
  transition: transform .34s cubic-bezier(.22, 1, .36, 1),
              box-shadow .34s cubic-bezier(.22, 1, .36, 1);
}
.lg--interactive:hover  { transform: translateY(-1px) scale(1.012); }
.lg--interactive:active { transform: translateY(0) scale(.985); }

.lg--interactive:focus-visible {
  outline: 2px solid rgba(10, 132, 255, .9);
  outline-offset: 3px;
}

/* ═══════════ ACESSIBILIDADE ═══════════ */

@media (prefers-reduced-transparency: reduce) {
  .lg::before {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(245, 246, 248, .94);
  }
  .lg--frost-dark::before,
  .lg--on-dark::before { background: rgba(24, 26, 32, .94); }
}

@media (prefers-reduced-motion: reduce) {
  .lg--interactive { transition: none; }
  .lg--interactive:hover,
  .lg--interactive:active { transform: none; }
}

/* ═══════════════════════════════════════════════════════════
   DEGRADAÇÃO POR SUPORTE
   O JS marca <html data-lg-suporte="full|blur|none">.
   ═══════════════════════════════════════════════════════════ */

/* Sem filtro SVG em backdrop-filter (Firefox hoje): fosco puro, sem refração.
   O aro, a cúpula e a sombra continuam, então a peça ainda lê como vidro. */
[data-lg-suporte="blur"] .lg {
  --lg-url: none;
}
[data-lg-suporte="blur"] .lg--clear {
  --lg-blur: 10px;
  --lg-tint: rgba(255, 255, 255, .10);
}

/* Sem backdrop-filter nenhum: superfície opaca legível. */
[data-lg-suporte="none"] .lg::before {
  background: rgba(246, 247, 250, .92);
}
[data-lg-suporte="none"] .lg--frost-dark::before,
[data-lg-suporte="none"] .lg--on-dark::before {
  background: rgba(26, 28, 34, .92);
}

/* Cinto e suspensório para o caso de o JS não rodar. */
@supports not (backdrop-filter: blur(1px)) {
  .lg::before { background: rgba(246, 247, 250, .92); }
}

/* backdrop-filter não imprime; garante contraste no papel. */
@media print {
  .lg::before { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .lg { box-shadow: none; border: 1px solid #ccc; }
}


/* ═══════════════════════════════════════════════════════════
   FORMAS PRONTAS
   Só geometria. O material vem das variantes acima.
   ═══════════════════════════════════════════════════════════ */

/* Botão de ícone circular */
.lg-btn-circle {
  --lg-r: 999px;
  width: var(--lg-size, 56px);
  height: var(--lg-size, 56px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--lg-size, 56px) * .40);
  border: 0;
  background: none;
  padding: 0;
}

/* Botão pílula com rótulo */
.lg-btn-pill {
  --lg-r: 999px;
  height: var(--lg-size, 52px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 calc(var(--lg-size, 52px) * .46);
  font-size: 15px;
  font-weight: 550;
  border: 0;
  background: none;
  color: inherit;
}

/* Botão quadrado de cantos arredondados (squircle de app) */
.lg-btn-square {
  --lg-r: calc(var(--lg-size, 60px) * .30);
  width: var(--lg-size, 60px);
  height: var(--lg-size, 60px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--lg-size, 60px) * .38);
  border: 0;
  background: none;
  padding: 0;
}

/* Barra de ferramentas / dock: vários ícones num vidro só */
.lg-bar {
  --lg-r: 999px;
  height: var(--lg-size, 60px);
  display: inline-flex;
  align-items: center;
  gap: var(--lg-gap, 8px);
  padding: 0 10px;
}
.lg-bar > button,
.lg-bar > a {
  width: calc(var(--lg-size, 60px) - 16px);
  height: calc(var(--lg-size, 60px) - 16px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: none;
  color: inherit;
  font-size: 18px;
  cursor: pointer;
  transition: background .18s ease;
}
.lg-bar > button:hover,
.lg-bar > a:hover { background: rgba(127, 127, 127, .16); }

/* Cartão / painel */
.lg-card {
  --lg-r: 28px;
  --lg-bevel: 26%;
  padding: 22px 24px;
}

/* Chip / tag */
.lg-chip {
  --lg-r: 999px;
  --lg-bevel: 44%;
  height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 15px;
  font-size: 13px;
  font-weight: 550;
}

/* Toggle / switch */
.lg-toggle {
  --lg-r: 999px;
  --lg-bevel: 46%;
  width: 64px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border: 0;
  cursor: pointer;
}
.lg-toggle > .lg-knob {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .28);
  transition: transform .26s cubic-bezier(.22, 1, .36, 1);
}
.lg-toggle[aria-pressed="true"] > .lg-knob { transform: translateX(28px); }

/* ═══════════════════════════════════════════════════════════
   ÍCONE AUTOMÁTICO POR ESQUEMA DE COR
   Use .lg--on-auto quando o fundo acompanha o tema do sistema.
   Para vidro sobre imagem, escolha on-light/on-dark na mão.
   ═══════════════════════════════════════════════════════════ */
.lg--on-auto { color: #14161a; }
.lg--on-auto .lg-glyph { filter: drop-shadow(0 1px 2px rgba(255, 255, 255, .55)); }

@media (prefers-color-scheme: dark) {
  .lg--on-auto { color: #fff; }
  .lg--on-auto .lg-glyph { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); }
  .lg--frost.lg--on-auto {
    --lg-tint: rgba(10, 12, 16, .22);
    --lg-bright: .92;
    --lg-edge-key: .55;
    --lg-edge-back: .22;
  }
}