/* ---------- The 404 page (errors/not_found): the 0 of "404" is a cat, and its paw prints wander off ---------- */

.not-found-page {
  background: var(--color-bg);
}

.not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  min-height: 100dvh;
  padding: var(--space-6) var(--space-4);
  overflow: hidden;
  text-align: center;
}

.not-found__code {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.25rem, 2vw, 1rem);
  margin: 0;
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: clamp(6rem, 24vw, 11rem);
  font-weight: 800;
  line-height: 1;
}

.not-found__cat {
  flex: none;
  width: 0.95em;
  height: 0.95em;
  overflow: visible;
}

.not-found__head,
.not-found__ear {
  fill: var(--color-primary);
}

.not-found__eye {
  fill: var(--color-surface);
}

.not-found__pupil {
  fill: var(--color-text);
}

.not-found__nose {
  fill: var(--color-surface);
}

.not-found__line {
  fill: none;
  stroke: var(--color-surface);
  stroke-linecap: round;
  stroke-width: 2.5;
}

/* Whiskers stick out past the face, onto the page's background */
.not-found__line:last-of-type {
  stroke: var(--color-primary);
}

.not-found__title {
  margin: 0;
  font-size: var(--text-2xl);
}

.not-found__text {
  max-width: 28rem;
  margin: 0;
  color: var(--color-text-muted);
}

.not-found__trail {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  color: var(--color-primary);
  opacity: 0.45;
}

.not-found__paw {
  width: 1.25rem;
  height: 1.25rem;
  transform: rotate(90deg) translateX(-0.3rem);

  &:nth-child(even) {
    transform: rotate(90deg) translateX(0.3rem);
  }

  svg {
    display: block;
    width: 100%;
    height: 100%;
  }
}

/* Only this way round, and not left to the global reduced-motion rule: that one shortens animations to almost nothing,
   and an endless one would then flicker */
@media (prefers-reduced-motion: no-preference) {
  .not-found__pupils {
    animation: not-found-look 6s ease-in-out infinite;
  }

  .not-found__eyes {
    transform-box: fill-box;
    transform-origin: center;
    animation: not-found-blink 4.5s linear infinite;
  }

  .not-found__ear {
    transform-box: fill-box;
    transform-origin: bottom center;
  }

  .not-found__ear--right {
    animation: not-found-twitch 5s ease-in-out infinite;
  }

  .not-found__paw {
    animation: not-found-step 3.6s linear infinite;
    opacity: 0;

    &:nth-child(2) { animation-delay: 0.3s; }
    &:nth-child(3) { animation-delay: 0.6s; }
    &:nth-child(4) { animation-delay: 0.9s; }
    &:nth-child(5) { animation-delay: 1.2s; }
    &:nth-child(6) { animation-delay: 1.5s; }
  }
}

@keyframes not-found-look {
  0%, 18%, 100% { transform: translate(0, 0); }
  25%, 42% { transform: translate(-4px, 1px); }
  50%, 68% { transform: translate(4px, 1px); }
  75%, 90% { transform: translate(0, -3px); }
}

@keyframes not-found-blink {
  0%, 94%, 100% { transform: scaleY(1); }
  97% { transform: scaleY(0.08); }
}

@keyframes not-found-twitch {
  0%, 86%, 94%, 100% { transform: rotate(0); }
  90% { transform: rotate(9deg); }
}

@keyframes not-found-step {
  0% { opacity: 0; }
  12%, 55% { opacity: 1; }
  75%, 100% { opacity: 0; }
}