# Gasser 3D logo intro animation pattern

Session-derived notes for the Gasser Bauunternehmen homepage intro after several visual corrections.

## User feedback that shaped the pattern

- The hero's animated WebGL/Three.js Gasser logo was removed because the user expected better performance without it.
- The intro should use the 3D Gasser logo asset (`Gasserlogo3d.png` / optimized WebP), not the flat brand mark.
- The animation must not pulse or bounce. Earlier keyframes that scaled up/down (`1.02 -> 0.98 -> 1.08`) read as a double pulse and were rejected.
- Desired effect: the logo fades in and then dives/zooms straight into the center of the logo so the user feels they are entering the site.
- The intro should feel imposing, but must not behave like a blocking loader.

## Recommended implementation

Prefer CSS for this specific 1-second intro rather than Three.js:

- Three.js adds renderer/canvas/texture initialization overhead for little benefit when the motion is just a 2D camera-like zoom.
- Use a preloaded optimized WebP plus PNG fallback via `<picture>`.
- Animate only `transform` and `opacity`.
- Use `translate3d(0,0,0)` and `will-change: transform, opacity` on the animated element.
- Keep `pointer-events: none` on the overlay.
- Keep `prefers-reduced-motion: reduce` support.
- Use `sessionStorage` if the intro should appear only once per browser session.

## Keyframe shape that worked better

Use one continuous movement, not a pulse:

```css
.site-intro__mark {
  width: clamp(18rem, 42vw, 34rem);
  aspect-ratio: 1;
  transform-origin: 50% 50%;
  transform: translate3d(0,0,0) scale(0.72);
  opacity: 0;
  animation: gasser-intro-logo 1000ms linear both;
  will-change: transform, opacity;
  contain: layout paint style;
}

@keyframes gasser-intro-logo {
  0% {
    opacity: 0;
    transform: translate3d(0,0,0) scale(0.72);
    animation-timing-function: cubic-bezier(.18,.82,.2,1);
  }
  15% {
    opacity: 1;
    transform: translate3d(0,0,0) scale(1);
    animation-timing-function: cubic-bezier(.04,.76,.08,1);
  }
  100% {
    opacity: 1;
    transform: translate3d(0,0,0) scale(54);
  }
}
```

Overlay shell should fade out only near the end so the large zoom is visible:

```css
@keyframes gasser-intro-shell {
  0% { opacity: 0; }
  10% { opacity: 1; }
  88% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}
```

## Asset/performance notes

- If the source PNG is large or includes a checkerboard/incorrect background, create a clean transparent derivative and a WebP version.
- In the session, optimized files were roughly: WebP ~52 KB and PNG fallback ~800 KB.
- Use `<link rel="preload" as="image" href="/images/brand/Gasserlogo3d.webp" type="image/webp">` on the homepage.
- Removing the separate hero WebGL logo can eliminate large Three.js chunk warnings and improve perceived mobile performance.

## QA checks

- Build passes.
- Browser console clean.
- Intro image resolves to the WebP source in modern browsers.
- The animated element has `animation-duration: 1s`.
- `transform-origin` is exactly centered.
- No hero canvas / construction-scene resource is loaded if the WebGL logo was intentionally removed.
- Manually reset `sessionStorage.gasserIntroSeen` when reviewing repeated first-load behavior.