/* Botões em vidro líquido e fundo WebGL das áreas sem imagem. */
:root {
  --lg-corpo: linear-gradient(168deg, rgba(255,255,255,.95) 0%, rgba(250,245,235,.72) 48%, rgba(201,169,97,.16) 100%);
  --lg-borda: linear-gradient(170deg, rgba(201,169,97,.95), rgba(201,169,97,.42) 45%, rgba(138,109,47,.28) 100%);
  --lg-especular: rgba(228,207,155,.55);
  --lg-blur: blur(18px) saturate(165%);
  --lg-profundidade: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(60,44,12,.14), 0 10px 26px -12px rgba(60,44,12,.28);
}
.theme-dark {
  --lg-corpo: linear-gradient(168deg, rgba(232,214,186,.16) 0%, rgba(166,140,106,.07) 46%, rgba(10,9,8,.28) 100%);
  --lg-borda: linear-gradient(170deg, rgba(240,226,202,.62), rgba(217,191,152,.2) 40%, rgba(255,255,255,.05) 100%);
  --lg-especular: rgba(246,232,206,.32);
  --lg-profundidade: inset 0 1px 0 rgba(255,255,255,.12), 0 1px 2px rgba(0,0,0,.42), 0 12px 30px -12px rgba(0,0,0,.6);
}
.vidro {
  position: relative; isolation: isolate; border: 0; border-radius: 14px; overflow: hidden;
  background: var(--lg-corpo);
  -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
  box-shadow: var(--lg-profundidade);
  transition: box-shadow .4s, transform .22s, color .3s;
}
.vidro-ouro {
  --lg-corpo: linear-gradient(168deg, rgba(243,226,184,.97) 0%, rgba(214,183,114,.95) 48%, rgba(176,142,70,.96) 100%);
  --lg-borda: linear-gradient(170deg, rgba(255,250,235,.95), rgba(255,240,205,.34) 42%, rgba(120,92,36,.5) 100%);
  --lg-especular: rgba(255,250,235,.8);
  --lg-profundidade: inset 0 1px 0 rgba(255,255,255,.6), 0 1px 2px rgba(60,44,12,.28), 0 12px 28px -12px rgba(120,92,36,.6);
}
.vidro-verde {
  --lg-corpo: linear-gradient(168deg, rgba(84,232,142,.96) 0%, rgba(37,211,102,.94) 50%, rgba(22,160,76,.96) 100%);
  --lg-borda: linear-gradient(170deg, rgba(235,255,242,.9), rgba(255,255,255,.2) 45%, rgba(10,90,44,.4) 100%);
  --lg-especular: rgba(235,255,242,.7);
  --lg-profundidade: inset 0 1px 0 rgba(255,255,255,.45), 0 1px 2px rgba(6,60,28,.3), 0 12px 28px -10px rgba(14,120,58,.6);
}
.vidro::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px; background: var(--lg-borda);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.vidro::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(130px circle at var(--mx, 50%) var(--my, 0%), var(--lg-especular), transparent 68%);
  opacity: 0; transition: opacity .45s;
}
.vidro:hover::after { opacity: 1; }
.vidro:active { transform: scale(.978); }
.vidro:focus-visible { outline: 2px solid #8a6d2f; outline-offset: 3px; }
.theme-dark .vidro:focus-visible { outline-color: #e4cf9b; }
.vidro.music-glow::after { background: none; }
@media (hover: none) { .vidro::after { opacity: .75; } }
@media (max-width: 767px) { :root { --lg-blur: blur(9px) saturate(165%); } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .vidro-neutro { background: #fff; }
  .theme-dark .vidro-neutro { background: rgba(22,20,17,.92); }
}
@media (prefers-reduced-motion: reduce) { .vidro { transition: none; } .vidro:active { transform: none; } }

.fumaca { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background: radial-gradient(90% 120% at 78% 12%, #26272b 0%, #101114 42%, #050505 78%); }
.fumaca canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1.8s ease; }
.fumaca canvas.on { opacity: 1; }