/* figura-animada.css — as 29 figuras animadas da aba "Design inclusivo e
   Design Centrado no Humano" (/fundamentos/visao-geral).

   Aqui só há enquadramento: a composição inteira é desenhada em pixels pelo
   JS, numa prancha de 1064,5 x 598,76 escalada por transform (ver
   assets/js/figuras/src/fig-engine.js).

   TEMA E MODOS DE COR
   A MOLDURA das figuras acompanha o tema e os modos, como o resto do site: o
   campo, o papel dos cartões, a tinta, os contornos e o acento. O que cada
   figura ENSINA não se mexe — o amarelo da 06 e da 23, a roda de matizes da
   19, os seis pares medidos da 21, as curvas dos cones da 16, o losango da 17.
   A divisão está comentada em assets/js/figuras/src/fig-kit.jsx e as tabelas
   por modo, em fig-engine.js. Consequência aceita: os contraexemplos reprovam
   de propósito em qualquer varredura automática de contraste (§9.12).

   O --fa-campo abaixo repete, em CSS, o campo que o JS pinta por dentro. Serve
   para o quadro antes do primeiro desenho e para quem está sem JS. Se mudar um
   valor aqui, mude o par em PALETAS. */
:root {
  --fa-campo: #f0f6fc;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fa-campo: #070d25;
  }
}

:root[data-tema="escuro"] {
  --fa-campo: #070d25;
}

:root[data-modo-cor="alto-contraste"],
:root[data-modo-cor="preto-amarelo"] {
  --fa-campo: #000000;
}

:root[data-modo-cor="amarelo-preto"] {
  --fa-campo: #1f1f1f;
}

.figura-animada {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1064.5 / 598.76;
  inline-size: 100%;
  border-radius: var(--raio-l);
  background: var(--fa-campo);
}

/* Nos modos de cor o campo pode chegar perto do fundo da página (preto sobre
   preto, no "amarelo sobre preto"): o fio devolve a borda do bloco. */
:root[data-modo-cor] .figura-animada {
  border: 1px solid var(--cor-contorno-variante);
}

.figura-animada__prancha {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  transform-origin: 0 0;
}

/* A audiodescrição usa a mesma peça da descrição dos quadros
   (.doc__figura-descricao entrou nas regras de .doc__quadro-descricao em
   main.css): aberta por padrão, alvo de 44px, mesmo chevron.
   "Ocultar imagens" também está em main.css, junto das outras figuras. */