Fix cloud background images to respect BASE_PATH (#5)

* Fix cloud background images to respect BASE_PATH

Convert inline style background-image to Tailwind bg-[url(...)] classes
so that Vite's CSS pipeline can automatically apply the base path.

Problem:
- Cloud images were using inline style attributes
- Inline styles are not processed by Vite and don't get base path
- This caused 404s on GitHub Pages subdirectory deployment

Solution:
- Use Tailwind arbitrary values: bg-[url('/images/...')]
- Tailwind classes are processed through Vite's CSS pipeline
- Base path is automatically applied during build

Tested:
- With BASE_PATH=/repo-name: URLs become /repo-name/images/cloud-*.jpg
- Without BASE_PATH: URLs remain /images/cloud-*.jpg
- Cloudflare Workers staging: works (BASE_PATH not set)
- GitHub Pages subdirectory: will work (BASE_PATH set)

* docs: document Tailwind usage for CSS images with BASE_PATH

Author: jubalm

.claude/CLAUDE.md

@@ -77,11 +77,8 @@ public/
 
 ## Styling & Components
 
-Not yet defined. Decisions needed:
-- CSS approach (Tailwind, CSS modules, plain CSS, etc.)
-- Component library or custom
-- Dark mode strategy
-- Design system/tokens
+- **CSS Framework**: Tailwind CSS 4.1.17
+- **Images in CSS**: Always use Tailwind classes (e.g., `bg-[url('/images/...')]`) instead of inline styles, as Tailwind processes through Vite and respects BASE_PATH configuration
 
 ## Development Workflow
 

src/components/AnimatedClouds.astro

@@ -47,9 +47,9 @@
 
 <div class="absolute inset-0 w-full h-full pointer-events-none overflow-hidden">
   <!-- Cloud Layer 1 - Slow -->
-  <div class="fog-layer animate-fog-slow" style="background-image: url('/images/cloud-1.jpg');"></div>
+  <div class="fog-layer animate-fog-slow bg-[url('/images/cloud-1.jpg')]"></div>
   <!-- Cloud Layer 2 - Fast -->
-  <div class="fog-layer fog-layer-fast animate-fog-fast" style="background-image: url('/images/cloud-2.jpg');"></div>
+  <div class="fog-layer fog-layer-fast animate-fog-fast bg-[url('/images/cloud-2.jpg')]"></div>
   <!-- Cloud Layer 3 - Medium -->
-  <div class="fog-layer fog-layer-medium animate-fog-medium" style="background-image: url('/images/cloud-1.jpg');"></div>
+  <div class="fog-layer fog-layer-medium animate-fog-medium bg-[url('/images/cloud-1.jpg')]"></div>
 </div>