/* ==========================================================================
   如浩传世 · 动效层（动态 / 生趣 / 灵动）
   --------------------------------------------------------------------------
   加载顺序：style.css / mobile.css → legend.css（皮肤）→ legend-layout.css（布局）
             → 本文件（动效）
   本文件只做"动"：transform / opacity / animation / box-shadow / filter /
   background-position。

   ★ 三条必须守住的规矩

   【一】绝不用 background 简写。
     包角 .legend-frame 靠 background-image 贴四张角图，本文件排在它之后，
     一旦某条规则写了 background 简写，那一块的四角包角会被静默抹掉。
     要改底色写 background-color，要改扫光写 background-image。

   【二】不给"会挂 .legend-frame 的元素"加 ::before / ::after 扫光。
     那些元素的伪元素已经被包角占用了，再加一层会互相顶掉。
     扫光一律挂到专门的 .lg-sheen 上（在按钮内部另起一层）。

   【三】动画只跑 transform / opacity 时最省电，也最不容易在低端机上掉帧。
     凡是能改成 transform 的（位移、缩放、扫光）就不要去动
     width / background-position 这类会触发重排或整层重绘的属性。
     本文件唯一的例外是标题的金属流转（要动 background-position），
     它只有一个元素、且是行内文本，代价可以接受。

   ★ 老版微信内核：仍不许出现 var() / :has() / :is() / :where() / gap。
     关键帧补 -webkit- 前缀。
========================================================================== */

/* ==========================================================================
   1. 关键帧
   ========================================================================== */

/* 英雄区缓慢推镜：画作在 30 秒里极慢地推近并轻微平移。
   这是"页面活着"最省力的做法——只动一个 transform，GPU 合成，不重绘。 */
@-webkit-keyframes lg-kenburns {
    0%   { -webkit-transform: scale(1.05) translate3d(0, 0, 0); }
    100% { -webkit-transform: scale(1.16) translate3d(-1.6%, -1.8%, 0); }
}
@keyframes lg-kenburns {
    0%   { transform: scale(1.05) translate3d(0, 0, 0); }
    100% { transform: scale(1.16) translate3d(-1.6%, -1.8%, 0); }
}

/* 火星：从下往上升，中途闪烁一下。
   负延迟让几颗火星一开始就在半空，否则进站时会一起从底部冒出来，像漏气。 */
@-webkit-keyframes lg-spark {
    0%   { opacity: 0; -webkit-transform: translate3d(0, 0, 0) scale(.5); }
    10%  { opacity: 1; }
    55%  { opacity: .75; }
    100% { opacity: 0; -webkit-transform: translate3d(26px, -320px, 0) scale(1.1); }
}
@keyframes lg-spark {
    0%   { opacity: 0; transform: translate3d(0, 0, 0) scale(.5); }
    10%  { opacity: 1; }
    55%  { opacity: .75; }
    100% { opacity: 0; transform: translate3d(26px, -320px, 0) scale(1.1); }
}

/* 光斑：缓慢横移，营造空气中有浮尘的感觉 */
@-webkit-keyframes lg-bokeh {
    0%   { opacity: .18; -webkit-transform: translate3d(0, 0, 0); }
    50%  { opacity: .5;  -webkit-transform: translate3d(30px, -18px, 0); }
    100% { opacity: .18; -webkit-transform: translate3d(0, 0, 0); }
}
@keyframes lg-bokeh {
    0%   { opacity: .18; transform: translate3d(0, 0, 0); }
    50%  { opacity: .5;  transform: translate3d(30px, -18px, 0); }
    100% { opacity: .18; transform: translate3d(0, 0, 0); }
}

/* 标题金属流转：高光在金色渐变里从左掠到右。
   必须配合 background-size 放大到 200% 以上，否则没有可流动的余量。 */
@-webkit-keyframes lg-shimmer {
    0%   { background-position: 12% 50%; }
    100% { background-position: 92% 50%; }
}
@keyframes lg-shimmer {
    0%   { background-position: 12% 50%; }
    100% { background-position: 92% 50%; }
}

/* 按钮扫光：一条斜向白光从左侧掠过整颗按钮 */
@-webkit-keyframes lg-sweep {
    0%   { -webkit-transform: translate3d(-130%, 0, 0); }
    55%  { -webkit-transform: translate3d(130%, 0, 0); }
    100% { -webkit-transform: translate3d(130%, 0, 0); }
}
@keyframes lg-sweep {
    0%   { transform: translate3d(-130%, 0, 0); }
    55%  { transform: translate3d(130%, 0, 0); }
    100% { transform: translate3d(130%, 0, 0); }
}

/* 呼吸式外发光：按钮与回到顶部共用 */
@-webkit-keyframes lg-breath-glow {
    0%   { box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 4px 14px rgba(0, 0, 0, .6), 0 0 0 rgba(255, 172, 60, 0); }
    50%  { box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 4px 14px rgba(0, 0, 0, .6), 0 0 24px rgba(255, 172, 60, .75); }
    100% { box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 4px 14px rgba(0, 0, 0, .6), 0 0 0 rgba(255, 172, 60, 0); }
}
@keyframes lg-breath-glow {
    0%   { box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 4px 14px rgba(0, 0, 0, .6), 0 0 0 rgba(255, 172, 60, 0); }
    50%  { box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 4px 14px rgba(0, 0, 0, .6), 0 0 24px rgba(255, 172, 60, .75); }
    100% { box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 4px 14px rgba(0, 0, 0, .6), 0 0 0 rgba(255, 172, 60, 0); }
}

/* 轻浮动：徽章与小图标上下浮，做出"活着"的呼吸感 */
@-webkit-keyframes lg-bob {
    0%   { -webkit-transform: translate3d(0, -3px, 0); }
    50%  { -webkit-transform: translate3d(0, 3px, 0); }
    100% { -webkit-transform: translate3d(0, -3px, 0); }
}
@keyframes lg-bob {
    0%   { transform: translate3d(0, -3px, 0); }
    50%  { transform: translate3d(0, 3px, 0); }
    100% { transform: translate3d(0, -3px, 0); }
}

/* 入场：一次性上浮淡入，用于英雄区文字 */
@-webkit-keyframes lg-rise-in {
    0%   { opacity: 0; -webkit-transform: translate3d(0, 22px, 0); }
    100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); }
}
@keyframes lg-rise-in {
    0%   { opacity: 0; transform: translate3d(0, 22px, 0); }
    100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* 小小一抖：用于"提示可点"的地方（如上传槽位） */
@-webkit-keyframes lg-nudge {
    0%, 100% { -webkit-transform: translate3d(0, 0, 0); }
    50%      { -webkit-transform: translate3d(0, -5px, 0); }
}
@keyframes lg-nudge {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(0, -5px, 0); }
}

/* ==========================================================================
   2. 英雄区
   --------------------------------------------------------------------
   ★ 叠放层级必须固定，否则装饰层会盖住文字或被文字盖住。
     .banner 里已经有一个 z-index 栈（见 legend.css 第 5 节）：
       .banner::before 光晕   z-index 1
       .banner::after  云带   z-index 1
       .banner-content 文字   z-index 3
     这里新加三层，必须夹在 1 与 3 之间才既不被云带糊掉、也不挡字：
       .lg-hero-art    0   —— 画作最底
       .lg-hero-sparks 2   —— 火星要在光晕之上才看得见
       .lg-bokeh       2   —— 光斑同上
     没有 z-index 的话它们都是 auto，会整层掉到 z-index:1 的光晕下面，
     火星会被那层从上到下的暗渐变吃掉，等于白做。
   ========================================================================== */
/* 画作从 .banner 的背景移到这个子层，就是为了能动。
   挂在 .banner 上只能靠动 background-position/size，那是整层重绘；
   放到子层用 transform 就交给 GPU 合成，低端机也不掉帧。 */
.lg-hero-art {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    background-color: #140d07;
    background-image: url(../images/legend/hero.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    -webkit-animation: lg-kenburns 30s ease-in-out infinite alternate;
    animation: lg-kenburns 30s ease-in-out infinite alternate;
    pointer-events: none;
}
/* 首屏循环视频：原站首页本来就是拿 bj.mp4 当全屏背景在放的，这次搬回来。
   ★ 挂成 .lg-hero-art 的**子层**而不是兄弟层，一举三得：
     · 自动落进 z-index:0 那一格，被火星(2)与文字(3)盖住，上面那套层级不用重排；
     · 顺便继承父层的 30s 推镜，运动语汇和画作完全一致；
     · 视频还没解码出来（弱网、格式不支持、被省流模式拦掉）时，
       父层的 hero.jpg / hero-ride.jpg 依然在，首屏不会变成一块黑。
   ★ object-fit 只有新内核认；老 WebView 会按 letterbox 显示，
     依旧铺满可视区，属于可接受的降级，不要为它加一堆填充层。 */
.lg-hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
    pointer-events: none;
}
/* 英雄区里的火星：比全站背景层那几颗更亮、更近，形成两层纵深 */
.lg-hero-sparks {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
}
.lg-hero-sparks i {
    position: absolute;
    bottom: 12%;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: #ffd489;
    box-shadow: 0 0 8px 2px rgba(255, 158, 46, .8);
    opacity: 0;
    -webkit-animation: lg-spark 9s linear infinite;
    animation: lg-spark 9s linear infinite;
}
/* 浮尘光斑 */
.lg-bokeh {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
}
.lg-bokeh i {
    position: absolute;
    border-radius: 50%;
    background-image: -webkit-radial-gradient(circle, rgba(255, 214, 140, .75) 0%, rgba(255, 158, 46, 0) 72%);
    background-image: radial-gradient(circle, rgba(255, 214, 140, .75) 0%, rgba(255, 158, 46, 0) 72%);
    opacity: 0;
    -webkit-animation: lg-bokeh 16s ease-in-out infinite;
    animation: lg-bokeh 16s ease-in-out infinite;
}

/* 英雄区文字逐级入场（一次性）。
   ★ 为什么用纯 CSS 的 :nth-child 而不用 JS 挂类名：
     挂类名就得先让元素"本来透明"，那是 opacity:0；而 opacity:0 是
     **会持久生效**的——JS 一旦没跑到（脚本报错、被拦截、顺序错），
     这行字就永远看不见，而故障现场只有"首页少了标题"这一个现象，
     非常难定位。用 :nth-child 直接绑动画则相反：动画一定播，
     而且播完停在 100% 那一帧，任何情况下都是可见的。
     :nth-child 是 CSS3 选择器，老版微信内核从 iOS 3.2 起就支持，
     比 flex-gap 那批安全得多。
   ★ 这里只动 opacity 与 transform，不碰 position —— 通配子选择器
     `> *` 的优先级(0,1,1)高过单类名(0,1,0)，一旦手滑给它写了 position，
     会把子元素里任何绝对定位的小角标一起改坏。 */
.lg-hero .banner-content > * {
    opacity: 0;
    -webkit-animation: lg-rise-in .95s cubic-bezier(.22, .68, .3, 1) both;
    animation: lg-rise-in .95s cubic-bezier(.22, .68, .3, 1) both;
}
.lg-hero .banner-content > *:nth-child(1) { -webkit-animation-delay: .06s; animation-delay: .06s; }
.lg-hero .banner-content > *:nth-child(2) { -webkit-animation-delay: .20s; animation-delay: .20s; }
.lg-hero .banner-content > *:nth-child(3) { -webkit-animation-delay: .34s; animation-delay: .34s; }
.lg-hero .banner-content > *:nth-child(4) { -webkit-animation-delay: .46s; animation-delay: .46s; }
.lg-hero .banner-content > *:nth-child(5) { -webkit-animation-delay: .60s; animation-delay: .60s; }
.lg-hero .banner-content > *:nth-child(6) { -webkit-animation-delay: .74s; animation-delay: .74s; }

/* ==========================================================================
   2b. 三职业面板的切换入场
   --------------------------------------------------------------------
   .lg-class-panel 的显隐写在 legend-layout.css（只有 .is-active 才是 block），
   这里只补"切过来那一刻"的入场。
   ★ 为什么 animation 不写在布局文件里：本文件末尾有 prefers-reduced-motion
     的收口块，写在那边就会漏掉"用户要求减弱动效"这个分支。
   ★ 为什么用 animation 而不是 transition：display 从 none 变成 block
     不会触发过渡（属性值没有中间态），必须关键帧才播得出来。
   ========================================================================== */
@-webkit-keyframes lg-class-in {
    0%   { opacity: 0; -webkit-transform: translate3d(0, 16px, 0); }
    100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); }
}
@keyframes lg-class-in {
    0%   { opacity: 0; transform: translate3d(0, 16px, 0); }
    100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
.lg-class-panel.is-active {
    -webkit-animation: lg-class-in .42s ease-out both;
    animation: lg-class-in .42s ease-out both;
}

/* ==========================================================================
   3. 标题金属流转
   --------------------------------------------------------------------
   用 background-clip:text 把渐变裁进字里，再让渐变缓慢流动。
   legend.css 已经写了 color 兜底与 -webkit-text-fill-color:transparent，
   本文件**不要**去动这两条，否则老内核上会变成一片透明。

   ★ 2026-09-27（第十四轮）：`.block-title` 已从下面这条里摘掉 ——
     它不再走"裁切渐变字"，改走固态暖金字 + 伪元素匾额（polish.css 第 10 节）。
     **必须摘**：本条的 `background-image: 金渐变` 是给裁切字用的，一旦元素
     不做 background-clip:text，这张渐变就会变成**一整块金底**铺在元素上
     —— 这正是 polish.css 第 8 节记录过的 `.lg-band-title` 那个事故，
     只不过那次是"漏写 clip"，这次是"clip 被摘了"。
   ========================================================================== */
.section-title,
.lg-band-title {
    background-image: -webkit-linear-gradient(100deg, #fff6d8 0%, #f6dd94 22%, #cfa249 40%, #9b7729 52%, #ffeab4 70%, #e0bb63 84%, #8f6d24 100%);
    background-image: linear-gradient(100deg, #fff6d8 0%, #f6dd94 22%, #cfa249 40%, #9b7729 52%, #ffeab4 70%, #e0bb63 84%, #8f6d24 100%);
    background-repeat: no-repeat;
    background-size: 220% 100%;
    background-position: 12% 50%;
    -webkit-animation: lg-shimmer 7s ease-in-out infinite alternate;
    animation: lg-shimmer 7s ease-in-out infinite alternate;
}

/* ==========================================================================
   4. 可交互元素的"活"感
   ========================================================================== */

/* ---------- 扫光层 ----------
   .lg-sheen 是加在按钮内部的独立元素（不是伪元素），
   所以不会和 .legend-frame 的四角包角抢 ::before / ::after。 */
.lg-sheen {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}
.lg-sheen::before {
    content: '';
    position: absolute;
    top: -60%;
    bottom: -60%;
    left: 0;
    width: 34%;
    background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
    -webkit-transform: translate3d(-130%, 0, 0) skewX(-18deg);
    transform: translate3d(-130%, 0, 0) skewX(-18deg);
    -webkit-animation: lg-sweep 4.2s ease-in-out infinite;
    animation: lg-sweep 4.2s ease-in-out infinite;
}

/* 扫光只挂在会真正被点的主按钮上。全站每个按钮都扫会显得廉价，
   而且老机上多一个无限动画就是多一份耗电。
   ★ 这几条必须给宿主加 position:relative：
     .lg-sheen 是绝对定位的，宿主若不是定位元素，它会以更外层的
     "最近的定位祖先"为基准，直接铺到整个面板上去（而且照常会动），
     这种错位比不动难查得多。
   ★ overflow:hidden 只裁后代，不会裁掉宿主自己的 box-shadow，
     所以按钮的呼吸外发光（lg-breath-glow）不受影响。 */
.submit-btn,
.btn-primary,
.btn-primary-large,
.download-btn,
.promo-query-btn,
.login-btn {
    position: relative;
    overflow: hidden;
}

.lg-hero .btn-primary-large {
    position: relative;
    -webkit-animation: lg-breath-glow 3.4s ease-in-out infinite;
    animation: lg-breath-glow 3.4s ease-in-out infinite;
}

/* 回到顶部：可见时轻微搏动，提示"我在这儿" */
.back-to-top.show {
    -webkit-animation: lg-breath-glow 2.6s ease-in-out infinite;
    animation: lg-breath-glow 2.6s ease-in-out infinite;
}

/* 徽章：交错浮动。用 :nth-child 让几枚徽章的相位错开，
   整排一起上下会像呼吸机，错开才像活物。 */
.lg-medal {
    -webkit-animation: lg-bob 4.6s ease-in-out infinite;
    animation: lg-bob 4.6s ease-in-out infinite;
}
.lg-card-col:nth-child(2) .lg-medal { -webkit-animation-delay: -1.15s; animation-delay: -1.15s; }
.lg-card-col:nth-child(3) .lg-medal { -webkit-animation-delay: -2.30s; animation-delay: -2.30s; }
.lg-card-col:nth-child(4) .lg-medal { -webkit-animation-delay: -3.45s; animation-delay: -3.45s; }

/* 流程序号牌：鼠标移上去时向外扩一圈金光 */
.lg-flow-num {
    -webkit-transition: box-shadow .26s, -webkit-transform .26s;
    transition: box-shadow .26s, transform .26s;
}
.lg-flow-item:hover .lg-flow-num {
    -webkit-transform: translate3d(0, -4px, 0) scale(1.06);
    transform: translate3d(0, -4px, 0) scale(1.06);
    box-shadow: 0 1px 0 rgba(255, 224, 160, .3) inset, 0 0 22px rgba(255, 158, 46, .7), 0 8px 20px rgba(0, 0, 0, .6);
}

/* 卡片：抬起 + 金边发亮 */
.lg-card,
.lg-dl-card,
.lg-art,
.lg-spec {
    -webkit-transition: -webkit-transform .28s ease, box-shadow .28s ease, border-color .28s ease;
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.lg-card:hover,
.lg-dl-card:hover,
.lg-art:hover {
    -webkit-transform: translate3d(0, -6px, 0);
    transform: translate3d(0, -6px, 0);
    border-color: #d8b463;
    box-shadow: 0 1px 0 rgba(255, 224, 160, .2) inset, 0 0 26px rgba(255, 158, 46, .32), 0 18px 38px rgba(0, 0, 0, .7);
}
/* 卡里的画作：悬停时极轻微推近，像把画往前递了一点 */
.lg-art-img {
    -webkit-transition: -webkit-transform .5s ease;
    transition: transform .5s ease;
}
.lg-art:hover .lg-art-img {
    -webkit-transform: scale(1.025);
    transform: scale(1.025);
}

/* 卖点图标：悬停时跳一下 */
.banner-features .feature-item {
    -webkit-transition: color .24s;
    transition: color .24s;
}
.banner-features .feature-item:hover { color: #fff3cf; }
.banner-features .feature-item:hover .feature-icon {
    -webkit-animation: lg-nudge .6s ease-in-out;
    animation: lg-nudge .6s ease-in-out;
}
.banner-features .feature-icon {
    -webkit-animation: lg-bob 4.2s ease-in-out infinite;
    animation: lg-bob 4.2s ease-in-out infinite;
}
.banner-features .feature-item:nth-child(2) .feature-icon { -webkit-animation-delay: -1.05s; animation-delay: -1.05s; }
.banner-features .feature-item:nth-child(3) .feature-icon { -webkit-animation-delay: -2.10s; animation-delay: -2.10s; }
.banner-features .feature-item:nth-child(4) .feature-icon { -webkit-animation-delay: -3.15s; animation-delay: -3.15s; }
.banner-features .feature-item:nth-child(5) .feature-icon { -webkit-animation-delay: -4.20s; animation-delay: -4.20s; }

/* 上传槽位（推广功能）：空闲时轻轻抖，提示"这里可以点"。
   有图或正在上传时停掉，避免干扰判断绿/红结论。 */
.promo-slot.is-empty {
    -webkit-animation: lg-nudge 2.8s ease-in-out infinite;
    animation: lg-nudge 2.8s ease-in-out infinite;
}

/* ==========================================================================
   5. 阅读进度条（由 legend.js 注入 #lgProgress）
   --------------------------------------------------------------------
   位置固定在页眉下沿。不用 inset，老内核不认。
   ========================================================================== */
#lgProgress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 0;
    z-index: 9998;
    background-image: -webkit-linear-gradient(left, #8a6a24, #ffd98a, #ffe9a8);
    background-image: linear-gradient(90deg, #8a6a24, #ffd98a, #ffe9a8);
    box-shadow: 0 0 10px rgba(255, 172, 60, .85);
    pointer-events: none;
    -webkit-transition: width .12s linear;
    transition: width .12s linear;
}

/* ==========================================================================
   6. 降级
   --------------------------------------------------------------------
   系统开启"减少动态效果"时全部停掉，并把靠动画入场的内容直接显示出来
   —— 否则 .lg-in 的 opacity:0 会让英雄区文字永远看不见。
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .lg-hero-art,
    .lg-hero-sparks i,
    .lg-bokeh i,
    .section-title,
    .lg-band-title,
    .lg-medal,
    .banner-features .feature-icon,
    .promo-slot.is-empty,
    .lg-sheen::before,
    .lg-hero .btn-primary-large,
    .back-to-top.show,
    .lg-class-panel.is-active {
        -webkit-animation: none;
        animation: none;
    }
    .lg-hero-sparks,
    .lg-bokeh {
        display: none;
    }
    /* 循环播放的视频是"持续运动的画面"，正是这个偏好要关掉的东西。
       这里直接藏掉，让底下的 hero.jpg 顶上来 —— 静态画作依旧完整可用。 */
    .lg-hero-video {
        display: none;
    }
    /* 英雄区文字的入场动画必须在这里被显式复位成 opacity:1，
       否则"减少动态效果"一开，那几行字就永久停在 0% 那一帧（透明）。 */
    .lg-hero .banner-content > * {
        opacity: 1;
        -webkit-animation: none;
        animation: none;
    }
    .lg-sheen {
        display: none;
    }
}

/* 小屏：火星与光斑数量减半（由 js 控制生成数量），推镜也放慢，
   免得在小窗口里小幅度的位移看起来很晃。 */
@media (max-width: 768px) {
    .lg-hero-art {
        background-image: url(../images/legend/hero-ride.jpg);
        background-position: center 38%;
        -webkit-animation-duration: 44s;
        animation-duration: 44s;
    }
    .lg-card:hover,
    .lg-dl-card:hover,
    .lg-art:hover {
        /* 触屏没有 hover，抬起位移留着反而会粘住，去掉只留边色 */
        -webkit-transform: none;
        transform: none;
    }
}