# Gasser GSAP Architectural Logo Intro Pattern

Use this reference when tuning a local-business / construction homepage intro where the client wants a premium architectural brand moment without WebGL.

## Goal

Create a homepage-only architectural logo intro:

- Direct first homepage load: full brand intro.
- Internal page transitions: use a shorter, subtler variant if desired, but do **not** replay the full homepage intro.
- No Three.js/WebGL for a short logo animation; use GSAP + CSS 3D transforms.
- Keep a CSS-keyframe fallback for JS/GSAP failure.
- Respect `prefers-reduced-motion`.
- Never transform the hero/background layer itself; only animate overlay/logo/depth elements.

## Visual Direction

The Gasser bordeaux `G` should read as a massive construction element emerging from betongrau depth:

- Start: `opacity: 0`, `scale: 0.55`, `rotateX(10deg)`, `rotateY(-14deg)`, `blur(10px)`.
- Focus: `opacity: 1`, `scale: 1`, neutral rotation, `blur(0)`.
- Hold briefly.
- Exit: `opacity: 0`, `scale: 2.6–3.2`, `rotateX(-4deg)`, `rotateY(6deg)`, `blur(10px)`.
- Let the hero background appear during the exit.
- After intro, reveal hero copy/CTA with small positive y-offset and opacity fade.

Total duration target: roughly `1.8–2.2s` for direct homepage intro. Internal route transition variant should be shorter and less dominant.

## Astro / ClientRouter Implementation Notes

1. In layout, render `.site-intro` only on the homepage and hide it by default.
2. Pre-paint inline script sets:
   - `has-pending-gasser-intro` only for direct homepage load when `sessionStorage.gasserIntroSeen !== '1'`.
   - `has-seen-gasser-intro` otherwise.
3. In the client transition script:
   - On first load, if `.has-pending-gasser-intro` exists, run the GSAP direct-home timeline.
   - On `astro:before-swap`, suppress `.site-intro` and kill any active direct-home timeline.
   - On internal navigation, use a separate route-transition overlay (`.gasser-route-intro`) rather than toggling the homepage `.site-intro`.
   - On completion, set `.site-intro` to `display: none` and remove pending classes.
4. Avoid keeping the intro overlay as `display: grid; opacity: 0`; explicitly set `display: none` after completion to prevent invisible stacking or hit/paint surprises.
5. Keep page-transition branding in one place. If a separate old route transition has slabs/wordmarks, delete it; otherwise users see intermittent old zoom/brand flashes.

## GSAP Timeline Shape

```ts
gsap.set(intro, { display: 'grid', autoAlpha: 1 });
gsap.set(depth, { autoAlpha: 0, scale: 1.04, transformOrigin: '50% 50%' });
gsap.set(mark, {
  autoAlpha: 0,
  scale: 0.55,
  rotateX: 10,
  rotateY: -14,
  filter: 'blur(10px)',
  transformPerspective: 1100,
  transformOrigin: '50% 50%',
});

gsap.timeline({ onComplete: cleanup })
  .to(depth, { autoAlpha: 1, duration: 0.38, ease: 'power2.out' }, 0)
  .to(mark, {
    autoAlpha: 1,
    scale: 1,
    rotateX: 0,
    rotateY: 0,
    filter: 'blur(0px)',
    duration: 0.82,
    ease: 'power3.out',
  }, 0.06)
  .to(mark, { scale: 1.03, duration: 0.22, ease: 'power1.out' }, 0.9)
  .to(depth, { autoAlpha: 0, scale: 1.16, duration: 0.82, ease: 'power2.inOut' }, 1.1)
  .to(mark, {
    autoAlpha: 0,
    scale: 2.85,
    rotateX: -4,
    rotateY: 6,
    filter: 'blur(10px)',
    duration: 0.82,
    ease: 'power3.in',
  }, 1.15)
  .to(intro, { autoAlpha: 0, duration: 0.28, ease: 'power1.out' }, 1.62);
```

## CSS Fallback Requirements

- Fixed fullscreen `.site-intro` with `pointer-events: none`.
- `perspective` and `transform-style: preserve-3d` on the overlay.
- CSS keyframes matching the same start/focus/exit values.
- Add a class like `.has-gsap-intro` to disable CSS keyframes while GSAP owns the animation.
- Mobile mark width should be smaller (`~48vw`, capped) to avoid bitmap blur.

## QA Checklist

- `npm run build` passes.
- Direct homepage load with cleared `sessionStorage`: full intro plays and then `.site-intro` is `display: none`.
- Internal route to `/`: full homepage intro does not replay; shorter route transition runs if configured.
- Internal route to non-home pages: only route transition, no homepage intro.
- Source contains no old extreme zoom values such as `scale(74)`, `scale(54)`, `scale(32)`.
- Source contains no old duplicate route-transition classes/wordmarks if those were removed (e.g. `page-transition__slab`, `page-transition__mark`).
- Browser computed styles after intro: `.hero { transform: none }`, hero `::before`/background layers have `transform: none` unless intentionally animated independently.
- No console errors.

## Pitfalls

- Do not set `sessionStorage.gasserIntroSeen` in a way that suppresses the direct first homepage intro before the GSAP script can run.
- Do not re-use the homepage `.site-intro` for route transitions; Astro swaps can create race conditions and intermittent old animation flashes.
- Do not animate `body`, `.hero`, or the hero background for the intro. It changes perceived background zoom and annoys the client.
- Do not leave old route transition CSS/DOM in parallel with the new logo transition; intermittent flashes are usually duplicate transition systems, not easing problems.
- Avoid pulse/bounce. For this brand, a single architectural focus-and-exit reads more premium.