# Key Features

### 1. Immersive User Experience
*   **Auto-Scroll Carousel**: Property cards feature a custom-built image carousel that automatically glides (right-to-left) on hover, providing a seamless preview without user clicks.
*   **Gesture Controls**: Fully touch-responsive cards allow users to swipe through images manually.
*   **Micro-Interactions**: Hovering over pricing reveals a detailed cost breakdown (total for 3 nights + fees), demonstrating complex state derivation.

### 2. Advanced Map Integration
*   **Dynamic Mapping**: Integrated **Leaflet** maps that dynamically load to avoid Server-Side Rendering (SSR) issues.
*   **Two-Way Sync**: A sophisticated interaction where hovering over a property card highlights its corresponding pin on the map, and vice-versa.

### 3. App-Like Transitions
*   **Shared Element Transitions**: Utilises **Framer Motion's** `layoutId` to create a "magic move" effect, seamlessly transitioning images from the listing grid to the details page hero section.
*   **Staggered Animations**: Elements enter the viewport with orchestrated, GPU-accelerated animations for a premium feel.

### 4. Smart Search & Validation
*   **Intelligent Forms**: The search bar includes date logic (preventing check-out before check-in) and a custom guest counter with maximum occupancy limits.
*   **Robust Validation**: Powered by **Zod** and **React Hook Form** to ensure data integrity and provide real-time feedback.