/* Referência NK: ouro polido largo, bronze nas sombras e luz de champanhe.
   O anel é vazado: nenhum conteúdo é copiado para simular o espelho. */
html:root[data-tema] {
  --espelho-metal: linear-gradient(112deg, #72430f 0%, #c58a29 12%, #fff1b9 18%, #efc366 23%, #9b631b 34%, #edbb57 45%, #fff8d5 51%, #c99337 60%, #75450e 72%, #ffda82 86%, #a86e22 100%);
  --espelho-espessura: 2.2px;
  --espelho-tempo: 16s;
}
html:root[data-tema="claro"] {
  --espelho-metal: linear-gradient(112deg, #815019, #c8953f 14%, #fff4cb 20%, #b47b25 32%, #e8c572 46%, #fff9e6 51%, #a67221 64%, #dbb461 85%, #815019);
}
html:root[data-tema] .aki-espelho-posicionado { position: relative; }
html:root[data-tema] .aki-espelho {
  /* Une os reflexos numa aresta interna sem alterar as medidas. */
  box-shadow: var(--lente-relevo), inset 0 2px 4px -2px #fff6, inset 0 -3px 4px -3px #6a3c08cc, var(--lente-sombra);
}
html:root[data-tema] :is(.botao, .botao-icone, .pilula, .nav-mais-destino).aki-espelho {
  --espelho-espessura: 1.3px; --espelho-tempo: 20s;
}
html:root[data-tema] :is(.modal, .nav-inferior, .cartao.midia).aki-espelho { --espelho-espessura: 2.6px; }
/* Os contornos antigos cedem a esta única película; fallback sem JS permanece. */
html:root[data-tema] :is(.bento-bloco, .nav-inferior, .topo-monograma).aki-espelho::after,
html:root[data-tema] .nav-inferior.aki-espelho::before { display: none; }
.aki-espelho-anel {
  position: absolute; inset: 0; z-index: 2; display: block;
  border-radius: inherit; padding: var(--espelho-espessura);
  overflow: hidden; pointer-events: none; user-select: none;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.aki-espelho-anel::before {
  content: ''; position: absolute; inset: 0 -50%;
  background: var(--espelho-metal);
  transform: translateX(-20%);
  animation: aki-metal-espelhado var(--espelho-tempo) ease-in-out infinite alternate;
  animation-play-state: paused;
}
/* A película desliza no compositor; não se anima blur, máscara nem geometria. */
@keyframes aki-metal-espelhado { to { transform: translateX(20%); } }
html:not([data-tema-movimento="parado"]):not([data-espelho-pausado]) .aki-espelho[data-espelho-visivel] > .aki-espelho-anel::before,
html:not([data-tema-movimento="parado"]):not([data-espelho-pausado]) .aki-espelho[data-espelho-visivel] > .aki-espelho-anel::after { animation-play-state: running; }
/* Um reflexo amplo e lento nas superfícies de comando. O restante recebe o
   movimento do metal, conservando o centro livre de varreduras de luz. */
html:root[data-tema] :is(.nav-inferior, .cartao.midia, .modal, .bento-destaque).aki-espelho > .aki-espelho-anel::after {
  content: ''; position: absolute; inset: 0 -50%;
  background: linear-gradient(106deg, transparent 30%, #fff3c533 44%, #fff9df9c 49%, transparent 57%);
  animation: aki-metal-espelhado 11s ease-in-out infinite alternate-reverse;
  animation-play-state: paused;
}
/* Campos recebem o mesmo polimento estático, sem cobrir setas de seleção,
   cores de validação ou a área de digitação com películas animadas. */
html:root[data-tema] :is(input, textarea, select):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]) {
  border-color: var(--controle-borda);
  box-shadow: inset 0 1px 2px #0004, inset 0 -1px 0 #f8d98b66, 0 1px 0 #ffeec226;
}
html:root[data-tema] :is(.botao-perigo, .ouvindo, :disabled, [aria-disabled="true"]) > .aki-espelho-anel { display: none; }
html:root[data-tema] :is(.botao, .botao-icone, .pilula):disabled { box-shadow: none; }
html:root[data-tema] :is(input, textarea, select)[aria-invalid="true"] { border-color: var(--erro-tinta); }
html:root[data-tema] .conteudo h2[tabindex="-1"]:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce), (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  html .aki-espelho > .aki-espelho-anel::before,
  html .aki-espelho > .aki-espelho-anel::after { animation: none; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  html:root[data-tema] { --lente-base: var(--superficie); }
}
@media (forced-colors: active) { .aki-espelho-anel { display: none; } }
@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .aki-espelho-anel { display: none; }
}

/* O brasão se move sozinho; nenhum filtro ou transformação é aplicado ao
   conteúdo que aparece atrás de uma janela. Opacidade constante para leitura. */
html:root[data-acabamento] .tema-brasao {
  animation: aki-brasao-presenca 18s ease-in-out infinite alternate;
  animation-play-state: paused;
  transform-origin: 50% 48%;
}
@keyframes aki-brasao-presenca {
  0% { transform: translateX(-50%) translate3d(-12px, 10px, 0) perspective(900px) rotateY(-6deg) rotateZ(-2deg) scale(.985); }
  50% { transform: translateX(-50%) translate3d(8px, -10px, 0) perspective(900px) rotateY(3deg) rotateZ(1deg) scale(1.025); }
  100% { transform: translateX(-50%) translate3d(14px, 6px, 0) perspective(900px) rotateY(6deg) rotateZ(2deg) scale(1.01); }
}
html:root[data-acabamento]:not([data-tema-movimento="parado"]):not([data-tema-pausado]):not([data-espelho-pausado]) .tema-brasao[data-brasao-visivel] { animation-play-state: running; }
@media (prefers-reduced-motion: reduce), (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) {
  html:root[data-acabamento] .tema-brasao { animation: none !important; }
}