/* dither-anim.css — faixa de dither com os pixels em movimento.
   Requer os quadros em anim/<cor>-0..7.svg (mesma pasta deste arquivo).
   Banda parada, pixels vivos: 8 quadros, loop fechado.

   <div class="dither dither--orange"></div>            pixels descendo
   <div class="dither dither--orange dither--up"></div> pixels subindo
*/

.dither {
  height: 88px;
  background-repeat: repeat-x;
  background-size: 512px 88px;
  background-position: top left;
  animation-duration: 1.5s;        /* 8 quadros ~= 5fps */
  animation-timing-function: steps(1);
  animation-iteration-count: infinite;
}

/* pixels subindo: mesmo asset, sentido invertido */
.dither--up { transform: scaleY(-1); }

.dither--orange { animation-name: dither-boil-orange; }
.dither--blue   { animation-name: dither-boil-blue; }

@keyframes dither-boil-orange {
  0%    { background-image: url("anim/orange-0.svg"); }
  12.5% { background-image: url("anim/orange-1.svg"); }
  25%   { background-image: url("anim/orange-2.svg"); }
  37.5% { background-image: url("anim/orange-3.svg"); }
  50%   { background-image: url("anim/orange-4.svg"); }
  62.5% { background-image: url("anim/orange-5.svg"); }
  75%   { background-image: url("anim/orange-6.svg"); }
  87.5% { background-image: url("anim/orange-7.svg"); }
  100%  { background-image: url("anim/orange-0.svg"); }
}

@keyframes dither-boil-blue {
  0%    { background-image: url("anim/periwinkle-0.svg"); }
  12.5% { background-image: url("anim/periwinkle-1.svg"); }
  25%   { background-image: url("anim/periwinkle-2.svg"); }
  37.5% { background-image: url("anim/periwinkle-3.svg"); }
  50%   { background-image: url("anim/periwinkle-4.svg"); }
  62.5% { background-image: url("anim/periwinkle-5.svg"); }
  75%   { background-image: url("anim/periwinkle-6.svg"); }
  87.5% { background-image: url("anim/periwinkle-7.svg"); }
  100%  { background-image: url("anim/periwinkle-0.svg"); }
}

@media (prefers-reduced-motion: reduce) {
  .dither { animation: none; }
  .dither--orange { background-image: url("anim/orange-0.svg"); }
  .dither--blue   { background-image: url("anim/periwinkle-0.svg"); }
}