/* 页面级动效，配套 fx.js。只做叠加：不改动原有布局规则；根据本站动效偏好统一启停。 */

/* 一：翻页时的纵深——离开的一屏向内收拢并淡出，进入的一屏像卡片一样展开（滚动驱动，仅桌面整屏模式）。用 clip-path 而不是缩放：缩放会改变滚动吸附与定位用的盒子位置。 */
@supports (animation-timeline: view()) {
  @media (min-width:901px) and (min-height:680px) {
    html[data-motion="full"] main > [data-page]{animation:fx-page linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    html[data-motion="full"] .fx-num{animation:fx-num linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  }
}
@keyframes fx-page{0%{clip-path:inset(8% 6% 0 6% round 46px);opacity:.3}36%,64%{clip-path:inset(0 0 0 0 round 0px);opacity:1}100%{clip-path:inset(0 6% 8% 6% round 46px);opacity:.3}}
@keyframes fx-num{from{translate:0 34%}to{translate:0 -34%}}

/* 二：每一屏的巨型页码水印 */
.fx-num{position:absolute;right:5%;bottom:2%;z-index:-1;pointer-events:none;user-select:none;font:italic 400 clamp(190px,31vw,560px)/.78 var(--serif);letter-spacing:-.07em;color:transparent;-webkit-text-stroke:1.5px rgba(22,52,117,.075)}
.manifesto .fx-num{-webkit-text-stroke-color:rgba(23,27,37,.11)}
.closing .fx-num{-webkit-text-stroke-color:rgba(248,243,231,.09)}
#experience.is-using .fx-num{display:none}

/* 三：标题里的强调词，进入时划一道金线 */
.motion-ready [data-page]:not(.manifesto):not(.closing) h2 em{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8C40 2 70 11 110 6s60-3 88 1' fill='none' stroke='%23e9b552' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 96%/0% .2em;transition:background-size 1.1s cubic-bezier(.2,.8,.2,1)}
.motion-ready [data-page].is-entered:not(.manifesto):not(.closing) h2 em{background-size:100% .2em;transition-delay:1s}
.fx-strike{background:linear-gradient(currentColor,currentColor) no-repeat 0 56%/0% .05em;transition:background-size 1.2s cubic-bezier(.7,0,.2,1)}
.is-entered .fx-strike{background-size:100% .05em;transition-delay:1.25s}

/* 四：首屏 */
.fx-fleet{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;-webkit-mask-image:radial-gradient(64% 92% at 76% 46%,#000 42%,transparent 86%);mask-image:radial-gradient(64% 92% at 76% 46%,#000 42%,transparent 86%)}
.hero.is-current .hero-window{transform:rotateY(calc(-3deg + var(--fx-ry,0deg))) rotateX(var(--fx-rx,0deg)) rotateZ(0deg);transition:transform .7s cubic-bezier(.16,1,.3,1)}
.hero-content .word-line:last-child>span{background:linear-gradient(100deg,#235aea 30%,#7fb0ff 47%,#235aea 64%) 0 0/260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:fx-shine 5.5s linear infinite}
@keyframes fx-shine{from{background-position:130% 0}to{background-position:-130% 0}}
.fx-note{animation:fx-bob 6.5s ease-in-out infinite;white-space:nowrap}
.fx-note-a{top:-34px;left:-26px}
.fx-note-b{bottom:-30px;right:34px;animation-duration:7.5s;animation-delay:-3s}
@keyframes fx-bob{50%{translate:0 -9px}}

/* 五：“工作理念”一屏的任务走马灯 */
.fx-ticker{position:absolute;left:0;right:0;top:131px;overflow:hidden;border-block:1px solid rgba(23,27,37,.2);padding:6px 0;font-size:13px;font-weight:650;letter-spacing:.22em;z-index:0}
.fx-ticker>div{display:flex;width:max-content;animation:fx-marquee 34s linear infinite}
.fx-ticker span{display:inline-flex;align-items:center;gap:10px;padding-right:44px;white-space:nowrap}
.fx-ticker i{font-style:normal;display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:#171b25;color:var(--gold);font-size:10px;letter-spacing:0}
@keyframes fx-marquee{to{transform:translateX(-50%)}}

/* 六：业务场景四屏的小动作 */
.business-chapter .fx-dim{opacity:.32!important}
.report-item,.agenda-item{border-radius:10px;transition:transform .9s cubic-bezier(.16,1,.3,1),opacity .6s,background-color .35s,box-shadow .35s!important}
.report-item.fx-now,.agenda-item.fx-now{background-color:#eef3ff;box-shadow:0 0 0 8px #eef3ff}
.fx-busy{color:#235aea!important;background:#e4edff!important}
.terminal-review{transition:opacity .5s,transform .6s cubic-bezier(.2,1.2,.3,1)}
.terminal-review.fx-off{opacity:0;transform:translateY(12px)}
.terminal-line.fx-caret::after{content:"▍";margin-left:2px;animation:dm-blink .8s steps(2,jump-none) infinite}
.opc-task{transition:transform .5s cubic-bezier(.2,1.2,.3,1),box-shadow .4s,border-color .4s}
.opc-column.fx-now .opc-task{transform:translateY(-8px);border-color:#235aea;box-shadow:0 18px 34px -18px #235aea80}
.opc-column.fx-now .opc-column-title{color:#235aea}
.journey-step{position:relative}
.journey-step::before{content:"";position:absolute;left:0;top:-9px;height:2px;width:0;background:var(--blue);border-radius:2px}
.journey-step.fx-now::before{width:100%;transition:width 2.3s linear}
.journey-step.fx-now .step-number,.journey-step.fx-now .journey-number{color:var(--blue)}
.journey-step .step-number,.journey-step .journey-number{transition:color .4s}
.private-assistant.is-entered .private-layer{animation:fx-bob 7s ease-in-out infinite}
.private-assistant.is-entered .private-layer:nth-child(2){animation-delay:-2.3s}
.private-assistant.is-entered .private-layer:nth-child(3){animation-delay:-4.6s}
.control.is-entered .approval-example{animation:fx-attn 2.8s ease-in-out infinite}
@keyframes fx-attn{50%{box-shadow:0 0 0 7px #e9b55230}}

/* 七：收尾一屏的流光 */
.fx-aurora{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.fx-aurora i{position:absolute;width:56vw;height:56vw;border-radius:50%;filter:blur(90px);animation:fx-drift 18s ease-in-out infinite alternate}
.fx-aurora i:nth-child(1){left:-12vw;top:-22vw;background:#3d6be0;opacity:.5}
.fx-aurora i:nth-child(2){right:-16vw;bottom:-26vw;background:#e9b552;opacity:.2;animation-duration:23s;animation-delay:-6s}
.fx-aurora b{position:absolute;inset:0;background:radial-gradient(1.2px 1.2px at 12% 24%,#fff,transparent),radial-gradient(1.2px 1.2px at 28% 62%,#fff,transparent),radial-gradient(1.6px 1.6px at 46% 16%,#fff,transparent),radial-gradient(1.2px 1.2px at 63% 74%,#fff,transparent),radial-gradient(1.6px 1.6px at 78% 30%,#fff,transparent),radial-gradient(1.2px 1.2px at 90% 58%,#fff,transparent),radial-gradient(1.2px 1.2px at 37% 86%,#fff,transparent);opacity:.5;animation:fx-twinkle 4.5s ease-in-out infinite alternate}
@keyframes fx-drift{to{transform:translate(14vw,9vw) scale(1.15)}}
@keyframes fx-twinkle{to{opacity:.15}}
.closing-word{animation:fx-word 26s ease-in-out infinite alternate}
@keyframes fx-word{to{translate:-5vw 0}}

/* 八：跟随指针的柔光 */
.fx-glow{position:fixed;left:-270px;top:-270px;width:540px;height:540px;border-radius:50%;pointer-events:none;z-index:6;background:radial-gradient(closest-side,rgba(122,160,255,.17),rgba(233,181,82,.07) 46%,transparent 72%);mix-blend-mode:multiply;opacity:0;transition:opacity .6s}
.fx-glow.on{opacity:1}

/* 九：体验——接入过程 */
#experience .trial-link{position:relative;margin:26px 0 8px;height:86px}
#experience .trial-link svg{width:100%;height:100%;overflow:visible}
#experience .trial-link .wire{fill:none;stroke:#cfdaf0;stroke-width:2;stroke-dasharray:4 7}
#experience .trial-link .flow{fill:none;stroke:#235aea;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:14 120;animation:fx-flow 1.5s linear infinite}
@keyframes fx-flow{from{stroke-dashoffset:134}to{stroke-dashoffset:0}}
#experience .trial-link rect{fill:#fff;stroke:#d8e1ee;stroke-width:1.4}
#experience .trial-link rect.on{stroke:#235aea;fill:#f4f7ff}
#experience .trial-link text{font-size:12px;font-weight:650;fill:#173575;text-anchor:middle}
#experience .trial-link text.s{font-size:10px;font-weight:400;fill:#6b7b91}

@media(max-width:900px){.fx-num,.fx-note,.fx-glow{display:none}.fx-ticker{top:96px;font-size:11px}}
html[data-motion="reduced"] .fx-fleet,html[data-motion="reduced"] .fx-glow,html[data-motion="reduced"] .fx-aurora{display:none}html[data-motion="reduced"] .fx-ticker>div,html[data-motion="reduced"] .fx-note,html[data-motion="reduced"] .closing-word,html[data-motion="reduced"] .private-assistant.is-entered .private-layer,html[data-motion="reduced"] .control.is-entered .approval-example,html[data-motion="reduced"] .hero-content .word-line:last-child>span{animation:none}