/* Vidro líquido — estilos portados do componente "Glass Card".
   Cada .lg define --lg-r (raio) e --lg-rim (espessura da borda). */

.lg {
  --lg-r: 26px;
  --lg-rim: 12px;
  --lg-blur: 11px;
  --lg-tint: rgba(255, 255, 255, 0.06);
  --lg-sx: 0px;
  --lg-sy: 0px;
  --lg-wx: 0px;
  --lg-rx: 0px;
  --lg-ry: 0px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 0;
  border-radius: var(--lg-r);
  background: transparent;
  box-shadow: 0 26px 60px -26px rgba(0, 0, 0, 0.6), 0 10px 26px -18px rgba(0, 0, 0, 0.45);
  transition: transform 0.3s var(--ease), opacity 0.8s var(--ease);
}

/* o conteúdo fica acima das camadas de vidro */
.lg > :not(.lg-layers) { position: relative; z-index: 1; }

.lg-layers,
.lg-layers > span,
.lg-light > span {
  position: absolute;
  pointer-events: none;
}

.lg-layers { inset: 0; z-index: 0; border-radius: inherit; }

/* corpo fosco, recuado para a borda enxergar o fundo sem desfoque */
.lg-body {
  inset: var(--lg-rim);
  border-radius: max(calc(var(--lg-r) - var(--lg-rim)), 6px);
  background: var(--lg-tint);
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(160%) brightness(1.02);
  backdrop-filter: blur(var(--lg-blur)) saturate(160%) brightness(1.02);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

/* recorta uma camada num anel da espessura da borda */
.lg-rim,
.lg-chroma {
  inset: 0;
  box-sizing: border-box;
  padding: var(--lg-rim);
  border-radius: inherit;
  -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);
}

/* borda que distorce o fundo (Chrome/Edge); nos outros navegadores, só fosca */
.lg-rim {
  -webkit-backdrop-filter: blur(1px) saturate(172%) brightness(1.07);
  backdrop-filter: blur(1px) saturate(172%) brightness(1.07);
}

.lg-refracts .lg-rim {
  -webkit-backdrop-filter: url(#lg-refract) blur(1px) saturate(172%) brightness(1.07);
  backdrop-filter: url(#lg-refract) blur(1px) saturate(172%) brightness(1.07);
}

.lg-light { inset: 0; overflow: hidden; isolation: isolate; border-radius: inherit; }

/* a borda pega mais luz num canto e no canto oposto */
.lg-chroma {
  background-image: linear-gradient(125deg, rgba(255, 255, 255, 0.3) 0%, transparent 36%, transparent 64%, rgba(214, 226, 255, 0.26) 100%);
  mix-blend-mode: plus-lighter;
  transform: translate(var(--lg-rx), var(--lg-ry));
  transition: transform 0.45s var(--ease);
}

/* reflexo que acompanha o cursor */
.lg-spec {
  left: 30%;
  top: 28%;
  width: 260px;
  height: 260px;
  margin: -130px 0 0 -130px;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.07) 48%, transparent 74%);
  mix-blend-mode: plus-lighter;
  transform: translate(var(--lg-sx), var(--lg-sy));
  transition: transform 0.45s var(--ease);
}

/* linha de luz no topo */
.lg-sweep {
  top: 0;
  left: 29%;
  width: 42%;
  height: calc(var(--lg-rim) + 2px);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.22) 55%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 42%, #000 58%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 42%, #000 58%, transparent);
  mix-blend-mode: plus-lighter;
  transform: translateX(var(--lg-wx));
  transition: transform 0.45s var(--ease);
}

.lg-shade { inset: 0; background: linear-gradient(to bottom, transparent 48%, rgba(0, 0, 0, 0.2) 100%); }

.lg-ring {
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.15), inset 0 -1px 0 rgba(255, 255, 255, 0.12);
}

@media (hover: hover) and (pointer: fine) {
  .lg:hover { transform: translateY(-3px) scale(1.006); }
}

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