Elegant restaurant site with menu, gallery and reservations.
The background image slowly oscillates between scale(1.1) and scale(1), creating a cinematic depth sensation that immerses the visitor in the restaurant's atmosphere.
animation: heroZoom 20s ease-in-out infinite alternate Explore Backgrounds →Each element appears with a progressive delay (0.3s, 0.6s, 0.9s, 1.2s), guiding the visitor's eye from top to bottom in an elegant cascade effect.
animation: fadeInUp 1s ease forwards + animation-delay Explore Scroll & Parallax →The navigation becomes semi-transparent with background blur on scroll, keeping content readable while preserving the site's visual immersion.
backdrop-filter: blur(20px) + transition: all 0.4s Explore Glass & Morphism →On hover, the image zooms, a gradient overlay appears, and descriptive text slides from the bottom. A triple effect that transforms a simple gallery into an interactive experience.
transform: scale(1.1) + translateY(0) on :hover Explore Hover & Interactions →The golden line under the active tab widens on hover, and content changes with an animated fade-in. The user instantly understands category navigation.
animation: fadeIn 0.5s + width transition on :hover Explore Navigation & UI →A luminous line crosses the button on hover, mimicking a golden reflection. Reinforces the restaurant's premium character and encourages clicks on main CTAs.
linear-gradient + left: -100% to 100% on :hover Explore Buttons →The card rises 5px with a golden border and drop shadow on hover. A micro-interaction that makes each dish clickable and highlights the visitor's selection.
transform: translateY(-5px) + border-color: gold Explore Hover & Interactions →