body[data-route="directory"] .route-shell {
  animation: route-enter 820ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

body[data-route="directory"] .portal-card:nth-child(1) {
  animation: portal-enter 700ms 120ms both;
}

body[data-route="directory"] .portal-card:nth-child(2) {
  animation: portal-enter 700ms 200ms both;
}

body[data-route="directory"] .portal-card:nth-child(3) {
  animation: portal-enter 700ms 280ms both;
}

@keyframes route-enter {
  from {
    opacity: 0;
    transform: translateY(28px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes portal-enter {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}