.page-transition-overlay {
  position: fixed;
  z-index: 2147483647;
  inset: 0;
  display: none;
  place-items: center;
  padding: 24px;
  background: rgba(238, 249, 255, 0.84);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: page-transition-fade-in 160ms ease-out both;
  cursor: wait;
}

.page-transition-overlay.is-page-transition-active,
html.is-page-transition-loading .page-transition-overlay {
  display: grid;
}

.page-transition-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 17px 24px;
  border: 3px solid #89c5e5;
  border-radius: 999px;
  color: #2f86b7;
  background: #fff;
  box-shadow:
    0 8px 0 rgba(137, 197, 229, 0.35),
    0 16px 34px rgba(54, 149, 201, 0.2);
  font-family: "Mochiy Pop One", "Sawarabi Gothic", sans-serif;
  animation: page-transition-bob 900ms ease-in-out infinite alternate;
}

.page-transition-rabbit {
  display: inline-block;
  font-size: 2rem;
  line-height: 1;
  transform-origin: 50% 100%;
  animation: page-transition-hop 600ms ease-in-out infinite alternate;
}

.page-transition-message {
  margin: 0;
  font-size: clamp(1rem, 4vw, 1.3rem);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.page-transition-dots {
  display: inline-block;
  width: 1.5em;
  overflow: hidden;
  vertical-align: bottom;
  animation: page-transition-dots 1.1s steps(4, end) infinite;
}

@keyframes page-transition-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes page-transition-bob {
  from { transform: translateY(2px); }
  to { transform: translateY(-4px); }
}

@keyframes page-transition-hop {
  from { transform: rotate(-7deg) translateY(1px); }
  to { transform: rotate(7deg) translateY(-3px); }
}

@keyframes page-transition-dots {
  from { width: 0; }
  to { width: 1.5em; }
}

@media (prefers-reduced-motion: reduce) {
  .page-transition-overlay,
  .page-transition-card,
  .page-transition-rabbit,
  .page-transition-dots {
    animation: none;
  }
}