.if-404-page {
  min-height: calc(100svh - var(--navbar-height, 4rem));
}

.if-404__illus {
  animation: if404-fade-up 0.55s ease-out both;
  filter: drop-shadow(0 0 48px rgba(217, 224, 33, 0.22));
}

.if-404__title {
  animation: if404-fade-up 0.65s ease-out 0.08s both;
}

.if-404__desc {
  animation: if404-fade-up 0.65s ease-out 0.14s both;
}

.if-404__browse {
  animation: if404-fade-up 0.65s ease-out 0.2s both;
}

.if-404__links {
  animation: if404-fade-up 0.65s ease-out 0.26s both;
}

.if-404__cta {
  animation: if404-fade-up 0.65s ease-out 0.32s both;
}

.if-404__link {
  backdrop-filter: blur(8px);
}

.if-404__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.if-404__link-icon {
  color: rgb(217, 224, 33);
  transition: transform 0.25s ease, color 0.25s ease;
}

.if-404__link:hover .if-404__link-icon {
  transform: scale(1.08);
}

@keyframes if404-fade-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .if-404__illus,
  .if-404__title,
  .if-404__desc,
  .if-404__browse,
  .if-404__links,
  .if-404__cta,
  .if-404__link {
    animation: none;
    transition: none;
  }

  .if-404__link:hover {
    transform: none;
  }
}