# Motion-Spec — Verkaufsseite Premium (verbindlich)

> Personality: **ruhiges Atmen** — das Produkt ist Entspannung. Motion ist warm,
> weich, unaufgeregt. KEIN Bounce, KEIN Zirkus, keine Parallax-Spielereien.
> Nur `transform` + `opacity` animieren. Kein `transition: all`.

## Tokens (in `app/globals.css` ergänzen)

```css
:root {
  --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-reveal: 700ms;
  --dur-micro: 160ms;
}
```

## 1. Hero-Entrance (einmalig beim Load — CSS-only, KEIN JS-Timing)

Badge → Headline → Subline → CTA-Reihe → Trust-Zeile → Foto, als Kaskade.

- Jedes Element: `opacity: 0 → 1` + `translateY(16px) → 0`, `var(--dur-reveal) var(--ease-out-strong)`
- Foto zusätzlich `scale(1.03) → 1`
- **Selbstlaufende CSS-Animation mit `animation-fill-mode: both`** und gestaffelten
  `animation-delay`s (0 / 70ms / 140ms / 210ms / 280ms / 200ms fürs Foto).
  HARD RULE: Above-the-fold-Inhalt darf NIEMALS auf JS-Timing warten — keine
  gehaltenen `opacity: 0`-Zustände, die ein Effect auflöst. Ohne CSS-Animation-Support
  bleibt alles sichtbar.

```css
@keyframes rise-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-rise { animation: rise-in var(--dur-reveal) var(--ease-out-strong) both; }
```

## 2. Scroll-Reveals (below the fold — progressive enhancement)

Sektions-Header und Karten-Gruppen erscheinen beim ersten Inview.

- Pattern (noscript-sicher): Elemente rendern SICHTBAR. Eine kleine Client-Komponente
  (`components/marketing/reveal.tsx`) setzt beim Mount `data-reveal` und beobachtet mit
  IntersectionObserver (`threshold: 0.2`, einmalig, danach `unobserve`); bei Inview
  `data-inview` setzen.
- CSS: `[data-reveal]:not([data-inview]) { opacity: 0; transform: translateY(20px); }`
  `[data-reveal] { transition: opacity 600ms var(--ease-out-strong), transform 600ms var(--ease-out-strong); }`
  → JS nie geladen = kein Attribut = alles sichtbar.
- Karten-Gruppen (Problem-Cards, Tage-Grid, FAQ-Items): Stagger **60ms** pro Item via
  `transition-delay` (index-basiert, max. 8 Items dann 0) — Stagger ist dekorativ,
  darf nie Interaktion blockieren.

## 3. Signature-Moment: Netzwerk-Diagramm

- Verbindungslinien als SVG-Pfade: `stroke-dasharray`/`stroke-dashoffset`-Draw beim
  Inview, 900ms `var(--ease-in-out-strong)`, Stagger 80ms pro Linie.
- Nodes: `scale(0.95) + opacity 0 → 1`, 500ms ease-out-strong, nach den Linien (Delay ~300ms).
  (Nie `scale(0)`.)
- Kiefer-Zentrum: dezenter Dauer-Puls als Atmen-Metapher —
  `@keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }`,
  `4s ease-in-out infinite`. Bei `prefers-reduced-motion: reduce`: Puls AUS.

## 4. Phasen-Timeline

- Verbindungslinie wächst `scaleX(0) → 1` mit `transform-origin: left`, 900ms
  ease-in-out-strong beim Inview.
- Die 3 Phasen-Karten: Reveal mit 80ms Stagger (Pattern aus §2).

## 5. Mikrointeraktionen

- Alle CTA-Buttons: Press-Feedback `:active { transform: scale(0.97); }` mit
  `transition: transform var(--dur-micro) var(--ease-out-strong);`
- Karten-Hover (Problem-Cards, Tage-Grid): `translateY(-2px)` + Schatten-Wechsel,
  200ms ease. Hover nur unter `@media (hover: hover) and (pointer: fine)`.
- FAQ-Accordion: Öffnen/Schließen animieren via CSS Grid-Trick
  (`grid-template-rows: 0fr → 1fr`, innerer Wrapper `overflow: hidden; min-height: 0`),
  250ms var(--ease-out-strong). MUSS Transition sein (interruptible), kein Keyframe.
  Chevron-Rotation bleibt.

## 6. Accessibility / Performance

- `app/globals.css` hat bereits einen `prefers-reduced-motion`-Reset
  (transition-duration 0.01ms) — prüfen, dass er auch `animation-duration` und den
  Breathe-Puls abdeckt; Reveals bleiben dann de facto sofort sichtbar. Opacity-Feedback
  darf bleiben, Bewegung fällt weg.
- Nur `transform`/`opacity`. Kein `transition: all`. Kein Layout-Property animieren.
- SVG-Draw und Puls sind GPU-freundlich; blur nirgends animieren.

## Nicht bauen (bewusst verworfen)

- Count-up-Zahlen, Parallax, Sticky-Scroll-Hijacking, Marquees, Konfetti,
  auto-playende Slider — passt nicht zur Ruhe-Personality und/oder Performance-Kosten.