Redesign the login page: passkey-first with a branded animated hero

Goal

Logging in should feel more pleasant and branded, and passkeys should be the preferred way to sign in. The main focus is the login box itself.

Expected behavior

• Branding: the Trackslash icon is shown prominently, with a large "trackslash" title below it in the Trackslash brand font.
• Background: a flashy animated background behind the login box.
• Passkey first: "Log in with passkey" is the main, clearly visible action.
• Password hidden by default: a small secondary "Log in with password" button below the passkey button expands the username and password form. The form stays collapsed until the user asks for it.

Acceptance criteria

• The icon and "trackslash" wordmark render in the brand font, self-hosted with no third-party font CDN (see TRACK-6).
• The animated background:
  • Works under the current CSP (TRACK-11) and uses no third-party scripts.
  • Keeps the login text and controls clearly readable in light and dark modes.
  • Stays smooth on low-end devices, with no layout shift.
  • Respects prefers-reduced-motion by showing a static version.
• Passkey login is the primary button and the first focusable action.
• The "Log in with password" control is an accessible disclosure (aria-expanded, keyboard operable). Expanding it moves focus to the username field.
• The password form opens already expanded when:
  • The browser doesn't support WebAuthn/passkeys.
  • A password login attempt failed and the page is showing its error.
• Password managers can still autofill the password form once it's expanded (see TRACK-63).
• Existing login security stays in place: CSRF (TRACK-9), rate limits (TRACK-1), secure session cookies (TRACK-8) and redirect handling.
• The layout is centered and responsive, with the 16px mobile gutter and no horizontal scroll.
• Tests cover: the password form collapsed by default, expanded when WebAuthn is unavailable, and expanded after a failed password login.