/*
  pix.css — utilitários de pixel-art e borda dissolve (fewerner.com)
  ------------------------------------------------------------------
  O DS (components.css) já colore motivos via `.pix-cloud/.pix-star/.pix-cup`
  (classes s1/s2/s3 por tokens). Este arquivo cobre o que o DS não tem:
  - `.edge` — faixa de borda dissolve (dither), 88px, repeat-x; troca por tema.
  - `.edge--flip` — versão espelhada (fechamento de bloco).
  - `.edge-cloud` — linha de motivos nuvem acima da faixa (abertura de bloco).
  - tamanhos de motif e `prefers-reduced-motion`.
*/

/* ---- faixa de borda dissolve ---- */
.edge{
  height:88px; width:100%; display:block;
  background-image:url('/assets/edges/dither-edge-orange.svg');
  background-repeat:repeat-x; background-size:512px 88px; background-position:top left;
}
.edge--flip{ transform:scaleY(-1); }
.edge--orange{ background-image:url('/assets/edges/dither-edge-orange.svg'); }
.edge--periwinkle{ background-image:url('/assets/edges/dither-edge-periwinkle.svg'); }
.edge--dark{ background-image:url('/assets/edges/dither-edge-dark.svg'); }
.edge-top{ margin-bottom:-1px; }
.edge-bottom{ margin-top:-1px; }

/* troca por tema: default luz=orange; dark system → periwinkle; data-theme vence */
@media (prefers-color-scheme: dark){
  .edge{ background-image:url('/assets/edges/dither-edge-periwinkle.svg'); }
}
:root[data-theme="light"] .edge{ background-image:url('/assets/edges/dither-edge-orange.svg'); }
:root[data-theme="dark"] .edge{ background-image:url('/assets/edges/dither-edge-periwinkle.svg'); }
.footer-band .edge--periwinkle{ background-image:url('/assets/edges/dither-edge-periwinkle.svg'); }

/* ---- tamanhos de motif avulso ---- */
.pix-16{ width:16px; height:16px; }
.pix-24{ width:24px; height:24px; }
.pix-32{ width:32px; height:32px; }
.pix svg{ display:block; }
.pix .s1{ fill:var(--accent); }
.pix .s2{ fill:var(--accent-2); }
.pix .s3{ fill:var(--accent-3); }
.pix .s4{ fill:var(--surface-2); }

@media (prefers-reduced-motion: reduce){
  .pix, .edge{ transition:none; animation:none; }
}