/*
 * treat-loader.css — pixel stand-mixer loading animation. Pure CSS, no JS.
 *
 *   <link rel="stylesheet" href="/pixel-treats/treat-loader.css">
 *   <div class="pt-mixer" role="status" aria-label="Loading"></div>
 *
 * Sizes: add one of .pt-mixer--1x … --8x (default is 2x = 64×56 px).
 * Paths below are relative to this file, so keep it next to the sprites/ folder.
 */
.pt-mixer {
  --pt-s: 2;
  display: inline-block;
  width: calc(32px * var(--pt-s));
  height: calc(28px * var(--pt-s));
  background-image: url("sprites/mixer/sheet/mixer-sheet@2x.png");
  background-image: image-set(url("sprites/mixer/sheet/mixer-sheet@2x.png") 1x, url("sprites/mixer/sheet/mixer-sheet@4x.png") 2x);
  background-repeat: no-repeat;
  background-size: calc(384px * var(--pt-s)) 100%;
  background-position: 0 0;
  image-rendering: pixelated;
  animation: pt-mixer-whirr 1020ms steps(12) infinite;
}

@keyframes pt-mixer-whirr {
  to { background-position: calc(-384px * var(--pt-s)) 0; }
}

.pt-mixer--1x { --pt-s: 1; background-image: url("sprites/mixer/sheet/mixer-sheet@1x.png"); background-image: image-set(url("sprites/mixer/sheet/mixer-sheet@1x.png") 1x, url("sprites/mixer/sheet/mixer-sheet@2x.png") 2x); }
.pt-mixer--2x { --pt-s: 2; background-image: url("sprites/mixer/sheet/mixer-sheet@2x.png"); background-image: image-set(url("sprites/mixer/sheet/mixer-sheet@2x.png") 1x, url("sprites/mixer/sheet/mixer-sheet@4x.png") 2x); }
.pt-mixer--3x { --pt-s: 3; background-image: url("sprites/mixer/sheet/mixer-sheet@3x.png"); background-image: image-set(url("sprites/mixer/sheet/mixer-sheet@3x.png") 1x, url("sprites/mixer/sheet/mixer-sheet@6x.png") 2x); }
.pt-mixer--4x { --pt-s: 4; background-image: url("sprites/mixer/sheet/mixer-sheet@4x.png"); background-image: image-set(url("sprites/mixer/sheet/mixer-sheet@4x.png") 1x, url("sprites/mixer/sheet/mixer-sheet@8x.png") 2x); }
.pt-mixer--6x { --pt-s: 6; background-image: url("sprites/mixer/sheet/mixer-sheet@6x.png"); background-image: image-set(url("sprites/mixer/sheet/mixer-sheet@6x.png") 1x, url("sprites/mixer/sheet/mixer-sheet@12x.png") 2x); }
.pt-mixer--8x { --pt-s: 8; background-image: url("sprites/mixer/sheet/mixer-sheet@8x.png"); background-image: image-set(url("sprites/mixer/sheet/mixer-sheet@8x.png") 1x, url("sprites/mixer/sheet/mixer-sheet@16x.png") 2x); }

/* Slow, calm whirr for people who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .pt-mixer { animation-duration: 3s; }
}