/* Home-only entrance: expand the capsule, move the logo, then reveal links. */
@property --home-nav-width {
  syntax: '<length-percentage>';
  inherits: false;
  initial-value: 1200px;
}
@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  body.home-page .page-shell > header.topbar.home-nav-enter {
    --home-nav-width: min(1200px, calc(100vw - 48px));
    width: var(--home-nav-width) !important;
    height: 72px;
    border-radius: 999px !important;
    overflow: hidden;
    animation: home-nav-expand 1600ms cubic-bezier(.45, 0, .2, 1) 700ms backwards;
  }
  body.home-page .page-shell > header.topbar.home-nav-enter > .brand {
    position: absolute;
    grid-column: auto;
    grid-row: auto;
    justify-self: auto;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    animation: home-nav-logo 1600ms cubic-bezier(.45, 0, .2, 1) 700ms backwards;
  }
  body.home-page .home-nav-enter > .nav-links > .nav-link {
    white-space: nowrap;
    animation: home-nav-label 500ms ease-out backwards;
    animation-delay: calc(1800ms + var(--nav-order, 0) * 120ms);
  }
  body.home-page .home-nav-enter > .nav-links > .nav-link:nth-child(2) { --nav-order: 1; }
  body.home-page .home-nav-enter > .nav-links > .nav-link:nth-child(3) { --nav-order: 2; }
  body.home-page .home-nav-enter > .nav-links > .nav-link:nth-child(4) { --nav-order: 3; }
  body.home-page .page-shell > header.topbar.home-nav-enter:focus-within,
  body.home-page .home-nav-enter:focus-within > .brand,
  body.home-page .home-nav-enter:focus-within > .nav-links > .nav-link {
    animation: none;
  }
}
@keyframes home-nav-expand {
  from { --home-nav-width: 220px; }
  to { --home-nav-width: min(1200px, calc(100vw - 48px)); }
}
@keyframes home-nav-logo {
  from { left: 50%; transform: translate(-50%, -50%); }
  to { left: 22px; transform: translate(0, -50%); }
}
@keyframes home-nav-label {
  from { opacity: 0; visibility: hidden; transform: translateY(6px); }
  to { opacity: 1; visibility: visible; transform: translateY(0); }
}