.paw-trail {
  position: absolute;
  top: 50%;
  z-index: 0;
  width: clamp(108px, 15vw, 148px);
  height: clamp(84px, 11vw, 116px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(-50% + 12px));
  transition:
    opacity 3600ms ease,
    transform 4200ms ease;
}

.silence-gap-right .paw-trail,
.silence-gap-edge .paw-trail,
.silence-gap-small .paw-trail {
  right: min(390px, 52vw);
}

.silence-gap-left .paw-trail {
  left: min(390px, 52vw);
}

.paw-print {
  position: absolute;
  left: var(--paw-x, 24%);
  top: var(--paw-y, 24%);
  width: var(--paw-size, 34px);
  aspect-ratio: 1;
  background: url("distance-pawprint.png") center / 238% no-repeat;
  filter: blur(0.1px);
  mix-blend-mode: multiply;
  opacity: var(--paw-opacity, 0.44);
  transform: rotate(var(--paw-rotation, -8deg)) scale(var(--paw-scale, 0.92));
  transform-origin: center;
}

.silence-gap.is-present .paw-trail {
  opacity: var(--paw-trail-opacity, 0.58);
  transform: translateY(-50%);
}

.silence-gap.was-heard:not(.is-present) .paw-trail {
  opacity: 0.035;
  filter: blur(1px);
  transform: translateY(calc(-50% - 2px));
  transition-duration: 360ms;
}

.silence-essay[data-silence-state="moving"] .silence-gap.is-present .paw-trail {
  opacity: 0.03;
  filter: blur(1.2px);
  transform: translateY(calc(-50% - 2px));
  transition-duration: 260ms;
}

@media (max-width: 700px) {
  .paw-trail {
    width: 106px;
    height: 84px;
  }

  .silence-gap-right .paw-trail,
  .silence-gap-edge .paw-trail,
  .silence-gap-small .paw-trail {
    right: auto;
    left: 2%;
  }

  .silence-gap-left .paw-trail {
    right: 2%;
    left: auto;
  }
}