feat: Implement Phase 1 enhancements - components and animations

Components:
- Extract ServiceItem component with hover effects
- Extract SupportItem component with hover animations
- Extract Card component with scroll animations
- Extract Section component for consistent layout

Enhancements:
- Add Intersection Observer for scroll-triggered animations
- Implement hover effects on cards, services, and support items
- Add PWA manifest (site.webmanifest)
- Create SVG OG image placeholder for social sharing
- Add comprehensive favicon meta tags (16x16, 32x32, apple-touch-icon)
- Respect prefers-reduced-motion for accessibility

Files modified:
- src/pages/index.astro - Refactored to use new components
- src/layouts/BaseLayout.astro - Enhanced favicon and meta tags

Files created:
- src/components/Card.astro
- src/components/Section.astro
- src/components/ServiceItem.astro
- src/components/SupportItem.astro
- public/og-image.svg
- public/site.webmanifest
- public/FAVICON_INSTRUCTIONS.md

Note: PNG favicon variants still need to be generated (see FAVICON_INSTRUCTIONS.md)

public/FAVICON_INSTRUCTIONS.md

@@ -0,0 +1,51 @@
+# Favicon Generation Instructions
+
+The following favicon files are referenced in the site but need to be generated:
+
+- `favicon-16x16.png` - 16x16px PNG favicon
+- `favicon-32x32.png` - 32x32px PNG favicon  
+- `apple-touch-icon.png` - 180x180px PNG for Apple devices
+- `og-image.png` - 1200x630px PNG for social media sharing (optional, currently using SVG)
+
+## How to Generate
+
+### Option 1: Use an Online Tool
+Visit https://realfavicongenerator.net/ and upload your source image (coffee emoji or custom design).
+
+### Option 2: Use ImageMagick (if available)
+If you have a source PNG image:
+
+```bash
+# 16x16
+convert source.png -resize 16x16 favicon-16x16.png
+
+# 32x32
+convert source.png -resize 32x32 favicon-32x32.png
+
+# Apple touch icon
+convert source.png -resize 180x180 apple-touch-icon.png
+
+# OG image
+convert source.png -resize 1200x630 og-image.png
+```
+
+### Option 3: Use the SVG favicon
+The current `favicon.svg` (coffee emoji) works in modern browsers. The PNG variants are fallbacks for older browsers and specific platforms.
+
+## Current Status
+
+- ✅ `favicon.svg` - Exists (coffee emoji)
+- ❌ `favicon-16x16.png` - Needs to be created
+- ❌ `favicon-32x32.png` - Needs to be created
+- ❌ `apple-touch-icon.png` - Needs to be created
+- ✅ `og-image.svg` - Created (SVG placeholder)
+- ⚠️  `og-image.png` - Optional (browsers support SVG, but PNG is more compatible)
+
+## Design Recommendations
+
+Use the cozy coffee theme colors:
+- Background: `#1a1410` (dark coffee)
+- Accent: `#e8bf8e` (light coffee/cream)
+- Text: `#f4e9d8` (cream)
+
+The favicon should be simple and recognizable at small sizes. The coffee emoji ☕ is perfect!

public/og-image.svg

@@ -0,0 +1,30 @@
+<svg width="1200" height="630" xmlns="http://www.w3.org/2000/svg">
+  <!-- Background gradient -->
+  <defs>
+    <linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#1a1410;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#2a1f18;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+
+  <!-- Background -->
+  <rect width="1200" height="630" fill="url(#bgGradient)"/>
+
+  <!-- Coffee cup emoji (approximate) -->
+  <text x="600" y="250" font-size="120" text-anchor="middle">☕</text>
+
+  <!-- Title -->
+  <text x="600" y="380" font-family="system-ui, sans-serif" font-size="72" font-weight="bold" fill="#e8bf8e" text-anchor="middle">
+    Hidden Den Cafe
+  </text>
+
+  <!-- Subtitle -->
+  <text x="600" y="450" font-family="system-ui, sans-serif" font-size="36" fill="#c4b5a0" text-anchor="middle">
+    A cozy corner of the internet
+  </text>
+
+  <!-- Bottom text -->
+  <text x="600" y="550" font-family="system-ui, sans-serif" font-size="24" fill="#8b6f47" text-anchor="middle">
+    Self-hosted • Privacy-focused • Furry-friendly
+  </text>
+</svg>

public/site.webmanifest

@@ -0,0 +1,32 @@
+{
+  "name": "Hidden Den Cafe",
+  "short_name": "Hidden Den",
+  "description": "A cozy, self-hosted corner of the internet",
+  "icons": [
+    {
+      "src": "/favicon.svg",
+      "sizes": "any",
+      "type": "image/svg+xml"
+    },
+    {
+      "src": "/favicon-16x16.png",
+      "sizes": "16x16",
+      "type": "image/png"
+    },
+    {
+      "src": "/favicon-32x32.png",
+      "sizes": "32x32",
+      "type": "image/png"
+    },
+    {
+      "src": "/apple-touch-icon.png",
+      "sizes": "180x180",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#d4a574",
+  "background_color": "#1a1410",
+  "display": "standalone",
+  "start_url": "/",
+  "orientation": "portrait"
+}