/*
 * summer.css — a lamb gambolling across the bottom of the page
 * Usage: <img class="lamb" src="/pages/css/lamb.svg" alt="">
 * One image is all you need — it traverses the full width.
 */

@keyframes gambol {
  0%    { transform: translateX(-150px) translateY(0);    }
  10%   { transform: translateX(10vw)   translateY(-18px); }
  20%   { transform: translateX(20vw)   translateY(0);    }
  30%   { transform: translateX(30vw)   translateY(-22px); }
  40%   { transform: translateX(40vw)   translateY(0);    }
  50%   { transform: translateX(50vw)   translateY(-18px); }
  60%   { transform: translateX(60vw)   translateY(0);    }
  70%   { transform: translateX(70vw)   translateY(-20px); }
  80%   { transform: translateX(80vw)   translateY(0);    }
  90%   { transform: translateX(90vw)   translateY(-16px); }
  100%  { transform: translateX(110vw)  translateY(0);    }
}

.lamb {
  position: fixed;
  bottom: 20px;
  left: 0;
  width: 80px;
  height: auto;
  pointer-events: none;
  user-select: none;
  animation: gambol 28s linear infinite;
}

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