Every part has a purpose.

A cut in the relationship.

The Sideby symbol is formed from two opposing strips and a separate central Part. The same geometry becomes a large hero, a purchase-to-reward sequence, a two-way flow and an assembled final composition.

Syne supplies the wide display type; DM Sans handles reading text; IBM Plex Mono marks instructions and captions. Fonts are self-hosted. The brand kit contains outlined wordmarks, symbol variants, favicon, app icon, avatar, social image and font licenses.

Color alone does not carry status. Labels and meaningful text accompany the visual language.

Movement explains the exchange.

The hero separates a Part from the larger whole. A sticky scene follows purchase, reward and collection. A manual range input adds abstract parts to a composition. The final scene assembles a larger structure without assigning monetary values.

src/scripts/scenes.ts caches section positions, schedules one animation frame per scroll update and changes transforms or opacity. Measurements are refreshed on resize, after fonts load and when the main content changes height. There is no permanent animation loop.

Mobile uses a compact reading sequence while retaining the return graphics and a shorter sticky finale. Smaller viewports do not need to complete a desktop-sized scroll journey to read the explanation.

Open the form. Rebuild the picture.

The opposing shutters expose a central Part. An exploded symbol separates the company connection from the reward conditions. Sixteen abstract strips form a three-dimensional ribbon using CSS perspective and transforms. The number of strips is a visual design choice; it does not represent financial data.

These scenes are authored in src/components/ExpandedScenes.astro and src/styles/expanded.css. The additional choreography.ts controller supplies scroll progress and depth transforms from cached geometry. There is no WebGL dependency, video download or continuous background animation loop. Reduced motion presents the open shutters, assembled ribbon and complete reading order.

Resolve appearance before painting.

The inline boot script checks sideby-theme in local storage. Without a saved light or dark choice, it follows prefers-color-scheme. A manual toggle saves the preference and updates the accessible label and browser theme color.

Theme changes use a brief View Transition when supported. If storage is unavailable, the current page still switches. Dark mode uses warm paper text and a lighter signal accent against ink surfaces.

Keep the meaning available.

Reduced motion removes sticky scrolling and large transformations. Complete text and finished compositions remain visible. Without JavaScript, the site remains readable and the native form can submit to Pages Functions.

The interface includes a skip link, visible keyboard focus, labeled form controls, live status messages, explicit consent and native disclosure elements. Decorative SVGs are hidden from assistive technology; meaningful diagrams are described in text.

The form shows success only after server confirmation. API examples are rendered as escaped code; copy buttons copy text and never execute requests.