/* =====================================================================
   昕搜 · AI认知资产体检 —— 公开页「动效」层（设计样片第三版）
   在 site.css、report.css、theme-elegant.css 之后加载；配合 motion.js。
   原则：慢、轻、少——只在首屏入场、滚动出现、雷达扫描三处用动效；
   系统开启「减少动态效果」时全部关闭（site.css 已有全局规则）。
   ===================================================================== */

:root{--ease-out:cubic-bezier(.16,1,.3,1);--ease-io:cubic-bezier(.65,0,.35,1)}

@keyframes mo-up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes mo-in-right{from{opacity:0;transform:translate(36px,10px) scale(.985)}to{opacity:1;transform:none}}
@keyframes mo-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes mo-fade{from{opacity:0}to{opacity:1}}
@keyframes mo-sheen{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes mo-spin{to{transform:rotate(360deg)}}
@keyframes mo-drift{0%{transform:translate3d(-3%,-2%,0) scale(1)}100%{transform:translate3d(3%,2%,0) scale(1.08)}}
@keyframes mo-pop{0%{opacity:0;transform:scale(.4)}70%{opacity:1;transform:scale(1.12)}100%{opacity:1;transform:none}}
@keyframes mo-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 45%,transparent)}100%{box-shadow:0 0 0 10px transparent}}

/* ---------- 1. 首屏入场：文字依次浮现，报告单从右侧滑入 ---------- */
.hero .eyebrow{animation:mo-up .9s var(--ease-out) .05s both}
.hero h1{animation:mo-up 1s var(--ease-out) .15s both}
.hero .lede{animation:mo-up 1s var(--ease-out) .3s both}
.hero .ctas{animation:mo-up 1s var(--ease-out) .42s both}
.hero .facts{animation:mo-up 1s var(--ease-out) .54s both}
.hero .sheet{animation:mo-in-right 1.2s var(--ease-out) .25s both}

/* 「新资产」渐变缓慢流动 */
.hero h1 em{background-image:linear-gradient(100deg,#0F51AA 0%,#2F6FEA 25%,#4FC6DA 50%,#2F6FEA 75%,#0F51AA 100%);background-size:200% 100%;animation:mo-sheen 8s linear infinite}

/* 报告单里的得分条依次长出来 */
.hero .sheet .meter span{transform-origin:left center;animation:mo-grow 1.1s var(--ease-out) both}
#sheetRows > :nth-child(1) .meter span{animation-delay:.70s}
#sheetRows > :nth-child(2) .meter span{animation-delay:.76s}
#sheetRows > :nth-child(3) .meter span{animation-delay:.82s}
#sheetRows > :nth-child(4) .meter span{animation-delay:.88s}
#sheetRows > :nth-child(5) .meter span{animation-delay:.94s}
#sheetRows > :nth-child(6) .meter span{animation-delay:1.00s}
#sheetRows > :nth-child(7) .meter span{animation-delay:1.06s}
#sheetRows > :nth-child(8) .meter span{animation-delay:1.12s}
#sheetRows > :nth-child(9) .meter span{animation-delay:1.18s}
#sheetRows > :nth-child(10) .meter span{animation-delay:1.24s}
#sheetRows > :nth-child(11) .meter span{animation-delay:1.30s}
#sheetRows > :nth-child(12) .meter span{animation-delay:1.36s}
#sheetRows > :nth-child(13) .meter span{animation-delay:1.42s}
#sheetRows > :nth-child(14) .meter span{animation-delay:1.48s}
#sheetRows .flag{animation:mo-fade .6s ease 1.5s both}
/* 指数「需干预」出现时轻微脉冲一次 */
#sheetGrade > *{animation:mo-fade .6s ease 1.9s both}

/* 首屏背景：雷达扫描（很淡的扇形光，12 秒转一圈） */
.hero-scan{position:absolute;left:78%;top:46%;width:1100px;height:1100px;margin:-550px 0 0 -550px;border-radius:50%;pointer-events:none;z-index:0;
  background:conic-gradient(from 0deg,transparent 0deg,transparent 300deg,color-mix(in srgb,var(--accent) 5%,transparent) 335deg,color-mix(in srgb,var(--cyan) 16%,transparent) 359deg,transparent 360deg);
  -webkit-mask-image:radial-gradient(circle,#000 0%,#000 45%,transparent 70%);mask-image:radial-gradient(circle,#000 0%,#000 45%,transparent 70%);
  animation:mo-spin 12s linear infinite, mo-fade 2s ease .6s both}
.hero .wrap{z-index:1}

/* ---------- 2. 滚动出现：进入视野时上浮淡入（只作用于首屏以下的内容） ---------- */
.mo .mo-rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);transition-delay:var(--d,0ms)}
.mo .mo-rv.mo-in{opacity:1;transform:none}
/* 卡片悬停的位移不要被入场动画的 transform 覆盖 */
.mo .dim.mo-rv.mo-in,.mo .ogrid .o.mo-rv.mo-in,.mo .mth-c.mo-rv.mo-in{transition:opacity .9s var(--ease-out),transform .9s var(--ease-out),background .25s,box-shadow .25s,border-color .25s}

/* 板块眉题的渐变短线：出现时从左画出 */
.mo .sec-head.mo-rv .eyebrow::before{transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease-out) .25s}
.mo .sec-head.mo-rv.mo-in .eyebrow::before{transform:none}
/* 标题右侧的细竖线：从上往下画出 */
@media (min-width:821px){
  .mo .sec-head.mo-rv p{border-left-color:transparent;background:linear-gradient(var(--line-strong),var(--line-strong)) left top/1px 0 no-repeat;transition:background-size 1s var(--ease-out) .35s}
  .mo .sec-head.mo-rv.mo-in p{background-size:1px 100%}
}

/* 三层说明的大号序号：出现时由浅到深 */
.mo .layers.mo-rv > div::after{opacity:0;transform:translateY(10px);transition:opacity 1s ease,transform 1s var(--ease-out)}
.mo .layers.mo-rv.mo-in > div:nth-child(1)::after{opacity:1;transform:none;transition-delay:.2s}
.mo .layers.mo-rv.mo-in > div:nth-child(2)::after{opacity:1;transform:none;transition-delay:.35s}
.mo .layers.mo-rv.mo-in > div:nth-child(3)::after{opacity:1;transform:none;transition-delay:.5s}

/* 检测方法时间轴：横线画出，节点依次亮起 */
.mo .mth.mo-rv{opacity:1;transform:none}
.mo .mth.mo-rv::before{transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--ease-io) .1s}
.mo .mth.mo-rv.mo-in::before{transform:none}
.mo .mth.mo-rv .mth-h span{opacity:0;transform:scale(.4)}
.mo .mth.mo-rv.mo-in .mth-h span{animation:mo-pop .6s var(--ease-out) both, mo-pulse 1.2s ease-out}
.mo .mth.mo-rv.mo-in .mth-c:nth-child(1) .mth-h span{animation-delay:.25s,.8s}
.mo .mth.mo-rv.mo-in .mth-c:nth-child(2) .mth-h span{animation-delay:.55s,1.1s}
.mo .mth.mo-rv.mo-in .mth-c:nth-child(3) .mth-h span{animation-delay:.85s,1.4s}
.mo .mth.mo-rv.mo-in .mth-c:nth-child(4) .mth-h span{animation-delay:1.15s,1.7s}

/* 快检 vs 深度体检：深度体检一栏的对勾依次点亮 */
.mo .cmp2.mo-rv .ck{opacity:0;transform:scale(.4)}
.mo .cmp2.mo-rv.mo-in .ck{animation:mo-pop .5s var(--ease-out) both}
.mo .cmp2.mo-rv.mo-in tr:nth-child(1) .ck{animation-delay:.35s}
.mo .cmp2.mo-rv.mo-in tr:nth-child(2) .ck{animation-delay:.45s}
.mo .cmp2.mo-rv.mo-in tr:nth-child(3) .ck{animation-delay:.55s}
.mo .cmp2.mo-rv.mo-in tr:nth-child(4) .ck{animation-delay:.65s}
.mo .cmp2.mo-rv.mo-in tr:nth-child(5) .ck{animation-delay:.75s}
.mo .cmp2.mo-rv.mo-in tr:nth-child(6) .ck{animation-delay:.85s}
.mo .cmp2.mo-rv.mo-in tr:nth-child(7) .ck{animation-delay:.95s}
.mo .cmp2.mo-rv.mo-in tr:nth-child(8) .ck{animation-delay:1.05s}
.mo .cmp2.mo-rv.mo-in tr:nth-child(9) .ck{animation-delay:1.15s}

/* 快检说明的四个步骤序号依次亮起 */
.mo .qc.mo-rv .qi-steps li::before{opacity:0;transform:scale(.4)}
.mo .qc.mo-rv.mo-in .qi-steps li::before{animation:mo-pop .5s var(--ease-out) both}
.mo .qc.mo-rv.mo-in .qi-steps li:nth-child(1)::before{animation-delay:.35s}
.mo .qc.mo-rv.mo-in .qi-steps li:nth-child(2)::before{animation-delay:.5s}
.mo .qc.mo-rv.mo-in .qi-steps li:nth-child(3)::before{animation-delay:.65s}
.mo .qc.mo-rv.mo-in .qi-steps li:nth-child(4)::before{animation-delay:.8s}

/* 预约流程的竖线从上往下画出 */
.mo .book-flow.mo-rv li:not(:last-child)::after{transform:scaleY(0);transform-origin:top;transition:transform .7s var(--ease-io)}
.mo .book-flow.mo-rv.mo-in li:not(:last-child)::after{transform:none}
.mo .book-flow.mo-rv.mo-in li:nth-child(1)::after{transition-delay:.3s}
.mo .book-flow.mo-rv.mo-in li:nth-child(2)::after{transition-delay:.7s}
.mo .book-flow.mo-rv.mo-in li:nth-child(3)::after{transition-delay:1.1s}

/* ---------- 3. 氛围与细节 ---------- */
/* 预约板块：深蓝底上的光晕缓慢漂移 */
#book::after{content:"";position:absolute;inset:-10%;pointer-events:none;
  background:radial-gradient(520px 320px at 80% 20%,rgba(79,198,218,.16),transparent 70%),radial-gradient(600px 380px at 15% 85%,rgba(54,117,255,.22),transparent 70%);
  animation:mo-drift 14s ease-in-out infinite alternate}
#book{overflow:hidden}
#book::after{z-index:0}
#book .wrap{z-index:1}

/* 主按钮：悬停时一道光扫过 */
.btn-primary{position:relative;overflow:hidden;isolation:isolate}
.btn-primary::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);transition:left .7s var(--ease-out)}
.btn-primary:hover::after{left:120%}

/* 导航：页面滚动后加深阴影 */
.nav{transition:box-shadow .3s,background .3s}
.nav.scrolled{background:color-mix(in srgb,var(--surface) 92%,transparent);box-shadow:0 10px 30px -18px rgba(15,81,170,.45)}

/* 十二项优化：点选某个度时，命中的卡片轻轻浮起 */
.lanes.filtering .o{transition:opacity .35s ease,box-shadow .35s ease,background .25s}

/* 减少动态效果：全部关闭，内容直接显示 */
@media (prefers-reduced-motion:reduce){
  .hero-scan,#book::after{display:none}
  .mo .mo-rv{opacity:1!important;transform:none!important}
}