.animation {
  height: 400px;
  width: 65%;
  z-index: 0;
  --STEP-COUNT: 10;

  /* these variables are configurable! */
  --path-height: 500px;
  --path-width: 200px;
  --foot-spread: calc(var(--path-width) * 0.25);
  --animation-duration: 5s;
  --step-delay: 0.7s;
  --footprint-width: 60px;
  --footprint-height: 60px;
}

.footprints {
  padding: 20px;
  width: var(--path-width);
  height: var(--path-height);
  position: absolute;
  display: inline-block;
  /* each .footprints can define individual values
  to vary up the groups */
  --timing-offset: 0s;
}

.footprints>.foot {
  opacity: 0;
  width: var(--footprint-width);
  height: var(--footprint-height);
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  bottom: 0;
  left: 50%;
  /* should be overwritten by nth-child selectors */
  --foot-index: 0;
  /* how much the foot should be rotated on the Y axis -- use for mirroring images */
  --y-rotation: 0deg;
  /* scale */
  --scale: unset;
  /* distance from center X to offset per foot */
  --foot-x-offset: 0px;
  /* distance between each "step" */
  --step-distance: calc(var(--path-height) / var(--STEP-COUNT));
  /* the footprints are left aligned; center them horizontally */
  --translate-x: calc(calc(var(--footprint-width) * -0.5) + var(--foot-x-offset));
  /* UP is negative Y */
  --translate-y: calc(-1 * calc(var(--step-distance) * var(--foot-index)));
  transform: scale(var(--scale, 1)) translate(var(--translate-x), var(--translate-y)) rotateY(var(--y-rotation));

  animation: var(--animation-duration) walking infinite;
  animation-delay: calc(var(--timing-offset) + calc(var(--step-delay) * var(--foot-index)));
  animation-timing-function: ease-in;
  animation-iteration-count: 12;
}

.footprints>.foot:nth-child(1) {
  --foot-index: 1;
}

.footprints>.foot:nth-child(2) {
  --foot-index: 2;
}

.footprints>.foot:nth-child(3) {
  --foot-index: 3;
}

.footprints>.foot:nth-child(4) {
  --foot-index: 4;
}

.footprints>.foot:nth-child(5) {
  --foot-index: 5;
}

.footprints>.foot:nth-child(6) {
  --foot-index: 6;
}

.footprints>.foot:nth-child(7) {
  --foot-index: 7;
}



/* left feet */
.footprints>.foot:nth-child(2n+1) {
  --foot-x-offset: calc(var(--foot-spread) * -1);
}

/* right feet */
.footprints>.foot:nth-child(2n) {
  --y-rotation: 180deg;
  /* mirror left foot */
  --foot-x-offset: var(--foot-spread);
}

@keyframes walking {
  0% {
    opacity: 0;
  }

  25% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  75% {
    opacity: 0;
  }
}

/* ************************************************ */

/* set initial svgs */
.footprints:nth-child(1) > .foot {
  background-image: url("/static/svg/fox-red.svg");
}

.footprints:nth-child(2) > .foot {
  background-image: url("/static/svg/antelope.svg");
}
.footprints:nth-child(3) > .foot{
  background-image: url("/static/svg/bird.svg");
}

.footprints:nth-child(4) > .foot {
  background-image: url("/static/svg/deer.svg");
}

.footprints:nth-child(5) > .foot {
  background-image: url("/static/svg/horse.svg");
}

/* set positions */

.footprints:nth-child(1){ /* fox */
  transform: translate(400px, 0px) rotate(12deg);
  --timing-offset: 1s;
  --animation-duration: 7s;
}

.footprints:nth-child(2) { /*antelope*/
  transform: translate(0px, -100px) rotate(-10deg) scale(1.7);
  --timing-offset: 3s;
  --animation-duration: 9s;
}

.footprints:nth-child(3) {/* bird */
  transform: translate(650px, -140px) rotate(30deg) scale(0.7);
  --timing-offset: 6s;
  --animation-duration: 5s;
}

.footprints:nth-child(4) {/*deer*/
  transform: translate(350px, 30px) rotate(30deg) scale(1.3);
  --timing-offset: 5s;
  --animation-duration: 9s;
}

.footprints:nth-child(5) { /* horse */
  transform: translate(20px, -150px) rotate(0deg) scale(2.3);
  --timing-offset: 18s;
  --animation-duration: 12s;
}

/* raccoon feet */
.footprints[x-img="raccoon"] > .foot {
  background-image: url("/static/svg/raccoon.svg");
}
.footprints[x-img="raccoonfoot"] > .foot {
  background-image: url("/static/svg/raccoonfoot.svg");
}
.footprints[first-raccoon] {
  transform: translate(550px, -30px) rotate(-20deg);
  --timing-offset: 5s;
  --animation-duration: 11s;
}
.footprints[first-raccoonfoot] {
  transform: translate(600px, 90px) rotate(-20deg) scale(1.3);
  --timing-offset: 6.5s;
  --animation-duration: 11s;
}