> 项目目标使用原生HTML、CSS和JavaScript，构建一个集美学与动效于一体的高级天气展示卡片。
>
> 视觉风格: 主卡片采用现代设计风格（如：毛玻璃、新拟态），视觉上具有层次感和精致感。
>
> 天气模式: 支持手动切换四种核心天气模式：晴天、雨天、下雪、大风。
>
> 全屏动效: 为每种天气配备专属的全屏动态背景，切换时动画即时应用，无延迟感。
>
> 晴天: 太阳或缓慢飘动的云。
>
> 雨天: 连绵的雨滴下落。
>
> 下雪: 优雅的雪花飘落。
>
> 大风: 吹动的树叶或粒子效果。
>
> 氛围匹配: 界面整体色调与动画效果需与天气氛围强关联（如：晴天明亮，雨天阴沉）。
>
> 深色模式: 界面以深色模式为基础，营造沉浸式和高级的视觉体验。
>
> 控制方式: 提供一组清晰直观的控制按钮，用于无缝切换天气模式。
>
> 技术约束: 所有代码（HTML, CSS, JS）需封装在单一HTML文件中。
>
> 实现零依赖，禁止使用任何外部JS库或框架（如jQuery, React, Vue）。
>
> 平滑过渡: 切换天气时，背景、动画和卡片元素应有平滑的淡入淡出过渡效果，避免生硬跳转。
>
> 响应式布局: 卡片和背景动画需完全响应式，在桌面和移动设备上均能完美显示，无布局错乱。
>
> 核心信息: 卡片上应包含基本天气信息占位符，如温度 (例如 25°C)、天气描述 (例如“局部多云”) 和城市名称。
>
> 交互反馈: 所有可交互元素（如切换按钮）在鼠标悬停 (hover) 和点击 (click) 时应有明确的视觉反馈