/* =====================================================================
   Gestão do Desbagunça — Materiais e textura (Tarefa 1.2 do painel-ux-2)
   ---------------------------------------------------------------------
   Vidro fosco, grão, relevo, o encaixe laranja e a luz que segue o mouse. Copiado do protótipo aprovado
   (docs/prototipo/painel-ux-2/index.html); toda cor, sombra, raio e duração vem de css/tokens.css.
   Carregado depois de gestao.css (mesma especificidade: este arquivo ganha).

   • Vidro: só nas superfícies que flutuam (topo, diálogo, folha, coluna do andamento). O fundo é tinta
     translúcida que já garante o contraste AA do texto; o desfoque só embeleza. Com
     prefers-reduced-transparency ou sem backdrop-filter, os tokens --vidro-fundo* viram o sólido e
     --vidro-desfoque vira none (tokens.css): aqui não há valor próprio.
   • Grão: SVG feTurbulence em data: numa camada fixa atrás do conteúdo. Estático, sem custo por quadro.
   • Luz: o JS (js/efeitos/luz.js) só escreve --luz-x/--luz-y na peça sob o ponteiro; aqui está o gradiente.
   • Só transform e opacity animam.
   ===================================================================== */

/* ---------------- Fundo vivo: auras + grão (atrás de tudo, estático) ---------------- */
.ambiente { position: fixed; inset: 0; z-index: var(--z-fundo); pointer-events: none; overflow: hidden; contain: strict; }
.ambiente::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(closest-side circle at 0% 0%, var(--aura-verde), transparent) 0 0 / 70vmax 70vmax no-repeat,
    radial-gradient(closest-side circle at 100% 100%, var(--aura-abob), transparent) 100% 100% / 70vmax 70vmax no-repeat;
}
.ambiente::after { content: ""; position: absolute; inset: 0; background-image: var(--grao-img); background-size: 180px 180px; opacity: var(--grao-op); }

/* ---------------- Movimento vivo (js/efeitos/movimento.js) ---------------- */
/* Aura viva: a opacidade segue quantos agentes trabalham (data-atividade 0 a 2); a deriva lenta de transform é feita pelo JS.
   Na versão calma a camada some (as auras estáticas do ::before ficam). */
.aura-viva {
  position: absolute; inset: -10vmax; opacity: 0; will-change: transform, opacity;
  background:
    radial-gradient(closest-side circle at 28% 24%, var(--aura-verde), transparent) 0 0 / 60vmax 60vmax no-repeat,
    radial-gradient(closest-side circle at 72% 78%, var(--aura-onda), transparent) 100% 100% / 70vmax 70vmax no-repeat;
  transition: opacity var(--dur-cena) var(--curva-saida);
}
.ambiente[data-atividade="1"] .aura-viva { opacity: .6; }
.ambiente[data-atividade="2"] .aura-viva { opacity: 1; }
/* Onda: um anel leve que se abre a cada sinal novo de um agente (js/efeitos/movimento.js, onda()); parada, é invisível */
.onda-viva {
  position: absolute; left: 50%; top: 40%; width: 90vmax; height: 90vmax; margin: -45vmax 0 0 -45vmax; opacity: 0; transform: scale(.4);
  background: radial-gradient(closest-side, transparent 55%, var(--aura-onda) 75%, transparent);
}
@media (prefers-reduced-motion: reduce) { .aura-viva, .onda-viva { display: none; } }
[data-movimento="calmo"] .aura-viva, [data-movimento="calmo"] .onda-viva { display: none; }

/* Número que rola: colunas de dígitos (0 a 9) deslizam em translateY dentro de uma janela de 1em; os dígitos vêm de data-d
   (o texto real está no .so-leitor, com aria-live) */
.numero { position: relative; display: inline-flex; }
.rolo { display: inline-flex; font-variant-numeric: tabular-nums; }
.rolo-digito { display: inline-block; height: 1em; line-height: 1; overflow: hidden; }
.rolo-coluna { display: flex; flex-direction: column; will-change: transform; }
.rolo-coluna > span, .rolo-fixo { height: 1em; line-height: 1; }
.rolo-coluna > span::before, .rolo-fixo::before { content: attr(data-d); }

/* Transição entre painel e trabalho: só esmaece (opacidade), com a duração e a curva dos tokens */
/* O padrão do navegador também anima largura, altura e desfoque do grupo e mistura as imagens em plus-lighter: aqui o grupo e a
   imagem antiga não animam e só a nova esmaece por cima, com a duração e a curva dos tokens. As animações das imagens são as próprias
   (vt-entra, vt-sai, só opacidade): as do navegador também animam mix-blend-mode (plus-lighter) quando há par antigo/novo
   (Tarefa 4.1). São os únicos @keyframes deste arquivo (tests/materiais.spec.js só aceita estes, e só com opacidade). */
::view-transition-group(root), ::view-transition-old(root) { animation-name: none; }
::view-transition-new(root) { mix-blend-mode: normal; animation-name: vt-entra; animation-duration: var(--dur-media); animation-timing-function: var(--curva-saida); }
@keyframes vt-entra { from { opacity: 0; } }
@keyframes vt-sai { to { opacity: 0; } }
/* O título do trabalho (elemento compartilhado, Task 3.5): o grupo não usa a animação do navegador (largura e altura); quem o
   move é js/efeitos/movimento.js, só com transform a partir do canto. As duas imagens ocupam o grupo e trocam por opacidade. */
::view-transition-group(titulo-trabalho) { animation-name: none; animation-duration: var(--dur-titulo); transform-origin: 0 0; }
::view-transition-old(titulo-trabalho), ::view-transition-new(titulo-trabalho) { height: 100%; mix-blend-mode: normal; animation-timing-function: var(--curva-entrada); }
::view-transition-old(titulo-trabalho) { animation-name: vt-sai; }
::view-transition-new(titulo-trabalho) { animation-name: vt-entra; }

/* ---------------- Vidro fosco com reserva sólida ---------------- */
.vidro, .topo, .dialogo {
  background: var(--vidro-fundo);
  -webkit-backdrop-filter: var(--vidro-desfoque);
  backdrop-filter: var(--vidro-desfoque);
}
/* chrome com texto pequeno ou formulário: vidro denso, para o contraste não depender do que passa por baixo */
.vidro--forte, .topo, .dialogo { background: var(--vidro-fundo-forte); }
.vidro { border: 1px solid var(--vidro-borda); border-radius: var(--peca-m); box-shadow: var(--relevo), var(--sombra-2); }
.dialogo { box-shadow: var(--relevo), var(--sombra-4); }
.topo { box-shadow: var(--relevo); }

/* ---------------- Relevo leve nas peças: sombra interna + borda clara ---------------- */
.cartao, [data-luz] { box-shadow: var(--relevo), var(--sombra-1); }
[data-luz] { position: relative; border-radius: var(--peca-m); }

/* ---------------- O encaixe: bloco laranja levantado fora do recorte ----------------
   O recorte é o buraco afundado (sombra interna) no canto da peça; o bloco é a peça do Desbagunça que encaixa.
   Resolvido ([data-estado="feito"]) o bloco assenta e fica verde; travado, vermelho. */
.encaixe { position: absolute; top: var(--e-4); right: var(--e-4); width: var(--e-8); height: var(--e-8); z-index: var(--z-conteudo); pointer-events: none; }
.encaixe .recorte { position: absolute; inset: 0; border-radius: var(--raio-recorte); background: var(--sup-3); box-shadow: var(--sombra-recorte); }
.encaixe .bloco {
  position: absolute; inset: var(--bloco-folga); border-radius: var(--raio-bloco); background: var(--abob); box-shadow: var(--relevo-bloco), var(--sombra-bloco);
  transform: translate(-5px, -7px) rotate(-9deg); transition: transform var(--dur-mola) var(--curva-mola);
}
.encaixe .bloco::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background-image: var(--grao-img); background-size: 90px 90px; opacity: .35; }
.encaixe[data-estado="travado"] .bloco { background: var(--verm); }
.encaixe[data-estado="feito"] .bloco { transform: none; background: var(--verde); box-shadow: var(--relevo-bloco); }

/* ---------------- Luz que segue o mouse na borda das peças ----------------
   A camada existe sempre (invisível); só aparece com ponteiro fino e passando o mouse. O JS não a liga em celular. */
[data-luz]::before, .cartao--clicavel::before {
  content: ""; position: absolute; inset: 0; z-index: var(--z-sobre); border-radius: inherit; padding: var(--luz-largura); pointer-events: none; opacity: 0;
  background: radial-gradient(circle 130px at var(--luz-x) var(--luz-y), var(--luz-abob), transparent);
  -webkit-mask: linear-gradient(currentcolor 0 0) content-box, linear-gradient(currentcolor 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(currentcolor 0 0) content-box exclude, linear-gradient(currentcolor 0 0);
  transition: opacity var(--dur-media) var(--curva-saida);
}
.cartao--clicavel { position: relative; }
[data-luz="verde"]::before { background: radial-gradient(circle 130px at var(--luz-x) var(--luz-y), var(--luz-verde), transparent); }
@media (hover: hover) and (pointer: fine) {
  [data-luz]:hover::before, .cartao--clicavel:hover::before { opacity: 1; }
}
/* Versão calma: sem luz */
@media (prefers-reduced-motion: reduce) {
  [data-luz]::before, .cartao--clicavel::before { opacity: 0 !important; }
}
[data-movimento="calmo"] [data-luz]::before, [data-movimento="calmo"] .cartao--clicavel::before { opacity: 0 !important; }

/* ---------------- Rolagem: a luz some e os realces trocam sem transição (data-rolando, ver vigiarRolagem) ----------------
   Ao parar a rolagem o atributo sai e a luz volta com a transição normal. */
[data-rolando] [data-luz]::before, [data-rolando] .cartao--clicavel::before { opacity: 0 !important; transition: none; }
[data-rolando] .cartao--clicavel::after, [data-rolando] .btn::before,
[data-rolando] .c-aba::before, [data-rolando] .c-menu-item::before, [data-rolando] .c-botao--opcao::after, [data-rolando] .c-botao--calmo::after { transition: none; }