# Aurelian motion system

The implementation follows the shopper journey in `../aurelian-motion-concepts_codex.html`: attention, preference, understanding, confidence, orientation, and intent.

## 1. Living hero dial

- Hour and minute hands are initialized from the visitor's local time.
- The accent seconds hand is the page's only persistent loop.
- Hero copy settles first; one restrained crystal reflection runs once.

## 2. Reference inspection

- Hover, keyboard focus, or first tap scales only the selected watch by 6.5%.
- Only that reference's seconds hand runs.
- `Explore this reference` appears without shifting the surrounding layout.
- A second tap can follow the existing link; the explicit action remains available.

## 3. Calibre causality

- The rotor makes one weighted swing.
- Two gear stages and an accent transfer path follow with delayed timing.
- The sequence resolves through two restrained escapement and centre pulses.
- The copy and movement link reveal in causal order.

## 4. Instrument specifications

- `911`: separated component points converge.
- `70h`: a reserve ring fills to a fixed state.
- `−2/+2`: a needle settles at equilibrium.
- `300m`: a marker descends through the depth gauge.

## 5. Persistent orientation

- Once the hero leaves view, a 56px masthead preserves Collection and Boutique routes.
- A 1px accent line reports reading progress without gamification.
- The original centered Aurelian wordmark remains the visual anchor.

## 6. Boutique focus

- A gentle radial light falloff creates a private-room pause.
- Heading, supporting sentence, and boutique action resolve sequentially.
- The sequence runs once and never pulses for attention.

## Motion guardrails

- One persistent loop: the hero seconds hand.
- Direct manipulation for products; one-shot narrative sequences elsewhere.
- Transform and opacity animation avoid layout movement.
- No spring, particle, cursor-magnet, or pulsing-CTA effects.
- `Pause motion` freezes active animation.
- `prefers-reduced-motion: reduce` removes animation, disables the motion control, and renders every state immediately.
- Page visibility automatically pauses motion in background tabs.