/* Homepage entrance, matching benji.org: 8px, 500ms ease, 50ms stagger.
   Loaded only on the homepage. CSS works without JavaScript; content remains
   visible when animations are disabled. The product table enters as one block after the introduction. */
@keyframes home-entrance {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media screen and (prefers-reduced-motion: no-preference) {
  .wrap-main > .aside-nav,
  .main-text > .div-block-20 > *,
  .main-text > .copy-text {
    animation: home-entrance 500ms ease var(--entrance-delay, 0ms) backwards;
  }

  .main-text > .div-block-20 > :nth-child(1) { --entrance-delay: 50ms; }
  .main-text > .div-block-20 > :nth-child(2) { --entrance-delay: 100ms; }
  .main-text > .div-block-20 > :nth-child(3) { --entrance-delay: 150ms; }

  .main-text > .div-block-20 > :nth-child(4) { --entrance-delay: 200ms; }
  .main-text > .div-block-20 > :nth-child(5) { --entrance-delay: 250ms; }
  .main-text > .div-block-20 > :nth-child(6) { --entrance-delay: 300ms; }

  .main-text > .div-block-20 > :nth-child(7) { --entrance-delay: 350ms; }

  /* Keep the whole entrance under 1.1s, including longer pages. */
  .main-text > .div-block-20 > :nth-child(n + 8),
  .main-text > .copy-text { --entrance-delay: 550ms; }

  /* Keyboard navigation should never land on an invisible link. */
  .main-text > .div-block-20 > :focus-within {
    animation: none;
  }
}