# Gasser Full-width Blueprint Hero Pattern

Session-derived implementation notes for construction/local-trades hero motion when the client rejects a small tilted/isolated blueprint graphic and wants a more credible architectural plan.

## Trigger

Use this pattern when a construction-site hero concept should read as “real planning / blueprint to execution,” especially after feedback like:

- the plan graphic looks decorative or isolated
- the graphic is tilted/schräg and not technical enough
- the blueprint should span the full hero width
- the plan should build or extend while scrolling
- the logo should remain in place and react subtly on hover

## Design decision

Prefer a **full-width orthogonal SVG blueprint layer** for the plan, not Three.js.

Rationale:

- SVG is sharper and more controllable for architectural lines.
- Orthogonal walls, measure lines, door arcs, and grid lines are easier to tune.
- Scroll-driven line drawing is simpler with CSS variables and `pathLength="1"`.
- Three.js can remain for a freestanding/logo depth layer, but the floorplan itself should not become a 3D tech demo.

## Recommended layer stack

Hero:

1. Concrete/material background
2. Full-width `HeroBlueprint` SVG layer (`position:absolute; inset:0`)
3. Optional WebGL/logo scene, de-emphasized so it does not fight the plan
4. Text/CTA layer above both

Keep the plan behind copy and ensure it never blocks headline legibility.

## SVG plan anatomy

A credible abstract plan should include:

- subgrid and main grid patterns
- thick double outer walls
- thinner inner walls
- door openings / arc paths
- fixture/detail lines
- external measure/dimension lines
- dashed axes
- one intentional bordeaux “build/execution” line
- small bordeaux survey/anchor nodes

Avoid random decorative polygons, diagonal rotations, and small right-side plan icons.

## Scroll animation pattern

Use `pathLength="1"` on SVG paths and drive CSS variables from a small browser script:

- `--bp-shell`: outer shell/walls
- `--bp-core`: inner walls
- `--bp-detail`: openings, fixtures, dimensions
- `--bp-axis`: dashed axes and bordeaux build line
- `--bp-scroll`: subtle parallax/translation only

Example behaviour:

- initial view: shell partially drawn
- early scroll: inner walls extend
- mid scroll: door arcs and dimensions appear
- late scroll: bordeaux build line and hot nodes complete

Reduced motion should set all variables to `1` and disable transform/parallax.

## Logo hover coupling

For a subtle logo interaction:

- keep the logo in a stable physical position; do not make it float around
- detect pointer proximity via a transparent hero hotspot or normalized pointer distance
- on hover/proximity, slightly increase logo opacity/scale/tilt and make the bordeaux build line/nodes stronger
- avoid hover-grow header logos; this is for hero emblem/scene only

## QA checklist

- Screenshot the hero at load: plan spans broadly, no isolated floating block.
- Verify plan lines are orthogonal and not rotated.
- Verify headline and CTA contrast remain strong.
- Scroll the hero: CSS progress variables should change and plan should extend logically.
- Check mobile: plan may be wider/cropped, lower opacity, and logo hotspot disabled.
- Check `prefers-reduced-motion`: static plan is visible with all details.
- Build and browser-console check after animation changes.