:root {
  --page-enter-duration: 560ms;
  --page-enter-distance: 14px;
  --page-enter-ease: cubic-bezier(.22, 1, .36, 1);
}

@keyframes biased-page-enter {
  from {
    opacity: 0;
    transform: translate3d(0, var(--page-enter-distance), 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes biased-header-enter {
  from {
    opacity: 0;
    transform: translate3d(0, -8px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

body > header,
body > .member-header {
  animation: biased-header-enter 440ms var(--page-enter-ease) both;
}

body > main,
body > .auth-shell,
body > .admin-shell {
  animation: biased-page-enter var(--page-enter-duration) var(--page-enter-ease) 70ms both;
}

body > footer {
  animation: biased-page-enter 480ms var(--page-enter-ease) 150ms both;
}

.auth-card,
.tier-heading,
.tier-grid,
.payment-card,
.legal-main > *,
.account-layout > *,
.community-simple > *,
.knowledge-shell > *,
.journal-shell > *,
.admin-shell main > * {
  animation: biased-page-enter 520ms var(--page-enter-ease) both;
}

.auth-card,
.tier-heading,
.legal-main > :nth-child(1),
.account-layout > :nth-child(1),
.community-simple > :nth-child(1),
.knowledge-shell > :nth-child(1),
.journal-shell > :nth-child(1),
.admin-shell main > :nth-child(1) {
  animation-delay: 120ms;
}

.tier-grid,
.legal-main > :nth-child(2),
.account-layout > :nth-child(2),
.community-simple > :nth-child(2),
.knowledge-shell > :nth-child(2),
.journal-shell > :nth-child(2),
.admin-shell main > :nth-child(2) {
  animation-delay: 180ms;
}

.payment-card,
.legal-main > :nth-child(n + 3),
.account-layout > :nth-child(n + 3),
.community-simple > :nth-child(n + 3),
.knowledge-shell > :nth-child(n + 3),
.journal-shell > :nth-child(n + 3),
.admin-shell main > :nth-child(n + 3) {
  animation-delay: 240ms;
}

@media (max-width: 760px) {
  :root {
    --page-enter-duration: 460ms;
    --page-enter-distance: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body > header,
  body > .member-header,
  body > main,
  body > .auth-shell,
  body > .admin-shell,
  body > footer,
  .auth-card,
  .tier-heading,
  .tier-grid,
  .payment-card,
  .legal-main > *,
  .account-layout > *,
  .community-simple > *,
  .knowledge-shell > *,
  .journal-shell > *,
  .admin-shell main > * {
    animation: none !important;
  }
}