# Gasser mobile hero/header and performance patterns

Session-derived patterns for the Gasser Bauunternehmen Astro site after mobile QA and hero animation tuning.

## Mobile header pattern

Problem observed: on mobile, the brand mark/text and primary `Anfrage starten` CTA can wrap into staggered rows, making the header feel broken.

Preferred pattern:

- At `max-width: 980px`, switch the header inner layout from flex-wrap to a two-column grid: `minmax(0, 1fr) auto`.
- Keep brand on the left and CTA on the right in the first row.
- Put navigation in row 2 spanning both columns.
- Use `white-space: nowrap` on nav links and horizontal scrolling instead of line-breaking labels like `Über uns`.
- Shrink brand mark, brand title, subtitle, and CTA padding again at very narrow widths (`~430px`).
- Verify at a real phone-ish width such as 390px: brand and CTA top positions should differ by <8px and neither should overflow.

## Homepage logo intro animation

User wanted a quick Gasser logo animation before/while the homepage appears, but not a blocking loader.

Good implementation:

- Render only on homepage.
- Pure CSS; no Three.js and no JavaScript dependency.
- `position: fixed`, high z-index, `pointer-events: none` so it never blocks interaction.
- Duration around 700–800ms.
- Animate only `opacity` and `transform: scale(...)`; avoid layout-affecting properties.
- The page should already be visible/loaded behind it; this is a brand pulse, not a wait screen.
- Disable via `prefers-reduced-motion: reduce`.

## Heavy hero/Three.js performance pattern

For lower-end hardware:

- Detect `prefers-reduced-motion`, `navigator.connection.saveData`, `navigator.deviceMemory`, `navigator.hardwareConcurrency`, and mobile viewport.
- Use three modes:
  - `full`: normal WebGL effect.
  - `reduced`: fewer grid lines/particles, lower pixel ratio, no antialiasing, lower frame cadence.
  - `static`: do not import Three.js; hide canvas and show a branded CSS fallback.
- Queue initialization with `IntersectionObserver` and `requestIdleCallback` where available.
- Pause render work when the element/tab is not visible.

## QA notes

- Always run `npm run build`.
- Mobile QA: use a 390px viewport/test frame and verify:
  - brand + CTA in same row;
  - hero headline/lead/actions are not clipped;
  - nav labels do not wrap;
  - intro overlay exists but disappears quickly and has `pointer-events: none`.
- Browser console tool may show blank exceptions from iframe-based mobile QA; capture explicit `window.onerror`/`unhandledrejection` if needed before treating them as real app errors.