/* A tiled vector layer keeps the slow loop seamless and inexpensive to render. */
body {
  isolation: isolate;
  background-image: linear-gradient(155deg, #115d72, #0a9c89);
  background-size: 100% 100%;
}
body::before {
  content: "";
  position: fixed;
  inset: -280px;
  z-index: -1;
  pointer-events: none;
  background: url('/assets/paw-pattern.svg') repeat;
  background-size: 280px 280px;
  opacity: .18;
  animation: paw-drift 28s linear infinite;
}
@keyframes paw-drift {
  from {transform: translate3d(0, 0, 0);}
  to {transform: translate3d(280px, -280px, 0);}
}
@media (max-width: 640px) {
  body::before {background-size: 220px 220px;animation-name: paw-drift-mobile;}
  @keyframes paw-drift-mobile {
    from {transform: translate3d(0, 0, 0);}
    to {transform: translate3d(220px, -220px, 0);}
  }
}
@media (prefers-reduced-motion: reduce) {
  body::before {animation: none;}
}