.paw-trail {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.paw {
  position: absolute;
  width: 42px;
  height: 42px;
  opacity: 0.12;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><g fill='%238b5e3c'><ellipse cx='32' cy='42' rx='12' ry='10'/><circle cx='18' cy='23' r='6'/><circle cx='29' cy='16' r='6'/><circle cx='40' cy='16' r='6'/><circle cx='51' cy='23' r='6'/></g></svg>");
  animation: pawFloat 7s ease-in-out infinite;
  will-change: transform, opacity;
}

/* gauche */
.paw-1 { left: 5%;  top: 12%; animation-delay: 0s;   animation-duration: 6.5s; }
.paw-2 { left: 9%;  top: 28%; animation-delay: 1s;   animation-duration: 7.8s; }
.paw-3 { left: 6%;  top: 48%; animation-delay: 2s;   animation-duration: 6.9s; }
.paw-4 { left: 10%; top: 68%; animation-delay: 3s;   animation-duration: 8.2s; }

/* droite */
.paw-5 { right: 5%;  top: 16%; animation-delay: 0.5s; animation-duration: 7.2s; }
.paw-6 { right: 9%;  top: 36%; animation-delay: 1.5s; animation-duration: 6.7s; }
.paw-7 { right: 6%;  top: 56%; animation-delay: 2.5s; animation-duration: 7.6s; }
.paw-8 { right: 10%; top: 76%; animation-delay: 3.5s; animation-duration: 8s; }

@keyframes pawFloat {
  0% {
    opacity: 0.05;
    transform: translateY(0px) scale(0.92) rotate(-10deg);
  }
  25% {
    opacity: 0.12;
    transform: translateY(-4px) scale(0.98) rotate(-4deg);
  }
  50% {
    opacity: 0.2;
    transform: translateY(-8px) scale(1.03) rotate(3deg);
  }
  75% {
    opacity: 0.11;
    transform: translateY(-4px) scale(0.98) rotate(6deg);
  }
  100% {
    opacity: 0.05;
    transform: translateY(0px) scale(0.92) rotate(-10deg);
  }
}