🌌 Sky Transition Animation

An interactive, cinematic theme switcher that simulates a day-to-night transition using CSS clip-path logic. Instead of a simple color swap, this project features a "moving shadow" effect that expands from the top of the screen.

🚀 The "Magic" Behind the Move

This project uses a unique approach to dark mode:

• Circular Clip-Path: The night layer is hidden as a 0% circle at the top-middle of the screen.
• Transition Logic: When the sun is clicked, JavaScript toggles an .active class, causing the circle to grow to 150% over 5 seconds.
• Layered Stacking: Uses ::after pseudo-elements and z-index management to ensure the Sun/Moon icons remain interactive and visible during the transition.

🛠️ Technical Stack

• HTML5: Structured for layered overlays.
• CSS3: Advanced clip-path, transition effects, and rgba transparency.
• JavaScript: DOM manipulation and class-list toggling for state control.

💡 Key Learnings

• Mastering the coordinate system of clip-path: circle(radius at x y).
• Managing pointer-events: none to prevent invisible layers from blocking user interaction.
• Coordinating CSS transitions with JavaScript event listeners.