.sheep:where([data-id="s1"]) img { animation: qsStep .36s ease-in-out infinite; }
@keyframes qsStep {
  0%, 100% { transform: translateY(0) scale(1.025, .97) rotate(0deg); }
  25% { transform: translateY(calc(-4.71% * var(--qs-amp, 1))) scale(.99, 1.02) rotate(-2.5deg); }
  50% { transform: translateY(0) scale(1.025, .97) rotate(0deg); }
  75% { transform: translateY(calc(-3.14% * var(--qs-amp, 1))) scale(.99, 1.02) rotate(2deg); }
}

.sheep:where([data-id="s2"]) { --qs-hop: -10.2%; --qs-sx: 1.03; --qs-sy: .96; }
.sheep:where([data-id="s2"]) img { animation: qsHop .52s cubic-bezier(.3,.7,.3,1) -.13s infinite; }

.sheep:where([data-id="s3"]) { --qs-hop: -3.93%; --qs-sx: 1.02; --qs-sy: .96; }
.sheep:where([data-id="s3"]) img { animation: qsHop 1.25s ease-in-out -.5s infinite; }

.sheep:where([data-id="s9"]) { --qs-hop: -4.71%; --qs-tilt: -1.5deg; --qs-sx: 1.02; --qs-sy: .965; }
.sheep:where([data-id="s9"]) img { animation: qsHop 1.1s ease-in-out -.28s infinite; }
@keyframes qsHop {
  0%, 100% { transform: translateY(0) scale(var(--qs-sx, 1.03), var(--qs-sy, .96)) rotate(0deg); }
  12% { transform: translateY(0) scale(1.04, .95) rotate(0deg); }
  44% { transform: translateY(calc(var(--qs-hop, -6.28%) * var(--qs-amp, 1))) scale(.99, 1.03) rotate(var(--qs-tilt, 0deg)); }
  70% { transform: translateY(0) scale(var(--qs-sx, 1.03), var(--qs-sy, .96)) rotate(0deg); }
}

.sheep:where([data-id="s4"]) { --qs-hop: -2.35%; --qs-tilt: 2deg; }
.sheep:where([data-id="s4"]) img { animation: qsRun .8s linear -.2s infinite; }

.sheep:where([data-id="s6"]) { --qs-hop: -3.93%; --qs-tilt: 5deg; }
.sheep:where([data-id="s6"]) img { animation: qsRun .24s linear -.07s infinite; }
@keyframes qsRun {
  0%, 100% { transform: translateY(0) scale(1.012, .988) rotate(0deg); }
  25% { transform: translateY(calc(var(--qs-hop, -2.35%) * var(--qs-amp, 1))) scale(.992, 1.014) rotate(var(--qs-tilt, 2deg)); }
  50% { transform: translateY(0) scale(1.012, .988) rotate(0deg); }
  75% { transform: translateY(calc(var(--qs-hop, -2.35%) * .75 * var(--qs-amp, 1))) scale(.996, 1.008) rotate(calc(var(--qs-tilt, 2deg) * -1)); }
}

.sheep:where([data-id="s5"]) img { animation: qsLeap 2.6s cubic-bezier(.35,.6,.4,1) -.6s infinite; }
@keyframes qsLeap {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  10% { transform: translateY(0) scale(1.05, .94); }
  22% { transform: translateY(calc(-18.85% * var(--qs-amp, 1))) scale(.96, 1.05); }
  50% { transform: translateY(calc(-20.41% * var(--qs-amp, 1))) scale(1, 1.01); }
  72% { transform: translateY(calc(-9.42% * var(--qs-amp, 1))) scale(.99, 1.02); }
  86% { transform: translateY(0) scale(1.06, .93); }
  94% { transform: translateY(0) scale(1, .995); }
}

.sheep:where([data-id="s7"]) { --qs-hop: -3.14%; }
.sheep:where([data-id="s7"]) img { animation: qsStopGo 1.5s ease-in-out -.4s infinite; }

.sheep:where([data-id="s12"]) { --qs-hop: -4.71%; }
.sheep:where([data-id="s12"]) img { animation: qsStopGo 1.6s ease-in-out -.9s infinite; }
@keyframes qsStopGo {
  0%, 44%, 100% { transform: translateY(0) scale(1.01, .99); }
  12% { transform: translateY(calc(var(--qs-hop, -3.14%) * var(--qs-amp, 1))) scale(.99, 1.015); }
  28% { transform: translateY(0) scale(1.02, .97); }
  36% { transform: translateY(calc(var(--qs-hop, -3.14%) * .6 * var(--qs-amp, 1))) scale(.99, 1.01); }
  64% { transform: translateY(0) scale(1, 1); }
  82% { transform: translateY(0) scale(1.005, .995); }
}

.sheep:where([data-id="s8"]) img { animation: qsTriple 1s cubic-bezier(.3,.8,.4,1) -.2s infinite; }
@keyframes qsTriple {
  0%, 20%, 44%, 68%, 100% { transform: translateY(0) scale(1.02, .97); }
  12% { transform: translateY(calc(-6.28% * var(--qs-amp, 1))) scale(.98, 1.03); }
  36% { transform: translateY(calc(-4.71% * var(--qs-amp, 1))) scale(.985, 1.025); }
  60% { transform: translateY(calc(-3.14% * var(--qs-amp, 1))) scale(.99, 1.02); }
  78%, 96% { transform: translateY(0) scale(1, 1); }
}

.sheep:where([data-id="s10"]) img { animation: qsSleep 3.2s ease-in-out -.7s infinite; }
@keyframes qsSleep {
  0%, 100% { transform: translateY(0) scale(1, 1) rotate(0deg); }
  45% { transform: translateY(calc(2.35% * var(--qs-amp, 1))) scale(1.012, .958) rotate(2.6deg); }
  70% { transform: translateY(calc(1.57% * var(--qs-amp, 1))) scale(1.006, .968) rotate(3.2deg); }
}
.sheep:where(.walking):where([data-id="s10"]) img { animation: qsShuffle 1.1s ease-in-out infinite; }
@keyframes qsShuffle {
  0%, 40%, 100% { transform: translateY(0) scale(1, 1) rotate(0deg); }
  20% { transform: translateY(calc(-2.35% * var(--qs-amp, 1))) scale(.995, 1.01) rotate(-1deg); }
  70% { transform: translateY(calc(-1.57% * var(--qs-amp, 1))) scale(.997, 1.006) rotate(1deg); }
}

.sheep:where([data-id="s11"]) img { animation: qsSway 1.6s ease-in-out -.3s infinite; }
@keyframes qsSway {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33% { transform: translateY(calc(-0.79% * var(--qs-amp, 1))) rotate(-1.2deg) scale(1.005, .997); }
  66% { transform: translateY(0) rotate(1.2deg) scale(.998, 1.002); }
}

.sheep:where([data-id="s13"]) img { animation: qsJoy .7s cubic-bezier(.3,.8,.4,1) -.18s infinite; }
@keyframes qsJoy {
  0%, 100% { transform: translateY(0) scale(1.03, .96) rotate(0deg); }
  18% { transform: translateY(calc(-7.07% * var(--qs-amp, 1))) scale(.98, 1.03) rotate(-3deg); }
  40% { transform: translateY(0) scale(1.04, .95) rotate(0deg); }
  58% { transform: translateY(calc(-5.50% * var(--qs-amp, 1))) scale(.99, 1.02) rotate(3deg); }
  80% { transform: translateY(0) scale(1.025, .97) rotate(0deg); }
}

.sheep:where([data-id="s14"]) { --hover: -14.12%; }
.sheep:where([data-id="s14"]).feeding { --hover: 0%; }
.sheep:where([data-id="s14"]) .art {
  transform: translateY(var(--hover, 0%)) scaleX(var(--flip, 1));
  transition: transform .55s cubic-bezier(.3,.75,.3,1), filter .12s ease-out;
}
.sheep.walking:where([data-id="s14"]) .art {
  transform: translateY(var(--hover, 0%)) scaleX(var(--flip, 1)) rotate(3deg);
}
.sheep:where([data-id="s14"]) .art::after {
  opacity: .5;
  transform: translateY(11%) scale(.82);
  transition: opacity .55s ease, transform .55s ease;
}
.sheep:where([data-id="s14"]).feeding .art::after {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.sheep:where([data-id="s14"]) img { animation: qsFloat 2.4s ease-in-out -.8s infinite; }
@keyframes qsFloat {
  0%, 100% { transform: translateY(calc(-3.14% * var(--qs-amp, 1))) scale(1, .995); }
  50% { transform: translateY(calc(3.14% * var(--qs-amp, 1))) scale(.995, 1.005); }
}

@media (prefers-reduced-motion: reduce) {
  .sheep:where(:not(.walking)):where(:not(.feeding)):where(:not(.tremble)):where(:not(.startled)) img {
    animation: none !important;
  }
}