Alpine Express Luxury Train Video Hero Section (HTML & Tailwind)

# Hero Section Generation Prompt

Use the following detailed prompt with an AI coding assistant to create a luxury video background hero section identical or similar to **Hero--15**:

---

```markdown
Design and code a luxury, high-end travel website hero section using HTML5, Tailwind CSS via CDN, and Vanilla JavaScript. The hero section must feature a full-screen background video view of a scenic alpine train ride, sophisticated glassmorphism UI elements, and a clean minimalist aesthetic.

### Key Requirements:

1. **Background Video Layer**:
   - Fullscreen HTML5 `<video>` tag playing continuously (`autoplay muted loop playsinline`).
   - Use video URL: `https://strvid.nyc3.cdn.digitaloceanspaces.com/motionsite/hero_bg_train.mp4` (or relative `hero_bg_train.mp4`).
   - Fullscreen HTML5 `<video>` tag playing continuously (`autoplay muted loop playsinline`) with no gradient overlays for raw, vibrant video clarity.

2. **Top Navigation Bar**:
   - Clean, 100% transparent backdrop with no background fill or borders.
   - Brand Logo: Custom mountain SVG icon with "WONDER" or "WANDERLUST" text in uppercase tracked serif typography.
   - Links: "Destinations", "Experiences", "About Us", "Travel Guide", "Blog" with animated underline hover effects.
   - Action Items: Search icon button triggering a search overlay modal, and a pill-shaped "Plan Your Journey" outline CTA button.
   - Fully responsive with a toggleable glassmorphism mobile menu drawer.

3. **Center Hero Content**:
   - Animated pill badge: `✧ ALPINE EXPRESS EXPEDITIONS` with a pulsing emerald status dot.
   - Main Headline: Large, bold luxury typography in solid black (`Cinzel` serif: "JOURNEY STAYS") without drop shadow.
   - Subtitle: "Discover places. Create stories." in crisp black sans-serif font.
   - Call-to-Action Button: "EXPLORE NOW" (Solid white pill button with bold black text, black right arrow icon, and smooth hover elevation).

4. **Interactive Modals (JavaScript)**:
   - **Search Modal**: Fullscreen/centered glassmorphic overlay for searching destinations with quick-tag pills and smooth fade transition.
   - **Itinerary Preview Modal**: Detailed day-by-day travel card with route breakdown, pricing, and reservation button.

5. **Design System & Aesthetics**:
   - Color Palette: Deep Navy (`#070C18`), Ice White (`#FFFFFF`), Amber Gold (`#D4AF37`), Emerald Green (`#10B981`).
   - Typography: Google Fonts `Cinzel` for headings and `Plus Jakarta Sans` for body/navigation.
   - Responsiveness: Flawless scaling from mobile (320px) to ultra-wide displays (4K).
```