第1轮
一、网站说明
这是一个 高端数字娱乐与艺人经纪综合代理机构 (Entertainment Agency) 的品牌官网 (Web版)。
该网站旨在通过极致的视觉张力展现公司的创意主张，向全球顶级品牌商与创作者推销其“超前娱乐生态”的构建能力，达成商业合作与IP授权的营销闭环。

二、全局视觉风格

视觉策略总结：
整体采用 “新包豪斯主义 (Neo-Bauhaus)”与“建筑感极简” 相结合的美学风格。抛弃任何沉闷的黑色系，转而使用极高明度的 “冰川白 (#F9FAFB)” 作为全局背景，搭配 “克莱因蓝 (#002FA7)” 作为核心识别色，并辅以 “警告橙 (#FF4500)” 作为强交互引导点。严禁任何渐变色，所有色彩均为高饱和度色块。
字体系统选用超大字重的几何无衬线体（如 Monument Extended）作为标题，通过极端的字间距调整营造呼吸感；正文则使用精细的微型字体（如 Inter），形成强烈的信息层级对比。
排版采用非标准的 24 栏网格，打破常规居中对齐，利用大量的留白和错位堆叠产生视觉冲力。
视觉元素以高精度的 3D 线框几何建筑群 为核心，模拟城市底图，所有图片素材均处理为高对比度的硬调摄影风格。
响应式策略采用“动态模块重排”，根据视口宽度实时调整 3D 线框的透视角度。

三、整体页面结构

页面采用 “线性叙事 + 沉浸式漫游” 的逻辑。
首页由“时空入口”、“核心愿景”、“领军矩阵”、“业务板块”、“实时影响力”、“技术参数”六大模块组成。模块间并非简单的物理堆叠，而是通过背景中持续运动的 3D 线框城市轴线进行串联，信息密度随滚动深度由稀疏转为紧凑，节奏感呈现为“冲击-舒缓-数据爆发-极简收尾”。

四、动效系统

核心动效策略：

全局漫游动效 (The Cockpit View)： 背景始终存在一个由 WebGL 渲染的 3D 线框建筑群。随着用户向下滚动，摄像机视角模拟“坐在高速行驶的汽车内”穿过这些线框大楼，产生强烈的纵深感和空间跃迁感。

非线性文本进入： 所有的标题文本不使用简单的淡入，而是采用“字符乱码跳变”后恢复为正常文字，或“从左至右的物理切割平移”。

磁力交互 (Magnetic Hover)： 鼠标指针在靠近任何可点击元素（按钮、卡片）时，指针形态会瞬间吸附并包裹该元素，并产生轻微的弹性形变。

视差位移 (Sticky Parallax)： 左右两侧的文字与中间的 3D 线框层运动速度不一致，形成多维度的空间堆叠效果。

物理动能感： 所有转场动效使用 cubic-bezier(0.16, 1, 0.3, 1) 的弹性函数，确保流畅且具有力量感。

五、页面模块分析
01 【模块名称：CORE_GATEWAY | 时空入口】

模块结构： 全屏 Hero 区，居中对齐。

布局方式： 极简中心布局，四周留白。

主要内容： 巨型动态品牌名 “AETHER ARCADE”，右上方显示实时北京/伦敦/纽约时间，底部有一个旋转的圆形“滚动探索”标识。

动效细节：

进场动效： 页面加载瞬间，背景的 3D 线框建筑从视线中心向四周迅速炸裂展开，随后稳定在匀速前行状态。

文字动效： “AETHER ARCADE” 十二个字母并非同时出现，而是像打字机一样，每个字母伴随一次 0.05s 的轻微位移颤动。

视角模拟： 鼠标轻微移动时，3D 线框建筑群会产生微小的俯仰摆动，模拟车头方向的细微修正。

02 【模块名称：GENESIS_LOGIC | 核心逻辑】

模块结构： 大面积文本块 + 右侧浮动 3D 构件。

布局方式： 文本占据左侧 60% 空间，右侧为半透明的 3D 线框结构图。

主要内容： 关于“重塑娱乐维度”的品牌宣言。

动效细节：

滚动触发： 随着页面下滑，文本行会逐行进行“纵向翻转进入”，就像翻转的广告牌。

交互反馈： 当鼠标悬停在关键字上时，背景的 3D 线框建筑群会瞬间变色（蓝变橙），并加速向前推进。

03 【模块名称：ARCHITECTS | 创意领航者】

模块结构： 纵向堆叠的个人卡片。

布局方式： 左右交替对齐。

主要内容： 介绍机构合伙人与核心制作人，包括其代表作。

动效细节：

路径动画： 当滚动到此模块，画面中会出现一条由克莱因蓝线条构成的“行驶轨迹”，引导视觉流向每一个人物。

图片动效： 人物肖像采用硬调黑白，Hover 时图片会产生“数码切片”效果，并弹出其过往成就的浮动标签。

背景协同： 此时背景的线框建筑会缩小，腾出侧边空间显示复杂的建筑结构参数。

04 【模块名称：MULTIVERSE_CONTENT | 娱乐宇宙】

模块结构： 响应式瀑布流卡片。

布局方式： 错位排列的网格。

主要内容： 沉浸式戏剧、数字音乐会、电影发行三大板块。

动效细节：

视差进入： 不同的内容卡片以不同的速度由底部向上升起。

卡片内部： 鼠标进入卡片时，卡片内的 3D 线框背景会旋转 90 度，模拟汽车过弯时的视觉偏移。

展开逻辑： 点击卡片，该卡片会瞬间扩张至全屏，其他卡片则化作线条消失，完成无感场景切换。

05 【模块名称：KINETIC_DATA | 动态势能】

模块结构： 五栏横向排列的数据看板。

布局方式： 底部对齐的等高条状。

主要内容： 粉丝覆盖数、全球奖项、联名品牌数、年度营收增幅、数字触达率。

动效细节：

数字生长： 当进入视口，所有数字从 0 开始快速跳动，但不是平滑增加，而是模拟老式翻页钟的跳动感。

星星评价动效： 每一颗星星元素在加载时会由中心向外扩散出三层同心圆波纹，随后定格。

线框联动： 背景的建筑群在此处密集化，形成类似于“数据机房”的线框迷宫。

06 【模块名称：TECH_BLUEPRINT | 蓝图规格】

模块结构： 侧边参数表 + 右侧巨型线框解构图。

布局方式： 模拟 CAD 制图软件的界面布局。

主要内容： 技术栈（Unreal Engine 5, Web3, Haptics）、执行维度、物理参数。

动效细节：

线框扫描： 一道亮蓝色的横向光束从上往下持续扫描右侧的 3D 建筑线框图，被扫过的部分会短暂发光。

文本打字机： 左侧的参数文字伴随“哔”声（视觉上的提示）逐条弹出。

视角加速： 当用户加速滚动时，背景线框会产生“动感模糊 (Motion Blur)”的线条拉伸，模拟赛车极速前进的视觉。

07 【模块名称：VOID_CONTACT | 虚无入口】

模块结构： 底部大面积空白 + 巨型按钮。

布局方式： 极简页脚。

主要内容： 社交媒体链接、办公地点、官方邮箱。

动效细节：

反转动效： 鼠标移入“GO TO TOP”按钮，全屏背景色从冰川白瞬间切换为克莱因蓝，文字反白。

终点动画： 3D 线框建筑群在最后一刻汇聚成一个光点消失，预示着这段漫游旅程的结束。

线条汇聚： 所有页脚文本通过线条相连，当鼠标滑过任一链接，连接该链接的所有线条都会产生电脉冲般的流动效果。
-----

请开始执行任务，完成后请按规则向我汇报，只需向我汇报进度即可，无需等待我的确认指令。

资源引用： 图片请使用 Unsplash 或占位图服务，图标使用 Lucide / Heroicons (SVG 代码)，确保仓库不依赖本地不可复用的资源。

请开始遵照上述每一项要求进行设计，并实时更新Task Todo List以备我可以实时监控完成情况，整个过程无需我确认是否进行下一步，你只需按任务列表逐步完成，直到整个任务全部完成即可，直接生成一个完整的html文件，所有的html、js、css全部写在一个html文件中

由于文件较大，请分多次写入：
1. 第一次创建文件并写入前半部分
2. 后续使用追加模式写入剩余内容
3. 每次写入不超过 100 行代码

第2轮
你画点有意义的东西啊，不要就给我放一堆立方体，我要你给我画像罗马斗兽场这种古典的建筑！我要街边漫游的视角！

第3轮
给所有文字做半透明毛玻璃背景，不然容易和背景的线框模型混合

第4轮
透明度增加，文字主色也给我改成橙色

第5轮
顶部的时间往下挪一点，不要被navbar遮住

第6轮
multiverse__grid第二行后面两列缺位了

第7轮
换掉https://images.unsplash.com/photo-1558618666-fcd25c85f82e?w=800&h=500&fit=crop这张无法查看的图，然后void-contact__bottom两侧文字颜色太深了，和背景色几乎一样，看不清

第8轮
为什么会闪屏？

第9轮
首屏文字不要换行，首屏也不需要毛玻璃！

第10轮
首屏文字缩小一点，不要贴着两侧视窗

第11轮
kinetic-data__grid这里面的数字怎么都不在同一个水平线上的，上下杂乱摆放

第12轮
。。。仍然是上下不平衡，你给下面的副标题一个固定的高度啊

第13轮
。。。第一个下面的星星你不考虑？

第14轮
。。。星星没对齐

