.page-transition {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at center, rgba(255, 250, 235, .96), rgba(229, 202, 157, .86));
  transition: opacity .18s ease;
}

.page-transition.is-active {
  opacity: 1;
}

.transition-card {
  display: grid;
  justify-items: center;
  gap: 12px;
  color: #5b3518;
  font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  font-size: clamp(20px, 3vw, 34px);
  font-weight: 900;
  letter-spacing: .08em;
  transform: translateY(10px) scale(.98);
  transition: transform .22s ease;
}

.page-transition.is-active .transition-card {
  transform: translateY(0) scale(1);
}

.paw-trail {
  position: relative;
  width: min(520px, 78vw);
  height: 150px;
  overflow: hidden;
}

.paw-trail img {
  position: absolute;
  top: 16px;
  left: 0;
  width: clamp(58px, 12vw, 82px);
  height: auto;
  opacity: 0;
  filter: drop-shadow(0 6px 10px rgba(91, 53, 24, .24));
}

.paw-trail img:nth-child(odd) {
  top: 16px;
}

.paw-trail img:nth-child(even) {
  top: 74px;
}

.paw-trail img:nth-child(2) {
  left: 15%;
}

.paw-trail img:nth-child(3) {
  left: 30%;
}

.paw-trail img:nth-child(4) {
  left: 45%;
}

.paw-trail img:nth-child(5) {
  left: 60%;
}

.paw-trail img:nth-child(6) {
  left: 75%;
}

.page-transition.is-reverse .paw-trail img:nth-child(1) {
  left: 75%;
}

.page-transition.is-reverse .paw-trail img:nth-child(2) {
  left: 60%;
}

.page-transition.is-reverse .paw-trail img:nth-child(3) {
  left: 45%;
}

.page-transition.is-reverse .paw-trail img:nth-child(4) {
  left: 30%;
}

.page-transition.is-reverse .paw-trail img:nth-child(5) {
  left: 15%;
}

.page-transition.is-reverse .paw-trail img:nth-child(6) {
  left: 0;
}

.page-transition.is-active .paw-trail img {
  animation: pawStep .42s ease both;
}

.page-transition.is-reverse.is-active .paw-trail img {
  animation-name: pawStepReverse;
}

.page-transition.is-active .paw-trail img:nth-child(2) {
  animation-delay: .12s;
}

.page-transition.is-active .paw-trail img:nth-child(3) {
  animation-delay: .24s;
}

.page-transition.is-active .paw-trail img:nth-child(4) {
  animation-delay: .36s;
}

.page-transition.is-active .paw-trail img:nth-child(5) {
  animation-delay: .48s;
}

.page-transition.is-active .paw-trail img:nth-child(6) {
  animation-delay: .6s;
}

@keyframes pawStep {
  0% {
    opacity: 0;
    transform: scale(.86);
  }
  30%, 72% {
    opacity: .95;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(.96);
  }
}

@keyframes pawStepReverse {
  0% {
    opacity: 0;
    transform: scaleX(-1) scale(.86);
  }
  30%, 72% {
    opacity: .95;
    transform: scaleX(-1) scale(1);
  }
  100% {
    opacity: 0;
    transform: scaleX(-1) scale(.96);
  }
}