# Behaviour layer

| file | what it does |
| --- | --- |
| `components/wire.ts` | mega-menu (hover/click/Escape), FAQ accordion, country selector |
| `components/animations.ts` | hero state machine, stats marquee, rating roll-up, scroll reveals |

All of it mirrors nsave's own implementation rather than approximating it:

- the hero is the original `hero-load--pending/--animating/--settled` CSS machine,
  settled after the durations declared in its own `--hero-*-ms` custom properties;
- the stats strip uses nsave's `stats-marquee-ltr` keyframes and `--marquee-distance`;
- the mega-menu animates the CSS `translate`/`opacity` properties (the utilities it
  names, like `translate-y-[32px]`, are not in nsave's stylesheet, so inline styles
  are what the live site actually animates);
- rating digits roll up from `translateY(calc(0 * 1lh))` to the value nsave
  server-rendered, driven by the enclosing section entering the viewport;
- reduced-motion is respected (marquee and reveals switch off, as in nsave's CSS).