/* 三项服务的场景动画：苹果式扁平插画，SVG 在 templates/scenes/，这里管配色与时间轴。
   一个场景一条时间轴：.scene.on 时 --p 在一个循环里从 0 走到 1；
   带 .a 的元素按自己的 --a（出现时刻）、--z（消失时刻，默认 .95）、--s（入场快慢）算出透明度和位移。
   不播放时 --p 停在 .9 = 完整画面：无 JS、减少动态、离开视口、浏览器不支持 @property 都显示这一帧 */
@property --p{syntax:"<number>";inherits:true;initial-value:.9}
.scene{--p:.9;width:100%;height:100%;background:radial-gradient(closest-side,var(--tint),transparent)}
.scene svg{width:100%;height:100%;overflow:hidden}
.scene text{font-family:var(--f-body);fill:#f5f5f7}
.scene.on{animation:scene-t var(--T) linear infinite}
@keyframes scene-t{from{--p:0}to{--p:1}}
.scene-geo{--T:9s;--tint:rgba(41,151,255,.16)}
.scene-ai{--T:11s;--tint:rgba(162,89,255,.16)}
.scene-brand{--T:12s;--tint:rgba(255,95,158,.13)}

/* 苹果深色模式的系统灰阶 */
.scene .t2{fill:#8e8e93}
.scene .t3{fill:#636366}
.scene .bg1{fill:#1c1c1e}
.scene .bg2{fill:#2c2c2e}
.scene .bg3{fill:#3a3a3c}
.scene .hair{stroke:rgba(255,255,255,.09)}

/* 时间轴：--k 线性进度，--e 缓出 */
.scene .a,.scene .wipe{--k:clamp(0,(var(--p) - var(--a,0)) * var(--s,14),1);--e:(1 - (1 - var(--k)) * (1 - var(--k)))}
.scene .a{opacity:calc(var(--e) * clamp(0,(var(--z,.95) - var(--p)) * 25,1))}
.scene .up{transform:translateY(calc((1 - var(--e)) * 18px))}
.scene .lt{transform:translateX(calc((var(--e) - 1) * 28px))}
.scene .pop{transform-box:fill-box;transform-origin:center;transform:scale(calc(.6 + .4 * var(--e)))}
.scene .rise{transform:translateY(calc((1 - var(--e)) * 170px))}
.scene .draw{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--e))}
.scene .flow{stroke-dasharray:.16 2;stroke-dashoffset:calc(.16 - var(--k) * 1.16)}
/* 从左往右揭开（品牌升级：旧官网 → 新官网），--w 两头缓 */
.scene .wipe{--w:(var(--k) * var(--k) * (3 - 2 * var(--k)));opacity:clamp(0,(.95 - var(--p)) * 25,1)}
.scene .wipe-in{clip-path:inset(0 calc((1 - var(--w)) * 100%) 0 0)}
.scene .wipe-bar{transform:translateX(calc(var(--w) * 470px));opacity:calc(clamp(0,(var(--p) - var(--a)) * 40,1) * clamp(0,(var(--z) - var(--p)) * 40,1))}
/* AI 扫描线：自上而下扫过新官网（300px = 浏览器内容区高度） */
.scene .scan{transform:translateY(calc(var(--k) * 300px))}

/* 循环小动作：只在播放时跑 */
.scene.on .dot{animation:sc-blink 1.2s ease-in-out infinite}
.scene.on .dot:nth-of-type(2){animation-delay:.2s}
.scene.on .dot:nth-of-type(3){animation-delay:.4s}
.scene.on .ring{animation:sc-dash 1.8s linear infinite}
.scene .ring{stroke-dasharray:.34 .16}
.scene.on .spin,.scene.on .gear{animation:sc-rot var(--r,8s) linear infinite}
.scene .spin{transform-box:view-box;transform-origin:280px 235px}
.scene .gear{transform-box:fill-box;transform-origin:center}
.scene.on .breath{animation:sc-breath 3.2s ease-in-out infinite}
.scene .breath{transform-box:fill-box;transform-origin:center}
@keyframes sc-blink{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes sc-dash{to{stroke-dashoffset:-1}}
@keyframes sc-rot{to{transform:rotate(360deg)}}
@keyframes sc-breath{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.08);opacity:.9}}

@media (prefers-reduced-motion:reduce){.scene.on{animation:none}}