/* =========================================================
   AURIFEX STUDIO :: os fundos do site e a escolha deles (30/10/2026)
   Pedido dele: o fundo "mais apagado, mais de fundo de tela" e mais duas opções. Chave FUNDO_SITE de
   gerador/montar.py; a escolha está em js/fundo-escolha.js.
   ========================================================= */

/* a: o circuito ao fundo, com pouco mais da metade da força e um desfoque leve (menos nítido, como fundo de tela) */
.circuito-suave{opacity:.46;filter:blur(.55px)}

/* b: metal usinado; a chapa escovada repete sem emenda, e as faces usinadas aparecem por cima, fracas */
.metal-fundo{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;contain:strict}
.metal-fundo::before{content:"";position:absolute;inset:0;background:url(../img/fundo-metal.webp) 0 0/512px 512px repeat;opacity:.85}
.metal-fundo.claro::before{filter:invert(1);opacity:.6}
.metal-face{position:absolute;opacity:0;transition:opacity 2.2s ease}
.metal-face.vista{opacity:1}
.metal-face canvas{display:block;width:100%;height:100%}
.metal-fresa{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:rgb(var(--ouro-rgb,214 185 127));box-shadow:0 0 0 3px rgb(var(--ouro-rgb,214 185 127) / .16);opacity:0}

/* c: interface em traço */
.interface-fundo{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;contain:strict;opacity:.78}
.interface-peca{position:absolute;opacity:0;transition:opacity 2.2s ease}
.interface-peca.vista{opacity:1}
.interface-peca canvas{display:block;width:100%;height:100%}

/* a escolha, dentro da troca de paleta (no celular, dentro do menu) */
.fundos{margin-top:10px;padding-top:10px;border-top:1px solid var(--linha)}
.fundos-titulo{margin:0 0 8px;font-size:12px;font-weight:600;color:var(--texto-3)}
.fundos-lista{display:flex;flex-direction:column;gap:8px}
.fundos-lista button{display:inline-flex;align-items:center;gap:9px;min-height:40px;padding:0 13px 0 9px;border:1px solid var(--linha-forte);border-radius:var(--raio);background:var(--fundo);color:var(--texto);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;white-space:nowrap;transition:border-color .2s}
.fundos-lista button:hover{border-color:var(--ouro)}
.fundos-lista button[aria-pressed="true"]{border-color:var(--ouro)}
.fundo-mostra{flex:none;width:22px;height:22px;border-radius:4px;border:1px solid var(--linha-forte);background:var(--fundo);position:relative;overflow:hidden}
.fundo-mostra::before{content:"";position:absolute;inset:0}
.fundo-mostra-a::before{background:linear-gradient(var(--linha-forte),var(--linha-forte)) 4px 6px/12px 1px no-repeat,linear-gradient(var(--linha-forte),var(--linha-forte)) 15px 6px/1px 9px no-repeat,linear-gradient(rgb(var(--ouro-rgb,214 185 127)/.5),rgb(var(--ouro-rgb,214 185 127)/.5)) 6px 13px/5px 5px no-repeat;opacity:.7}
.fundo-mostra-b::before{background:repeating-linear-gradient(0deg,rgb(255 255 255 / .1) 0 1px,transparent 1px 3px)}
.fundo-mostra-c::before{inset:5px 4px;border:1px solid var(--linha-forte);border-radius:2px;box-shadow:inset 0 3px 0 -2px var(--linha-forte)}
.fundo-mostra-antes::before{background:linear-gradient(var(--texto-3),var(--texto-3)) 4px 6px/12px 1px no-repeat,linear-gradient(var(--texto-3),var(--texto-3)) 15px 6px/1px 9px no-repeat,linear-gradient(rgb(var(--ouro-rgb,214 185 127)),rgb(var(--ouro-rgb,214 185 127))) 6px 13px/5px 5px no-repeat}
@media (max-width:980px){.fundos-lista{flex-direction:row;flex-wrap:wrap}}