/* pig-runner.css -- transparent 8-bit pixel pig that occasionally runs
   across the viewport. Two independent animations on the same element:
   pigRun (steps through the 8-frame sprite sheet) and pigCross/pigCrossRev
   (moves the element across the screen) -- travel speed is completely
   decoupled from the sprite's own frame rate. See public/pig-runner.js. */

.pig-runner{
  position:fixed;
  top:var(--pig-y, 70%);
  left:0;
  width:var(--pig-size, 96px);
  height:var(--pig-size, 96px);
  background-image:url('/117-pig-runner.png');
  background-repeat:no-repeat;
  background-size:800% 100%;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  image-rendering:-moz-crisp-edges;
  pointer-events:none;
  will-change:transform, background-position;
  transform:translate3d(-180px,0,0);
  animation:
    pigRun var(--pig-frame-duration, 0.72s) steps(8) infinite,
    pigCross var(--pig-cross-duration, 10s) linear var(--pig-delay, 0s) 1 forwards;
}

/* right-to-left crossing: flip the sprite so it still faces the way it's
   running (the sheet is drawn facing right) and reverse the translate */
.pig-runner.pig-runner--reverse{
  left:auto; right:0;
  transform:translate3d(180px,0,0) scaleX(-1);
  animation-name:pigRun, pigCrossReverse;
}

@keyframes pigRun{
  from{ background-position:0 0; }
  to{ background-position:-800% 0; }
}

/* left edge to comfortably past the right edge, clearing the sprite's own
   width so it fully exits before the element is cleaned up from the DOM */
@keyframes pigCross{
  from{ transform:translate3d(-180px,0,0); }
  to{ transform:translate3d(calc(100vw + 180px),0,0); }
}
@keyframes pigCrossReverse{
  from{ transform:translate3d(180px,0,0) scaleX(-1); }
  to{ transform:translate3d(calc(-100vw - 180px),0,0) scaleX(-1); }
}

@media (prefers-reduced-motion: reduce){
  .pig-runner{ display:none; }
}