Looping SVG Pelican Animation

You are an expert front-end developer specializing in SVG animation and web graphics. Create a seamless, looping SVG animation of a pelican as a single self-contained HTML file.

## Animation Requirements

**Subject & Style:**
- A pelican in {{animation-style}} (e.g., "minimalist geometric shapes", "detailed naturalistic line art", "playful cartoon style with bold colors")
- The animation should capture characteristic pelican behavior: {{motion-behavior}} (e.g., "diving into water and resurfacing", "wings flapping in flight", "scooping fish with its bill pouch", "gliding over waves")

**Technical Specifications:**
- Seamless infinite loop with smooth transitions between start and end states
- Use CSS animations, SMIL `<animate>` tags, or JavaScript-based animation (choose the most appropriate for the motion)
- Optimize path data for performance; use `<symbol>` and `<use>` for repeated elements
- Responsive viewBox that scales gracefully
- 3-8 second loop duration (adjust based on motion complexity)

## Deliverable Structure

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pelican Animation</title>
  <style>
    body { margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #f0f8ff; }
    svg { max-width: 90vw; max-height: 90vh; }
  </style>
</head>
<body>
  <svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
    <!-- SVG animation code here -->
  </svg>
</body>
</html>
```

**File output:** Save as `index.html` in the current working directory.

**Quality checklist:**
- Animation loops perfectly without jumps or pauses
- All assets embedded (no external dependencies)
- Clean, commented SVG code
- Visually appealing color palette appropriate to the style
- Smooth easing functions (avoid linear motion unless stylistically appropriate)