# mobile-navigation Specification

## Requirements

### Requirement: Full-screen overlay menu

The header toggle MUST open a full-screen overlay menu that covers the viewport (`100dvh`), not a
small slide-in panel. The overlay MUST use a layered background composed of a brand dark gradient plus
a subtle stone texture/noise/grain.

#### Scenario: Toggle opens a full-screen overlay

- GIVEN a visitor activates the header menu toggle
- WHEN the drawer opens
- THEN it covers the entire viewport at `100dvh`

#### Scenario: Layered brand background renders

- GIVEN the drawer is open
- WHEN its background is inspected
- THEN it shows a brand dark gradient with a subtle stone texture/noise/grain layer

### Requirement: Drawer open/close animation

Opening and closing MUST animate a backdrop fade plus a staggered content reveal. Animations MUST be
smooth and interruptible. Under `prefers-reduced-motion: reduce` the drawer MUST open and close without
motion.

#### Scenario: Open animates backdrop and staggered content

- GIVEN the drawer is closed
- WHEN the visitor opens it
- THEN the backdrop fades in and the content reveals with a stagger

#### Scenario: Animation is interruptible

- GIVEN the drawer is mid-animation
- WHEN the visitor closes or reopens it
- THEN the animation transitions smoothly to the new target state without jumping

#### Scenario: Reduced motion fallback

- GIVEN a visitor with `prefers-reduced-motion: reduce`
- WHEN the drawer opens or closes
- THEN it appears or disappears immediately with no motion

### Requirement: Premium navigation items

Navigation items MUST render as large `font-serif` links with premium hover effects: a sweeping
fill/underline reveal, an arrow that slides in, and — on desktop fine pointers — a per-item preview
image that follows the cursor. Hover behavior MUST be consistent across items.

#### Scenario: Hover reveals sweep and arrow

- GIVEN the drawer is open on any supported device
- WHEN the pointer or focus is on a navigation item
- THEN a sweeping fill/underline reveal plays and an arrow slides in

#### Scenario: Desktop preview image follows the cursor

- GIVEN the drawer is open on a device with a fine pointer
- WHEN the pointer hovers a navigation item
- THEN that item's preview image appears and follows the cursor
- AND it does not appear on touch devices

#### Scenario: Hover behavior is consistent

- GIVEN multiple navigation items
- WHEN each is hovered in turn
- THEN every item uses the same reveal and arrow motion

### Requirement: Drawer secondary content

The drawer MUST include contact information, a WhatsApp CTA, business hours, and social links.

#### Scenario: Secondary content is present

- GIVEN the drawer is open
- WHEN its secondary content is inspected
- THEN it shows contact information, a WhatsApp CTA, business hours, and social links

### Requirement: Drawer accessibility and UX

The drawer MUST expose `role="dialog"` and `aria-modal="true"`, the toggle MUST expose `aria-expanded`,
focus MUST be trapped inside while open, Escape MUST close the drawer, a backdrop click MUST close it,
body scroll MUST be locked while open, and focus MUST return to the toggle on close.

#### Scenario: ARIA attributes are exposed

- GIVEN the drawer is open
- WHEN its markup is inspected
- THEN the overlay has `role="dialog"` and `aria-modal="true"`
- AND the toggle exposes `aria-expanded="true"` while open and `"false"` when closed

#### Scenario: Focus is trapped and restored

- GIVEN the drawer is open
- WHEN the visitor tabs through focusable elements and then closes the drawer
- THEN focus cycles within the drawer while open
- AND focus returns to the toggle on close

#### Scenario: Escape closes the drawer

- GIVEN the drawer is open
- WHEN the visitor presses Escape
- THEN the drawer closes

#### Scenario: Backdrop click closes the drawer

- GIVEN the drawer is open
- WHEN the visitor clicks the backdrop area
- THEN the drawer closes

#### Scenario: Body scroll is locked

- GIVEN the drawer is open
- WHEN the visitor scrolls the page
- THEN the background page does not scroll until the drawer closes

### Requirement: Responsive drawer and animated toggle

The drawer MUST work on mobile and tablet, and the header toggle button MUST animate (morph) between
the menu and close icons.

#### Scenario: Drawer works across mobile and tablet

- GIVEN mobile and tablet viewports
- WHEN the drawer is opened
- THEN its layout and interactions remain usable and correctly sized

#### Scenario: Toggle morphs between states

- GIVEN the header toggle button
- WHEN the drawer opens or closes
- THEN the button animates/morphs between the menu and close icons
- AND under reduced motion it swaps icons without animation