/*
 * Paw Trail
 * The footprint SVG is embedded, so no image file is required.
 */

.paw-trail-layer[data-paw-trail-layer] {
  position: absolute;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.paw-trail-layer .paw-trail-footprint {
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 1;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%23afafaf'%3E%3Cellipse cx='14' cy='18' rx='7' ry='9' transform='rotate(-25 14 18)'/%3E%3Cellipse cx='29' cy='11' rx='7' ry='9' transform='rotate(-8 29 11)'/%3E%3Cellipse cx='45' cy='14' rx='7' ry='9' transform='rotate(15 45 14)'/%3E%3Cellipse cx='55' cy='27' rx='6.5' ry='8.5' transform='rotate(30 55 27)'/%3E%3Cpath d='M12 45c0-11 9-20 20-20s20 9 20 20c0 9-7 13-14 10-4-2-8-2-12 0-7 3-14-1-14-10z'/%3E%3C/g%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 15px 15px;
  transform-origin: center;
  transition: opacity 750ms ease-out;
  will-change: opacity, transform;
}

.paw-trail-layer .paw-trail-footprint.is-fading {
  opacity: 0;
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .paw-trail-layer[data-paw-trail-layer] {
    display: none !important;
  }
}

@media print {
  .paw-trail-layer[data-paw-trail-layer] {
    display: none !important;
  }
}