@charset "utf-8";
/* ==========================================================================
   三峡传奇官网 · 首页视觉特效层        style/effects.css
   --------------------------------------------------------------------------
   改动前请先读这几条约定：

   1) 除「正版授权印章」外，本文件所有特效样式**一律以 `html.fx-on` 为前提**，
      该类由 js/effects.js 在 <head> 中同步添加。因此当 JS 未加载 / 被拦截 /
      报错，或用户系统开启"减弱动态效果(prefers-reduced-motion)"时，
      页面与未加特效时**逐像素一致** —— 不存在"内容被藏起来显示不出来"的风险。

   2) 【唯一例外】#seal（正版授权印章）是**内容级元素**，不是动效：
      它的基础样式常驻（无 JS 也显示），只有"盖章"入场动画才挂在 html.fx-on 下。
      原因：印章承载"官方授权"这一信息，不能被"动效被禁用"连坐隐藏。

   3) 所有特效只用 transform / opacity / filter 等**合成属性**，或独立的
      绝对定位叠加层（canvas / div），不参与文档流，不改变任何元素的
      尺寸与位置 —— 零版式风险。

   4) 纯 CSS + 原生 JS，无第三方依赖、无外部请求、无图片素材。
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. 英雄区火星粒子层（canvas，由 js 创建）
   与 #bodybg 同一套定位：left:50% + margin-left:-960px，跟随主视觉水平对齐。
   z-index:100 —— 高于背景拼贴(未设 z-index)，低于印章(120)与正文区(1500)。
   -------------------------------------------------------------------------- */
#fxHero{display:none}
html.fx-on #fxHero{
	display:block;
	position:absolute;
	top:0; left:50%; margin-left:-960px;
	width:1920px; height:625px;		/* 625 = 主视觉区高度（#flash 底边 244+316+65） */
	z-index:100;
	pointer-events:none;			/* 绝不拦截鼠标事件 */
}


/* --------------------------------------------------------------------------
   2. 底部火光 —— 主视觉下沿向上"渗"出的暖光。

   与上一版的区别（上一版被反馈"和背景不融洽、不够丝滑"）：
   a) **改用 mix-blend-mode:screen（加色混合）**。上一版是普通半透明色块叠加，
      等于给画面蒙了一层"奶白色薄雾"—— 黑石台、黑龙的暗部被整体提亮，
      纹理和对比度一起被抹平，看起来像镜头起雾而不是火光。
      screen 混合是"光叠加到物体上"：暗处吃光明显、亮处几乎不变，
      底图的纹理与层次完整保留，这才是真实火光的物理表现。
   b) **去掉所有近白色**，只用高饱和暖橙。白色在任何底色上都会拉低饱和度、
      产生"灰蒙蒙"的观感；橙色则只会"暖化"画面。
   c) **4 层错位的光斑**（3 个小火头 + 1 片大范围底色）代替原来的一整块椭圆，
      横向强度不均 —— 火光本来就是忽左忽右的，均匀的一块必然"假"。
   d) **四向羽化 mask**：上下左右都渐隐到 0，任何一处都不存在可辨认的边界。
   e) 闪烁幅度从 38% 降到 28%、周期从 3.4s 拉长到 6.5s，由"频闪"变"呼吸"。

   层级与坐标：#bodybg 同款 left:50%+margin-left:-960px；div 底边正好落在
   主视觉底边(625)。transform-origin 定在底边，缩放时是向上"窜"。
   -------------------------------------------------------------------------- */
#fxGlow{display:none}
html.fx-on #fxGlow{
	display:block;
	position:absolute;
	top:150px; left:50%; margin-left:-960px;
	width:1920px; height:475px;		/* 150+475 = 625，正好贴住主视觉底边 */
	z-index:99;
	pointer-events:none;
	mix-blend-mode:screen;			/* 加色光，不蒙雾 */
	transform-origin:50% 100%;
	background:
		/* ⚠⚠ 铁律：每个光斑椭圆都必须【完整落在 div 盒子里】——
		   「中心% − 半径% ≥ 0」且「中心% + 半径% ≤ 100%」（横、竖都要满足）。
		   因为 radial-gradient 只在椭圆边界处才降到 alpha 0；只要椭圆越过盒边，
		   盒边上的 alpha 就还不为 0，于是那一整条边会变成"光突然没了"的硬切。
		   2026-10-15 用户反馈的"层级不丝滑"就是这个：原来三个火头中心放在 100%，
		   椭圆一半伸到盒外，底边处 alpha 仍是满值 → 底边成了 +38 → 0 的刀口。
		   本层【不使用 mask】—— 光斑自己收干净了，就不需要 mask 兜底，
		   也就不会再出现 mask 合成兼容性那一类问题。 */
		/* 三个不等高的"火头"（下缘都留在盒内，自然淡出） */
		radial-gradient(ellipse 20% 20% at 26% 76%,
			rgba(255,152,62,.38) 0%,
			rgba(255,120,28,.12) 52%,
			rgba(255,96,0,0) 100%),
		radial-gradient(ellipse 22% 24% at 47% 74%,
			rgba(255,166,80,.46) 0%,
			rgba(255,126,32,.13) 52%,
			rgba(255,100,0,0) 100%),
		radial-gradient(ellipse 18% 19% at 72% 78%,
			rgba(255,148,58,.34) 0%,
			rgba(255,118,26,.10) 52%,
			rgba(255,94,0,0) 100%),
		/* 中低区整体底色，把三个火头连成一片 */
		radial-gradient(ellipse 50% 26% at 50% 74%,
			rgba(255,128,40,.32) 0%,
			rgba(255,108,22,.09) 54%,
			rgba(255,90,0,0) 100%),
		/* 更大更淡的一层，负责把光往上方铺开，避免出现"一条亮带" */
		radial-gradient(ellipse 50% 42% at 50% 58%,
			rgba(255,118,32,.15) 0%,
			rgba(255,104,20,.05) 56%,
			rgba(255,92,0,0) 100%),
		/* 贴近下沿的一层薄光：把"火从下面透上来"的观感找回来，
		   中心 87% + 半径 13% = 100%，下缘依旧正好收成 0（不产生硬边） */
		radial-gradient(ellipse 50% 13% at 50% 87%,
			rgba(255,140,48,.22) 0%,
			rgba(255,120,28,.06) 54%,
			rgba(255,100,0,0) 100%);
	animation:fxFire 6.5s ease-in-out infinite;
}



/* --------------------------------------------------------------------------
   3. 正版授权印章 —— 这里只放"盖章"动效，基础样式在 index.html 内联
   --------------------------------------------------------------------------
   ⚠ 为什么基础样式不在这个文件里：
   印章是**内容级**元素（承载"官方授权"这一信息），不能因为某天 effects.css
   加载失败就连坐丢样子、变成一串裸文字糊在海报上。所以它的定位、配色、字形
   全部内联写在 index.html 的 <style id="seal-base"> 里，随 HTML 一起到达；
   本文件只负责"盖章"这一刻 —— 动效坏了，印章仍是个正经印章。

   现行形制（详细推导见 .workbuddy/memory/MEMORY.md）：
   · 直径 276px，整体右倾 12°；印面实心不透明（半透明会透出水印鬼影）。
   · 文字「三峡传奇 正版授权」8 字，4 列 × 2 行，字号 48px。
   · 配色：墨玉青绿印面 + 暖金内外双环 + 金字。
   · 印泥厚薄不均用 4 处 radial-gradient 色晕做（**不是 mask 挖洞** ——
     早期版本用 mask-composite 挖 4 个缺口，某些渲染下会变成诡异黑点，
     兼容性也差，已彻底弃用）。
   · 位置：2026-10-15 从 (1154,338) 挪到 (1330,30) —— 贴右上角。
     原先它必须待在右下偏中，是因为底图 images/1_03.jpg 里烧死了一行第三方
     模板署名（"DESIGNED AND MADE BY THE DOUGLASS.CN"，设计坐标 x1170~1406 /
     y507~517），当年用"印章压住水印"来遮。**该水印现已从图里抹掉**，
     所以印章的落位不再有任何约束，可以自由摆。
   · 挪位时只需改 index.html 里 <style id="seal-base"> 的 top/left ——
     它们用的是 #bodybg 那张 1920 宽海报的坐标系。可搬范围：
     为照顾 1440 宽的窗口（此时可见的设计 x 是 240~1680），
     left 只能取 240~1404，top 只能取 0~349。
   -------------------------------------------------------------------------- */
/* 「盖章」入场：从高处放大着落下（像手持印章往下按），触底后 4% 微回弹，
   然后定住不动 —— 印章盖完就该是静止的。 */
html.fx-on #seal{
	animation:fxStamp .78s cubic-bezier(.18,1.32,.38,1) .4s both;
}
@keyframes fxStamp{
	0%  {opacity:0; transform:rotate(-12deg) scale(2.35)}
	58% {opacity:1; transform:rotate(-12deg) scale(1)}
	72% {opacity:1; transform:rotate(-12deg) scale(1.045)}
	86% {opacity:1; transform:rotate(-12deg) scale(.99)}
	100%{opacity:1; transform:rotate(-12deg) scale(1)}
}


/* --------------------------------------------------------------------------
   4. 宣传视频播放键呼吸金光
   —— 只动 filter（发光），不碰 opacity，所以原有的 :hover 反馈保留不变。
   （按钮上的"流光扫过"效果已按反馈移除，此处只留播放键的呼吸光）
   -------------------------------------------------------------------------- */
html.fx-on #video .video_play{
	animation:fxPlayGlow 2.6s ease-in-out infinite;
}
@keyframes fxPlayGlow{
	0%,100%{filter:drop-shadow(0 0 2px rgba(255,190,0,.45))}
	50%    {filter:drop-shadow(0 0 16px rgba(255,196,40,.95))}
}


/* --------------------------------------------------------------------------
   5. 内容区滚动入场
   —— .fx-reveal / .fx-ready / .fx-in 三个类**全部由 JS 动态添加**，且只加给
      "加载时位于首屏之外"的模块，所以首屏不会有任何闪烁；没有 JS 时这些类
      都不存在，一切照旧。
   —— 分两步：fx-reveal 只负责"瞬间落到隐藏初态"（不带 transition），
      JS 强制回流后再补 fx-ready 打开过渡。这样元素是直接出现在初态，
      而不是"先显示、再当着用户的面淡出"。
   -------------------------------------------------------------------------- */
html.fx-on .fx-reveal{
	opacity:0;
	transform:translate3d(0,34px,0);
}
html.fx-on .fx-reveal.fx-ready{
	transition:opacity .9s cubic-bezier(.22,.61,.36,1),
	           transform .9s cubic-bezier(.22,.61,.36,1);
}
html.fx-on .fx-reveal.fx-in{
	opacity:1;
	transform:translate3d(0,0,0);
}


/* --------------------------------------------------------------------------
   6. 公告文字绿色呼吸光
   -------------------------------------------------------------------------- */
html.fx-on .gonggao_txt a{
	animation:fxNotice 3.6s ease-in-out infinite;
}
@keyframes fxNotice{
	0%,100%{text-shadow:0 0 0 rgba(160,255,60,0)}
	50%    {text-shadow:0 0 9px rgba(190,255,70,.85),0 0 20px rgba(140,230,40,.35)}
}


/* --------------------------------------------------------------------------
   7. 数据面板切换淡入（版本介绍 / 充值比例 / 回收比例 / 分区列表）
   --------------------------------------------------------------------------
   原来 .Tab_nr 是 display:none ↔ block 的硬切，"啪"地一下就换掉了。
   这里补一层 0.34s 的纯不透明度淡入。

   ⚠ 为什么用 JS 加类，而不是直接写 `.Tab_nr{animation:...}`：
   · 直接写会连**首屏加载**也淡入一次，而且一旦某环境不推进 CSS 动画，
     `from{opacity:0}` 会把整个面板永久留在透明状态 —— 内容级事故。
   · 改成 JS 在**切换那一刻**给面板加 `.fx-tab-in`：只在切换时播放；
     动画不跑就还是原来的"直接出现"，绝不隐藏内容。
   · 动画**不写 animation-fill-mode**（默认 none）。这样即使动画完全没执行，
     面板的自身样式 opacity:1 依然生效；写了 both 才会出现"卡在起始帧看不见"。

   ⚠⚠ 只动 opacity，**绝不用 transform / filter** ——
   这两个属性会给 `position:absolute` 的 easyscroll 滚动条
   （.scroll_vertical_bar）换掉包含块（.scroll_container），滚动条会弹到别处。
   -------------------------------------------------------------------------- */
html.fx-on .fx-tab-in{
	animation:fxTabIn .34s cubic-bezier(.22,.61,.36,1);
}
@keyframes fxTabIn{
	from{opacity:0}
	to  {opacity:1}
}


/* --------------------------------------------------------------------------
   8. 回到顶部按钮（#fxTop —— 由 js/effects.js 动态创建）
   --------------------------------------------------------------------------
   整页实际高度约 2100px（1920 底图 2000 + 143 页脚），滚到底后原本没有任何
   回顶入口，只能手动往上拖。这里补一个右下角悬浮按钮。

   · position:fixed —— 不参与文档流、不占页面空间，对版式零影响；
   · 由 JS 创建 —— 没有 JS 时这个元素根本不存在，页面与从前逐像素一致；
   · 默认 opacity:0 + visibility:hidden，滚动超过约 0.75 屏后由 JS 加 `.on` 淡入；
   · 形制沿用「版本介绍」那排标签的暗红金属牌（同色系渐变 + 暖金描边），
     免得又冒出一个风格不搭的圆钮。
   · 可搬范围：right/bottom 都可以随便给；宽 46px 时在 ≥1280 宽窗口下
     正好落在内容列（975px 居中）右侧的空白里，不压任何文字。
   -------------------------------------------------------------------------- */
#fxTop{display:none}
html.fx-on #fxTop{
	display:block;
	position:fixed; right:12px; bottom:18px;
	width:46px; height:46px;
	z-index:1600;						/* 高于正文层(1500) */
	box-sizing:border-box; border-radius:50%;
	cursor:pointer; text-decoration:none;
	opacity:0; visibility:hidden;
	transform:translate3d(0,10px,0);
	/* 可见性延迟 0.3s 再收，等透明度淡完才消失；出现时则立即生效 */
	transition:opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
	background:linear-gradient(180deg,#5a2a24 0%,#431d18 55%,#331511 100%);
	border:1px solid rgba(255,196,80,.52);
	box-shadow:inset 0 1px 0 rgba(255,190,140,.20),0 3px 12px rgba(0,0,0,.50);
}
html.fx-on #fxTop.on{
	opacity:1; visibility:visible; transform:translate3d(0,0,0);
	transition:opacity .3s ease, transform .3s ease, visibility 0s;
}
html.fx-on #fxTop:hover{
	border-color:rgba(255,210,122,.92);
	background:linear-gradient(180deg,#6d332a 0%,#4d221b 55%,#3a1813 100%);
	box-shadow:inset 0 1px 0 rgba(255,200,150,.30),0 0 16px rgba(255,140,60,.34),0 3px 12px rgba(0,0,0,.50);
}
html.fx-on #fxTop:focus{outline:none;border-color:rgba(255,210,122,.92);
	box-shadow:inset 0 1px 0 rgba(255,200,150,.30),0 0 0 2px rgba(255,180,80,.35),0 3px 12px rgba(0,0,0,.50)}
/* 金色上箭头：纯 CSS 三角(边框) + 一根竖杆(伪元素)，不用任何图片 */
html.fx-on #fxTop i{
	position:absolute; left:50%; top:50%; width:0; height:0; margin:-10px 0 0 -7px;
	border-style:solid; border-width:0 7px 9px 7px;
	border-color:transparent transparent #ffc64d transparent;
}
html.fx-on #fxTop i:before{
	content:""; position:absolute; left:-2.5px; top:9px;
	width:5px; height:11px; border-radius:1px; background:#ffc64d;
}
html.fx-on #fxTop:hover i,html.fx-on #fxTop:hover i:before{border-bottom-color:#ffdd8a}
html.fx-on #fxTop:hover i:before{background:#ffdd8a}


/* --------------------------------------------------------------------------
   9. 英雄区流云（#fxClouds —— 空容器在 index.html，云由 js/effects.js 现画）
   --------------------------------------------------------------------------
   主视觉那片暖橙天空原本是**完全静止**的。加一层缓慢横移、浓淡有别的云气之后，
   画面立刻有了纵深和呼吸感 —— 而且这是所有动态里**风险最低**的一种：
   云没有"像不像"的问题，只有浓淡与快慢，永远不会把一个具象主体画坏。

   云片不是图片素材：运行时用十几个径向渐变烤成一张 900×320 的离屏 sprite，
   再横竖各做一次 destination-in 羽化（横向收边 → 循环平铺不出现直边；
   纵向收边 → 云在人物/石台上方自然消失，不会糊到主体脸上）。
   三层不同速度 / 尺度 / 浓淡，全部走 lighter 加色叠加 —— 只提亮，绝不压暗画面。
   绘制参数全在 effects.js 的 setupClouds() 开头「调参区」。

   ⚠ 这一格原本是"飞龙在天"，已按用户决定整个撤除（含贴图版与纯代码绘制版）。
      教训：判断"画得像不像"必须先看**剪影**（按亮度二值化的纯黑白图），
      剪影不成立，后面叠多少明暗都是白搭。

   ⚠ 定位：#fxClouds 是 #bodybg 的子元素，所以 left:0 就是 1920 宽海报的左边。
   overflow:hidden 是为了让云在"画面外"时真的不可见 —— 否则在 2560 这类宽窗口下，
   它会飘到海报两侧的空白里去。
   ⚠ z-index 97：高于海报(0)、低于底部火光(99)与火星粒子(100) ——
      云在火星**下面**，火星才像从云里穿出来。
   canvas 由 JS 创建，尺寸正好是英雄区 1920×625。
   -------------------------------------------------------------------------- */
#fxClouds{display:none}
html.fx-on #fxClouds{
	display:block;
	position:absolute;
	top:0; left:0;
	width:1920px; height:625px;		/* 625 = 主视觉区高度 */
	z-index:97;
	overflow:hidden;
	pointer-events:none;			/* 绝不拦截鼠标事件 */
}
html.fx-on #fxClouds canvas{display:block}	/* 由 effects.js 创建并逐帧绘制 */