.stamp-layer,
.footprint-layer {
  position: fixed;
  inset: 0;
  z-index: 10;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.footprint-layer {
  z-index: 9;
}

.mud-print {
  position: absolute;
  width: 62px;
  height: 104px;
  margin: -52px 0 0 -31px;
  transform: rotate(-10deg);
  opacity: 0.88;
  filter: drop-shadow(0 1px 1px #d8965466);
}

.mud-print::before,
.mud-print::after,
.mud-print i {
  content: "";
  position: absolute;
  background: #251308;
  box-shadow: inset 2px 1px 3px #6c4421;
}

.mud-print::before {
  left: 9px;
  top: 24px;
  width: 44px;
  height: 53px;
  border-radius: 55% 45% 65% 30%;
  transform: rotate(-12deg);
}

.mud-print::after {
  left: 13px;
  bottom: 0;
  width: 30px;
  height: 37px;
  border-radius: 45% 45% 50% 50%;
  transform: rotate(8deg);
}

.mud-print i { border-radius: 50%; }
.mud-print i:nth-child(1) { left: 0; top: 0; width: 20px; height: 24px; }
.mud-print i:nth-child(2) { left: 23px; top: 0; width: 13px; height: 18px; }
.mud-print i:nth-child(3) { left: 38px; top: 5px; width: 11px; height: 16px; }
.mud-print i:nth-child(4) { left: 50px; top: 14px; width: 10px; height: 13px; }
.mud-print i:nth-child(5) { left: 57px; top: 27px; width: 8px; height: 11px; }

.poo-stamp {
  position: absolute;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 42px;
  line-height: 1;
  filter: drop-shadow(0 3px 2px #0007);
  will-change: transform, opacity;
}

.poo-stamp::before {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: -1;
  border: 2px solid #ffdf8e;
  border-radius: 50%;
  animation: stamp-splash 450ms ease-out both;
}

@keyframes stamp-splash {
  from { opacity: 0.9; transform: scale(0.3); }
  to { opacity: 0; transform: scale(1.8); }
}

.foot-stamp {
  z-index: 1;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  font-size: 96px;
  transform-origin: 50% 80%;
  filter: drop-shadow(0 8px 4px #0009);
}

.foot-stamp::before {
  inset: 30px 8px 0;
  border: 4px solid #ffdf8e;
  animation-delay: 170ms;
  animation-fill-mode: forwards;
  opacity: 0;
}

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