# Animation System (GSAP & ScrollTrigger)

## 1. Core Principles
- **Elegance:** No fast or jerky movements.
- **Subtlety:** Animations should enhance, not distract.
- **Narrative:** Every animation must guide the user's eye and tell the story of the brand.

## 2. Durations & Easing
- **Fast:** 0.6s (UI elements, hovers)
- **Normal:** 1.2s (Text reveals, small image reveals)
- **Slow:** 2.4s (Hero load, large image transitions)
- **Easing:** `power3.out` (Standard reveal), `power2.inOut` (Continuous elements), `expo.out` (Snappy UI interactions).

## 3. Reveal Rules
- **Text:** Reveal via clipping mask from bottom to top. Stagger by 0.05s per line or word depending on importance.
- **Images:** Slow scale-down (1.1 to 1.0) coupled with an opacity fade or mask reveal.

## 4. Parallax Rules
- **Hero Image:** `y: "20%"` over the course of the hero section scroll.
- **Content Blocks:** Subtle `y: "-5%"` to create a floating effect over backgrounds.

## 5. Hover Rules
- **Links:** Expanding underline from center out, opacity transition.
- **Buttons:** Background color transition (0.4s ease).
- **Cards:** No heavy scale. Extremely subtle brightness/contrast shift.

## 6. Page Transitions
- Fade to Warm Parchment or Vatican Black (depending on destination page theme) over 0.8s.

## 7. Reduced Motion Strategy
- Check for `prefers-reduced-motion: reduce`.
- If true, kill all ScrollTrigger instances and GSAP animations, defaulting to simple opacity fades or instant appearance.