/* Fundo vivo (malha de gradientes) e a aba Aparencia das Configuracoes. */

/* ---------- fundo vivo: malha de gradientes ----------
   Substituiu as bolhas "goo" (§5 do roadmap: era a receita de CodePen que
   todo mundo reconhece, e o item mais caro da pagina).

   O goo tambem tinha um defeito de construcao: os raios de orbita estavam
   em PIXELS FIXOS (transform-origin:calc(50% - 380px)). Numa tela larga,
   380px e um circulo pequeno no meio — quanto maior o monitor, mais a
   animacao se concentrava num ponto so e mais os cantos ficavam mortos.
   Somado a isso as cinco bolhas nasciam todas entre 14% e 26%, empilhadas
   no centro, com apenas 12% de sangria para viajar.

   A malha resolve isso por construcao, nao por ajuste: cada camada e uma
   folha inteira com gradientes ANCORADOS EM PORCENTAGEM nos quatro cantos
   e no centro. Nao existe "a bolha" que possa sair de cena — a cor ja
   nasce cobrindo o campo todo, e a animacao so faz a folha respirar.

   Custo: tres camadas compostas cujo unico atributo animado e transform.
   Nenhum filtro SVG, nenhum blur(), nenhum repaint por quadro — o
   compositor resolve tudo na GPU. */
.fundoVivo{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none;
           background:linear-gradient(155deg,
             hsl(var(--hNe) calc(30% * var(--satNe)) var(--malhaB1)) 0%,
             hsl(var(--hNe) calc(34% * var(--satNe)) var(--malhaB2)) 52%,
             hsl(var(--hAc) calc(30% * var(--satAc)) var(--malhaB3)) 100%)}
/* a sangria de 30% e o que garante que o canto nunca apareca vazio quando
   a folha desliza ou cresce */
.malha{position:absolute;inset:-30%;will-change:transform;backface-visibility:hidden}
.malha.m1{background:
    radial-gradient(42% 46% at 18% 24%,
      hsl(var(--hAc) 62% var(--malhaL)/var(--malhaA)) 0,transparent 68%),
    radial-gradient(38% 44% at 82% 16%,
      hsl(calc(var(--hAc) + 44) 58% var(--malhaL)/calc(var(--malhaA) * .78)) 0,transparent 66%);
  animation:deriva1 46s ease-in-out infinite alternate}
.malha.m2{background:
    radial-gradient(46% 50% at 78% 80%,
      hsl(calc(var(--hAc) - 52) 55% var(--malhaL)/calc(var(--malhaA) * .84)) 0,transparent 70%),
    radial-gradient(40% 42% at 12% 84%,
      hsl(var(--hAc) 60% var(--malhaL)/calc(var(--malhaA) * .72)) 0,transparent 66%);
  animation:deriva2 63s ease-in-out infinite alternate}
.malha.m3{background:
    radial-gradient(58% 62% at 50% 48%,
      hsl(calc(var(--hAc) + 20) 50% var(--malhaL)/calc(var(--malhaA) * .46)) 0,transparent 74%);
  animation:deriva3 81s ease-in-out infinite alternate}
/* amplitudes pequenas de proposito: com os gradientes ja espalhados pelo
   campo, o que falta e respiracao, nao viagem. Escala e translacao em %
   acompanham qualquer tamanho de tela — que era o bug do goo. */
@keyframes deriva1{from{transform:translate3d(-4%,-3%,0) scale(1.04)}
                     to{transform:translate3d( 5%, 4%,0) scale(1.14)}}
@keyframes deriva2{from{transform:translate3d( 4%, 3%,0) scale(1.12)}
                     to{transform:translate3d(-5%,-4%,0) scale(1.02)}}
@keyframes deriva3{from{transform:translate3d( 0, 2%,0) scale(1.06) rotate(0deg)}
                     to{transform:translate3d( 0,-2%,0) scale(1.15) rotate(7deg)}}
/* desligado pelo usuario, ou quando ha video ocupando o palco */
.stage.temVideo .fundoVivo,.fundoVivo.off{opacity:0}
.fundoVivo{transition:opacity .5s}
@media (prefers-reduced-motion:reduce){ .malha{animation:none!important} }

/* ---------- aba Aparencia ----------
   Todos os controles daqui escrevem nos seis eixos do :root e em mais
   nada. E o que mantem "trocar de tema" como seis linhas de JS em vez de
   uma varredura pelo CSS. */
.apGrupo{margin-bottom:22px}
.apGrupo:last-child{margin-bottom:0}
.apGrupo>.hint:first-of-type{margin-top:8px}
.apCab{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.apVal{font:500 11px/1 ui-monospace,Consolas,monospace;color:var(--tx3);
       font-variant-numeric:tabular-nums}
.apGrupo input[type=range]{width:100%;margin:0;padding:0;background:transparent;
                           border:0;box-shadow:none;accent-color:var(--ac)}
/* segmentado do tema: mesma linguagem do .seg do painel direito */
.apSeg{display:flex;gap:2px;padding:2px;border-radius:var(--r);background:var(--sup2)}
.apSeg button{flex:1;border:0;background:transparent;color:var(--tx2);
              font-size:12.5px;padding:7px 0;border-radius:6px}
.apSeg button:hover{background:var(--sup2);color:var(--tx)}
.apSeg button.at{background:hsl(var(--acRaw)/.18);color:var(--ac2)}
/* O swatch mostra a RAMPA, nao um circulo de uma cor so: duas paletas
   podem ter o mesmo acento e neutros diferentes, e e o conjunto que o
   usuario vai ver na tela. */
.apPaletas{display:grid;grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:8px}
.apPal{display:flex;flex-direction:column;gap:7px;padding:8px;border-radius:var(--r);
       background:transparent;border:1px solid var(--linha);cursor:pointer;text-align:left}
.apPal:hover{border-color:var(--ac7);background:hsl(var(--acRaw)/.08)}
.apPal.at{border-color:var(--ac);background:hsl(var(--acRaw)/.14)}
.apTiras{display:flex;gap:2px;height:22px;padding:3px;border-radius:5px}
.apTiras i{flex:1;border-radius:2px}
.apPal>span:last-child{font-size:11.5px;font-weight:500;color:var(--tx2)}
.apPal.at>span:last-child{color:var(--ac2)}
/* Previa do vidro. Sem ela o slider de desfoque e um numero abstrato: o
   efeito acontece ATRAS dos paineis, que estao na outra tela, escondidos
   por este proprio modal. */
.apPrevia{position:relative;height:82px;border-radius:var(--r);overflow:hidden;
          background:repeating-linear-gradient(58deg,
            hsl(var(--hAc) 55% var(--malhaL)) 0 15px,
            hsl(calc(var(--hAc) + 55) 50% calc(var(--malhaL) * .68)) 15px 30px)}
.apPrevia i{position:absolute;inset:15px;border-radius:var(--r);font-style:normal;
            background:hsl(var(--vidroPRaw)/var(--opq));
            backdrop-filter:blur(var(--vidro)) saturate(1.15);
            -webkit-backdrop-filter:blur(var(--vidro)) saturate(1.15);
            box-shadow:var(--vidroSombra);display:grid;place-items:center;
            font-size:11.5px;font-weight:500;color:var(--tx2)}
/* Com o desfoque em zero, o backdrop-filter continua criando uma camada de
   composicao na GPU e cobrando por nada. Desligar a propriedade e o que de
   fato devolve o desempenho — este e o item 1 do §4 do roadmap, virado
   escolha do usuario. */
:root[data-vidro="0"] *{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}